Ever been to a site where it was so easy to find what you were looking for that it seemed to be reading your mind ? You needed a pair of socks and a belt, to check the shipping policy, to check affiliate possibilities, or to gather some information about the rare llama yarn that was used in those socks – and it was all there, right at your fingertips, no hassle. If so, you’ve experienced invisible navigation – the kind you don’t notice, but takes you everywhere you want to go, right away! Chances are good that any site that fits this description employed many of the different types of navigation explained below. Previously, I've offered Tips for Simple Navigation and Types of Navigation.  Here I'll be describing the Styles of Navigation. [caption id="attachment_582" align="alignright" width="100" caption="Vertical Navigation"][/caption] Vertical Navigation is most commonly seen as a left navigation bar.

• Pro: generally allows significant scalability without breaking the design, is common and well understood by many visitors, and uses space efficiently by taking advantage of the monitor’s larger width than height ratio.
• Con: can force very important information below the fold as more and more elements are added to the top sections of the nav bar.

[caption id="attachment_577" align="alignright" width="100" caption="Horizontal Navigation"][/caption] Horizontal Navigation is most commonly used with top navigation bars and footers.

• Pro: all information is placed on the same line and isn’t pushed down when new elements are added, commonly one of the first elements that is seen by visitors because of its high position on the page and the popularity of using it for high quality links.
• Con: not easily scalable.  The finite amount of space from the left to the right of the page allows just so many characters and greatly limits the quantity and length of links possible.

For Hierarchical Systems, many navigation styles have been used to provide a visible representation of the relationship between elements. [caption id="attachment_578" align="alignright" width="100" caption="Dropdown Menu"][/caption] Flyout or Dropdown Menus are generally used with vertical navigation styles with a menu that flies out to the right of the moused over element.   Dropdown menus are used with a horizontal navigation style.

• Pro: flyouts and dropdowns can provide easy, intuitive access to sub categorized information without taking up page real estate or requiring an extra click.
• Con: depending on the implementation, flyout and dropdown menus can decrease accessibility and be non-functional if, for example, javascript is disabled or the necessary flash plugin isn’t installed.  Large flyouts and dropdowns can cover a significant portion of the screen

[caption id="attachment_585" align="alignright" width="100" caption="Accordion Navigation"][/caption] Accordion Navigation is used in a vertical navigation style.  The sub elements become visible (traditionally through a sliding motion) below the selected element upon either mouseover or click and will push the lower elements down on the page.  This can be accomplished through a variety of methods, though most commonly JavaScript, CSS and Flash are used.

• Pro: hide more specific information until it is directly requested, thereby reducing clutter on the page.
• Con: can confuse some users if they are looking for a link that “was just there,” but no longer appears because the accordion is open to a different set of options.  Accordions can also significantly increase the length of a navigation bar and affect the design (overflow or force the length of the nav menu to grow huge).

[caption id="attachment_586" align="alignright" width="100" caption="Reductive Navigation"][/caption] Reductive Navigation allows a user to narrow down the products that they see by a set of factors (long tie, spotted, etc).

• Pro: provides the user a quick way to narrow down the possibilities to relevant products only, very elegant solution that doesn’t take much, if any, extra page real estate to implement, looks clean throughout the navigation process.
• Con: can easily confuse less experienced web users (who don’t understand that in order to see ‘all items’ that they will need to remove the parameters they have set by choosing specific categories),  Search Engine Optimization on a site with reductive navigation requires a significant amount of extra work to enable search engines to effectively crawl and rank the pages of the site.

[caption id="attachment_588" align="alignright" width="100" caption="Embedded Links"][/caption] Embedded Links are text links within a block of text.

• Pros: give the user an opportunity to click on a term to learn more about it, convenient and intuitive for users who are reading
• Cons: don’t stand out, can’t rely on embedded links to be used by anyone other than someone spending time reading everything on your site (rare)

[caption id="attachment_589" align="alignright" width="100" caption="Graphic Buttons"][/caption] Icons & Graphics are links that appear in the form of graphics: buttons, photos, etc.

• Pros: get user’s attention and can be extremely obvious that they are clickable (think about glossy buttons)
• Cons: accessibility can be a problem if alt tags are not properly used, load-time can be affected if graphics are not properly web optimized or are too large.

[caption id="attachment_591" align="alignright" width="100" caption="Sitemap"][/caption] Site Map is a page that provides links to every page on the site in the content area.

• Pros: excellent tool for SEO, can be useful for the rare user that likes to see an alphabetical listing of the pages on your site
• Cons: can’t be used as any sort of main navigation system as the multitude of links and lack of useful organization would quickly drive users away.

[caption id="attachment_592" align="alignright" width="100" caption="Tabs"][/caption] Tabs provide an excellent symbol of a common physical organizational system, where the selected tab is set apart from the unselected using color, shape, and/or size.

• Pros: extremely intuitive for users, can add quality texture to a site, and pros from Icons & Graphics
• Cons: poor scalability as they are generally used on horizontal navigation bars, and cons from Icons & Graphics

[caption id="attachment_594" align="alignright" width="100" caption="Breadcrumb Trails"][/caption] Breadcrumb Trails provide a visual path that shows the path that the visitor took in order to arrive at the current page.

• Pros: answers the “Where am I” and “Where have I been” questions very effectively, retracing steps is simple, any page on the path is only one click away, excellent secondary navigation system
• Cons: shouldn’t be used as a main navigational system as it is insufficient for navigating the entire site.

[caption id="attachment_595" align="alignright" width="100" caption="Search"][/caption] Search tools allow users to enter search terms and forgo traditional navigation methods.

• Pros: provides an excellent tool for users who know exactly what they are looking for, reduces necessary clicks to find a specific product or information, excellent secondary navigational system
• Cons: shouldn’t be used as a main navigational system on the vast majority of sites

[caption id="attachment_596" align="alignright" width="100" caption="Step Navigation"][/caption] Step Navigation (‘Pager’) allows users to step through pages when all of the elements can’t be displayed on one page together.

• Pros: very common and therefore intuitive for users, allows users to ‘be in control’ of the display, provides structure when there are too many elements to list on one page, excellent secondary navigational system
• Cons: shouldn’t be used as a main navigational system on the vast majority of sites

Mix and Match The key to choosing a navigation style is not choosing just one - the best sites provide a navigation style for everyone: For the person who doesn’t know exactly what they are looking for, but really likes to see it in action, a strong graphic and icon navigation on the home page will work wonders.  For the shopper who’s in it for speed and knows the exact product name, the search tool will be invaluable.  The top navigation contains high interest links and the scalable left navigation contains category names.  Breadcrumb trails provide a rear-facing roadmap. Take a look at your site.  How many of these navigation styles do you use? What benefits or costs have you experienced that weren't mentioned here?

Tags: Design, information architecture, Navigation, styles, systems

This entry was posted on Monday, March 9th, 2009 at 11:00 am and is filed under Design, General E-commerce, Navigation. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.