Navigation Design: Patterns & Examples

Instructor: Kent Beckert

Kent is an adjunct faculty member for the College of Business at Embry-Riddle Aeronautical University and has a Master's degree in Technical Management.

In this lesson, we'll discuss the aspects of good navigation, describe common blunders, and identify three concepts associated with good web page navigation design. We'll also explore the impact of each of these things on navigation.

What Is Navigation Design?

Imagine that you are researching a particular type of bird. You visit a website that provides information on more than 9,000 types of birds. How will you find details on the bird you want to learn about? The answer is navigation design.

Navigation tells us which way to go.
Confusing navigation.

Navigation design is a design process that utilizes hyperlinks to organize information on a website so that site visitors can navigate, or find, the information they are looking for. Navigation can be text-based or image-based.

Take our bird website, for example. This website might utilize image-based navigation that allows you to learn more about each type of bird by clicking on a picture of the bird. Or it may group birds into text-based categories like Strigiformes (owls) or Falconiformes (falcons).

Aspects of Good Navigation

Well-designed websites have navigation that is clear, concise, and intuitive, enabling the user to negotiate between web pages with little difficulty. When web pages have ineffective navigation, they tend to lose continuity and structure.

Let's explore some of the basic aspects of good navigation:

  • Link to home page - When laying out the navigation, ensure the home page can be reached from any displayed page.
  • Group like functions - Gather similar functionality in one screen location where the user expects to see them. For example, think about the editing functions in a word processor. All the available editing functions are reachable from one location usually under the 'Edit' function.
  • Limit hyperlinks - Hyperlinks relating to the subject are always desirable, but don't overdo the number of hyperlinks. The more hyperlinks used, the more complex the page appears.
  • Three click rule - Web page destinations must be reached within three clicks. More than three clicks indicate a complex structure requiring reorganization.
  • Consistency - Maintain consistency among pages. Place navigation in the same location on each page. For example, if your home page feature vertical side bar navigation on the left side of the page, the vertical side bar navigation should appear on the left side of every page.

Content, Audience and Orientation

Creating effective navigation begins with three fundamental concepts: content, audience, and orientation.

  • Content - Outline the material, separating significant blocks of information into a hierarchical form ensuring each block has a single purpose; these blocks will become your web pages.
  • Audience - Identify the audience, keeping the navigation consistent with their knowledge level. Ensure the navigational instructions are clear, concise, and not overly simplistic or complex.
  • Orientation - Determine in which orientation the navigation will appear. Will the navigation be laid out in a horizontal or vertical orientation? Either orientation is acceptable, however the horizontal orientation is more widely accepted. Much depends on the content and which orientation best presents the information.

Vertical and Horizontal Navigation

Common Blunders & Recommendations

Poor navigation labeling is not the only miscue web page designers make. Other common navigation blunders are listed and described in this table:

To unlock this lesson you must be a Member.
Create your account

Register to view this lesson

Are you a student or a teacher?

Unlock Your Education

See for yourself why 30 million people use

Become a member and start learning now.
Become a Member  Back
What teachers are saying about
Try it risk-free for 30 days

Earning College Credit

Did you know… We have over 200 college courses that prepare you to earn credit by exam that is accepted by over 1,500 colleges and universities. You can test out of the first two years of college and save thousands off your degree. Anyone can earn credit-by-exam regardless of age or education level.

To learn more, visit our Earning Credit Page

Transferring credit to the school of your choice

Not sure what college you want to attend yet? has thousands of articles about every imaginable degree, area of study and career path that can help you find the school that's right for you.

Create an account to start this course today
Try it risk-free for 30 days!
Create an account