Essentials of Navigation

February 04, 2009 - by Alison West, Designer

What is web navigation?

Web navigation is a series of links which, when clicked or chosen, take users to specific pages within a website. Web navigation was created to help users find specific content that addresses their needs as quickly as possible.

What does web navigation do?

Proper web navigation shows the user exactly where they are, where they've already been, where they have left to explore and how to get back home. While that may seem to be a bit much for a series of links to accomplish, there are simple signs such as the use of color, or underlining that should be visually different for each position.

Where Am I?

Users should always know where they are for one basic reason: it helps them in their quest. On the web, users are more specific in their searches. I like to think that malls are for browsing, the web is for shopping. This means each user already has a specific topic or product they are looking for, and your job is to lead them as quickly as possible to that information or product. If you do not have it, or do not provide that information or product as quickly as possible, that user will leave and will look somewhere else.

Proper web navigation must provide clues as to where the user is. A clue could be as simple as a page title appropriately named for the content on the page. Another clue could be a visual difference in the series of links such as having the text be bold, a different color, or without a hover state. (A hover state is simply how it changes when the mouse is positioned over the text.) The visual difference helps to clearly identify what page the user is at on the website, so that they never feel lost or confused.

Where have I been?

Users will generally not walk down the same aisle more than once looking for a specific product. Users are confident in their ability to find the product they were looking for, and they will convince themselves that it is not there, rather than embarrassing themselves trying to look for it again. The same is true on the web. Users are looking for a specific piece of information, or a specific product and if they cannot find it on the page they are on, they will easily skip to another page that holds the smallest promise of delivering what they are on their quest for. If the navigation has been properly executed, the user will know where they have already searched.

Where can I go?

Assuming your user has not yet found the information (or product) they are searching for, they will be looking for clues, and other places the information could be hiding. Proper web navigation uses clear, visual representations of all the other areas not yet visited which will help propel your user forward in their quest.

How do I get home?

One of the main fears of navigation on the web is getting lost. Who isn't afraid of not being able to change their mind? Ease your customers' fears by providing a clear link back to the front door or homepage. Having no link to the homepage is almost like leading people blindfolded into your store, and then forcing them to try to figure out where your front door is.

Now that we know what navigation is and what it does, what about all those terms you hear web companies toss around?

What are the types of navigation?

Navigation comes in many different forms. There are menus, breadcrumbs, fly-outs, drop-downs, and sub-menus. What do they all mean?

Menus

A menu is much like a restaurant menu. All the mouthwatering options are presented, giving your customers the greatest freedom to choose what meets their needs (or taste buds). Menus can be vertically or horizontally presented.

The advantages to having a simple menu are numerous. One advantage is all the choices for navigation are presented helping your users find what they need as quickly as possible. Simple menus can be horizontal or vertical, but a vertical version lends itself to expanding in the future.

The only disadvantage to using a simple horizontal menu is they have only a certain area to occupy and once you exceed that area, you'll notice the design of the site breaks, leaving users confused and possibly inviting your users to leave.

Breadcrumbs

Breadcrumbs illustrate a clear, logical path through the site and are typically found on e-commerce sites. These links can usually be found at the top of a page and generally display the following:

department > category > subcategory > product

Breadcrumbs are used in conjunction with other types of navigation such as menus, fly-outs or drop-downs. An advantage they provide is a clear, logical path, allowing users the option to step back through their previous steps with ease.

Because breadcrumbs are often used with other types of web navigation, a disadvantage to breadcrumbs is that they are often small and overlooked. They also are used mostly on e-commerce sites or sites that have been organized to included multiple levels.

Drop-Downs

The word "drop-downs" is a term that many people throw around loosely these days. Drop-downs are typically Javascript (though there are some CSS ones) that look cool, and present a complicated site structure to appear to be simple.

There are some advantages to using drop-downs, especially if your site is large and complicated. Drop-downs can make sense if your navigation can be divided into groups of content that are closely associated.

While there are some advantages, in most cases, the disadvantages outweigh the advantages. Most drop-downs are created using Javascript technology, a technology which proves difficult to utilize on cell phones and pdas. Drop-downs can also often prove problematic for users with a slower hand-eye coordination as some drop-downs disappear very quickly.

Another disadvantage to using drop-downs for navigation on a website is some of your options are hidden. This means your users have to search to find what they are looking for. While this may not seem evil, you have to remember what the purpose of a website is. The purpose of every website is to deliver some content (or products) to interested parties. Making your customers search for that content (or product) is going to make them more apt to leave and visit your competitor.

Fly-Outs

