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

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:

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:

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:

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:

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.

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.