If not for the simple purpose of killing time, we usually have a goal in mind when visiting a website. That goal can be finding or sharing content, getting in contact with the site owner or customer service, purchasing a product, or anything else as a matter of fact. In any case, we want to reach our goal as quickly as possible — without getting distracted, lost, or frustrated because we can’t find what we are looking for.
Obviously, there are many things that help us find our way around a website. The overall usability, but also the design of your site can either guide or doom your visitors. A central aspect of good usability and therefore a successful website is the navigation menu.
Here are 5 expert tips for improving the design of your navigation menu.
1. Keep it simple
The WWF website keeps the main navigation menu super simple. Only four categories are enough to organize all their content.
The key to an effective navigation menu is to keep it simple. No matter how many content categories you have and how many pages you might need to link together, don’t ask too much from your users. Depending on the complexity of your website, this can be the most tricky part of your whole design.
Make sure to set up your information architecture before you decide on a design for your menu. User testing techniques, such as focus groups and card sorting will help you to match your content to your users’ mental schemata. It is very important to group content items and define categories in a way that makes sense to your users.
Consider the following topics for a simple navigation menu:
Design — Don’t stuff your website. Strip down your design to its bare minimum and keep only elements that add to the usability or the overall user experience of your site.
Content structure — Test your content structure. Not you, but your users need to be able to find content on your site. Ask them to help you structure your content in a logical way.
2. Use clear wording
Unicef has chosen for a very clear, yet personal labeling for their main content categories.
After the information architecture has been defined and all content has been structured in a logical way, wording plays an important role for the effectiveness of your navigation menu. You can have all the information on the right spot, if you your navigation items are called differently than expected, they are still difficult to find.
Try to use wording that your users are familiar with. Again, ask your visitors for help and make sure your navigation menu is in line with their mental schemata. Don’t invent creative categories just for the sake of being creative. Choose wording that is simple and to the point.
Clear wording can differ per site:
- Minimalist — For some sites, it can be effective to keep wording to a minimum. In this case, you could consider to add visuals for more clarity.
- Descriptive — Do you have very unusual content categories? Why not add some descriptive context to help your visitors find their way.
- Standard — Use standard wordings if possible. For common content categories, use labels that people are familiar with, don’t confuse them with creative inventions.
- Personal — If it suits your site, don’t be shy and make your wording a little more personal.
3. Place main navigation menu at top
The FIFA website not only shows the navigation menu at the top of the site, but also live information about the world cup qualifiers.
The position of your navigation menu is very important. There are two reasons for that. First of all, people tend to follow certain patterns when they first take in your site. According to Nielsen, our attention on websites follows the pattern of the letter F. This means, we focus the most on the top of a website and on the left side from where we briefly scan the main elements in the content area. Also we avoid to scroll down a page wherever possible, which means we mainly focus on content that is positioned above the fold.
Second, people use patterns to understand and learn how things work and to get an idea of what to expect. In his article Brains Agree: The Case for Website Usability Guidelines, Todd Follansbee explains why we love patterns so much and that we look for them on the Web just like everywhere else.
Even though a lot of websites, especially those creative in nature, deviate from these patterns, do your users a favor and meet their expectations.
Place your navigation menu at the top:
- Above the header — A lot of sites place the main navigation menu at the very top of the site. Especially for stuffed or noisy headers this is a good solution.
- In the header — If you place your navigation menu inside your header, make sure you don’t distract your visitors with an obtrusive design.
- Below the header — If your header offers information that people need before they enter your site, place it above your navigation menu.
4. Make it visual
On Apple.com, the navigation menu is supported by realistic images to help visitors find what they are looking for.
Our brains favor visual information over textual information. That’s why it is a great idea to help your visitors out with some easy-to interpret visuals.
For example, realistic images can help first-time visitors to find their way around. More abstract icons or colors are great for recurring visitors to remember a content category they were particularly interested in.
Here is how visuals can help make your navigation menu more usable and therefore more effective:
- Use icons — Icons help to make a navigation bar more usable, but also more personal and fun to use. Choose clear and meaningful icons and make their style match the rest of your design.
- Use color — Use colors to highlight active menu items or build a color scheme for different content categories. Colors are also very important to smoothly integrate your navigation menu in the rest of your design.
- Use images — Detailed images can offer a lot of information that might otherwise be difficult to fit into one or two words.
5. Consider responsive design
Starbucks makes use of an elegant dropdown menu for small devices. The menu is hidden on default and opens as soon as the user tabs the little navigation icon.
Tablets and smartphones are becoming our default choice for connecting to the internet. In August 2012 already 11.78% of all website hits worldwide came from a handheld mobile device. Responsive web design is a popular solution for this growing mobile traffic. One website fit for many different devices and screen sizes.
Just keep in mind that small screen sizes also require a responsive solution for your navigation menu. The desktop version of a website offers enough screen real estate to feature multi-layered navigation menus. However, the smaller the screen, the more difficult it gets to display the same content in a clear and usable way.
Here is what you can do to effectively design your navigation menus both on big and on small screens:
- Prioritize your content — Less screen real estate means less content. Be careful with deciding what information people really need, especially when visiting your site with their mobile.
- Handle limited space with creativity — Be creative when it comes to thinking of ways to display your content. You can use dropdown menus, or maybe leave out your menu all together.
- Reposition your navigation menu — On mobile, your navigation menu might not be the most important thing anymore. Consider to reposition your menu.