Jump to navigation

Tutorial – Web Design Techniques: Navigation

Choe Shannon

Guide to Understanding and Designing Navigation

Navigation is the most important user-interface you can have on your site – it allows users to access your content. For that reason, it is imperative to design a navigational system that will allow users to get to where they want to go quickly and easily. There are many different systems and designs out there to choose from, and this tutorial aims to show those that have been adopted by popular convention and for what reasons.

What’s Your Philosophy?

  • User-centered: You want to create the most user-friendly navigation, meaning that you follow conventional standards, utilize testing and surveys, and leave navigation as simple as possible.
  • Design-centered: You are the creative type who believes that the artistic vision you have for your site (and its navigation) should not be deterred by people like users or clients.
  • Enterprise-centered: You want to adopt the pre-existing divisions of the company you are working for to separate your content and determine your navigational structure.
  • Content-centered: You think it makes the most sense to see what’s in the content and divide and label from there.
  • Technology-centered: You want to take the easy road in creating the navigation, utilizing whatever techniques and coding that will get you there the fastest.

While it is natural to base your navigational scheme on the divisions already found within your content, a user-centered design philosophy works best. Be sure to come up with several different options in your designs and present it in usability testing at each stage of development. No one navigational scheme will please everybody, but testing will point you in the right direction.

Understanding the Need for Navigation

  • Orients users by showing where they are within the site, often through highlighting the currently selected item or through a breadcrumb menu
  • Allows users to access pages within the site
  • Shows what the site is all about through the labels, i.e. what you are promoting and/or selling
  • Reflects the brand through logos, colors, typography, etc.
  • Affects whether or not users will take your site seriously
  • Impacts how productive or profitable your site will be based on how easy it is for users to find what they are looking for without any hassle