November 23, 2011

Firefox on Android - Native UI in Nightlies

If you're watching the nightly builds of Firefox on Android, you'll have noticed that a lot just changed. What you're seeing is the first wave of basic function and interface revisions as we rebuild Firefox as a native Android application. This is very much a work in progress — a lot is there already, but there's even more still to come. Oh, you can get it here.

What have you done to my browser?
Firefox, overall, is being rebuilt to be faster and more responsive. We wanted to match this with a rework of the UI that will make us feel quicker, more natural, and a better fit on Android. Our goals have been, primarily, the following:

  • a simpler Android-based UI model
  • being more recognizably Firefox
  • incorporating things we've learned from our tablet UI, due out in Firefox 9
  • easier one-handed use
  • continuing to provide fast access to tabs and minimizing the need for typing
  • working with froyo/gingerbread, but also ICS

We're still revising, tweaking, and, well, wholesale throwing things out and redoing them, so please pipe up with your suggestions, but here's what you should be seeing right now.

A simpler, Firefoxier, thumbier UI
What you'll notice right away, I think, is that the browser controls have been pruned back and, overall, they're laid out more simply. The browser is continuing on its path of doing things the Android way, whether that's through use of the system back button or standardizing on the Android menu system. Things should be where an Android user would expect to find them.

This consolidation has also let us put everything you frequently need under the arc of your thumb when you're using your phone in one hand; hopefully you'll seldom find yourself reaching and stretching, even as Ice Cream Sandwich phones get bigger and bigger.

Tabs are kind of a big deal
We've kept our Firefoxy focus on quick access to tabs, where you don't have to leave your current context to see and choose from what else you currently have open. We're also trying to leave you with better ambient sense of when tabs are getting created or closed, in the background or foreground, through the use of some subtle animations and transitions.

Pulling in visual cues from Firefox on tablets and desktops
The team has spent a lot of time looking at how we can have consistency across our many platforms. Firefox should feel familiar no matter where you're using it, even if the constraints of the particular device mean some structural changes.

We've had a lot of great feedback about the upcoming release of Firefox for tablets, and you can see that this new Firefox on phones is its close sibling.

There are also a lot of places where the phone UI references that of the desktop, like in the position of the new tab button (though it serves more purposes here), our icons and glyphs, and in certain UI elements like our notification "door hangers":


Optimized for Froyo / Gingerbread, and Ice Cream Sandwich
Of course, people out there are on a lot of different versions of Android, and we want to look right for all of them:

Coming Soon
All of that is what you can have in your Firefox-nightly-clutching hands today. But there's more! Here's what's in the UI-design pipeline, coming to the nightly build soon:

I need more stability in my life
If you like to wait for the new native Firefox to stabilize a bit more before you start using it, you can switch from Nightly builds to the Aurora release channel. You may particularly want to do this if you're using a Honeycomb tablet — the new Firefox tablet UI that everybody's talking about is stabilizing there, getting ready for final release later this year.

[with many thanks to Mozilla mobile UX designers Ian Barlow and Patryk Adamczyk]

Posted by madhava at 01:23 PM