Jump to the main content.

Covering all things web, one article at the time.

Want to write for WebD&D? We are looking for writers. Interested? Drop us an e-mail at hi (at) webdosanddonts.com.

7 Essential Do’s & Don’ts of Website Navigation

Written by Bojan on March 16, 2010.

An intuitive, easy to understand navigation is a crucial step towards good website usability. You can have awesome content, but if your visitors don’t know how to reach it, your content will also be close to useless. Your main goal is to ensure your visitors will find what they’re looking for as quickly and as easily as possible.

From the Web Content Accessibility Guidelines:

Provide clear and consistent navigation mechanisms — orientation information, navigation bars, a site map, etc. — to increase the likelihood that a person will find what they are looking for at a site.

To start things off, here’s an example of a well done navigation system:

Croquis.com's nav

Navigation of thecroquis.com/process/.

The Croquis does a fine job of making things clear and simple. Their menu can be easily spotted and the menu items send a clear message, avoiding any confusion. My only remark is that they did not omit the link to the process page on the process page. Instead, they just camouflaged it (try clicking Learn).

You’ll agree this is all common sense, but many designers fail to provide really usable navigation systems. Without further ado, let’s head onto our do’s and don’ts list.

1. Do use the same navigational elements throughout the website

Use the same navigation elements in the same or similar position on all pages within the website. Studies show users ignore the navigation and scan for fresh content when landing on a new page. Therefore, consistency is super important for the user experience. Users should always be able to quickly learn the navigation and adapt to the interface.

Therefore, remember to keep the navigation simple and constant throughout the website to avoid any confusion. Your users will thank you. The navigation is not the part of the site you want to get too clever with.

2. Use clear names or icons for menu items

Always use intuitive, clear and easy to understand text or icons in menus. Keep users from guessing what buttons, text or icons mean. If they need to click on a menu item and load the page to find out what the page is about, you’re not doing it right. Users who do not understand a certain part of a web page will most probably ignore it and continue to scan the page, or leave.

Make things simple and intuitive. Leave complexity to family dynamics, relationships, and puzzles. The things you create should be easy to use, easy to learn, easy to find, and easy to adapt.

http://uxmag.com/design/guiding-principles-for-ux-designers

3. Highlight the current page

Usability guru Jakob Nielsen says you must tell your users where they can go, where they are and where they’ve been. This particular tip is about where the user is. This sort of feedback is crucial if you want to show your users where they are within your site.

Highlighting the current page is a simple trick with great benefits, but many fail to use it. Take a look at the menu bar of Smashing Magazine:

Smashing Mag's nav

Navigation bar of Smashing Magazine site from the Coding page.

Does this navigation bar tell you where you are? One could assume the current page is the home page, but in fact I clicked the Coding item before taking the screenshot. Here’s how the current item could be highlighted to tell the user where he is:

Smashing Mag's nav

My mockup of the Smashing Mag’s navigation with the highlighted item.

4. Provide a search form

Users often scan for the search form to help them find what they’re looking for. If they get lost or they think they will find what they’re looking for more quickly, they will use the search form.

Note that very small sites may not need the search feature, but any bigger site should have it.

Just this morning, I wanted to get more information on a feature my phone company introduced. I was very thankful the search form on their site was not only available in the header, but it worked just as I anticipated. It took me only one click, typing of a search query and hitting the enter key to get to the information I needed. Awesome. If the search form was not available at all, it would take me a whole lot of clicking through their rather complex navigation system. Or I would leave the site and tried a Google site-specific search (with site:).

Also remember to avoid text fields that don’t look like text fields and buttons that don’t look like buttons. Here’s an example how subtle gradients and shadows can make search elements much more usable:

Search elements with and without effects

Two search forms styled differently. The second one is easier to use as it is communicating more clearly.

5. Don’t link pages to themselves

Omit the link that points to the current page. This will only confuse your visitors and many will end up clicking on links that will lead them to the page they are on already.

This is another aspect which many, many sites could improve, including Smashing Magazine.

Derek Powazek wrote a great article for ALA which talks about this issue. Here’s a great quote from that article:

The other day I was driving on the freeway. I was on the 120, going north, dutifully following my Mapquest directions, which said to get off on 120, and then turn right on 120. Say what? I thought I was on the 120 already. Am I lost?

