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

icon tests

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

tab-increment

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

tab-tray-opening

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

Screen Shot 2013-05-03 at 3.02.24 PM

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

Screen Shot 2013-05-03 at 3.05.29 PM

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

reader

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

Screen Shot 2013-04-19 at 3.46.44 PM

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

Screen Shot 2013-05-03 at 3.23.15 PM

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!

3 comments on “Polish All The Things!!!”

  1. bozhaquosk wrote on

    Firefox speaks your language like no other browser on earth. Because the Web is a public resource shared by everyone, we’ve made our browser available in as many languages as possible. We have over 85 different translations, from French and Chinese to Finnish and Czech. Find your language

  2. Jaizu wrote on

    Thanks for this new things, this makes Firefox better, thanks a lot (:
    PS: Sorry for the basic english~

  3. AJilderda wrote on

    I’ve noticed Firefox for Android has become smoother with every release. Great to see detailed design like this gets priority also. Really improves UX in a subtle way. FF beta is now my default browser.