Are Your Web Menus Meeting These 4 Standards?

13 Sep 2016

This is a sibling to my previous article about website menu design

The items in your website’s navigation and menus should work together. Each item has its own purpose but is also part of the larger “engine” that helps users understand your site when they arrive. There are four key considerations when deciding how to organize/design your menus…

1. Branding

Your main navigation bar is the first things users will see. Do the menu options reinforce how you want your organization to be perceived? Does the navigation bar make it indisputably clear what you want your organization to be known for?

For example, on the Chipotle website, you can tell right away that they stand for “Food With Integrity”:  

Being associated with integrity is part of Chipotle’s strategy for differentiating themselves from their competitors.

McDonald’s is also moving into this space by adding “About our Food" to its menu—an option you wouldn't initially associate with the fast food giant:

Similarly, TOMS includes “How We Give" in its main navigation—clearly communicating that this shoe company has a significant charitable streak (a key differentiator): 

TOMS shoes website menu with How We Give as the second optionArena Simulation Software includes “What is Simulation?” as an option, which tells the user that Arena isn’t just for experts and engineers. (This sort of "plain language" approach to menu nomenclature is useful for nearly every organization, regardless of how sophisticated its products or services may be.)

Arena Simulation's website with What is Simulation as the first menu item

2. Descriptive

You want to use words that your users recognize. Unfamiliar words are usually ignored.

On the Home Depot site, for example, it's difficult to know what “Pro Xtra” means. This doesn’t describe something that I understand or find valuable. Am I going to click it to find out what it is? Not likely. The navigation menu is not the place to introduce new or foreign concepts.

3. Mutually Exclusive

You want users to be able to tell the difference between menu labels. There should be little or no overflow of meaning between options.

The Symantec website illustrates this UX problem: Users can choose from “Products,” “Services,” and “Solutions.” Which one do I want? What's the difference between them, really? 

If you aren't sure if your menu items are mutually exclusive, ask unaffiliated people to explain the difference between each item—e.g., "What would you expect to see if you clicked on this menu item?" If you get very different answers, something's amiss. 

For Kroger, what is covered in “Departments” or “Order Online” that isn’t in “Explore"? "Explore" seems like something that is covered by the other topic headings. Is it a synonym for “Shop?” Not sure.

4. Search-Engine Optimized

The future belongs to search engines—and to websites that play nice with them. Your website menus are no exception.

Often, you can select several words to describe the same thing and lead users in the right direction. When that's the case—and assuming your menu wording aligns neatly with the three other considerations above (branding, descriptive, and mutual exclusivity)—you should select the term that brings in the largest number of searchers. 

You can discover this by doing some basic keyword research. (Or you can hire an expert to get you to the top of Google.) 

Mike Steckel

Senior Information Architect

As Senior Information Architect, Mike is an expert in user experience design and research.

More Articles by Mike Steckel