An exceptional user experience (UX) demands that web content flows seamlessly--starting with navigation. Virtually, ever site or app we interact with uses some kind of navigation. Horizontal-style navigation is one of the most popular, and best, ways to accomplish a seamless user experience. It doesn't interfere with the content area, is visually accessible., and it discourages bad information architecture.
Horizontal navigation menu may have benefits but it still must be designed with the user's needs in mind. Here I share the top 19 tips for creating the perfect horizontal navigation menu.
1. Familiar link names
The navigation bar is one of the first elements your visitors will see and they look to it for guidance. Use simple, familiar, and obvious terms to support your users, with menu names like “About” and "Contact us." These link names offer immediate understanding and familiarity. More obscure titles, such as Story-time" or “Say Something” may take users more than a second to figure out and detract from usability.
2. Clearly Distinguish Primary and Secondary Sections
There are two types of navigation on any given website: primary and secondary. Primary links relate to the content with which your visitors are most concerned, such as “Products & Services” or the “About Us” page. These links should hold the most prominent positions in the navigation menu. Secondary links (social media icons, partners, etc.) refer to pages of content that are still important, but probably aren't the primary reasons your users visit.
Your job is to clearly identify the difference between primary and secondary links for your users. This makes it easy for visitors to see what parts of your website have the most pertinent information.
Here, the IPG website uses strong contrast to distinguish its primary navigation (in black) from its secondary navigation (in grey). IPG’s excellent placement of their secondary links assures that are still associated with navigation and are not difficult to find.
3. Place Call-to-Action Links on the Right
If your site has action links like shopping carts, user registration, or log-in, they should be placed on the right side of the horizontal navigation bar. This area is known as a “terminal area," and is where a user's viewing pattern ends. Eye-tracking studies completed by Crazy Egg have shown that the majority of users will scan a page from the left to right. By putting your call-to-action in the terminal area, users will see the call-to-action and be able to access it quickly because it’s where their eyes naturally land.
4. Add a search box
Another technique that improves usability is to add a search box on the right side of the website as part of the navigation. A search box can provide exceptionally quick navigation assistance for websites that are content-heavy and multi-layered. Make sure the search box is plainly visible within or near the navigation bar, and is recognizable and easy-to-use. Below is an example of a simple search box design, complete with an obvious "search" button and excellent placement within the navigation bar for easy access.
Notice that the search box is sufficiently wide to fit most entries. A study by Nielsen found that the average search box has an 18-character capacity which was deemed too short for 27% of queries. By extending the box to 27 characters, you can accommodate over 90% of queries.
5. Keep the number of navigation items low
In general, a person's short term memory holds seven pieces of information at any one time. Use this as a guide for the maximum amount of items you place in your navigation bar. Adding too many navigational elements means the user may accidentally scan past their desired item. When you have fewer menu items, each one is easier to spot.
6. Get the order right
Place the most important directional items first and last in the navigation bar, and put the least important items in the middle. This order may sound unnatural, but psychology studies have shown that people tend to pay more attention (and better remember) things that appear at the beginning and end of a list. For example, you should put the important "Home" or "About Us" links at the beginning of your navigation bar, and the equally-important "Contact Us" at the end.
7. Clearly indicate drop-down menus
The use of drop-down menus in horizontal navigation easily streamlines cluttered layouts. However, you should visually indicate whether or not a navigation link has a drop down menu, so as not to surprise users. This can be easily accomplished with a common downward-pointing triangle (see example of Kinder-Aktuell’s navigation below).
8. Make every menu item clickable
If an item is in your navigation menu, it should be clickable on every page and through every drop-down. Users will expect all menu elements (including links in drop-downs) to be clickable since they're part of the navigation.
9. Don’t go more than three levels deep
The Nielsen Norman Group found that content in a drop-down menu is easy to use when it’s not buried under multiple layers. Additionally, more than two levels in a drop-down menu can make a design feel cluttered causing a user to get distracted and lose focus.
10. Remove Navigational Tooltips
Tooltips are intended to be helpful messages that appear when the cursor is positioned over an element. However, if tooltips are enabled in the navigational bar and a user moves their cursor over a link, the tooltip pops up, obscuring other link names in the main navigation as well as sub-navigation. Smashing showcased a clear example on how Microsoft’s tooltips inconveniently covered navigational items below.
11. Place logo at top of the page
Best practice demands that your company or website logo should be positioned in the top left corner of your site as part of your primary navigation. Eye-tracking studies have shown that the top left side is the first place people will look in order to identify the site they are using. One of the only exceptions to this rule would be if your site’s target population read from right to left—in this scenario, placing your logo in the top-right corner would satisfy the same need.
12. Brand logo goes to the home page
Your logo should link back to your homepage. This is standard industry practice, and most users recognize and expect to be returned to the homepage by clicking on the site’s logo. A home-linking logo is especially important for information-dense websites.
13. Indicate location
It is important to let your users know where they are at all times to prevent them from feeling lost within your site. You can do this by using visual cues in the navigation bar to indicate a user’s location. Try changing the color, weight, or background of the selected link to make it stand out. Notice how the navigation menu below highlights the menu item to show that the user is on the "About Us" page. It is obvious without feeling cluttered or overwhelming.
15. Standardize the navigation design
Consistency is an important principle of web design. Use the same navigational menu model throughout your entire site. Consistent menu navigation increases the user’s confidence that they are navigating within the same site.
16. Clean typography
Be sure that the typography within your navigation menu is clean and readable. Use well-spaced fonts to develop a beautiful and functional menu. Check out the navigational bar from Ferocious.com below. Their menu is based on typography and shapes, and still does a striking job of balancing form and function without being overwhelming or confusing.
17. Choose a design that can easily be re-sized
Your navigation menu can pose a problem when it is accessed from different devices, particularly mobile devices. Use a design that can be easily re-scaled. Some designs work well on all screen sizes, and others can be easily adapted to work on smaller screens.
18. Evenly-spaced menu items
Keep your navigational menu looking clean by evenly-spacing menu items. You will also want to make any unclickable spaces in between navigational elements as small as possible so that it’s easier for your users to select each link.
19. Test it
Always test your navigation design. For best accuracy, use at least five people, and observe them as they navigate through your site. Analyse the time it takes them to complete a task and summarize each users’ experience. In addition, use post-test surveys to collect supplementary input that may otherwise go unnoticed.
When it comes to designing your own navigation menu, common sense is essential. Every single one of these tips and tricks will not necessarily apply to every single site and company. However, every single one of these tips do follow web design conventions and best practices, guaranteed to create a smoother user experience. What other techniques do you employ for usable horizontal navigation?