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.
Tab-Browsing
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.
Menu-Digging
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.
Screen Edges
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.
Thoughts
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.
- Firefox OS
- The Web-Browser Interface Redesigned
- July '06 Installment: Outline
- Orientation: A Scientology Information Film
Again, this might probably just be my opinion because I'm used to it, but to me the inactive tabs do not work because they aren't tabs. It's a horisontal item list separated by ... well separators. To accentuate inactive tabs, I'd prefer dimmed and down-scaled tabs.
As for the placement of the close button, I have no opinion on that, other than I would like to see a close-button somewhere ON the tab. Left or right, I don't care, since I use middle-click to close anyway. However, I do appreciate that Firefox shows a favicon ON the tab, and it makes sense to have this favicon before the actual tab-title since that's where it is in the address bar. Furthermore, I'd like room for a "throbber" indicating that the contents of the tab is loading. This could be "behind" the favicon. Bottomline, if left-aligned close buttons work, then fine, but could it in any way be combined with a favicon?
Quote
youre probably right, I like that they dont take up much space on the screen and having some sort of visual tab shadows or what not would just be unnecessary visual clutter IMO. And what are tabs if they arent in essence a horizontal list?
I agree, I didnt mean the specific location of the close on a tab, but just that it was on a tab and not way off to the right. Even after (or maybe because of) using Safari I still found the position of the close in Firefox initially confusing and didnt click it incase it closed the whole window
Im not sure, I might like a favicon on the tab but then I might find it clutters it. the option to turn it off or on would be good
the throbber in safari is on the right in the tab whilst the page is loading the disappears, this works for me.
Quote
matthew said:
It's pretty essential when you've got many tabs open. Even when you don't have a whole load open, it's an excellent visual cue.
Quote
Also, Shiira 2.0 should be of interest, as it tries to distinguish itself by its interface.
Some interesting stuff there! (and here, but there too)
Quote
Another interesting idea I like in Opera is that the Refresh and Stop functions are put in 1 button, which makes sense. You can not stop and refresh at the same time. The stop function is pointless when you're not loading the page, and the refresh function is pointless if you're already loading the page.
Quote
Tommy Carlier said:
Indeed that does make sense...
Generally it's not a good idea to mess with the appearance AND function with a button, usability wise, but I think I'm in favor of this one.
Quote