Mozilla Labs’ head of user experience, Aza Raskin (son of Mac pioneer Jef Raskin) has published a short video demonstrating a user interface concept for the upcoming mobile version of web browser Firefox. The version on show is designed for touch screen devices, though not multi-touch like the iPhone — a decision Mozilla took because “Firefox should be able to run on the least common denominator of touch devices”, explains Raskin.

Although, like the iPhone, “the interface should be operable with a finger. Switching between input methods is time-consuming and annoying, so the user shouldn’t have to switch to a stylus or other secondary form of input.”

The most innovative part of the UI is the location of the browser’s main controls – back, forward etc. — which are invoked by dragging the page to the right (the controls are initially located to the left, just off screen).

Raskin explains:

You get there by gently dragging the page in the appropriate direction. When the controls are visible, the URL bar fades in as well. This makes for a discoverable way to access the chrome, with a huge Fitts’s-law-abiding target. To get rid of the chrome, you just drag the page back to the center, and the controls slide away.

Because the controls are accessed by panning, for the most part every single pixel of the screen is filled with what you care about most: the content.

While this seems at first to be a little unintuitive, in Mozilla’s testing that proved not to be the case (which isn’t all that surprising considering Raskin’s expertise in usability). “It’s also discoverable: in the panning process you discover the visual clues that there is more past the edge of the page”, writes Raskin. The new UI also addresses one of the iPhone’s UI drawbacks when browsing the Web:

By using horizontal panning to access the controls, we avoid the iPhone’s problem of needing to go to the very top of the page to enter URLs. (Yes, I know about tapping on the top of the screen to auto-scroll, but few iPhone users even here at Mozilla knew the trick). Horizontal panning does introduce the problem of accessing the controls when the page requires a lot of horizontal scrolling, but this is a rare case, and with kinetic scrolling moving a long distance is fast. Even long left-right pages will require only one flick to get to the edge, and then one push to open the controls.

Full video after the jump…

Firefox Mobile Concept Video from Aza Raskin on Vimeo.

Firefox, Mozilla