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.

ff_newclassic_large

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.

ff_new_large

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.

ff_newer_large

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.

28 thoughts on “The Web-Browser Interface Redesigned”

  1. Dave Child says:

    I use Opera in a configuration very much like the above. I have no “File” menu visible – instead, I’ve added that menu as another option on the context (right click) menu. That same menu includes my bookmarks (I don’t have to move to the top of the window to access them any more – they’re permanently under my mouse).

    I like the way Opera has the tabs above the address bar. That makes sense to me, as the address and controls relate to the individual page, not the browser as a whole. “Loading” and “Close” being displayed on each tab makes sense for the same reason.

    I also don’t have back, forward, refresh or history buttons. I use mouse gestures for all but history, and that is in my sidebar – everything in one list.

  2. Joen says:

    Dave Child said:

    I also don?t have back, forward, refresh or history buttons. I use mouse gestures for all but history, and that is in my sidebar – everything in one list.

    Very interesting. I had a hard time configuring the Opera menus myself… How did you remove the File menu? Oh, and could you by chance post a screenshot of your browser configuration? I’d very much like to see it.

  3. Rob Mientjes says:

    The OS X approach is pretty nice when it comes to those menus. They’re all at the top, always.

    I’m not sure about the tabs above the chrome. I know your analogy makes sense, but it just doesn’t feel like that. Tabs change the feel of an application. Instances of a website are in a separate tab, and the navigation is always at the top of them, controlling the content. The feel for me is that the tab suddenly contains all this controlling chrome and I feel warped back to separate-window-browing. Because that is, in several senses, happening.

  4. Joen says:

    Rob Mientjes said:

    The OS X approach is pretty nice when it comes to those menus. They?re all at the top, always.

    I agree and disagree with you. I think what I’m about to say is probably more my own opinion and “what I’m used to” than anything else, so read this with a grain of salt.

    I think the OSX approach of having the file menu “physically” separated from the actual application is a bad idea with grave consequences. One consequence is that clicking the “Close” button of a window doesn’t close the application, just the specific instance of the window in question. Also, having the file meny there always, I suspect, makes it very hard for Apple to add a decent “Maximize” function.

    Again, these are probably just things I’m used to on Windows and hence dislike about OSX.

    I do agree though, that the placement is an excellent use of the screen edge.

    I?m not sure about the tabs above the chrome. I know your analogy makes sense, but it just doesn?t feel like that. Tabs change the feel of an application. Instances of a website are in a separate tab, and the navigation is always at the top of them, controlling the content. The feel for me is that the tab suddenly contains all this controlling chrome and I feel warped back to separate-window-browing. Because that is, in several senses, happening.

    What if you had never tried a browser before in your life — would you think it made better sense having tabs above the buttons then?

  5. Ah, TopTabs again…

    It always seems like a good idea in theory, but in actual use (in my use) it falls flat on its face. Key here is that the tab is an extension of the page, a little ‘tab’ that sticks out above it. Clicking a different one will change the content under it, the chrome above it stays the same (bar the locationbar, but bare with me here).

    Putting the chrome below the tabs makes the tabs feel disjointed from the page their refering to. I expect the chrome to change along with the page-contents, but it doesn’t (because it doesn’t have to).

    Also, having them above the chrome is evil and ugly.

    What if you had never tried a browser before in your life — would you think it made better sense having tabs above the buttons then?

    Tabs wouldn’t make sense anyhow – I’ve introduced tabs to several old ladies. The window concept is just about manageable, but tabs (and the alternate clicking to get them) is quite difficult to get used to. Once they’ve mastered the metaphor, chrome above or below would scarcely matter.

    Now, the ‘single menu’ thing is quite an excellent idea, as it’s one that I’ve implemented on my firefox layout already. (With the “compact menu” extension)

    Oh, and sticking a close button on tabs is a good idea – but for the love of pete don’t make them clickable then the tabs’ hidden (like on the Firefox nightlies a while back).

    For those of you wondering what my browser layout looks like, here’s my browser layout. It’s unchanged since December 2005, save the PageRank and Gmail extensions, as they’ve been chucked out. I’ve also made sure that the contextmenu only holds relevant entries (with the Menu Editor extension), but sadly you can’t see that in the screenshot.

  6. Joen says:

    Putting the chrome below the tabs makes the tabs feel disjointed from the page their refering to. I expect the chrome to change along with the page-contents, but it doesn’t (because it doesn’t have to).

    This is an extremely good point. So good that I’m having a hard time arguing against it.

    So I won’t. Instead I’ll ask you, do you think it’s impossible to make a design where navigation controls are part of the tabs, without making the page feel “disjointed”?

    While you make a great point, I think it should be doable. And if doable, wouldn’t you agree it would make more sense?

    I uploaded some browser screenshots to Flickr:

    Edit: By the way, your browser setup is interesting. Very spartan. I’ll have to look in to that “Compact Menu” extension.

  7. matthew says:

    I think the OSX approach of having the file menu ?physically? separated from the actual application is a bad idea with grave consequences. One consequence is that clicking the ?Close? button of a window doesn?t close the application, just the specific instance of the window in question.

    Some would see that as an advantage

    Also, having the file meny there always, I suspect, makes it very hard for Apple to add a decent ?Maximize? function.

    Im not sure how that makes a difference, but fwiw maximise on the mac isnt ‘maximise’ also, I very rarely have my windows full screen, its just so restrictive.

  8. Joen says:

    Matthew,

    I do not claim my own preference to be the one true preference (that preference being File menu is attached to windows instead of bound to the top, and close button closing the app).

    But at least with regards to maximization features, do you not agree that having the option to do so makes sense? I understand if you feel constrained by a maximized window, but if OSX had a maximize functionality, you wouldn’t have to use it… so would you be bothered?

    I hear that true “maximize” functionality is on its way for Leopard, by the way.

  9. Gareth says:

    I hate that mac osx does not have a maximize function, i aways end up with hundreds of pallates, toolboxs and windows littered across my desktop. I feel like i have stared using the internet again without a pop up blocker.

  10. Joen said:

    Instead I?ll ask you, do you think it?s impossible to make a design where navigation controls are part of the tabs, without making the page feel ?disjointed??

    Hmmm. I don’t think it’s too impossible, but I do think you’d always hold a sense of ‘disjointment’. Also, the chrome still wouldn’t change as the tabs change, as they still wouldn’t need to.

    But it’s a fun exercise, so here goes nothing:

    (Working with your no-window-dressing one)

    As I imagine them, the tabs shouldn’t be too wide, except the active one, as there’d be no place to see the full title anywhere else. This’d also make it clearer which tab is active and that it’s important.

    Then the nav-bar itself. To stop it from cutting off the page from the tab, it wouldn’t extend fullwidth, but use up (about) 70% of a 1024px screen, with padding on both sides. If the active tab was more to the left, it’d have a fixed margin there and the right would get the rest.

    The bar would contain a locationbar and a searchbar. A home-icon and feed-icon too for those that need them. Then a left+right and reload/stop icon, inbetween the location and search bar. This is because your mouse will be to the right of the screen most of the time for scrolling. They shouldn’t go all the way to the right (with both location & searchbar to the left) as it looks silly and this way it seperates the location and search bar nicely.

    (This design has purely taken place in my head, so I’ve no real idea if it looks decent.)

    While you make a great point, I think it should be doable. And if doable, wouldn?t you agree it would make more sense?

    It’d make more sense to conventional UI theory – not to human beings per se. I don’t think it’s a good idea to change practice to match theory, certainly in this case.

    I hear that true ?maximize? functionality is on its way for Leopard, by the way.

    cough Mac OS X maximiser cough

  11. miklb says:

    Regarding the Mac maximize feature. I much prefer the fact that I can preset what size the window of an application wil be by setting the window size, closing it, then until it’s altered again, every time I open the app, it opens to that size window. If for some reason I need it larger, I can always drag the window size, but generally speaking, each application tends to have an “ideal” size.

    Regarding menus, I find the consistency of the menus outside and above the application useful, as sometimes I would like to have the app open, but not need a window open for it, nor do I neccessarily need a blank window open in the dock. I can simply command-tab to the open app, command-n for a new window, get a job done, command-w to close the window, and move on. Expos? not withstanding.

    It sounds that if Windows is moving away from the File menu, then that’s a big assumption that everyone is familiar enough with their applications at this point that they will figure out where things have moved. I’m much more in the camp that leaving menus in place for all applications help a user navigate a new app to some degree despite not being familiar with it.

    Interesting discussion nonetheless, one aspect of Firefox is the ability at this point to customize to heart’s content (I already have close tab buttons on each tab as well as a “throbber” for the tab to show which tab is loading). No matter how much I try to migrate to Camino or back to Safari, FF still wins out, though Camino development seems to be getting closer to what I want.

  12. Joen says:

    That maximize feature you linked up, James, seems a bit basic, and looks like it’s more of an “expert mode fullscreen” zoom utility. Interesting though, that what I would think was a very OS specific feature can be coded by a 3rd party.

    As for the disjointed tab problem, I think I’ll have another go at visually making it work, pretty much following the suggestions you put out. Maybe not today though, I’m pretty tired.

  13. Joen says:

    miklb said:

    It sounds that if Windows is moving away from the File menu, then that?s a big assumption that everyone is familiar enough with their applications at this point that they will figure out where things have moved. I?m much more in the camp that leaving menus in place for all applications help a user navigate a new app to some degree despite not being familiar with it.

    As you mention, consistency is key in creating a usable experience, as such it would generally be a bad idea to move away from such consistency … if you were only coding an application. In this case it’s the next version of Windows, which means they should make an effort to move things along, see if there are more usable alternatives worth adopting.

    To be honest, I think Microsoft has already “given up the fight”, in the way that they’ve tried moving away from the file menu, but come to realize they can only do it in so many applications. I believe the “fall-back” will be a command-bar exactly like the one IE7 has. That’s pretty much back where we started, except for the fact that the command bar can be customized, and has icons.

    So, two steps forward, one step back.

  14. bramick says:

    I came across this today and it made me think of this post by you Joen. Maybe you’ve seen it. http://www.deskbrowse.com/ It’s not full featured, but it’s supposed to run very fast.

  15. Joen says:

    Based on ideas from this discussion I made some updated screenshots:

    Basically I added a gradient to see how that helps. It’s pretty much what IE7 does.

    While it looks pretty ugly this way, I do think it helps alleviate the “disjointed tabs” syndrome.

  16. Joen says:

    Bramick, (Edit: Blake, I knew that)

    That deskbrowse is very interesting… it seems they completely dance around the whole “page is part of the tab” metaphor and onto the tab being connected only to the navigation of the page. I think I like it, even if I don’t think it’s an improvement over the basic FF interface.

  17. Joen said:

    Tabs and File menu

    Tabs and compact File menu

    Tabs and very compact File menu

    [..]

    While it looks pretty ugly this way, I do think it helps alleviate the ?disjointed tabs? syndrome.

    Hmm, only the last one “works” for me (kinda). However, that one has a problem: the tab-close-red-X and the window-close(-red)-X are going to be far too close to each other for comfort….

    It might be that the others are too ugly to work, but I think the line above the tabs is the cause of that. I’d also shadow it the other way round (so the lightsource would be at the right). (also, like in the last one, the new tab icon needs to be beside the tabs, of course)

    Mmmm. Interesting!

  18. John Evans says:

    In the last idea how do you move the window around if you have a whole bunch of tabs?

    I know its a very ‘Mac user’ thing to do but what your proposing really seems to be a lot like how Safari has been forever.

    How much more simple can you get than this screen shot.

    • The File menus obey Fitts law
    • The navigation and other elements are all in view and easy to find
    • Minimum chrome
    • The tabs obviously stand out
    • Close buttons and loading icons where they should be etc

    My personal opion is Safari is the perfect general purpose web browser. For development its not spectacular right now (new shiny things are a coming it seems 😀 )

    I think there is some real value however in questioning tab/UI ideas, have you seen the OmniWebs style tabs and Shiiras Tabspos?

  19. Joen says:

    John Evans said:

    In the last idea how do you move the window around if you have a whole bunch of tabs?

    You make sure the borders and edges and “space between buttons” is draggable, and you make the borders and edges slightly wider.

    I know its a very ?Mac user? thing to do but what your proposing really seems to be a lot like how Safari has been forever.

    How much more simple can you get than this screen shot.

    • The File menus obey Fitts law
    • The navigation and other elements are all in view and easy to find
    • Minimum chrome
    • The tabs obviously stand out
    • Close buttons and loading icons where they should be etc

    My personal opion is Safari is the perfect general purpose web browser. For development its not spectacular right now (new shiny things are a coming it seems 😀 )

    I agree, that is a good layout.

    Slightly off/on topic, I dislike that Safari is brushed metal, and while I think the tabs do kinda make sense, I’d like to seem them more pronounced, that is, more accentuated and larger. Also, I don’t think inactive tabs work quite as well in Safari.

    I think there is some real value however in questioning tab/UI ideas, have you seen the OmniWebs style tabs and Shiiras Tabspos?

    Omniweb is really interesting, but I personally dislike the “skewed feel” the window gets with such a sidebar. Also, while really clear and usable, it seems the side tabs take up quite a lot of space.

    As for tabspos?… IE7 has something similar, which I find myself NEVER using. I just don’t have so many tabs open that I ever have a problem finding what I’m looking for by just glancing at the tab / favicon on the tab.

  20. matthew says:

    Slightly off/on topic, I dislike that Safari is brushed metal,

    I agree, I use Uno to remove the brushed metal effect

    and while I think the tabs do kinda make sense, I?d like to seem them more pronounced, that is, more accentuated and larger. Also, I don?t think inactive tabs work quite as well in Safari

    Bigger? Is there really any need? In what way do the inactive tabs not work as well? I think Safari’s tab close button, and indeed the position of it on every tab is MUCH better than Ive seen in pretty much any other browser, especially Firefox’s which is in a very nonsensical place – all the way over on the right!

  21. Joen says:

    Bigger? Is there really any need? In what way do the inactive tabs not work as well? I think Safari?s tab close button, and indeed the position of it on every tab is MUCH better than Ive seen in pretty much any other browser, especially Firefox?s which is in a very nonsensical place – all the way over on the right!

    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?

  22. matthew says:

    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.

    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?

    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.

    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

    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.

    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

    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?

    the throbber in safari is on the right in the tab whilst the page is loading the disappears, this works for me.

  23. matthew said:

    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.

    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

    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.

  24. 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)

  25. 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.

  26. Joen says:

    Tommy Carlier said:

    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.

    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.

Comments are closed.