The Web-Browser Interface Redesigned
Earlier this month, Opera released their new browser. While testing Opera 9, I noticed the main browsing interface was radically different from that of Firefox. Namely, the browsing tabs were above the address-bar and primary navigation buttons (Back, Forward, Stop).
This got me thinking; If one could completely redesign the current browsing interface, ground-up, what would be the most logical and intuitive configuration?
Armed with only screenshots of Firefox and gut-feeling, I got to work on a configuration.
The idea of visualizing several open documents in one application is not new. It’s been there in Word, and it’s been introduced in Internet Explorer 7. When it works, it allows for easy switching between several open documents. When it doesn’t work, people do not notice they can have several open documents in one window, or worse yet they can’t find their second document. The challenge is to make all open documents clearly visible within the same application space.
The tab metaphor can help alleviate this. We know tabs from card filing systems. The tabs are there to quickly give an idea of what’s behind the card you’re currently looking at. Yet, the card filing system is a very physical construction and tabs seen on a computer screen doesn’t quite have the same depth. One way of improving this would be to take the tab-browsing system one step closer to the physical counterpart.
In this screenshot, as Opera does, the tabs are now the primary browser navigation. This makes sense compared to the the physical card filing systems, where tabs are naturally topmost.
Additionally, “close-buttons” are located on the tabs, since that’s where it’ll probably be the most visible just exactly what it is you’re closing (apparently the Firefox team agrees with this, since Firefox 2 will have close buttons on the tabs).
Finally, the “loading” rotator icon is also placed on the tab, showing exactly which document (webpage inside a tab) is loading.
It seems the UI designers of the next version of Windows are trying to rid the world of the traditional “File” menu. Already now, we know that Office 12 will replace the File menu with a new piece of UI called “The Ribbon”. Internet Explorer 7 is also getting the treatment with the File menu being renamed “Classic Menu” and being disabled by default, replaced instead with something called the “Command Bar”. While it seems Microsofts direction is a bit muddy and inconsistent, the general idea of removing the File menu appeals to me. If nothing else, then because there has to be a better way.
While most users will probably miss one or two menus in the above configuration, think of this more as an idea. For it to work, menus should be redesigned and some features made buttons. Even so, the most basic navigation is now clearer: it’s about browsing.
Also redesigned is the “Back/Forward” history navigation, which is adopted from Internet Explorer 7. One drop-down list with the current page highlighted should be enough for both history buttons.
Having gotten rid, more or less successfully, of the File menu, there’s no reason not to go all the way with the tab metaphor and move the tab navigation all the way to the top. This way we get the benefit of having the tabs at the edge of the screen making them easier to hit with the mouse (simply move the mouse to the top of the screen and worry only about horisontal position). I believe this would appeal to fans of Paul Fitt as well.
Quite a bit of chrome has been removed in the above screenshot, so much that understanding tabs should be quite a bit easier. The real question is whether too much chrome was removed and whether people will feel “crippled” in such a configuration.
While the screenshots presented here may not adequately tackle the myriad of features present in Firefox (Bookmarks, Feeds, etc.), I do think parts could be used to improve the basic browser metaphor we have come to learn. Specifically with regards to the tab metaphor, I believe having the browser navigation as a subset of each individual tab would help immensely in not only explaining tab-behaviour to new users, but also get them to use tabs.
Incidentally, after having made these screenshots, I notice more than ever that the contents of the address-bar change when I switch between tabs… this alone seems to make it clear that something is oddly off in the current implementation, something that would be fixed by moving the tab-bar.
We might not be ready to wave our belated goodbyes to the File-menu. Before we can do that, we need a better alternative that is scalable and can readily hold many commands, menu items and even sub-menus. The Office 12 “Ribbon” seems to go a long way, but combining this with a document tab-metaphor presents a challenge.