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.
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 22 principles of good website navigation
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.
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!
Customers need to be able to anticipate how your site works without having to learn what to do!
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.
Avoid unusual types of navigation. If you have something that people already know, they deal with it more easily.
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.
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.
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.
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.
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.
The standard location for "Contact" is the end (far right in top-level horizontal navigation).
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.
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.
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.
Most CSS menus are technically accessible, however you need to make sure your navigation works:
- in all browsers, including older browsers,
- on mobile devices
- without mouse,
- for users with difficulty reading text
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
To implement sticky navigation you just need a few lines of CSS.
Make sure your menu is extensible. It should be easily scalable when you add more content to your site in future.
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.
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.
Helpful related articles:
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?