http://www.alistapart.com/articles/whereami

Do provide clear instructions for your users and don’t allow them to spin around in circles.

6. Don’t add mailto, Twitter or iTunes links or links to other sites to your main nav

This was my main inspiration for writing this article. I don’t know about you, but I am treading very carefully when I am clicking through menu items on practically any new website I visit. You often see these menu items before you: Blog, Portfolio, About, Contact. Before clicking on Contact, my eyes go all the way down to the left bottom corner of my Safari and check where the link is pointed to. If the link is a mailto one, which is often the case, I won’t click it. I was not expecting a mailto link, but a page with contact info.

Here’s a screenshot from the lovely looking website of Jack Osborne.

Navigation menu of jackosborne.co.uk

Navigation menu of http://jackosborne.co.uk/

I am expecting Contact leads to its own page, like Articles, Portfolio and About are. However, the contact link is a mailto link. A slight improvement would be to rename Contact into E-mail, but it is much better to make a Contact page or move the Contact link away from the others or style it differently.

Avoid grouping mailto, Twitter or iTunes links or links to other sites with the other menu items. At the very, very least, give the user some sort of a clue (like a tooltip) where he will end up. Think about what the user is expecting.

7. Don’t use lengthy animations or transition effects

Animations and transition effects can be appealing, if used sparingly. No-one wants to hover over a menu item and then wait for the animation to finish. Users want information and they want it instantly. Animations, if done well, are attractive, and you do want eye candy every now and then. But not at the expense of good usability. You want the users to focus on the content, not distract them.

Do you have some tips of your own to add to my list? I’d love to hear your thoughts.

About the author

Bojan Janjanin is a web enthusiast based in Croatia. He has over eight years of experience in web design and development. Besides WebD&D, he runs his blog, called Yesterdayishere.

23 Responses to “7 Essential Do’s & Don’ts of Website Navigation”

  1. Jack Osborne says:

    Hello Bojan,

    Thank you for reviewing my site, I love hearing peoples opinions on how they go about using certain aspects of it. I’m in complete agreement with you when you mention the contact link located in my main navigation. The reason it is like this is due to spam, this is just a temporary measure until I find a good contact form to hook up.

  2. Jay Tillery says:

    Nice write up. I still think a lot of websites get the navigation wrong. You’ve detailed some solid points in this post. Thanks!

  3. Brett says:

    I wanted some feedback about my website.
    Thanks!

  4. This is an excellent and ingenious Bravo and thank you very much for sharing!

  5. anthony says:

    A great list of do’s and don’ts. Keep it simple!

  6. RaphaelDDL says:

    Nice article.

    About the last item, the animations.

    The website of the game i play uses FLASH with long animations as nav bar.. Man, it’s a pain in the ass to search for something, because i have to hover in each menu to see the long animation and then, show the sub-menus.

    While it’s beautiful in the first time, the next try is already painful.

    Check it http://register.intense-ro.net/

    Anyways, thanks for the great article.

    Regards,
    RaphaelDDL

  7. Daryl says:

    As I start today with these issues before me in the design of a new site, this was a great reminder of the way things should be. I now have a much more clear vision of how I will proceed. Thanks for this.

  8. Bojan says:

    Thanks for your comments, appreciate it!

  9. Awesome article!

    tks!

  10. Great Advice here. I always try to keep my navigation clean and usable, but it always helps to be reminded of the basics.

    Thanks for the info :)

  11. webdosanddonts.com’s done it once more. Incredible read!

  12. wantfee says:

    very good artical. Follow the intuitive and suppose you are the visitor can make things beter I think.

  13. Rakesh says:

    A eye opening article. Thanks buddy sharing a such nice article.

  14. I really loved this entry! very good :)

  15. I’m a one-person operation, and I made my website using Weebly, a drag-and-drop program for non-coding, non-cascade style sheeters like myself. I’m hoping you’ll find it fulfills all of your criteria.

    ~~~F. Gentile, Owner
    Frances walks your dog, LLC

  16. Gedit says:

    Form follows function

  17. zaira says:

    nice post, very helpful, thanks

  18. Brainstorm says:

    What a great list of examples.

Leave a Reply

Spam is bad, mmkay?

research paper help