Principles of Effective Web Navigation

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.

Current Location Highlighted

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:

Breadcrumb Navigation in Action

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.

Change on Hover

“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:

Menu Items with Context

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:

That's Some Tasty Mystery Meat

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.

  1. Don’t Make Me Think: A Common Sense Approach to Web Usability (2nd Edition) via Amazon
  2. Designing Web Navigation: Optimizing the User Experience via Amazon
  3. 10 Principles Of Navigation Design and Why Quality Navigation Is So Critical via Onextrapixel
  4. Usability Lessons Learned via Usability.gov
  5. Is Navigation Useful? via Jakob Nielson’s Alertbox

Posted Monday, September 14th, 2009 · Back to Top

SPONSOR

Add Comment

26 Comments 20 Mentions

  1. Janko Author Editor

    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 =-.

    ·

  2. Carl – Web Courses Bangkok Author Editor

    Really love the examples and clear images to highlight your points.
    .-= Carl – Web Courses Bangkok´s last blog ..Joomla Administration Course =-.

    ·

  3. Noel Wiggins Author Editor

    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

    ·

  4. APM Solutions Author Editor

    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 =-.

    ·

  5. Miguel Alvarez Author Editor

    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! =-.

    ·

  6. Chris Morata Author Editor

    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!

    ·

  7. Melody Author Editor

    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 =-.

    ·

  8. St Petersburg Accident Lawyer Author Editor

    Good article. Navigation is definitely key to any website.

    ·

  9. neel Author Editor

    nice article for a designer to plan the navigation while creating the design
    .-= neel´s last blog ..WordPress News Ticker Plugin =-.

    ·

  10. dayliver Author Editor

    Good information!
    I want all the web-designers to read this!

    Health & Peace
    .-= dayliver´s last blog ..언어학의 꽃, 통사론과 의미론: Syntax and Semantics =-.

    ·

  11. Sanket Nadhani Author Editor

    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) =-.

    ·

  12. صور بنات Author Editor

    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

    ·

  13. Redstage Magento Author Editor

    Thank you for this informative article! So many good points and examples.

    ·

  14. Sam Allen Author Editor

    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.

    ·

  15. AdrianIII Author Editor

    Check out the navigation we designed for Microsoft Services. Its a breadcrumb hybrid.

    http://www.microsoft.com/services

    ·

  16. choen Author Editor

    how about Sitemap?
    .-= choen´s last blog ..Sitemap Ku di Blogger =-.

    ·

  17. Acmeous Author Editor

    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.

    ·

  18. Stanton Author Editor

    Hey. Thanks, this helped me a ton! Really, I’m researching on this subject from past five half-dozen days but I wasn

    ·

  19. denbagus Author Editor

    thank you for this article.. give me new idea about navigation technique

    ·

  20. daddy design Author Editor

    very nice article and great examples. Was looking for more great navigation ideas. one of fav things!!

    ·

  21. Mashkovtsev Author Editor

    Very interesting article… Can I copy it with link to original?

    ·

  22. Mashkovtsev Author Editor

    Have you the for links in comments? For yandex ignoring it? You have cy=30, does you know that?

    ·

  23. Web Design Hippo Author Editor

    Thanks for this post, I’ve never heard the term ‘Mystery Meat’ before, but I always do avoid it!

    ·

  24. Beacher Author Editor

    These pricipel is very basic but necessary.

    ·

  25. coach pures 2012 Author Editor

    About traditional coach boots on sale 2012, the particular tag can constantly characteristic apparent, consistently spread out text message which is without any problems.

    ·

  26. West Midlands SEO Author Editor

    Great post.

    ·

 

Build Internet by One Mighty Roar. Since 2008.