Do hover menus do more harm than good?
Drop down menus are a great way to tidy up websites with lots of navigation, but have you ever stopped to think about how a hover menu (one that opens when you mouse over a navigation item) can affect your site users? It’s very important to consider how easy it is for first time users of your site to actually use it. If visitors to your site have to think about how to navigate through your pages, then your navigation is too complicated. The following article looks at navigation from the users point of view and gives us lots to think about when trying to make a website experience as easy and seamless as possible.
The hover myth.
Many website owners seem to believe that when their menus open on hover, they’re faster and easier for most users to use. It certainly might seem this way at first, but when you look deeper you’ll notice that the opposite is true. Hover menus are actually slower and harder for most users to use. Menus that open on hover do save users a click, but that first click is necessary in letting the website know that the user wants a menu to open and is ready for it. It also confirms to the user that something is happening as a result of their click. This behavior matches the user’s mental model of how most websites work. Clicking for something you want has never been an issue for users. What’s an issue for users is getting something you don’t want or don’t expect simply on hover.
On a website, users will often hover their mouse over many things. This is something that most users do to see what’s clickable. When hovering tells users if something is clickable, that’s when its most effective. But when it opens something before the user has even asked for it, that’s when it can surprise and overwhelm users. There’s no benefit to getting something you don’t want extra fast, if you don’t want it. When this happens, it becomes more of an annoyance than a benefit.
Even if users are looking for a menu to open, opening it on hover doesn’t make it that much faster if the menu is hard to use. Hover menus are notoriously hard to use for many reasons. Clicking an item in a hover menu isn’t always as easy as it looks.
Hover menus force users to go through hover tunnels.
One of the worst things about hover menus is that they force users to skillfully move their mouse through hover tunnels. Hover tunnels are passages that users have to tunnel their mouse through to click a menu item. Older users who are less tech-savvy will often have trouble doing this. Even tech-savvy users can find it annoying that their mouse has to move through a confined path to click a menu item.
This not only makes the menu harder to use, but it makes it less efficient for users to complete their navigation task fast. This is because when the menu opens, users can’t move their mouse directly to the menu item they want. If they do, they’ll accidentally close the menu. Instead, they have to carefully move their mouse through the hover tunnel each time they want to click a menu item. There’s no reason users should have to work this hard to navigate a website.
Hover menus make peripheral items slow and hard to click.
Hover menus will close right when the mouse moves outside the menu. This makes peripheral menu items harder to click because they’re closest to the edge of the menu. Users can’t move their mouse fast to click a menu item. They’ll have to slow it down as they get closer to peripheral menu items that are farther away. And since most menu items are text links in small fonts, it makes the target smaller, which further adds to the slowness. Fitt’s law confirms this effect, which states that “targets that are smaller and/or further away require more time to acquire.”
If users don’t slow their mouse down and accurately land on a peripheral menu item, the menu will close and they’ll have to start over again. Some menus add extra padding around the menu, so that if users miss the menu item by a little the menu will still stay open. However, even adding extra padding isn’t ideal because the menu can still close on users if they move their mouse too far. Users shouldn’t make errors because of the way they move their mouse.
Hover menus make index pages harder to find.
Many websites that use hover menus often have index pages. These pages give users more detailed information about the menu items, so that they can make a better choice. These index pages can’t help users much if they can’t find them. Index pages are often hidden in the general item that users hover their mouse over. Most users won’t know to click the general item for the index page because the highlighting shows that it’s already selected. This hurts new users who often need the index pages to give them detailed information about where they should go. If you have an index page, you should make it clear where it is on the menu so that users who need it can use it.
Menus that open on click.
Menus that open on click instead of on hover solve each of these problems. With click menus, users will be free from the annoying hover tunnels, challenging peripheral items and hidden index pages.
There are three different approaches to click menus you can use. The first approach is the simple and normal way. When the user clicks the general item, the menu opens. It closes only when the user clicks anywhere off the menu. This approach allows users to move their mouse however they want, and wherever they want without affecting the menu. Closing it is as easy as opening it.
The click menu also forces you to put the link to the index page inside the menu instead of hiding it behind the general item. If users click the general item on this menu, the menu will close. Therefore, linking the index page to the general item is no longer an option. It’ll have to become an item in the menu. This will make it clear to users where the index pages are so they can go to them.
Another kind of click menu that’ll make your index pages clear and visible is a disclosure menu. With a disclosure menu, users can easily get to an index page by clicking the general item. However, users who want to get to the menu can click the disclosure arrow. This approach separates the index pages from the menu, so that users can get to the index pages a lot easier without having to look for it inside the menu. This approach accommodates both new users who would likely use the index pages, and returning users who would likely use the menu.
The last approach for a click menu is the collapsible menu. The advantage of this menu is that it doesn’t cover up the content below the menu. Instead, it pushes the rest of the page down to make room for the menu when it opens. This approach is great for mega menus that take up a lot of space. A collapsible menu will allow you to display your mega menu without covering up the top part of the page. The collapsible menu closes when users click the general item again. The arrow also goes from pointing up to pointing down to let users know what has happened.
These three approaches to click menus solve every hover menu problem. They’re so much faster and easier to use than hover menus that it’s a mystery why more websites don’t use them. They also make more sense to users because the menus open on click, when users are actually asking for them, as opposed to on hover when users may or may not want or expect a menu to open. The benefits to using click menus are clear. A menu that allows users to navigate quickly and easily is a better choice than a menu that’s popular and allows users to navigate poorly.
Article courtesy of UXMovement.
More posts from our team
Five Star
Reviewed Marketing
"Would definitely recommend to a friend"
"I cannot recommend Dental Design highly enough"
"Really great company to deal with"
"Very professional, efficient & adaptive to new situations"
"I cannot recommend them highly enough"
"Has been invaluable and gone out of her way to help us"
"We love the look of our practice website. Very professional!"
"Dental Design stood out both in their knowledge of the industry and their professionalism"
"The team and package offered at dental design was unrivalled"
"absolutely fantastic and are always on hand to help"
"Dental Design are fantastic to work with"
"always met with a swift and professional response"
