Another thing I like about Opera: its logical layout
Friday, 1. June 2007, 08:44:49
It seems as if the good folks at Opera spent a little more time than the other guys thinking about logical user interface layout...
As I mentioned yesterday 'the thing' that I love about Opera is all the wonderful things you can do with the interface. But I've come to appreciate another thing about the interface as well: its logical layout.
Let me recycle an image from yesterday. What we have here is Internet Explorer 7 (IE7), Firefox 2.0 (FF) and Opera 9.21 (Opera) In there "recuperated" default layouts I've also activated the Opera personal bar and the IE7 menu bar to make them alike as much as possible (see yesterday's post). All three have multiple tabs open:

I suspect there are people out there that won't agree, you have the right, but I think my logic is good...
So, here we are on the web. most of us use the mouse as our main navigation tool, or at least in a 50-50 combo with keyboard shortcuts.
So, since to use the mouse you have to move it (which takes energy), it might be good to put the most often used things as close as possible, more seldomly used things a bit farther away, and the things used the least often the farthest away.
I bet your office or desk is organized like that.
Let's agree that we've already launched the browser and we've already gone to our favorite web page.
The most frequent thing that your going to click on is the in-page links right? When your in a website that's what you do; you explore clicking on this link and that link, reading, looking etc. All browsers are equal at this point; a browser can't do anything about where the links in a page are located!
The next most frequent thing that your going to use are the navigation tools in the browser. And here's where we start to see a difference.
What is the most frequently used navigation tool?
That's right: the back button.
Wouldn't it be logical to put the back button and other click-on navigation tools as close to the web page as possible, in order to cut down the 'distance traveled'?
Now take a fresh look at the photo above.
In IE7, you need to 'jump over' the tab bar and the menu bar (well, by default the menu bar isn't there but anyway
In Firefox you have to jump over the tab bar and their favorite bookmarks bar to get to the back button.
Only Opera puts the back buttton where it should logically be: just above the web page, as close as it can be.
After our in-page links and our navigation tools, the next most frequent thing we're going to do is change tabs, right?
IE7 and FF have both decided that changing pages is more important than easily navigating the page your on, and have put the tab bar next to the web page. But according to our use-theory this is illogical. As we've established, we deal first with what's in front of us (the page we're on) and then when we're done, we change what is in front of us to work on that (a new page). Thus the tab bar needs to be a little bit further away than the navigation bar, i.e. just above it.
Only Opera is organized this way.
I think we can all agree that the least frequently used bar is the menu bar, and that it should be the farthest away.
Opera and FF agree on this and put the menu bar the farthest away.
In IE7, the menu bar is below the navigation bar, but above the tab bar, which is, to say the least, a bit strange! But in their defense, the navigation bar is hidden by default, which is actually pretty smart (you click on 'alt' to make it appear when you need it) and something I'd like to see as a choice in Opera. Nevertheless, if you take their logic of "it's so rarely used why don't we just hide it except for when the user needs it", it seems to me that pressing on 'alt' in IE7 should make the menu bar appear just above the web page, because, well, the user has decided that (s)he needs to go to the menu bar RIGHT NOW and it should logically be as close as possible to where (s)he is at: in the web page.
There are however two wildcards: the address bar, and the favorites bar, or as it's called in Opera the Personal bar.
I find that the personal/favorites bar is pretty darn handy and want it close by, but it still isn't used as often as my navigation buttons, nor my tabs. Once again Opera pleases me because by default that's exactly where it is: just above the tab bar, which is just above the navigation bar, which is just above the web page. In real life I put the personal bar to the left of my webpage where I have space to spare, like this:

As for the address bar, fair is fair, I find that IE7 is the most logical, placing the address bar by default on the very top of the window. You can't see it in my photo, but the FF address bar is by default with the navigation buttons, but can be placed in the menu bar on the top; a nice touch on their part. The Opera navigation bar is, like FF, with the navigation buttons.
What all three of them have done here is to consider the address bar as part of navigation, and that is absolutely true. However my premise here is that use should dictate the placement of browser elements. I find that I use the address bar about as often as the menu bar, and it should thus be distanced from the web page window like the menu bar. Nevertheless, in real life the presence of the address bar with the navigation buttons in my Opera doesn't bother me at all, because there is room for everybody on that bar, as I only use a few buttons.
So to resume, another great thing about Opera for me is that the browser layout is impeccably logical. The only improvement I can imagine is to offer the option of a menu bar that is hidden by default but appears on command "à la IE7".
An idea for Opera 10? What do you think?
One final point:
Perhaps you're saying to yourself, "fine, Wandering, the default Opera layout suits you. But I like having, for example, my page tabs below my navigation tools!"
Fair enough. If that's what you want, here's a video tutorial on how to do it!
With Opera, virtually anything is possible...
EDIT: I was wrong on not being able to hide the menu bar in Opera; it turns out you CAN hide it in Opera!



How to use Quote function: