The menu is your website’s primary navigation tool. As such, it should be easy to identify and use. While elements like sidebars and breadcrumbs can bolster a menu, it should serve as a standalone directory. Enhanced navigation like filtering, searching and organizing can enrichen supporting elements, but such complexity would only obfuscate the main menu.
Some businesses get into trouble with their menus when content comes after design. Navigation relies on information architecture—the relationship between parent pages (i.e. categories) and their children. Content relationships change as you add, delete and edit pages, so menus need adjusting over time.
When creating or redesigning a menu, there are three criteria used to assess efficacy.
- Position: How recognizable is the menu? Is it prominent or subordinated by other design elements?
- Sequence: Do the most important or high-trafficked pages come first?
- Accessibility: How many clicks does it take to reach parent versus child pages?
Common menu patterns that your website can adopt
Familiarity is critical in design and convention dictates that a menu should appear at the top of a web page. When relocated, the onus falls on the user to learn what to do. This friction makes it less likely for the user to continue forward on the site. That said, there are times when unorthodox menus work.
Holm Marcher & Co., a headhunting agency from Denmark, adopts an interesting menu design. The company’s five key pages span the full vertical viewport, forcing the user to select or scroll. There are subtle animations drawing further attention to each item. As you scroll, the menu retracts into the logo and remains fixed to the left. This allows users to navigate from anywhere on the page.
Susa Ventures, a “family of dreams and builders,” also boasts an unfamiliar menu design. Admittedly, there is more of a learning curve here compared to Holm Marcher & Co. Nonetheless, it is effective because each item scrolls to a section on the page. Thus, even if the user fails to recognize the menu, he or she is not obstructed. In fact, the call-to-action to scroll is far more prevalent.
Besides the two examples above, most websites fall into one of three conventional menu formats: descriptive, off-canvas or drop-down.
1. Descriptive menus
The most basic menu is arguably the most effective. It is a horizontal list that displays all primary pages clearly and concisely. Every navigational aspect is visible.
Some websites shy from conventional menus because of visual clutter. Interestingly, what seems like a design problem is actually a usability one. Menus should contain no more than seven items—the maximum amount the short-term memory allows. Above this and users begin to forget, clicking in unintended places or leaving altogether. Moreover, menu items need brevity—one to two words each—for quick comprehension. So, when done right, a conventional menu looks quite clean.
Camden Town Brewery exemplifies the use of a descriptive menu. The company shows only five options. More importantly, each item is aptly labeled. Note the difference in usability if we were to change the items to:
The wording optimizes a phenomenon called information scent. Based on the five labels, any user can orient him or herself quickly. Better yet, the user can confidently click a link without second-guessing the destination. Generic labels, as illustrated above, are huge navigational blunders.
2. Off-canvas menu
The off-canvas menu, found often in hamburger form (☰), is a staple of responsive design. By hiding the main menu behind bars, it frees up critical screen real estate. That said, it creates an unnecessary barrier for users to explore a site. Besides mobile devices, it’s best to keep primary pages in plain view.
Sirin Labs, the manufacturer of the most expensive Android phone, successfully implements an off-canvas menu. It pairs the hamburger bar with a call-to-action button, devoting the rest of the page to showcasing the product. This prioritizes the product’s impression above all else. In a way, the site also emulates the interactivity of an app. Off-canvas functionality only accentuates this feeling.
3. The dropdown menu
Some websites rely too heavily on the drop-down menu (more items on hover). It sometimes becomes a lazy way to showcase pages; why choose if you can display them all? Well, research shows that dropdowns are annoying for this reason. They present too many options for effective decision-making. Plus, when poorly made, the menu collapses unexpectedly.
Ideally, drop-downs can be broken into primary and secondary menus. Such practice is common in e-commerce, where there are various means of grouping content.
Nevertheless, dropdowns still exist and can function efficiently in the right context. For instance, Parcours Canada, a company offering guided Canadian tours, includes drop-down functionality appropriately.
Since only two of five menu items drop-down, it is the best option for making a consistent viewing experience. Unless the majority of pages employ secondary navigation, adding it to only one or two pages would degrade the user experience. The company also uses icons here to help locate content. This makes an otherwise bad menu choice highly usable.