by anthony on 03/01/11 at 2:30 pm
Do you know how your hover menus are affecting users? Hover menus are a popular way to navigate. But the way they open can cause usability problems that most designers aren’t aware of. Before you settle on hover menus for your navigation, you should know how they affect users.
The Hover Myth
Many designers believe that when their menus open on hover, they’re faster and easier to use. It might seem this way at first, but when you look deeper you’ll notice that the opposite is true. Menus that open on hover save users a click, but that click is necessary in letting the website know that the user wants to open a menu. Without it, it’s easy for users to trigger a menu on accident when their mouse moves over the navigation area. This unexpected behavior can block users from accessing the information they want. Or worse, it can cover up important information the user can’t see.
When menus open without users asking for it, it can surprise and overwhelm them. There’s no benefit to getting something you don’t want a click faster, if you don’t want it. This is more of an annoyance than a benefit. Hover menus present many other problems to users that make them harder and slower to use. Clicking a hover menu item is not as easy as it looks.
Hover Menus Force Users Through Hover Tunnels
One of the worse things about hover menus is that they force users to move their mouse through hover tunnels. Hover tunnels are passages that users have to move their mouse through to click an item. Older users who are less tech-savvy will often have trouble doing this. Even tech-savvy users can find it annoying that they have to move their mouse in a confined path.
Hover tunnels make it harder and slower for users to navigate. When a hover menu opens, users can’t move their mouse to the item they want in a straight line. If they do, their mouse will fall off the hover path and close the menu. Instead, they have to move their mouse through the hover tunnel in a particular pattern so that the menu doesn’t close on them. There’s no reason users should have to work this hard to navigate a website.
Hover Menus Make Peripheral Items Harder to Click
Hover menus close when the mouse moves outside the menu. This makes items closest to the menu edge harder to click. Users have to slow down their mouse movement when they try to click a peripheral menu item. If they don’t, it’s easy for them to miss the item and land outside the menu, resulting in a menu close.
Some menus add extra padding around the menu, so that if users miss the item the menu will still stay open. But extra padding doesn’t fix this problem because many users can still move their mouse too far without knowing. Users shouldn’t have to move their mouse in a certain way to click a menu item.
Hover Menus Hide Index Pages
Many websites have index pages that give users an overview of content so that they navigate easier. But these index pages can’t help much if users can’t find them. Index pages are often hidden in the category name that users first hover their mouse over. Most users don’t know that the category name leads to the index page because it looks like it’s already selected. The highlighting on hover makes it unclear that the category name is a link. This hurts new users who often need index pages to give them an overview of content to know where to navigate.
Menus Should Open on Click
Menus that open on click instead of on hover solve all these problems. Click menus free users from hover tunnels, challenging peripheral items and hidden index pages. Here are a couple of approaches to click menus you can use.
Standard Click Menu
The first approach is the straightforward way where the menu opens when the user clicks it. It closes when the user clicks anywhere outside the menu. Unlike hover menus, this approach allows users to move their mouse however they want. Closing it is as easy as opening it.
Click menus force you to put the link to the index page inside the menu because clicking a general item can only open the menu. This means that linking the index page to the general item is no longer an option. It’ll have to become a menu item. This makes it clear where the index pages are so that users can’t miss them.
Collapsible Mega Menu
A collapsible mega menu is useful if you have a lot of items in your menu. The advantage of this approach is that it won’t cover up any page content. Instead, it’ll push the page down when the menu opens so that all content remains visible. Not only that, but users can move their mouse anywhere and the menu won’t close on them. This means no more hover tunnels or hard-to-click peripheral items.
The benefits of using click menus outweigh hover menus. Designers need to know the harm they’re doing to users when they use them. You should never use a navigation technique because it’s popular. You should only use it if it proves to give users a positive navigation experience.