Firefox for Android UI Hackathon, Spring 2013

Hackathons are a great way to get a bunch of people sprinting through a very focused body of work, and they’re also great fun to do.

And much to the UX team’s delight, our engineering team recently organized one that was focused solely on UI polish bugs! We almost always have a backlog of subtle but important refinements we’d like to add to Firefox, and while we are incredibly lucky to work with an engineering team that values good design, there are still only so many hours in the day and only so much of peoples’ time available to make fixes. This was a great opportunity to sand down some of the rough edges we had been thinking about for a while.

The hackathon bugs had to be simple enough fixes that could be made in the short time frame of the hackathon, so brand new features were off the table. This was all about polish. And in order for the sprint to be successful, there couldn’t be any road blocks or missing details, so I made sure that whichever ones people wanted to work on had the most up to date instructions and designs ready to go.

—

This was our short list when we kicked off the hackathon. https://bugzilla.mozilla.org/buglist.cgi?quicksearch=sw%3Aui-hackathon

Over the course of a few days, the team knocked off *19* of these bugs. Some of the most visible improvements included:

New tab counter icon

We recently simplified the title bar area to use a single ‘background layer’ colour. For the hackathon we also revisited the icon design to more clearly communicate what would happen when you tapped it, using a visual metaphor that has become more or less the standard for tabs on mobile web browsers. Some earlier design explorations are shown below.  / http://bugzil.la/863379

New tab increment animation

We also wanted to add a little dimension to the new tab counter icon, so we added a fun transition that appears when you create a new a tab.  / http://bugzil.la/863828

Refined tab tray transition

We have been exploring ways of making the tab tray opening feel more fluid and interesting. Below is an example of a parallax-like transition we experimented with for opening the tab tray. A slightly simplified adaptation of the animation below is in our Nightly build. / http://bugzil.la/864960

Text labels in the tab tray

The tab section icons that existed in the previous design didn’t communicate the section contents as clearly as we would have liked, so we replaced them with text labels. / http://bugzil.la/862996

Increased Reader Mode touch target size

Kind of a no brainer, but for some reason the touch area was tiny here for a long time. / http://bugzil.la/862755

Reader Mode refinements

We recently added an option to use Charis — a serif typeface — in our Reader Mode, and it makes for a very pleasant read. / http://bugzil.la/862445

Dominant colour sampling for favicon backgrounds

We display large favicons whenever we can, but many websites still only provide 16px favicons. This often makes for rather dissonant looking lists in our UI. Adding a tint of the favicon’s dominant colour to the background makes individual list items more quickly recognizable, and makes the lists look a little more designed overall. We’ll also use this approach for thumbnail boxes in cases where a screenshot of the website is unavailable. / http://bugzil.la/837392

Optional title bar URLs

We added a setting to let users display URLs in the title bar, instead of page titles. / http://bugzil.la/778216

—

Not bad for a couple of days of work, right? A huge thanks to Lucas Rocha for organizing the event, and to the Firefox for Android front-end team and all the contributors who participated in our hackathon. Each one of these tweaks are wonderful refinements on their own, and having watched all of them land in the course of a few days was truly delightful. The next few releases are shaping up to be pretty special on Firefox for Android.

Of course, as always if you don’t want to wait for the update on Google Play, you can try out all of these enhancements _right now_ by downloading one of our Firefox Nightly builds. Enjoy!

You broke my workflow!

If you used Quit and were unhappy to see it go, well, we’re really sorry about that. The good news is that it’s easy to get back. Just install the QuitNow add-on, which will put Quit right back in the menu where it was.

Easy, right? Now go forth and quit like the wind!

A bit of history

We introduced Quit about 2 years ago, in a time where Android phones were lower in performance, and had poorer memory management built in than they do today. Our users were having memory issues on lower end phones, where Android wasn’t killing background tasks as well as it should have been.

Now, adding a Quit button was kind of a hack that apps aren’t supposed to do. Quitting an app isn’t really a core UI concept on Android, since it handles this kind of memory management at the OS level, and isn’t user controlled per app like on desktop. But we added it in, and our users were happy.

As time went by, phones continued to get faster, and Android improved by leaps and bounds. Android 4.0 brought with it better memory management than before, and also provided users with a multi-tasking interface that also allowed apps to be manually closed, satisfying those who preferred managing apps on their own over simply allowing the OS to make choices for them.

