How Website Menus Fail

The numero uno mistake I see in website design is that the menu, or navigation, is faulty. Very few businesses actually think through their website menu to be sure (1) it includes the right pages, (2) it makes it easy to get those pages, and (3) it allows new pages to be added in the future.

Your website pages depend upon what you want your website to accomplish. If you need it to function as an online brochure, then generic labels such as “About Us” are fine. People understand those labels and Google no longer needs descriptive labels as an SEO device. But if your website is supposed to convert visitors into sales, you need navigation labels that answer sales questions like, “Why Buy From Us” and that organize your products so they’re accessible. Shopping sites also tend to make use of sidebar menus on each page.

The first rule of thumb is that most people scan and remember 6 to 7 menu items. No more. So bulky menus with lots of topics make it hard for people to navigate your site. This causes irritation, or “friction,” meaning that users will tend to bounce off your site instead of reading deeper. Long menus also a bad for mobile devices, because mobile is all about simplicity. So your top 6 most important topics need to be covered in your top menu navigation.

The question is then, “How do I include lots of pages?” Well, there are several answers. The most common solution is to use a tradition drop down menu. Drop down menus are not only inaccessible to the blind, they are annoying to the average user. This is partly because websites frequently lack consistency in how they arrange topics in a drop down menu. There has to be an intuitive logic to your menus. Be consistent about whether top level pages are active links or just subject headings. And try to use about the same number of drop down items for each top level menu item. Even so, many people fail to click on top level items because they focus on the drop down pages. This means they may miss the most important pages on your site. Avoid putting third level drop down items. Most people find them hard to click on.

Mega menus can be a good solution because they allow users to see most of your page topics at a glance. You can also include images, icons and descriptive phrases in mega menus. Mega menus make it easy to arrange items logically. If you use a mega menu, you need to avoid third level menu items, called “hover tunnels.” They are almost impossible to click on. You must also be consistent about having the same number of items for each top level item in your menu. Mega menus should be consistently sized and arranged. You are really creating a display arrangement that allows people to scan and choose items, almost like they would scan a bunch of items on a coffee table. Please avoid having really long mega menus with lots of sub items. They don’t show up well on most mobile devices because they drop below the fold (the section seen in the browser window on your laptop or device). Mega menus should rely on click interactions, not hovers, so they work on touchscreen mobile devices. The buggy thing about mega menus is that they really don’t work on mobile devices. This means you will need a separate mobile optimized site.

Amazon makes use of dynamic menus that change depending on what page you are on and that rely heavily on a search bar. They use a top level navigation with main topics (just a few) and a secondary level of navigation with topics (just a few). The secondary level can change depending on which make you are on. Amazon is one of the largest websites in the world and if they start doing something on their site, take notice of it. They employ the best designers and user interface experts in the world, next to Google. There are a few WordPress plugins that allow you to create dynamic menus, but it is really tricky to keep them all organized tidily in your head. Most sites are not sophisticated enough to justify the complexity and hassles of having a dynamic menu. BTW, Apple makes use of dynamic menus because the page content, with clickable images, changes depending on your choices.

While dynamic menus are complex, having a top and secondary navigation is really easy and gives your interface a lot more power. If you are going to do a site with a lot of content, please choose a template with two navigation menus plus the ability to use custom menus. If you go the parallax scrolling page route, with clickable icons and images on each page, please be consistent from page to page. Inconsistency drives people crazy and as a result they leave your website quickly. Inconsistency also leads to confusion, so they don’t click on the links you want them to click on.

Ultimately, the biggest reason website menus fail is because clients choose a “pretty” template without really thinking about the navigation. Having a lot of page types is no substitute for having a clear, logical, and consistent menu system. So, work out your navigation in advance (you can use Excel to do this), and then choose your template. Functionality always trumps prettiness, if you have to choose between the two. If you use a good web designer, you won’t have to worry about menus. You’ll get the whole enchilada.