WEB200 » Navigation Design for the Web
People will not use your website if they cannot find their way around it.
Scene from a Mall
As you walk into a store looking for something you need you will inevitably use the store’s navigation system to aid you in finding your product:
See Also: Navigating Home Depot
A typical shopping scenario goes something like this:
- Enter the store
- Look overhead for the names of departments
- Look at the signs to see the names of each aisle
- Look at the individual sections of products
- Find your product
Web Navigation 101
Just like you look for clues in a department store, you also look for those same clues when using a website:
- You are usually trying to find something
- You decide whether to ask first or browse first
- If you choose to browse, you make your way through a heirarchy, using signs to guide you
- If you can’t find what you are looking for, you leave
The Overlooked Purpose of Navigation
Navigation isn’t just a feature of a website, it is the website.
Navigation’s main role in a website is fairly obvious, it helps us find us what we are looking for. But, navigation also serves other purposes:
- It gives us something to hold on to
- It tells us what’s there
- It tells us how to use the site
- It gives us confidence in the people who designed and built the site
Website Navigation Conventions
Putting your navigation in a standard place and using a proven convention will allow the user to locate the navigation more quickly and be able to use it more easily.
Typical navigation schemes include:
- Site ID: this is also link back to the home page
- Main Category Section: global navigation
- Sub-Category Sections: sub navigation
- Page Name: where you are in the site
- Footer: extra site information outside the normal hierarchy of pages
You are Here?
One of the ways that navigation can help someone not feel lost within the site is to use the “you are here” indicators.
These indicators can be as simple as using a page name and/or using the highlight state of your navigation to announce what page the user is on.
Putting it Together
You: Great Mike… again, thanks for all of the screenshots. But, now how do I put all of this stuff together.
Me: How about we take a look at my example and we can talk about how I put all of this stuff together. Sound good?
- Is Navigation Useful? | Nielsen Norman Group
- Horizontal Navigation Menus: Trends, Patterns And Best Practices | Smashing Magazine
- Responsive Navigation Patterns | Brad Frost Web
- Mobile Navigation: Image Grids or Text Lists? | Nielsen Norman Group