Polish All The Things!!!

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 just 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’ 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!