Russell Beattie

So since I wrote my monstrous post about Mozilla Fennec on Saturday, I've been mulling over in my head what a good interface for a mobile browser would look like. Since I wasn't working today, I decided to take a bit and see if I could throw together some mockups of how I'd like to see Fennec redesigned. It came out pretty well I think!

I tried to stick with my observations I made in my other post: No functionality is hidden, everything is accessible via touch, the toolbar relatively compact and always on the screen, don't move the page around to show the interface, similar enough to a desktop browser so that newbies won't be bewildered, and Zoom is easily accessible. I also tried to think of the browser in portrait mode and also to not go completely away from what the Fennec guys have already done. Finally, I tried to think cross-platform and imagine this being run on various devices.

So here's what I came up with:

The core toolbar is pretty similar to what most people would expect if they've used a desktop browser. Menu, back, forward, refresh (which would swap with 'stop' while loading), home, web, search, tabs and then zoom on the right. I envision the buttons being adjustable in the settings, so that users can add their own (for bookmarklets) or move things around to suit their own tastes. The buttons that have a small triangle on them show more information below when you click/touch them.

Also note the page title in a grey bar immediately under the toolbar, I would like that it never moved but some people might like it to go away to save those extra few pixels. I'd have to test it.

When you click on a toolbar button with the little triangle, you get an "overlay" with more options. The overlay doesn't move the page around, but sits on top of it, and has an arrow pointing back to the button which called it up, making it very clear what's going on, with no massive context-change and an obvious way to dismiss the dialog (you click the button again).

The "menu" toolbar button is there as a catch-all, to make sure that this sort functionality can be found regardless of the phone/device. For example, the iPhone has a central spot for all settings, but other devices don't, so this is a good place to put preferences, plugins, and also the close button. The only other place for a close button is on the top right, but that'd be next to the Zoom, and I'd hate for users to accidentally close the window while trying to zoom in or out.

The web toolbar button is a combination of bookmarks and the address bar. I thought I'd try to organize things a bit differently just to see. In my mind, when you click on the web button, you either want a new page by entering a URL directly, or you want to save the page you're on for later, or go back to a previous page you saved. That all sort of fits in my mind with "web" stuff. But the address bar could just as easily be combined with search (in the next screen shot) instead, and this turned into a regular Manage Bookmarks button, depending on how strongly people feel about it.

The search button brings up an overlay with a text entry box and options to search using various common websites, which I imagine being adjustable in the settings. Having a dedicated Search button appeals to my sense of what users do most often, but again this could be instead a "combined" text-entry box like Android uses for both URLs and search terms, so it'd be more like a "Go!" prompt.

The tabs button is pretty self-explanatory. Though I said in my previous post that thumbnails on a mobile browser aren't super-helpful, and probably waste a lot of resources, this area would be where you can see what you have open already, or create a new browser tab as well.

Finally, the zoom button on the far right of the interface. It's there alone on purpose, as I feel that users need to have quick access to it.

That's it. It's not the most creative in the world (I used the icon designs from Firefox's Mac version for example), but I think that for something as important as a web browser, it shouldn't have too steep of a learning curve, and the UI should be as familiar as possible. And by the way, yes there seems to be a lot of black and white, which isn't overly compelling, but my original thought was that each of the overlays could be semi-transparent. Then I realized that for mobiles that'd probably be overkill and confusing, so I dropped the idea and went to black. Maybe that could be another interface choice as well?

Anyways, like I wrote in my previous post, please contact me at russ@russellbeattie.com or on Twitter @russb if you have any thoughts you'd like to share.

-Russ

Update: Marcelo Eduardo gave me some feedback on Twitter that I was crowding too much into the toolbar, especially at a high DPI and asked what I would cut to get it down to just five icons. He was right, so I took another stab at doing what I talked about above, combining the search and the web icons together and taking out refresh and home. (The refresh can be done by re-submitting the same URL and the home can be the first link in the bookmarks).

Here's what I came up with - I think it's actually better! Thanks Marcelo!

-R