Some ideas for the mobile Firefox UI

This post is also available in Belarusian thanks to Marcis G. Thanks for the translation!

Following up on my post yesterday about my impressions with web browsing on the N900, I wanted to elaborate on one of the points I was making: Firefox’s UI model of showing controls (a.k.a. chrome) on two sides of the web page.

I see a few problems with it:

  • You need to swipe your finger in a specific direction in order to reveal specific chrome (e.g. swipe to the right to show tabs, and swipe to the left to show Back/Forward buttons and some other controls).
  • The split between the chrome on both sides isn’t natural. For example, both Back/Forward and tabs are types of navigation, but they’re on separate sides. This means you simply have to learn on which side specific UI is located. Not a huge problem, of course.
  • If you’re zoomed in on a page, you may have to swipe several times to reach the side of the web page and reveal the chrome (or double tap and then swipe).
  • Having controls at the bottom of the screen feels more intuitive to me. More objectively, though, it also works better in portrait layout when you’d rather not waste width on chrome.
  • The required panning of the web page itself when reaching for chrome feels rather clunky. I’m swiping to reveal toolbar buttons, not to pan around on the page, but I have to do both at the same time in Firefox.
  • The tab thumbnails are always of the same (small) size, since the chosen tab model doesn’t allow for flexibility.

My simple ideas:

Allow me to present a few ideas on how the UI could be simplified. Please excuse this poor GIMP mockup:

The mockup above shows a redesigned navigation toolbar and a different way of switching tabs. Let me explain each feature in more detail:

  • The new toolbar is overlaid on top of the web page and fades (or slides) into view when interacting on the page (e.g. when scrolling or tapping).
  • All buttons are on the same toolbar. This means that you don’t have to remember which direction to swipe to reveal the controls, because any direction works.
  • The web page itself doesn’t pan when the toolbar appears.
  • After a short while of no interaction, the toolbar fades/slides away again.
  • The left side of the toolbar shows the Back/Forward buttons, the center shows the Tab (or Web Page) Switcher button, and the right side shows a Bookmark and a Tools button.
  • This toolbar can easily fit in a portrait layout.
  • Clicking the Tab Switcher button shows the currently open tabs. The size of the thumbnails change dynamically depending on the number of open tabs. Clicking on the Tab Switcher button again or outside the tab switching “pop-up” takes you back to the current web page again.
  • Clicking the Tools button reveals a “pop-up” similar to the Tab Switcher chrome, but this one of course shows the Firefox options window. Rather than clicking a back button to come back to the web page, you click outside of the “pop-up”.

In addition to the ideas above, I would also suggest that the toolbar is made customizable. Personally, I would like a zoom button (maybe even a +/- type of button) instead of a bookmarks button, but there’s obviously a limit on how many buttons you can show at the same time. This mockup assumes approximately the same button size as in the MicroB browser, so there would be plenty of space for buttons, at least in horizontal layout.

Thoughts? Piece of crap? Just shoot me.

5 thoughts on “Some ideas for the mobile Firefox UI

  1. Asa Dotzler

    You can drag down (to get the addressbar) then left or right to get at those sidetoolbars and this helps avoid the right or left panning problem.

    Reply
  2. iacchi

    Well, I like this mockup very much. Unfortunately I don’t still have a N900 so I’ve tried fennec only 10 minutes, but your idea seems to work smoother that the implementation we have today and it more or less follows a real browser chrome, so you don’t have to learn everything again.

    Reply
  3. Gerv

    Google Maps on Android has a UI where widgets appear when you interact with the page (e.g. zoom UI). I find it appears over things I’m looking at :-(

    I think how well the Fennec UI works depends on how responsive your touchscreen and OS are to scrolling. If you had beautiful iPhone-style scrolling, it would be a pleasure to flick the page over to one side, then pull again to get some nav UI. Android’s current model would make it seem much more of an effort.

    Gerv

    Reply
  4. David Tenser

    Asa, thanks for the tip. I still have to remember on what side the various toolbar buttons are located, though, and I still have to actually move the website itself in order to reveal the UI.

    Grev, I’m not sure how much of a difference the responsiveness would do here. Of course, a more responsive browser is better, but it doesn’t change any of the points I listed above.

    Reply
  5. Matt Brubeck

    I really like the full-screen tab switcher.

    Where does the address bar go in your new design, and how/when does it become visible?

    I think by “responsiveness” Gerv specifically meant sensitivity to flick/momentum scrolling. On some platforms it takes just a tiny movement to scroll a page a long distance; on others it can take one or more long drags. (Though in my experience the Android browser scrolls pages with very little friction, while the iPhone browser takes repeated motions to scroll long distances.)

    Not sure about a bottom toolbar that fades in and out. It seems like it will be tricky not to let it interfere with reading and scrolling. On my Android phone, where the browser has no bottom toolbar, I can scroll by swiping from at or below the bottom of the screen – except when the zoom buttons suddenly fade into place right in my way.

    For platforms like Android with a hardware “menu” button, that might be a good way to hide/show the toolbar.

    Reply

Comment on this post:

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s