If content is the heart of every website publication, 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 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 its large publication there is usually an index at the back that can be used. You can’t hold a website in your hands.

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 easy to get confused, to 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 knows 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 couple of months you change the structure and navigation of your website, you will risk alienating regular visitors who have got use to your 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 because it looks good. And avoid designing navigation from the point of view of the organization - using internal, obscure classification names that aren't commonly understood.

Remember, navigation is an aid for the reader, so 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 wanted 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


Some readers may want to navigate geographically. Some navigate by subject matter. Some want to read the most recent documents like the one they have just read.

No single navigation option will fulfill all the above wishes.

To allow the reader to navigate the content in the way 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 then one of the most prominent features will tell you - "You are here."

CNN International

CNN supports the reader very well in this. If you find yourself on CNN's entertainment page, you will see in bold capitals in the masthead 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

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 it changes color. The standard color for hypertext are blue for unclicked and purple for 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-descriptive 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 they will stay within the browser window they are 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

Facebook

• 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."

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

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

Golden Village Ticket Purchasing

• Where the user is asked to participate in a process, such as purchasing a product online, progress chart navigation can be helpful. This shows 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:

• 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 that at the end of a document gives links to similar documents or websites.

7. Be Consistent

Readers turn to navigation when they're confuse or lost. Don't confuse them even more 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-it makes life easier for them.

Over time a number of navigation conventions have emerged on the Web. The designer who delibrately avoids these conventions to be different achieves nothing except confusion for the reader. Go to the biggest and best websites. See how they design their navigation and unashamedly imitate the best practice you find.

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

Freelance Switch

• Global Navigation - this is 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, mission statement etc. of the organization. E.g. "About Sony".
• "Contact" or "Contact Us" contains contact details such as email, telephone, address, location details.

Cold Storage Supermarket Online

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

DIY Network

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

• 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 very difficult for them to do. A classic example is forcing all users to fill in a "ZIP code" regardless of whether ZIP codes 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 organization. Contact facilities may involve email, telephone, callback, or chat support. A "Help" link is particularly necessary where the reader is faced with a complex task.

Host Gator

As humans we are used to receiving constant feedback as a result of our actions. On the Web, however, the only viable immediate feedback is through text. Text must be used in a comprehensive way to inform the reader of the result of their action.

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, "It seems that 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.

While designing a 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 of the art of navigation options that use to help navigate a website effectively.