Friday, June 29, 2007

Sidebar navigation

Though there is no clear statistics on this (as different sources may vary), I think that most people will have 1280+ horizontal resolution within 3 years. And large subset of this will be wide screens, which vertical resolution won't be significantly higher than today's standard 768. Unfortunately, just small part of this will have pivot function to make them vertically oriented.

In such environment most documents will leave unused horizontal space, which should be used for something meaningful by the programs. At this point, I will focus solely on how this problem should be solved with web documents/browsers. First of all, though web design may vary in the future, wide sites are not likely to appear, as reading too wide columns is not ergonomic and you can expect unused horizontal space to appear here.

The idea is to move all navigation to sidebar. That way, all vertical space is freed up, while only horizontal space that is expected to be unused is used for navigation. Of course, easier said than done. Some of the elements will be tighter than they are today, and there is lot more free space that should be filled with something meaningful. So, here is the mock-up of what I propose:

Sidebar navigation in Firefox screen shot

Keep in mind some remarks:

  • Address bar is much smaller. Even current UI elements of Firefox used here would function much better if they were a bit less wide. With this width, there is no sense to display all URLs, but it is not a big problem, as they are not meaningful anyway. I would suggest Natural language navigation to fill that gap, but will leave it for the next post.
  • Search bar is a bit smaller, but it shouldn't be a problem
  • Navigation buttons are the same, I just tweaked them a bit from Firefox - Stop/Reload button is already standard in Opera/Safari, and unified back/forward history from IE7 is also a good stuff.
  • The rest of the space is used for different sorts of link collections
    • Hidden tabs - there might be more intuitive name for this, but it relates to tabs that are not shown on tabbar due to tab overflow. At this point, tab overflow is not discoverable - try to open tab in background while overflow is active, and you'll have no feedback that something is happening. With this solution, hidden tabs area would increase its size by 1 slot (and history would lose that one slot) where newly opened tab would appear. And with some nice smooth scrolling animation it would look very cool. And if lists get too big, there could be scroll bar on right side. Personally, I had big trouble using current list of tabs in Firefox as list contains both visible and invisible tabs, which makes it too big, while I think that proposed hidden tab list would be very user friendly.
    • Recently closed tab is another function that is totally indiscoverable in Firefox. Same smooth scroll animation would make it very effective and easy to use.
    • Bookmarks could be solved in different styles - at this point I think that there should be top used bookmarks, while pressing the + sign area would significantly increase and show all current bookmarks (thus no need for bookmarks menu).
    • History is just least of recently opened page, and it reduces the need to keep that item in menu.
  • With all these changes, menu bar becomes narrow enough to fit into sidebar,and there is no need to extend it to the full line. Actually, current menus were made at the time when resoulution 640x480 was widespread, and they really took whole the screen. Now it is really time to revise whole the system.

And, as said before, this new concept adds a lot of more visible vertical screen. Here is native Firefox for comparison:

Firefox screen shot

Labels: , , , ,