Fly-outs are navigation that flies out to the side, revealing more layers of navigation. Amazon.com uses this type of navigation under "Shop All Departments."

Like all types of navigation there are advantages and disadvantages. The advantages are similar to drop-downs in that fly-outs make a complicated structure appear to be simple.

The disadvantages of fly-outs are mostly the same as drop-downs, with the main disadvantage being that some of the content is hidden and the user has to search to find the lower pages. If those sub-sets fail to be categorized logically, some users might be confused as to where to find what they are looking for. The longer it takes for a user to try to find a product or content, the more likely they'll leave and visit a competitor's site. Fly-outs are also often created using Javascript, making them difficult to be accessed on a cell phone.

Sub-menus

Sub-menus are a more accessible way to show all your content if there is more than one level to the organization of the website.

Cherish Springfield (web address here) is an example of a sub-menu navigation. If you choose Who We Are from the menu on the left, you'll be brought to a new page. If you look under the original navigation, you'll find a sub-set of pages (Our Vision/History, Our Mission, etc.,) that look different from the main navigation, thus separating the main content areas from the sub-content areas.

One of the advantages to this type of web navigation includes the ability to make the navigation appear to be simple on the first page, expanding only after the choice has been made. Another advantage is this type of navigation does not use any other specific technology so it works well with other devices such as cell phones and pdas.

The disadvantages, again, are about hiding the navigation choices from the user, especially if the sub-set is not logical to the user. If you have a complicated and large website organization structure, this is the best choice for navigation because it allows for the sub-menu to at least be present on every page within that area.

Common Navigation Headaches

Some of the headaches from looking for specific content and products come from common mistakes such as:

• Multiple types of navigation / navigation areas
• Active link to the current page on the current page
• Poorly worded links (such as Click here or More)
• No visible links (other than the logo) back to the homepage
• Order of navigation based on your needs, not the users needs

Multiple Types of Navigation / Navigation Areas

Having multiple types of navigation on the same site is confusing to users as most areas of navigation compete for attention. If the multiple types of navigation have similar content within those areas, the user may be confused and move on to a much easier to understand website.

Improve your website by maintaining one navigation area plus breadcrumbs if you're an e-commerce website. Leaving the navigation in one area only simplifies the choices for your users and reassures them they aren't missing anything important.

Active link to the current page on the current page

One of the easiest ways to show your users exactly where they are is through the navigation. Have the current page's navigation item have a visual difference, as well as removing the link so that if a user were to click on it, the page would remain unchanged. This helps your users know where they are currently and where they can go.

Poorly worded links (such as Click here or More)

Search engines rely on link text as part of a description of where that particular link goes. Screen readers also read links separate from the rest of the content. Therefore, if you have a statement "Click here for the latest schedule" and click here is the only part that is a link, the search engines and screen readers both find that insufficient. Since people scan content quickly and links tend to stand out, the entire sentence should be a link as it describes the page your users will be taken to once they choose to click here.

No visible links (other than the logo) back to the homepage

The homepage is very much like the front door to your store. Some people like to go to the front door to get a carriage if they pick up too many items to carry. On the web, some people like to go back to the homepage to regain perspective. Sometimes the offering on the homepage will be such that people have a hard time choosing. When they're done following one path, they may be interested in following another from the beginning. Give your users the option by providing a clear link to the homepage.

Order of links based on your needs not your users needs

We always have to remember users come to the web to find specific content or a specific product. Their main goal is to find what they are looking for as fast as possible. If you put your navigation in the order that suits your business (Our Vision, Our Goals, etc.) you are taking a chance that your customers care about your vision and your goals. Chances are your customers are looking for your products and if you hide that lower in the navigation, you give your users the opportunity to spend their money at your competitor's website instead.

Improving Website Navigation

The most important piece of website navigation is to remember your users. Will it make sense to your user? Will they be able to find what they are looking for quickly and easily?

Website navigation does not need to be complicated. If your website is organized properly, your navigation will reflect that in its ease of use and simplicity. Each and every way of presenting navigation has both advantages and disadvantages. The key is finding the best one to satisfy both your users and your business needs.

Resources

Jakob Nielsen's Alertbox article "Four Bad Web Designs" found at: www.useit.com/alertbox/bad-design.html

Robin Williams, author of The Non-Designer's Web Book article "Bad Design Features" found at: http://ratz.com/featuresbad.html

Web Pages That Suck's article "Biggest Mistakes In Web Design 1995 - 2015" found at: http://webpagesthatsuck.com/biggest-mistakes-in-web-design-1995-2015.html