Firefox on Android (native) - UI Polish

The mobile UX team's recently gone through a big top-to-bottom review of the in-progress native UI for Firefox on Android, sanding down rough edges and making sure that things all fit together. Here are some slides from a walkthrough I'm about to give of the current state of the designs. The nightly builds are getting closer to these every day!

Credit to Patryk Adamcyk and Ian Barlow for these mockups

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:

• an all in-content add-ons manager — Mockup
• Sync — Setup and prefs flow
• Start Page — on its way!

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]

If you can't say something nice

The internet has increased our ability to express ourselves. In no place is this more obvious, unfortunately, than in the leaps and bounds we've made in our ability to be unkind to each other in blog comments. This increased capacity puts Moore's Law to shame, and then anonymously calls it an a*#$@*e, LOL. Inasmuch as we recognize this as an issue, we mostly seem to accept it as inevitable. We resort to the "grow a thicker skin" or "can't stand the heat..." bromides, shake our heads at our cruel and ungrammatical world, and strive to become less sensitive, as if this were a good thing.

Accepting this situation ignores that, by and large, we are thousands of times (I've measured) more civil to each other in the physical world. If putting up with our online behavior were a requirement for interacting with strangers offline, none of us would ever leave the house. Why call out the difference? It suggests that our current online situation doesn't have to be the way it is, which is tantalizing: incivility worsens the quality of our online lives, and, from a more immediately practical perspective, I think it lessens online participation.

An example: After years of free-for-all commenting on my blog, I started pre-moderating comments to keep the rage out; it wasn't really a solution, though, in that it didn't do anything for my quality of life. When my blog (on blog software so out-of-date that Gutenburg would have thought to himself "what an a*#$@*e, LOL") broke such that comments stopped working, I just never fixed it. And... I liked it. After a while, my pro-participation conscience kicked in, so I started, in each post, directing people to a discussion group to give me feedback. The tone of conversation improved, but only in the "silence is golden" sense -- people just didn't bother. The baby, unfortunately, was gone along with the acrid, stinging bathwater (note: do not bathe a baby this way). Clearly, there is value in the immediacy of on-blog commenting. But how much does this ease of action contribute to unkindness? To what degree is anonymity the problem? If it's a major part of it, how much of it would we trade off for a more civil internet?

So, internet -- what can we do about this? I'm interested in short term blog-specific solutions, but the problem is an even more interesting one in general. If caring for the health of a participatory internet is our mission, and incivility harms participation, perhaps we should be thinking about this.

I'm really interested in what you think. Email me - the address is my first name at mozilla dot com.

Welcome, Ian Barlow!

The Mozilla mobile user-experience team has grown by an astonishing 50%!

A few weeks ago, Ian Barlow joined the mobile UX team, focusing on the visual design end of the UX spectrum. In his first few weeks, he's already been digging deep into our design work for Firefox Home, tablet versions of the Fennec Awesomescreen, and theming for Gingerbread and Honeycomb. Ian's based in the Toronto office.

Before coming to Mozilla, Ian was responsible for much of the UI design for the Kobo eReader, as well as Kobo's apps for the iPhone, iPad, and Android.

You can find Ian as "ianbarlow" in #mobile, #UX, and many other fine IRC channels. He's also blogging a blog about his Mozilla activities.

Welcome, Ian!

Firefox 4 for mobile - Release Candidate

The Release Candidate for Firefox 4 for mobile (Maemo and Android) is out, and, if I may be so bold, this is a pretty darned good one.

I last wrote an update about what was new, user-experience-wise, 3 pre-releases ago for beta 3. As you would expect, the focus has been decreasingly on new features since that time, concentrating more and more attention on speed, size, responsiveness, and stability. These latter areas have benefited enormously; Firefox starts faster, pages render faster, you can pan more smoothly, and there's far less "checkerboarding." You can move the app, including your browsing profile, to your phone's SD card, meaning that the browser, already much trimmed down, is nice and svelte on your phone's internal memory.

On top of all of this, though, there are a view visual and behavioral changes in the RC worth pointing out. Here they are!

Text reflow on zoom
A fundamental problem with shrinking big-screen-designed webpages down for viewing on small screens is that their text is often just too small to read. Zooming in helps, but, often, by the time the text is big enough to read, the block you're interested in has expanded past the screen-edges. There are a couple of approaches that browsers can take to remedy this; the one commonly used on Android is reformatting the text, on double-tap zoom, to be of a more readable size and layout. We've included a version of the zoom technique in the RC:

You can turn on the Reformat Text on Zoom behavior in Firefox's preferences, here:

Slimmed down Form Helper and Find In Page
A touchscreen phone's on-screen keyboard and its accompanying suggestion/auto-correction bar(s) take up a lot of the available screen-space. To help users retain more of what remains for web-content, we pared back the on-screen presence of Firefox's form helper and find-in-page bar.

The form helper went from a full-screen-width bar housing previous/next buttons and occasionally-present Firefox form history entries to just the two buttons floating in the bottom right-hand corner; form history, when available, floats above or below the form field in use.

Similarly, find-in-page has gone from a full-screen-width bar to a floating widget in the bottom right-hand corner.

Form helper with form history

Find-in-page

Copy and Paste in form fields
We've had copy, paste, and select all in mobile Firefox's URL field for a while, but now you can use them in HTML form fields as well. Just tap-and-hold to bring up the menu:

Character Encoding
For speakers of a couple of the world's languages, it's extremely useful to be override the character encoding that a page claims to use, usually because the page is mistaken, rendering the page unreadable. Now, if you need to, you can specify the character encoding you'd like to use to display a given page:

This is a great example of a a split in Firefox's worldwide userbase: it's a feature that is never used by a large percentage of Firefox's users, but is absolutely essential to another large percentage. To keep the Site Menu down to minimal set of options, Character Encoding isn't displayed by default. You can turn it on in Preferences, here:

So, those are the big ones. Somewhere along the way from Beta 3, the team has also added

• support for restartless add-ons
  
• more sensible UI scaling for MDPI screens
  
• some UI layout adjustments for small tablets like the Galaxy Tab
  
• scroll indicators
  
• iframe scrolling
  
• a more informative design for the "New Tab Opened" pop-up
  
• Android-style toaster alerts
  
• a revised style for the Sync setup dialog

Get the Release Candidate (Android | N900 and try it out if you'd like to help test!