20 Tips and Tricks for Horizontal Navigation Menus / by Colleen Ferguson

An exceptional user experience demands that your web content flows seamlessly. Horizontal-style navigation can help accomplish this because it does not interfere with the content area and is visually accessible. However, the horizontal navigation menu must be designed with the user's needs in mind. Below are 20 design tips and tricks to help you create the perfect horizontal navigation menu for your website.  

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.  Any other link name (“Who we are” or “What we do”) 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 are probably not the main purpose of 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 help 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 is too short for a quarter (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. 

horizontal tooltips

11.    Place logo at top of the page: Best practice demands that your company or website logo (sometimes called the site ID) 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.

horizontal navigation tip

14.    Graceful degradation of JavaScript: If you use JavaScript to support fancy navigational features, you run the risk that users with older browsers will not be able to access those features (or even your site's content) in a usable way.  If a visitor can’t use your navigation, what’s the point of flashy features?  When building your navigation bar, you should avoid the use of Flash, JavaScript, jQuery or anything else that can impede access to your website navigation. If you do choose to use JavaScript, at least make sure that your navigational elements can degrade gracefully. This will disable certain features in order to allow older browsers access to the essential content of your site.  A win-win for your design and any user relying on an older browser. 

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. 

navigation menu items font

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.    Use icons in navigation:  When navigational icons are used appropriately and in moderation, they can assist users in a number of ways.  Icons create visual recognition for users, help their scanning process, and make a webpage’s content easier to perceive and navigate. Of course, when using icons make sure they:

  •  Match their corresponding link
  •  Are easily recognizable
  • Are not too small to make out.

Below, see how the site, My Own Bike, successfully uses simple icons to give users more info about what they can find in each sub-page.

horizontal menu item

20.    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. 

Conclusion:

The tips and tricks provided in this article do not necessarily apply to every site and may not be right for every company.  When it comes to designing your own navigation menu, common sense is essential.  However, all of these tips do follow web design conventions and best practices which create a smooth user experience by means of expected navigational norms.  What other techniques do you employ for usable horizontal navigation?