10 Principles Of Navigation Design And Why Quality Navigation Is So Critical

If content is the heart of every website publication, then navigation is its brain and a fundamental pillar of information architecture design. When dealing with large quantities of content, the critical importance of navigation cannot be overestimated. Content that can’t be found can’t be read. If content can’t be found and read, this means that there’s a lot of cost but zero value.

Navigation is the website’s “table of contents”. In traditional publication, you have page numbering to help you navigate. You can hold the publication in your hands and flick through it. If it’s a large publication, there is usually an index at the back that can be used. However, you can’t hold a website in your hands.

Principles Of Navigation Design


You can’t get an immediate sense of its size or complexity. You navigate a website one screen at a time. That can be very disorientating. It’s very easy to get confused and get lost. A reader who gets lost or confused in this attention-deficit age is likely to hit the “Back” button. Therefore, creating a navigation system that makes the reader feel comfortable, and allows them to find the content they want quickly, is critical to the success of any website.

Designing navigation is like designing a road-sign system. The over-riding design principle is functionality, not style. A reader on the Web, like a driver in a car, moves quickly. Navigation is never the end objective for the reader. It is there to help them get somewhere. (Most people don’t stand around admiring road signs.) Navigation works best when the reader hardly notices it’s there. Therefore navigation design should always be simple, direct, unadorned, with the overriding objective of helping reader get to where they want to go.

Navigation and search are intertwined. Search is a form of navigation. In many situations, the reader will use a combination of the "content gatherers". They will use search to bring them to the subject area or product type they are interested in. Then the navigation should kick in, giving them the context for their search.

Navigation design requires detailed planning. Once launched, it is not something that should be chipped and changed at every whim. You should treat your navigation as if they are “written in stone” because you risk confusing your regular readers (customers), and these are the people you should avoid confusing at all cost. People are by nature, habitual and conservative. If every few months you change the structure and navigation of your website, you will risk alienating regular visitors who have gotten used to your previous formula.

THE 10 PRINCIPLES OF NAVIGATION DESIGN

1. Design for the reader

The fundamental principle of navigation design is that you should design for the reader - the person who uses the website. Avoid designing navigation simply for it to look good. Also, avoid designing navigation from the point of view of the organization, like using internal, obscure classification names that aren't commonly understood.

Remember, navigation is an aid for the reader. Unless you've engaged them and found out how they like to navigate, it is difficult to design navigation that will meet their needs.

When designing navigation:

  • Involve readers from day one by surveying or interviewing them about how they would like to navigate the content.
  • Create mock-ups of the navigation as early as possible and show them to a sample of readers to get feedback.

2. Provide a variety of navigation options

If everyone were to navigate through content in the same way, the job of the navigation designer would be a lot easier. Unfortunately, different readers have different preferences on how they like to navigate around a website. Therefore, to accommodate a variety of readers and their navigation requirements, a range of navigation options should be offered.

Threadless
Navi Options

Some readers like to navigate geographically. Others navigate by subject matter. And some want to read the most recent documents similar to those they have just read.

No single navigation option will fulfill all the above wishes.

Navi Options

To allow the reader to navigate the content in any manner they wish:

  • provide a variety of navigation options;
  • use multiple classification.

3. Let readers know where they are

Navigation should give readers a clear and unambiguous indication of what page of the website they are on. Imagine you are on holiday and you are looking at a map in a town square. If the map is well designed, one of the most prominent features will tell you - "You are here."

CNN International
CNN Header

CNN supports the reader very well in this. On CNN's entertainment page, you will see the masthead in bold capitals, the word "ENTERTAINMENT".

Navigation should be presented as hypertext. However, where it is in graphical form - which is recommended only for global navigation - the classification name that describes the page the reader is on, should be a different design form the other classifications in the navigation.

InStyle Weddings
Instyle Navigation

To let readers know where they are:

  • have prominent titles for every page to tell readers immediately what section of the website they are on;
  • make sure, if part of the navigation is in graphical form, that the link describing the page the reader is on is a different design to the other links in that navigation.

4. Let readers know where they've been

A fundamental principle of web navigation design is to let readers know where they've been on the site. This is a key reason to have as much of the navigation as possible in hypertext, rather than graphical form. With hypertext, when a link is clicked its colour changes. The standard colours for hypertext are blue for unclicked links, and purple for those that have been clicked.

To let reader know where they've been:

  • keep as much navigation as possible in hypertext;
  • use blue for unclicked and purple for clicked.

5. Let readers know where they are going

Navigation should let readers know where they are going. The way to achieve this is to create classifications that are as self-explanatory as possible.

