UI Chrome in Mobile Browsers

Over the past few years a lot has changed in the world of desktop browsers. Google Chrome has trail blazed into the future, and others have reacted by following their lead. One of the simpler changes Chrome brought was minimalizing the user interface chrome of the browser. The UI chrome refers to the surrounding graphical elements of the browser that allow the user to interact with it. In the past this UI chrome was gaudy and much larger than it needed to be. I credit Chrome as being the first to cut this UI chrome to a minimum. The Chrome team accomplished this by putting tabs into the browser window's menu bar, and beyond that, only including an address bar with forward, backward, and a settings button. This became a trend that showed up in Firefox 4+, and IE9+ (among others I'm sure).

The underlying philosophy behind this UI approach was to get the browser out of the way, and let the web page get as much screen real estate as possible. I think it's time that someone takes a critical look at the UI chrome we are seeing in mobile browsers today. Screen real estate is an even more precious commodity on smartphones than it is on desktops. Despite this, nearly all mobile browsers are taking up at least 5-10% of the screen with their UI chrome.

I did some research in preperation for this post. On my Android smartphone (a Nexus S running ICS) I downloaded just about every browser I could find in the market. I also took a look at Safari Mobile on an iPod Touch. I looked at 15 mobile browsers in all, here is the list:

  1. Android ICS Browser
  2. Chrome Beta
  3. Firefox Mobile
  4. Opera Mini
  5. Opera Mobile
  6. Dolphin Browser HD
  7. Dolphon Browser Mini
  8. Angel Browser
  9. Maxthon Browser
  10. UC Browser
  11. Boat Browser
  12. Boat Browser Mini
  13. Sleipnir
  14. Skyfire
  15. Safari Mobile

I noticed a lot of trends among these browsers, some that I like and others that I dislike. Ultimately, I was looking for the browser that could cut the chrome to a minimum, without sacrificing utility.

Current Trends

The Fixed Bar

Opera Mini

By far, the most popular UI chrome design I noticed was the fixed (static) navigation bar at the bottom of the screen. This bar would typically include buttons for forward, backward, refresh, tabs, and menu. There is also an address bar at the top of the screen, but this scrolls away with the page. The Opera Mini screens above are an example of this approach.

Of the 15 browsers I looked at, 7 took this approach. Those 7 include both Opera browsers, both Boat browsers, UC browser, Sleipnir, and Safari Mobile. It's such a popular approach because it works well, but it has room for improvement. Including a back button is redundant on Android phones since they already have a back button built into the hardware (iDevices don't have this, so it's more excuseable in Safari). And the other buttons included in this fixed bar don't justify taking up this much screen real estate. Also, in order to get back to the address bar you must either scroll to the top of the page, or press the hardware menu button (on Android). Scrolling to the top is cumbersome, and as you probably already know, the menu button is on it's way out in Android.

4f41e4a45d8f88_fixed-top_medium

The second, and even more offensive, fixed bar approach I saw was taken by Chrome Beta, Maxthon Browser, and Dolphin Browser Mini. These browsers fix a static address bar to the top of the screen that includes the address box and tabs (or a button to view tabs). This is particularly frustating because the Chrome team lead the way in eliminating useless chrome on the desktop. Having this bar occupy as much permanent space as it does, while offering so little utility, is simply unjustifiable.

The very popular approach of fixing bars to the top or bottom of the screen is too bloated. In order to get the masses used to using touchscreen devices it may have been necessary for the first generation of mobile browsers to have this amount of chrome. But at this point, we need to move on. A more intuitive and less intrusive approach has already been taken by some.

Hidden Elements

Some browsers have taken a more daring approach to their UI chrome, cutting it to zero in some cases. They do this by "hiding" elements of the browser off to the sides of the screen, letting the user swipe them out no matter where they are on the web page.

Firefox Mobile and Dolphin Browser HD do this in a similar fashion to one another. They hide vertical menus on each side of the screen. They can be swiped out ("pulled" out) at any point on the page, and when you are done with them, they can be pushed back.

Firefox Mobile

In Firefox the left side hides your tabs, and the right side has the forward, backward, and settings buttons. The address bar appears at the top of the page and scrolls away when you go down, but swiping out either side makes the address bar reappear. This eliminates the UI chrome considerably. Aside from the address bar, which scrolls away, this UI chrome has a zero footprint.

Dolphin Browser HD hides your bookmarks to the left, and also some settings. To the right they have the add-ons (extensions) for the browser. The concept is good, but this approach doesn't offer as much utility as Firefox. And the address bar doesn't reappear when you swipe out a side.

Android ICS Browser

Android's ICS Browser has a beautifully simple and intuitive UI hidden away in the Labs section of it's settings page. They call it Quick Controls (I believe this may have been in Honeycomb as well). It allows you to swipe in from the side to display a small menu of buttons (pictured above). The menu includes buttons to create a new tab, view all tabs, show the address bar, view your bookmarks, and view the settings. You just continue sliding your finger to the button you want to choose and release to select it. It's simple, intuitive, and hides all elements of the chrome. They also have a separate option in the Labs to hide the Android status bar, but despite all my talk of freeing up screen real estate, I can't part with the Android status bar.

Angel Browser has this same functionality built into it, but by default it also has just about every other element I've talked about in this post. It's also extremely ugly next to the Android ICS browser. Still, I give them credit for including this in their browser.

Wrap Up

Of all the browsers I've explored, Android's ICS Browser and Firefox Mobile were easily 1 and 2 for UI chrome. I truly feel that, due to the small size of the screens on our smartphones, not a single pixel should be dedicated permanently to the chrome UI of our mobile browsers. Firefox Mobile accomplished this by hiding elements of their chrome to the sides of the screen and letting the address bar scroll away when going down a page. But in the end I prefer the Android ICS Browser and it's Quick Controls, which are hidden under Settings > Labs > Quick Controls. This simple and intuitive UI concept should become the standard among all mobile browsers in my opinion. At the very least I hope that Chrome Beta adopts this functionality.

Please let me know your thoughts on this in the comments. Thanks.