Growing with Android

As these improvements have developed on Android, Firefox has been improving release by release as well. Firefox 20 shipped with Private Browsing, for example. We have lots of other great stuff in the pipeline over the next several releases. A better homepage. A more beautiful Reader experience. Enhancements to Search. And much more.

The thing is, controls to operate these features need somewhere to live in our UI, and Firefox is designed to be as minimal and out of the way as we can make it. We aim to avoid overwhelming people with UI since web content always comes first. So we tuck things into the title bar, into the tab menu, and remaining items go into the Android menu.

This means that from time to time, we need to do a bit of spring cleaning on our UI to make sure we have the most useful, and most commonly used controls at your fingertips.

Given the advances in the Android memory management I mentioned above, it seemed reasonable to remove the Quit button to free up menu UI, and that it wouldn’t adversely affect device performance. The fact is, users simply aren’t faced with the same issues on newer phones that existed 2 years ago. (I should note that we only removed the quit button on phones running Android 4.0+ because of its aforementioned improvements. This means if you are on Android 2.3 Gingerbread or older, nothing will have changed. The quit button will still be there.)

It’s also worth repeating that Quit simply isn’t a core UI concept in Android apps anyway — notice that none of Google’s apps (GMail, Maps, even Chrome, to name a few) include a quit function, nor do must other independently produced apps.

Make it yours

Of course, none of that is meant to convince you that you shouldn’t have a quit button if you truly have a need for one. And that’s what makes Firefox so great: even if a feature doesn’t exist as core functionality in the browser, chances are that an add-on either exists or can be built to satisfy that need. We recognize that everyone uses the internet differently, and we encourage everyone to customize, hack and tweak your way to a better Firefox that works for you. It’s a lot easier than you think, and can make a world of difference to your experience!

The Firefox UX team has been thinking a lot about type and readability lately, as part of our ongoing goal to make the web more beautiful and more readable on Firefox for Android than on any other mobile web browser.

Since the web is made almost entirely of text, we do a lot of little things to improve the readability of the web, especially on devices with smaller screens. We subtly increase the text size of content to make reading more comfortable (the algorithm we developed for this has actually been adopted by the folks working on Chromium). We built a beautiful Reader Mode that converts articles into a simpler and more readable format. In fact, more and more, we find that we are comfortable with the baseline legibility of text in Firefox, letting us explore the broader definition of readabilty.

The web deserves great type

Historically, web browsers have relied on operating systems to provide fonts for displaying content. This has evolved with the rise in popularity of web fonts, but many websites still look to the OS for a generic Sans or Sans Serif typeface to use. This is more or less acceptable on desktop computers that ship with tons of fonts, but mobile operating systems don’t tend to provide much in the way of variety (iOS being the exception here, with quite an impressive collection of typefaces from which to draw). Android ships with Roboto, Droid, Droid Serif. All of these are strong for use in UI design, but they aren’t as well suited for the kind of long form content we see on the web.

So we thought, what if Firefox could make the web look better than Android’s default font allow? What if we shipped our own fonts inside the app? It seemed like an interesting opportunity that no one else was doing on Android browsers, so the search for fonts began.

Defining the right typeface

What makes a great typeface? It all depends on the job it needs to accomplish, so we started out by defining a set of criteria for finding the right pairing of serif and sans serif typefaces.

1. Must be beautifully designed and very comfortably readable
2. Design must be subtle – this is an all-purpose font. Like Helvetica, it should adapt to content but not make any strong statements about itself through its appearance.
3. Must have broad character support for multiple languages (good coverage across Latin/Cyrillic/Greek character sets)

Open vs. Licensed

Given that Firefox is an open source product, the natural place to start was to explore options for open typefaces. Sadly, we often found that either a typeface was beautiful but lacking in character support, or it had great coverage but was either unattractive or simply not appropriate or refined enough for general purpose use. So we moved on and started reaching out to font foundries about licensing fonts to use, and they delivered some of the best fonts available today.

Initially, paying to license fonts seemed like a reasonable alternate solution. It is quite common to pay money to get good design, whether it’s an illustration, a photograph, an icon, a piece of graphic design or a typeface. As discussions evolved with our teams, however, placing a paid font into our app opened up deeper and more philosophical discussions about how to deal with licensed objects inside of open source products. There is a real tension that exists between maintaining our free and open ideals and licensing things that will greatly improve the quality of our products — and that even now it is up for debate as to what the Right Thing to do is.

