Skip to content

Usability & Types of Website Navigation

Having a clear navigation system is a critical part of web usability. Your users can easily get lost in the pages of your site. By utilizing a navigation system that is appropriate for your content, you can expose more of your site's content, boost your conversion rates and have happier customers.

Studies consistently show that about 50% of primarily use navigation systems on a site, while the other 50% predominately use site search to get around. If either of these two systems are lacking, you are losing/alienating some of our users.

We'll look into the usability concerns of site search in a future post — below we'll explore some common navigation systems.

Sectional Navigation

Sectional Navigation GRAYBOX PDX Web Development

This type of navigation is becoming really popular. In fact it's what we're using for this site. The basic concept is to organize your site into major sections and just link to the home page for each section in the global navigation. Essentially, instead of just the one home page, each section has it's own internal structure — a collection of individual micro-sites if you will, unified by the global navigation.

This approach is effective when you either want to A. Highlight individual brands, each with their own unique identity (see Gap.com), or B. Keep users focused on dedicated tasks, such as shopping or support (see Apple.com).

We wouldn't recommend this for sites with a lot of hierarchical complexity, such as an ecommerce site. This style is also typically paired with liberal uses of Left Navigation for navigation within a specific section.

Dropdown Navigation

Dropdown Navigation GRAYBOX Web Development

Declining in popularity in recent years, dropdown navigation allows a user to link to both the section landing pages and the top-level pages within each section. Some sites also have flyouts, allowing for the display of more levels in a less overwhelming way.

Their are some drawbacks. For one, the relatively small dropdown and flyout click areas have proven difficult to hit precisely, increasing user frustration. Likewise, they become illegible when you have a lot of options below each section head — The best approach is four to seven links below each section head.

Used well and in moderation, dropdowns can be effective way to expose multiple levels of site content to a user.

Sitemap Navigation

Sitemap Navigation GRAYBOX Portland Web Design

Sitemap navigation is a great way to expose all or most levels of your site's structure to your users at all times, increasing time on site and the visibility of the content you've worked hard to create.

For ecommerce sites especially, they are a great way of exposing a deep and complex hierarchy of categories and pages (see REI.com). This allows multiple paths for users to find your items. Also, usability is increased as the hit area of each dropdown is quite large, with many individual text links contained within it.

Likewise, Sitemap navigation allows users to link from every page of your site to every other page — reducing number of clicks and promoting exploration.

Left Navigation

Left Navigation GRAYBOX Digital Solutions

Left navigation is very common. It solves some basic problems with traditional (top & wide) navigation and creates some new ones.

Left navigation is a great way to display tier-two & tier-three level pages within a specific section by providing focus and acting like a filter as you drill down through the site (see Amazon.com). Plus, you can easily add/remove items from a left nav as users are more used to vertical scrolling than horizontal.

Left navigation does have it's problems. For one, it simply lacks the prominence of a top navigation systems. In eye-track studies, users typically scan the top, left-to-right before working down the page. It's also hard to organize a longer list of links without the use of flyouts so that it remains legible. Left navigation becomes less usable as more links are placed within it.

At GrayBox, we wouldn't recommend only using left navigation exclusively as your navigation structure for your site. Instead, it works well when paired with some of the other systems described above.

Conclusion

As you build your site, spend some time planning out the content hierarchy are organization systems you will employ. Your site's navigation is a key component of creating a user-friendly, easy to navigation and clear site to best reach your users.

You would never break ground on a house without a well thought out architectural plan — so too with your site. Invest the time to build a solid foundation, you'll pay yourself back with more conversions, easy navigation and happier customers.

GrayBox can assist you with Information Architecture and Usability planning — Discuss your site's navigation with us today.

Blog & Events

Featured Work