How to make atypical Navigations work

Navigation is extremely important. It can make or break your Website. However, usability tends to dictate a set of widely accepted navigation patterns which, surprisingly enough, are not the only ways of handling navigation. Lets look at how some “unconventional” navigation patterns can work.

Accordion navigation

The Conversational Capital Website is a great example of a vertical accordion navigation. The content is displayed in different sections depending on the selected option. Michael Fakesch’s Website uses the horizontal space to achieve the same result.

Eyebeam is a bit of a twist on the accordion concept. Four distinct zones are used to display the content. The result is interesting but, the problem (as is the case with other accordion navigations) is the drastic changes in page format.

Contextual navigation

Ilike is a very interesting site. It has no main navigation and relies on search, contextual links and a breadcrumb for navigation. Oddly enough, this works very well.

Elevator navigation

A trend which has been slowly gaining popularity is structuring the content as Web screens on a single page like Uranium Interactive’s Website. It allows users to search the whole Website but breaks both navigation and scrolling expectations.

Treehugger goes even further by only allowing screen per screen navigation. This type of navigation is very difficult to implement, however, the Shanghai World Financial Center Website succeeds by having a persistent navigation outside the content area.

Exploratory navigation

Exploratory navigations are generally used on Websites targeted towards children or where stickiness (repeat visits) comes second to the experience or fun. Ad agencies like AgencyNet tend to make good use of this model.

This concept can be pushed a lot further. I would not recommend being as exploratory as the LM design Website. Forcing users to “play” to get to the content will not please everyone.

Metaphor-based navigation

Metaphors can create great results. I love the way the Tinyteam Website uses stacked windows to navigate. The multiple levels of navigation are very easy to access.

Another very efficient navigation metaphor is the tree. Graduate.nl (click on the tree at the bottom 0f the page) provides a serie of clear choices presented in a very visual manner helping the user understand the navigation options.

These are just some examples of the navigation schemes out there. There are certainly hundreds more to discover or create.

Usability, logic and consitency are very important and these new navigations should always be tested but, the reality is that, whatever works works. The standard L shape navigation was original at one point.

Suggested Reading:

• How to Make Atypical Navigations Work Part 2
• 20 Best Websites of 2008
• 11 tips on creating great user experiences