How to Make Atypical Navigations Work Part 2

We decided to follow up on the success of our post How to Make Atypical Navigations Work. This time however, we decided to go beyond navigation formats to focus on concepts and ideas. The following examples should help you find inspiration:

Horizontal space

For the last 20 years, Websites have been laid out vertically. But, the Apple carrousel coupled with the efforts of several designers have opened the door to horizontal space navigation.

Taxi’s 15 Below Project is a good example of a succesful user-initiated horizontal navigation. Uniqlo 1000 and the Watch Avenue are different but also succesful approaches. With this mode of navigation, it’s important to give a lead-in to the content beyond the page and provide a secondary navigation device (eg. scroll bar). If you can leverage the mouse’s scroll wheel, you definitely should. Rockwerchter attempts a similar effect but fails because of the awkward primary and secondary controls.

Landscape

Who said a Website had to use vertical or horizontal space? Melissa Hie’s portfolio is a good example of what could be called a landscape navigation. Although it is very linear, a small brochure Website can pull off this type pf experience.

Exit 10 uses a persistent navigation to make the effect much more exploratory.

Animated or Zooming

Animated or zooming navigation shares the same benefits as landscape navigation. It helps users focus on a specific element of information while allowing for much more granular control over the user’s attention.

The story-based Nawlz Website does this very well. The linear navigation allows users to follow the story at their own pace. Prezi leverages the effect by adding animated zooms to presentations.

Depth Users have real-life an even computer (eg. window stacking) expectations for depth. The Jeremy Levine Design Website leverages the stacked window experience to create a succesful navigation. Effective UI mimics a card-deck to create a very interesting effect.

It is very hard to be succesful when deviating from these expectations. Soïa & Kyo fails by offering a linear way to navigate through an almost infinite number of products. This system makes it very hard for users to feel in control and know where they are in the process.

Visual If you have a small number of options, your navigation doesn’t even need words for categories. Instead of offering a traditional menu, Reebok displays sample product images to increase user recognition and create a quick and easy way to navigate. In this case, Alt tags are essential for visually impaired users. Wilhem Arnoldy goes even further (perhaps too far) by offering visual ways to filter out and select information from their portfolio. The Website is difficult to use but definitely worth looking at.

Related articles:

• Don’t Force People to Stay on your Website
• How to Make Atypical Navigations Work