Principles of Effective Web Navigation
Good navigation gets you places. More importantly, good navigation gets you places without a headache. Even though there are certain exceptions, most websites would be dead in the water without sensible navigation between pages.
Do you have a website design of your own handy? Let’s do something uncomfortable. Bring it up in a separate window, and keep it open as you read through this article. It’s time to put your own navigation under the microscope. We’ll make sure that you’re not losing potential visitors by disorienting and confusing them.
Ready? Let’s start by asking your site some fundamental questions.
The Big Questions
How much thought goes into choosing navigation style on your page layouts? Do you go with When talking about web usability, you’ll commonly hear that effective navigation should answer some fundamental questions from the user:
“Where am I?”
For the average visitor, this is question number one. It may only be a millisecond thought, but it’s necessary to orient yourself after following a link. One of the navigation’s foremost jobs is to offer an anchor across a site’s page to answer this question. If the navigation fails to orient the visitor, their confusion becomes a usability concern.
For those of you with a website open, does your navigation indicate the current page? The most common way to show location is by placing a marker next to the corresponding menu item or highlight it with different colors.
Repetition works wonders. Picture the navigation area as its own page for a moment. Even though a page might have a title, it’s still a good idea to repeat this location with a graphical change to the navigation. Repetition works wonders.
“Where have I been?”
Fading visited links isn’t always only (or best) way to mark visited pages. Breadcrumbs do a remarkable job of quickly and simply orienting a visitor to their current location on a website. Wufoo makes good use of them throughout its tour pages:
With breadcrumb navigation, there isn’t much more effort required to add another tier of pages. It simply gets tacked to the end of the “crumb trail.” Typically, you wouldn’t want to design a site around this type of navigation alone. Breadcrumbs are a means of orientation more so than navigation. Use them as a secondary feature, but leave the primary navigation to something a little less dynamic.
“Where can I go?”
The user needs to know where they can go from the current location. This is especially important if the visitor is looking for something specific. Frustration is a surefire way to send someone away from your site.
Changing a link’s style on hover is a popular way to show navigation items.
“Why should I go there?”
Simply giving the options is not always enough. Additional information on a menu item helps the user determine the contents of a page before following a link. This extra detail can come in the form of subtext or a tooltip on hover. It is there to add context to the menu item.
Take the example from SimpleBits below. Without the caption of “recent entries” under the SimpleBits item, I would probably not know that it links to a blog:
As Steve Krug writes in Don’t Make Me Think, usability does not always mean excessive explanation. As he points out, the average internet user no longer needs to be told to “Enter keywords here” in order to operate a search box. This is where standards and conventions come into play.
We’ve discussed this before on Build Internet; you don’t have to assume that users are new to the Internet. Keep this in mind when deciding what additional information to include.
Avoid Mystery Meat
“Mystery Meat Navigation” refers to an ambiguous or unclear menu design. In the same way that a wheel is round, navigation design trends have evolved a certain way for a reason.With a mystery meat menu, the visitor has to orient themselves by guessing and experimenting with the design. There is no intuition or sense involved.
It’s possible to stick to conventions while still being creative, but this kind of navigation is far from either:
Interested in seeing more instances of baffling mystery meat navigation? Web Pages That Suck has compiled pages.
Conclusion
Take a moment to give your site one last look. Know that you have a few specific metrics in mind, how usable is your page? Are there any parts of your page that might need some extra clarification?
We’d love if you shared your findings in the comments below. Be honest! We’re not looking to call anyone out for poor design. In all fairness, even this blog doesn’t fit all of the usability guidelines laid out here.
Further Reading
The article above is a watered down introduction into navigation usability. Interested in learning more on building successful web navigation? I’ve put together a list of blog posts and books that do a wonderful job of expanding on the subjects outlined above. Read them for inspiration, deeper discussion, or both.
- Don’t Make Me Think: A Common Sense Approach to Web Usability (2nd Edition) via Amazon
- Designing Web Navigation: Optimizing the User Experience via Amazon
- 10 Principles Of Navigation Design and Why Quality Navigation Is So Critical via Onextrapixel
- Usability Lessons Learned via Usability.gov
- Is Navigation Useful? via Jakob Nielson’s Alertbox
Discussion
September 14th, 2009 at 3:32 AM
Nice article, Zach. Only I would say that breadcrumbs actually answer the question “Where am I” more than “Where have I been”.
.-= Janko´s last blog ..Couple of issues with dates on web =-.
September 14th, 2009 at 8:30 AM
Really love the examples and clear images to highlight your points.
.-= Carl – Web Courses Bangkok´s last blog ..Joomla Administration Course =-.
September 14th, 2009 at 8:40 AM
I appreciate this article today, I have been testing and developing my company website one element at a time, and I realize based on this article that I need to upgrade or add a better navigation to my site.
I appreciate the tool tip idea, this a cool way you can help people learn if what’s going on without cluttering up your button design with subtext, and they are fun to play with!
–
Thanks & Regards
Noel from nopun.com
a professional graphic design studio
September 14th, 2009 at 10:58 AM
Good article. I could probably improve a little bit it some areas. I wouldn’t classify a breadcrumb as “where have I been?” though. A breadcrumb shows a user the path to their current location, so they don’t necessarily have to have come from the crumb links. All in all though, great tips.
.-= APM Solutions´s last blog ..Website Redesign Launch: Antique Stoves =-.
September 14th, 2009 at 1:57 PM
If only the entire internet would read this post and take a few minutes to really understand the profound implications that web navigation really has… the web would be a much better place.
Thanks for sharing!
Miguel Alvarez
.-= Miguel Alvarez´s last blog ..You DO judge a book by its cover! =-.
September 14th, 2009 at 4:43 PM
Great job with the article! A nice followup would be a “How To” on implementing some of these into a website. Keep up the good work guys!
September 14th, 2009 at 4:51 PM
I hate mystery meat navigation, which I also learned from webpagesthatsuck. I think there’s a point when some designers cross the line of pure randomness with this stuff…they completely forget that the internet, and websites, are for the purpose of retrieving information, not playing around with a site’s navigation..
.-= Melody´s last blog ..Minute Monday: 10 Inspiring Marketing Quotes =-.
September 16th, 2009 at 5:59 PM
Good article. Navigation is definitely key to any website.
September 17th, 2009 at 11:26 AM
nice article for a designer to plan the navigation while creating the design
.-= neel´s last blog ..WordPress News Ticker Plugin =-.
September 17th, 2009 at 11:10 PM
Good information!
I want all the web-designers to read this!
Health & Peace
.-= dayliver´s last blog ..ì–¸ì–´í•™ì˜ ê½ƒ, í†µì‚¬ë¡ ê³¼ ì˜ë¯¸ë¡ : Syntax and Semantics =-.
September 20th, 2009 at 12:42 AM
Nice one. Another important point in my opinion would be to use standard and non-fancy terms for navigation.
For example, if you want to link to an “About Us” page, there is no point in calling it something like “Company Information” even though it sounds perfectly right – people are used to About Us, so give them that. The moment they have to think about a particular term and where it might lead them, you are losing out on them.
So I would say instead of having the “Why should I go there” thingy, just make sure you are using terms that are so well understood by the audience that you do not need an explanation to go along with it. Except when some page is very very unique to your website and hence there is NO convention at all to be followed.
.-= Sanket Nadhani´s last blog ..How to use FusionCharts in Windows .NET Applications (WinForms) =-.
September 21st, 2009 at 12:49 PM
Thanks for the useful tutorial, some people think that they are adding a stylish look with implementing mysterious links, but they sure will loose so much
September 23rd, 2009 at 5:18 PM
Thank you for this informative article! So many good points and examples.
September 30th, 2009 at 5:32 AM
We turned around a site making $6k per month to $1.6m p/m in 6 months by better advertising and focusing on a better all round usable / navigatable experience. Navigation and allowing users to easily get where they want to go, quickly, does have real world benefits. Many peopel give lip service to, its good etc, but we proved the fact by underpinning our enhanced site success through better principles of navigation and usability.
October 2nd, 2009 at 12:28 AM
Check out the navigation we designed for Microsoft Services. Its a breadcrumb hybrid.
http://www.microsoft.com/services
November 9th, 2009 at 9:12 AM
how about Sitemap?
.-= choen´s last blog ..Sitemap Ku di Blogger =-.
November 23rd, 2009 at 5:58 AM
Highly recommended for designers who think design should be done to make the website beautiful. Design should never be dome for design purpose, but should also have the consideration for the user.
Great compiling. Thanks.
January 10th, 2010 at 4:34 PM
Hey. Thanks, this helped me a ton! Really, I’m researching on this subject from past five half-dozen days but I wasn
January 20th, 2010 at 2:28 AM
thank you for this article.. give me new idea about navigation technique
February 4th, 2010 at 12:05 AM
very nice article and great examples. Was looking for more great navigation ideas. one of fav things!!
April 18th, 2010 at 3:44 AM
Very interesting article… Can I copy it with link to original?
April 18th, 2010 at 3:46 AM
Have you the for links in comments? For yandex ignoring it? You have cy=30, does you know that?
August 4th, 2010 at 7:35 AM
Thanks for this post, I’ve never heard the term ‘Mystery Meat’ before, but I always do avoid it!
Join the Conversation!
Remember: Life's not all doom and gloom, so please keep it constructive. If we've made an error or missed something big, please let us know! Learning is revisions, after all.