Major paradigm shift in web design! The Right-side Navigation Underground

It dawned on me today, months after finishing what I consider to be be my best site design to date, that the way sites distribute navigation on a page is often poorly considered, resulting in diminished usability. I'd suggest that the best way to place navigation on a large portion of Web sites is to bunch the navigation links in the upper right hand corner. I'm calling this paradigm shift (in my mind, anyway) “The Right-side Navigation Underground,” and I encourage you to join my little cabal of truly forward-thinking site designers.

Here is a screen shot of the site I designed, WhitMcLeod.com, where I've used this technique:

What this layout does is provide comfort to users, who will at first experience the joy of having their navigation links always in the same place — close at hand to their scroll bar which they're going to use once in a while.

The right side of page is a good place for something that users don't really need to focus on, since we usually read from left to right. This layout makes it easy for the user to focus on the content, which, from a user-comprehension perspective, is best if it starts in the upper-left of the page.  All the while, users will be able to click through the site easily, knowing that the main site navigation is clearly called out in an unobtrusive space. Their mouse rarely needs to move into the content area of the page, thus it rarely crosses into the content, which would put the cursor in the way of text content.

In the case of my Whit McLeod design, there are two portions to the navigation system: the main site navigation, consisting of 2 columns of 5 links each, and the sub-navigation, consisting of a list of 8 links. On the main navigation, I've chosen to render the links as text images, although this would make the site less usable for sight-impared visitors. An even better solution would be to do the main site nav as HTML text styled by CSS, the same way the sub-navigation is rendered.

This, of course, brings up another design deficiency — not being able to use an extra-saucy Photoshop-created text image for the nav, which in many cases could provide more options for a designer to make visual improvements, such as a professionally selected typeface or other sophisticated graphic effects. But users are quite used to viewing browser-rendered type in navigation, so not a big deal. Sure, it looks good if you can use cool GIF images for navigation, but really, most people don't give a damn if you've done that.

With plain HTML+CSS navigation text links, the usual caveat applies: it looks great in Mac OS X browsers, which have Photoshop-quality anti-aliasing of browser text; but it looks like crap on Windows simply because of Windows' inferior bit-mapped text rendering in browsers. (Although Microsoft's new Internet Explorer 7 browser has improved in this regard, by implementing anti-aliased text rendering, thus smoothing the jagged look which fonts have had on Windows browsers.)

Bottom line: whether you do your main navigation as HTML or images, it's best to put that nav in the upper-right of the page — it's a good place for users, who will find that position “natural” (despite years using the crap navigation on Amazon.com). This  layout goes beyond   merely looking good, to being something that is probably actually a usability improvement.

I'm looking forward to testing this myself or hearing from any folks about their own experience with using the sample site's navigation. If you're a web designer or usability tester, I'd love to hear your own experiences with this layout — does it provide the usability improvements I think it does?

Technorati Tags: design, Firefox, IE7, InternetExplorer, Mac, Macintosh, MacOSX, OSX, Right-side, RightSideNavigationUnderground, usability, userinterface, webdesign