Week 4 Page 5: Navigation Styles

 

Deciding on a Navigation Style

The style of navigation you select is critical to providing the users with a positive experience!

Navigation styles

As a designer, you have a wide variety of navigation styles to choose from: drop down menus, fly outs, accordion style, sub menus, single page scrolling, breadcrumbs etc.  What you select is determined by:

  • target devices: desktop (space for standard navigation), tablet (smaller screen real estate, vertical and horizontal orientations, i-pads don't support Flash animated nav), mobile (limited space)
  • content you're working with: quantity (how extensive is the content, how many pages), type (images, text, animation, video etc.)
  • goals and purpose: what is the main objective of the site? An informational site will have different navigational needs than a retail site.
  • audience: which demographic is most likely to access the design? What style of navigation best suits them?

Let's look at a few navigation styles and discuss their pros and cons!

Breadcrumb navigation:

Named after the breadcrumb trail left by Hansel and Gretel in the famous fairytale, breadcrumb navigation offers users a path back to the home page and also gives them an understanding of where they are in the site hierarchy. Breadcrumb navigation is for large sites with hierarchically arranged pages. Don't use this style of navigation for a simple site! Also make sure you don't use breadcrumbs as primary navigation. It should always be an extra feature to help the user!

Here's an example of breadcrumb navigation from Costco.com:

breadcrumb navigation costco

The standard convention is to use an arrow icon or > to indicate the separation between each level in the hierarchy.

Dropdown navigation:

Drop down menus are ideal for sites that have multiple pages that can be organized into groups. Drop down menus save screen real estate! Obviously, if you don't have an extensive site, you may not need to use this style of navigation. This style is not ideal for mobile sites either since it can take up too much space.

Here's an example of a clothing company. Their dropdown menus give us access to a huge number of categories at once. 

drop down menu example

  

Navigation for small screen sizes:

Some navigation styles are best suited for mobile and small tablets where only a few options can be displayed on the small screens. Accordion styles, flyouts, universal menu and single page scrolling.

Accordion style navigation stacks the links and adds a plus sign or down arrow icon to enable the user to expand each link individually. Flyout menus are temporary popups that slide in from the side and can be hidden after use. They make excellent use of screen real estate! Here are examples of both:

flyout navigation

 

accordion navigation

The universal menu style of navigation is ubiquitous on mobile devices. How many of you have not noticed the icon with 3 horizontal stacked lines? In most responsive layouts, this is the key method of compressing navigation links into one area. Here's an example from Macy's mobile site:

mobile navigation

 

Single page scrolling:

Many smaller sites have opted for a different solution to the navigation problem. They have adopted a single scrolling page style instead of having a hierarchy of separate pages. Often some simple navigation is provided at the top of the page which then jumps the user down to the correct section. Sometimes, the navigation relies on simple icons (see page on icons!)

Here are a couple of examples of scrolling pages. 

Next let's look at strategies for designing responsive navigation!!

Go to Page 6 >>