November 2008

Halloween weekend, I was at my family’s home in Illinois, playing with my sister Aleksa. She’s eight years old and crazy about video games. I’ve been teaching her to play the old classics from when I was her age.

Some of the most innovative user-interfaces are found in video games. Why is that? I have a theory.

Users of business/productivity software complain loudly when an interface differs from what they’re used to. Rightly so — time spent learning an unfamiliar UI is time not getting work done. Business software is rightfully cautious of UI experimentation.

Gamers, in contrast, are willing to invest time and effort in learning a new, unfamiliar game. Novelty is part of the value. Gamers will learn a specialized interface, if it’s efficient and well-suited to the tasks the game requires.

So I like to analyze the UI of games to see what lessons they have to teach. Even a very old game may hide a great idea that has been forgotten — or never learned — by the wider world of software design.

Mozilla Labs is working on porting Weave
(our data-syncing extension) to Fennec (our version of Firefox for cell-phones and other handheld gadgets). Weave is still experimental, Fennec is still experimental, so as you can imagine, Weave-in-Fennec is still in the early planning stages. But here’s why it’s going to be cool:

Imagine you’re looking at a map in Firefox on your computer, finding the directions to your sci-fi convention (or whereever you’re going).

An hour later, you’re standing on the sidewalk in an unfamiliar city, and you need to double-check those directions. Oh no! You forgot to print out a copy! You’re lost! What do you do?

Lucky for you, you have a cell phone with Fennec and Weave on it. You open up Fennec and your map is already there, waiting for you, because Weave automatically synced your open tabs between your desktop Firefox and your Fennec. There’s no need to put your phone in an awkward cradle-thing connected to your computer to sync it up manually, nor do you have to fiddle with BlueTooth settings,
because syncing happens through a server, and it happens automatically whenever you’re online.

Besides tabs, you’ll have access to any other type of browser data that you choose to sync, too — like bookmarks, history, cookies, stored passwords, etc. Syncing goes both ways, so all the names and phone numbers from your cell-phone contact list can be synced back to your desktop computer, too.

I’ve been working on a user-interface design proposal for Weave on Fennec. Weave mostly works invisibly, without user input, but there are a few places where interaction is needed. Since I know that typing in text can be painful on a mobile phone, I’ve tried to keep the amount of text-input required down to the absolute minimum. In the places where I’ve had to introduce new screens and new interactions, I’ve tried to make them a logical extension of Fennec’s existing touch-screen, finger-gesture-based UI.

By the way, if you want to try out Fennec, you can download it here. It’s an alpha version, so no guarantees of anything, OK? But there are versions for Mac/Windows/Linux as well as for mobile devices, so you can run it in a window on your desktop computer and pretend you’re squinting at a tiny cell-phone screen.

The UI Proposal itself is here. It’s a very detailed document aimed mainly at the audience of developers and contributors to Weave and Fennec, so if you have only a casual interest, you might want to just skim it.

The WordPress theme I was previously using on this site (“White as Milk”) puts all the text into an extremely narrow column. Not only is this a poor use of screen space, it throws up an accessibility barrier: if a visually impaired user needs to increase the font size, the narrow-column layout only fits a few words per row. Thanks to reader Nicholas Shanks for bringing this problem to my attention.

WordPress offers a bewildering variety of themes, most of which are too fancy for my taste. The new theme (“Sandbox”) is the most minimal one I could find, and should avoid the problem Nicholas had with the previous theme.

Response to my post about pie menus was overwhelming! There were way too many comments for me to reply to each one individually, so instead I’ll respond to the general ideas in follow-up posts.

I’ve put up a new and improved pie menu demo that solves some of the usability problems with the previous version. Although, given the shape, perhaps “Grid Menu” might be a more descriptive name for this new style.

This version solves the following problems that people pointed out in the previous version:

  1. It’s difficult to lay out text in pie wedges: this version uses squares. It’s still the case that every item is just a short movement in a unique direction from the starting point, so the benefits of the circular menu are still preserved.
  2. The number of items can grow without bound, but usability suffers with more than eight choices: this version can handle hierachical sub-menus (and sub-sub-menus). Try mousing over the item in the bottom-right of the menu to see this in action.
  3. Some items are unreachable if the pie menu is invoked near the edge of the screen: this version pushes the menu grid inward from the edge so that all items stay visible.
  4. Many people aren’t used to holding the mouse button down while navigating the menu: this version respects click-move-click style interaction in addition to click-drag-release style interaction.

I’ve also added the names and icons of some actual Ubiquity commands, just to make the demo look more like what you might see in an upcoming version of Ubiquity — if we decide to include it.

Still a problem: if the original menu is invoked too close to the bottom-right of the area, there is sometimes not room for the sub-menu or sub-sub-menu. I’ll need to come up with a smarter positioning algorithm in order to deal with this problem.

You can try out new demo here.

1. If you tried out the pie menu demo in my previous post, you might (depending on which day you tried it) have run into a bug where you couldn’t select the same item two times in a row. Since the point of the first demo was in selecting the same item multiple times, this bug spoiled it completely. This bug has now been fixed. Here’s the more functional version of the demo.

2. I’m going to be at the Hackers conference in Santa Cruz this weekend (Nov 7-9), talking about Mozilla Labs projects

3. I’m going to be at the Bar Camp in San Diego next weekend (Nov 15-16), also talking about Mozilla Labs projects.