We felt it would be best to take it to the newsgroups and talk through our options. Paid or Free, Licensed or Open.

Samples

So to gather more research in preparation for a newsgroup discussion, we went back and did a much deeper dive into open source typeface design. And in our research, we discovered some open fonts we had missed the first time around.

We also learned that some of the fonts we dismissed early on for lack of character support actually stacked up much better than we thought!

Unsurprisingly, paid fonts performed exceptionally across the board. However, the open fonts were more competitive this time around. Charis (serif) was a new find, and performed surprisingly well. Open Sans (sans serif) is strong across the board, and has considerably better character support than we initially thought. Gentium and Source Pro were also nice, but were either too distinctive in their design (Gentium), or lacked the character support we require (Source Pro). Even though the quality of design of the paid fonts remained superior to their open alternatives, it became a difference of A+s vs. As, whereas before it was A+s vs. Cs.

Given the closeness in quality between the open and paid fonts we were comparing, we decided to put our top picks for open fonts — Open Sans and Charis SIL — into our Nightly test builds and live with them for a while to see how they performed, and to get some more testing and feedback.

And it turns out, they are awesome, we’ve been very happy with them so far. The difference is subtle, but hugely enjoyable. The fonts are set to launch with Firefox 21 in mid May (goes to Beta in early April). But who wants to wait that long when you can try these fonts in our pre-release Firefox Aurora right now? Go get it!

We’re rapidly approaching the end of our blocker list on the all-new Firefox on Android Phones. Up next is a slew of enhancements to Firefox on Android Tablets, including:

• Improved performance with a full rewrite of the browser, moving from the current XUL-based UI to the same Java-based UI that our upcoming phone browser uses.
• An all-new theme that matches that of the new Firefox on phones, and builds on our goal of unifying the look and feel of Firefox across all our supported platforms. You can read more about this in Madhava’s recent blog post on the state of Firefox UX, and Patryk’s post on Firefox Visual Design.
• A number of new features, including Search Suggest in the Awesomebar, a Reader Mode, and an improved Start Page.

Related Flickr Sets: http://bit.ly/IJg6Cs and http://bit.ly/IyogBc

Below is a list of features in progress, and their associated bugs. Many of these are based on designs for 10” tablets, but parallel work will be happening to update the UI on phones and 7” tablets, where appropriate.

Title Bar [Bug 739355]

• URL Bar with Title
• Back button
• Progress indicator (spinner + bar)
• Conditional forward button
• SSL / EV indicators
• Addons indicators
• Bookmark
• Refresh
• Stop
• Overflow Menu

Awesomebar

• Top Sites tab [Bug 739364]
• History tab [Bug 739365]
• Bookmarks tab [Bug 739364]
• Search suggest [Bug 739369]

Tabs Menu [Bug 739407]

Remote Tabs [Bug 739411]

Overflow menu [Bug 739412]

Site ID Menu  [Bug 739356]

Bookmark management  [Bug 739359]

Doorhanger Notifications

In-content UI

Reader Mode [Bug 696921]

Reading List

Share

Site Settings

Settings (Native Settings UI)

Error Pages

Addons Manager

Access to Add-ons in browser UI

• Menu
• Widgets in menu or header on large tablets
• Full page in-content UI

Gesture Support

• one-fingered dragging to scroll pages
• double tap to zoom / unzoom
• pinch to zoom
• long press links for context menu (open in new tab, etc)
• long press text to activate text selection mode
• swipe from left edge of screen to open tabs menu
• two-fingered side to side dragging for back / forward controls
• Explore pulling down on header to reveal tabs tray (on phones)
• Explore pulling down on content to reveal home screen / awesomebar

One of the key findings from the study was that while generally, single purpose apps are more widely used than web browsers on mobile devices, they do not entirely replace them either. Browsers really shine when people are trying to  find answers to things (searching).

So where apps answer the problem of  “I need to do ____”, browsers are still the go to solution to answer “I need to know ____”.  With this in mind, we’ve been working on how to improve search in mobile Firefox, by making it quicker and more useful.

Building on our Awesomebar experience (showing lists of bookmarks and history, ranked by frecency), we have added search suggestions that display simultaneously with your Awesomebar results. Once no Awesomebar results remain, users still have a multitude of searches they can jump to, and across multiple providers.

