Articles

Additional Resources

7 Essential Do's and Don'ts of Website Navigation
by Bojan Janjanin

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.

Most of it is common sense, but many designers fail to provide really usable navigation systems. Without further ado, let's head into 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 that users ignore the navigation and scan for fresh content when landing on a new page. That makes, consistency super important for users. Your users should always be able to quickly learn the navigation and adapt to the interface.

    Keep navigation simple and constant throughout the website to avoid any confusion. Don't try to be clever!

  2. DO: Use clear names or icons for menu items
    Always use intuitive, clear and easy-to-understand text or icons in menus. Don't make users guess what buttons, text or icons mean. If you need to click on a menu item and load a page to find out what the page is about, you're not doing it right. If you make it difficult for people, they'll leave.

  3. DO: 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. The simplest, most intuitive way for users to know where they are right now is to highlight the current page.

  4. DO: Provide a search form
    Users often use a search form to help them find what they're looking for more quickly - either because they are lost or because the information they're after isn't obviously available elsewhere. If your site is very small, you may not need a search, but if it is any bigger than a few pages, it's a must-have'. Just this morning, I wanted to get more information on a feature my phone company had just 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 had not been available, it would have taken me a whole lot of clicking through a rather complex navigation system. Or I would have left the site to try a Google site-specific search (a Google search that looks within a specific web site. Remember to make text fields and buttons that are obviously text fields and buttons. Hiding them from your users defeats their purpose.

  5. DON'T: Link pages to themselves
    Take out any links that point to the current page. It's confusing for users to click on a link and find themselves back on the page they thought they'd left. Think clarity and simplicity.

  6. DON'T: Add mailto, Twitter or iTunes links or links to other sites to your main navigation
    This was my main inspiration for writing this article. I don't know about you, but these days, I tread very carefully when I click through menu items on any new website I visit. Before I click on a Contact link, I check where the link goes (on to the left bottom corner of my Safari browser). If the link is a mailto - which is often the case - I won't click it, because what I really want, is just a page with contact info.

    I want and expect a Contact link that leads to its own page and sub menu items like Articles, Portfolio and About. If you want to provide a mailto link, the contact page might be a good place for it, but make sure people know what they're getting – by calling it email us', or contact us by email'.

    Avoid grouping mailto, Twitter or iTunes links or links to other sites with your main navigation. At the very, very least, give the user some sort of a clue (like a tooltip or hover box) that tells user where they will end up. The goal is to meet the user's expectations.

  7. DON'T: Use lengthy animations or transition effects
    Animations and transition effects can be appealing, if used sparingly. But no-one wants to hover over a menu item waiting for an animation to finish. Users want information and they want it instantly. Animations can grab people's attention. But don't use them at the expense of usability. Help people focus on the content, don't distract them.

This article has been written and reprinted with the permission of Bojan Janjanin. More information can be found at www.webdosanddonts.com.