G+

22 Principles Of Good Website Navigation and Usability

by Dmitry Molchanov on Aug 26 2014

When you are making efforts to attract visitors to your website, it's really important to keep them browsing, to help them find what they are looking for, not left them struggling, staring at a page attempting to figure out what to do.

Navigation menu is a map and directions of a website and usually what gets users deeper into the site experience. A key component of good usability and a successful website.

Website Navigation Principles

Imagine you are a first time visitor of your website. You know exactly what you want, but have no idea where to find it.
The website looks good, but you don't have time for all website content, it's just a distraction from your goal. Fortunately you don't exit, and still browsing.
Each click on the website navigation

  • encourages or frustrates,
  • +1 or -1 to the website trust and relevance to the goal in your mind.

You are constantly in doubt whether it's right place or you need to go back to Google.

According to Forrester Research (http://www.usability.gov/)

  • 50% of potential sales are lost because users can't find information,
  • 40% of users never return to a site when their first visit is a negative experience.

The good news: create a successful navigation menu on your website is not a hard thing to do.

The 22 principles of good website navigation


1. Distinct

Visually separated and easy to find. Don't make navigation the same color, font, and size as your body text - navigational text should always stand out. For menu buttons use high-contrast colors and very legible text.

Weak and strong contrast comparison

2. Simple

Don't puzzle, don't make it too extraordinary. Help your visitors to quickly see what information is available and where to go to find what they're looking for on "autopilot". If they have to think really hard about what to do, you've lost them!
Puzzle Navigation Example
Customers need to be able to anticipate how your site works without having to learn what to do!

3. Consistent

Use the same navigation model in all your pages. It is very important because without a consistent design, a user may actually think he is in another website. Make sure that you use the same navigation model so that users can easily go about your website without being lost.

4. Familiar

Avoid unusual types of navigation. If you have something that people already know, they deal with it more easily.

Unusual Navigation

5. Clear

Make your menu links do exactly what they say. Use simple, obvious and terms that are easy to figure out. Don't leave people to solve a puzzle, because they won't bother. Keep your text short, descriptive, and to the point.
If it takes more than a second to figure out or needs to click on a link to find out, then this will contribute to a bad user experience for your visitors.

6. Descriptive

Avoid using generic captions to all businesses like "Products" or "Services".
They do nothing to communicate with visitors. Don't shorten distances. Reminds an universal website template.

If navigation defines main products or services, your site will communicate instantly.
Your audience isn't looking for "products" and "services". Let them know in advance what it's all about.
Also search engines prefer descriptive anchor texts, so it will help to rank those pages.

7. Concise

You can add a lot of links in a vertical navigation, that's why some people prefer it.
Too many items in main menu disperse visitor's attention.

Removing less important elements makes remaining more prominent.
Focus user attention on most important links.

8. Interactive

Feedback is essential to any interaction. The moment people click or hover a menu items, make sure to offer an indication of the action. Let the user know where he is at all times. You can do this by changing the link's background, color of the page name or turn the text bold in the navigation menu to make it different from others.

9. Ordered

Put most important items first in the navigation and the least important items in the middle.

People's attention is highest for things that appear at the beginning and at the end.

Psychologists call it the "serial position effect", it's based on the principles of primacy and recency.

The standard location for "Contact" is the end (far right in top-level horizontal navigation).

10. Styled

Minimalism is still in trend in web design, and many web designers simplifies navigation down to almost nothing.
It may be OK, if it doesn't looks dull and comply with the principle #1 Distinct and #8 Interactive.

A visual style that make your menu look cool, adds feeling of phisical detachment and realistic interaction can improve the user experience, but make sure it matches the design of the entire site as a whole.

11. Structured

Plan your navigation along with website information architecture. You need to figure out what key features the website offers, what's most important and what's less important, what could be placed in lower levels in the information hierarchy.

Structure of website and navigation

Find the best way to organize your content and navigation will just reflect the structure. Also the URL structure should go with the information hierarchy and correspond the menu structure.

12. Accessible

Most CSS menus are technically accessible, however you need to make sure your navigation works:

13. Clickable

Make all navigation elements clickable links. When using multiple categorical divisions in your navigation, all heading elements should be clickable links. This is true even with drop-down menus where clicking a sub-category link may be the natural inclination of the visitor.

14. Silent

Don't play a sound each time an item in your navigation is rolled over with the mouse. People do not enjoy surprises like that. Even if you find the sound very interesting it gets annoying very soon.

15. Shallow

Don't bury information.

No page on your site should be farther than three clicks away from any other page. Of course, in drop down menus you can go to any level with a single click. But moving mouse to 4th level submenu is not convenient anyway. Better limit yourself with 3 levels.
Better have many items on a submenu rather than deep nesting with many menu levels.

16. Visual

Our brains process visual information much faster than textual information. That's why it is a great idea to help your visitors out with some easy to interpret visuals.
On apple.com the navigation menu is supported by realistic images to help visitors find what they are looking for.

Apple Navigation with images

More abstract icons or colors are great for recurring visitors to remember a content category they were particularly interested in.

Don't use icons or images alone, a short description makes it clear what the page is about.

17. Responsive

Mobile devices such as tablets and smartphones are becoming more and more popular way of connecting to the internet. Responsive page is a good solution for this growing mobile traffic. Single page fit for many different devices and screen sizes. Which also require a responsive solution for your navigation menu.

Responsive page fit for many devices

On the small screen, it is more difficult to display the same content in a clear and usable way. You need to test the solution very well.

18. Seamless

A drop down menu should appear seamlessly and without interruption. The menu should load immediately. Don't make very heavy drop down menus that may takes more than an instant to load upon the hover.

19. Animated

Transition effect is one more detail that can make your menu look cool. Instead of simply appearing, try adding a wipe down, rotate or fade in, animation effects. The transition must be quick and not disruptive.

20. Sticky

Stick your menu to one place, so that it does not disappear when the user scrolls down the page.
The live example is our website (http://swimbi.com) top menu.

According to different researches, users not always notice the difference, but they feel it easier and faster to use.

Sticky or fixed navigation menu

To implement sticky navigation you just need a few lines of CSS.

21. Scalable

Make sure your menu is extensible. It should be easily scalable when you add more content to your site in future.

22. Tested

Ask people to test your navigation menu.
Involve a 3rd party. Test your navigation with a person who has used Internet before, but not related to the design process. Observe their preferences when they navigate through your site and analyze the time it took for them to find the pages that they were looking for.

Involve more people, collect the data and analyze it. You may get some unexpected ideas and input that would otherwise go undetected without this test run.

Conclusion

Navigation plays a key role in creating a great user experience, prolonging the site stay and increasing engagement.
Follow these principles to improve your website menu, but remember that every website is unique. So, don't afraid to deviate from these rules if you have your reasons. Continue to test and tweak your navigation system and check the difference in your analytics.

If you have any thoughts related to the topic, please share your opinion in the comments section.

Planning And Implementing Website Navigation
10 Metrics For Testing Website Navigation
The Elements Of Navigation
UX FLOWS: HOW TO CREATE NAVIGATIONS THAT GUIDE YOUR USER TO THE GOAL
Website Navigation: 4 Tips for Maximum Usability
5 Key Principles Of Good Website Usability
10 Principles Of Navigation Design And Why Quality Navigation Is So Critical
Top Navigation vs Left Navigation: Which Works Better?

like swimbi