This is a work in progress, and feedback is welcome.

I am pleased to announce that Firefox for tablets has merged into our Aurora channel! This puts us one step closer to a general release, and we’re looking for more people to test it out. So if you have an Android 3.0 tablet you can download the latest Aurora build right now.

In addition to the features I wrote about last month, we’ve been busy polishing the UI and making more improvements to the user experience, including:

New tab bar behaviour

Placing tabs down the left column and web content on the right allows users the ability to browse with both hands: one hand can be used for switching tabs, while the other controls web content. In some cases though, using the full width of the screen can be preferable, so we added the ability to hide and show the tab bar. By default, your tabs appear on the left, and you can swipe them off the page when desired.

A more comfortable action bar

We’ve tweaked the style of the back button, and attached it to the URL bar, in an effort to streamline the design and make it feel even more like Firefox. We also stretched the URL bar across the screen to make longer page titles legible. This also pushes the  refresh and bookmark buttons closer to the right edge of the tablet, making them much easier to reach. The change to the URL bar is also reflected in the awesomebar. Now, you can scroll through your history without having to move your hand nearly as far. A small but noticably more comfortable detail.

You can use this QR code to download the build, or follow this link. Enjoy!

“I want to be able to hide tabs in landscape mode.”

Rest assured, this has been a topic of hot debate since the beginning of the project, with many people on both sides of the fence. And given how much feedback we’ve had about it so far, we will probably end up making the tab bar dismissable after all. Below is a design we are trying out in the near future.

Theming

Firefox looks right at home on Android 3.0, drawing its overall theme from Honeycomb’s minimalist design language. Of course, this is still Firefox, so we’ve made sure to keep familiar visual elements in place, like our signature big back button and a distinctive tab shape.

Awesomebar

Our Awesomebar uses the same tabbed menu to allow quick access to bookmarks, history, and your synced desktop activity. Users of the current phone version of Firefox will notice that the tabs have been moved off to the left, which makes them easier to reach and increases the number of results that can be displayed above the keyboard.

Tabs

On Firefox for phones, we meticulously tucked away all of our UI elements to free up the screen for unrestricted browsing. On a tablet, the bigger screen let us to bring some of those helpful elements back onto the screen, like tabs, for example. In landscape mode, tabs exist in a persistent left bar, allowing for quicker browsing. You can switch through tabs with your left thumb, and scroll through web content with your right. In portrait mode, this tab bar gets rolled up into a menu item at the top of the screen, to free up browsing space below. So whether you like keeping lots of tabs open and quickly switching back and forth between them, or if you prefer to just open a page and see nothing else on the screen, Firefox has you covered.

—

If you’d like to see more about our design process, check out these links:

• my ongoing Flickr set of tablet mocks
• Brian’s blog post on tab design
• Brian’s tablet wireframes 
• Brian’s first sketch of Firefox for tablets
• Madhava’s presentation on tablet design from April 2011

Some of you may know Firefox Home as the iPhone app that lets you bring your desktop Firefox’s open tabs, bookmarks and awesomebar content with you on your iPhone:

We wanted to take this idea and build on it. Our goal was to create a web app that still makes finding your content quick and easy on mobile devices, but also lends itself to sitting back in a chair and letting your web entertain you with very little typing and searching on your end. A visualization of your corner of the web.

Revisiting the UI

Touchability and visual interest were big driving influences of this design, a tile-based UI that pulls in data from your browsing behaviour, and displays it back to you using website thumbnails, icons, headlines, pictures, and content from other apps. The order in which content gets displayed is a combination of how recently and how frequently a site is visited.

Currently, our team is building a prototype that displays website thumbnails and icons. I’ve been playing with it, and I must say that browsing your web like this is quite enjoyable. Search results also use this view, and manages to find cool sites I forgot I ever visited. I for one spend so much time on the internet that I forget 99% of what I see, and Firefox Home seems to have a magical ability to remind me about all those great things.

Adding Features

Soon we’ll start adding more interesting content, like headlines  and pictures from sites you visit regularly, content from apps like Gmail and Flickr and Rdio and whatever else you’re using.

Down the road we hope to add pinning, and we’re exploring ways of displaying your apps and open tabs as a separate list.

If you’re interested in seeing some of the design explorations that led up to this UI, check out this Flickr set.