Number of ways to achieve greater clarity:

  • When readers click on a link they expect to go to an HTML page. If you intend them to go to a non-HTML page (PDF, Microsoft Word, etc.), inform them in advance.
  • If readers click on a link they expect to stay within the browser window they are currently operating within, unless you specifically tell them otherwise. Open new browser windows for a reader only when there is a compelling reason.

ASOS
Asos Title Text

Facebook
Facebook Title Text

  • If the navigation element is an image, such as a company logo, and is linked to the homepage, insert ALT text that says something like "Company Homepage."

Asos Navibar

  • Change the colour of the link when the mouse rolls over it. This is helpful when there are many links placed close together. Because the link changes colour, the reader knows exactly which link they are about to select.

Asos Dropdown

  • Consider drop-down navigation, showing lower levels of the classification, when the mouse rolls over a particular link. This allows the reader to navigate further into the website if they wish.

Golden Village Ticket Purchasing
GV Payment

  • Where the user is asked to participate in a process, such as purchasing a product online, having a progress chart navigation can be helpful. This shows the user how many stages there are in the process, and what stage they are at.

6. Provide context

A primary function of a homepage is to provide context for the reader. Home page navigation is not simply about functional navigation such as hypertext and search. It also takes content highlights from the content archive, presenting them as summaries and or features.

For navigation to provide the best possible context:

Asos Context

  • ensure that all content is properly classified;
  • allow for a variety of product/selection homepages that publish the most relevant and positive content for that particular product or section;
  • use related navigation at the end of a document that gives links to similar documents or websites.

7. Be Consistent

Readers turn to navigation when they're confused or lost. Don't confuse them further by displaying inconsistent or unfamiliar navigation design. Consistency for classification is critical for successful navigation.

Navigation design requires:

  • consistent classification;
  • consistent graphical navigation design;
  • consistent hypertext colors.

8. Follow Web Convention

Many people instinctively see the Web as a single medium. They like to carry over navigation skills that they acquire on one website to other websites because it makes life easier for them.

Over time, a number of navigation conventions have emerged on the Web. The designer who deliberately avoids these conventions, just to be different, achieves nothing except to confuse the reader. Go to the biggest and best websites. See how they design their navigation. Don’t feel ashamed to imitate the best practice you find.

Follow the navigation and classification conventions that have emerged on the Web. They include:

Freelance Switch
Freelance Globalnav

  • Global Navigation – this refers to navigation that runs across the top and bottom of every page, containing links to the major sections of that website.
  • "Home" is the convention for the name of the overall homepage.
  • "About" contains content describing the history, financial performance, goals, and mission statement etc. of the organization. E.g. "About Sony".
  • "Contact" or "Contact Us" contains contact details such as email, telephone, address, or location details.

Cold Storage Supermarket Online
Coldstorage Globalnav

  • Organisation's logo should appear on the top left of every page. It should also be linked back to the homepage.

DIY Network
DIY Globalnav

  • Search box should be available on every page of the site. It should be placed on the far right of the masthead.

Freelance Footer

  • Every page should have a footer, containing global navigation as hypertext.

9. Don't surprise or mislead the reader

Never ask the reader to do something it is impossible or difficult for them to do. A classic example is forcing all users to fill in a "ZIP code" regardless of whether they exist in that user's country. Never offer the reader contact options they can't use.

To avoid surprises for your readers:

  • don't lead them down false navigation paths;
  • clearly inform them of exceptions.
  • don't ask them to do things they can't do.

10. Provide the reader with support and feedback

On any website, the reader should be only a click away from being able to contact the organisation. Contact facilities may involve email, telephone, call-back, or customer chat support. A "Help" link is particularly necessary if the reader is faced with a complex task.

Host Gator
Hostgator

We are used to receiving constant feedback based on our actions. However on the Web, the only viable and immediate feedback is through text. Text must be used in a comprehensive way to inform the reader the result of their action.

Feedback

For example, if the reader has filled out a 30 field form and clicked on "submit", the website should provide the following type of feedback - "Thank You. Your form has been completed successfully." If the form was not completed successfully, it should say, "Your email address has not been entered correctly."

Reader support and feedback should:

  • provide a contact link on every page;
  • provide subject-sensitive help for complex tasks;
  • ensure that the reader avoids making obvious errors;
  • isolate errors the reader has made;
  • provide progress chart navigation where processes are involved;
  • provide options that allow reader to give feedback.

Conclusion

While designing the navigation for a website, do consider these 10 Principles Of Navigation Design. The trick is to make it as simple as possible for the reader to use. Stay tuned for more on the art of navigation options used to help navigate a website effectively.

Opinions expressed in this article are those of the author and not necessarily those of Onextrapixel.