Skip to content

Hover Menus: A Landmine for User Experience

Hover menus, also known as fly-over menus, are prevalent on the Web. But are they an example of good user experience design? Since everybody does it, it must be OK, right?

First, let’s clarify what we’re talking about. Hover menus are the ones where placing the mouse cursor over a navigation element causes one or more sub-menus to appear without clicking. They’re fast and slick-looking. However, there are many reasons that using them, despite their popularity, is a bad idea.

Hover menus are a modern form of Mystery Meat Navigation (MMN). Although these menus are not completely obscure, they still behave like MMN because simply moving the mouse over them causes hidden navigation to appear. In most cases, these menus have no visual indication which items go to another Web page and which items will pop open another menu.

Since the mouse cursor must travel over a page to click on links, triggering anything as the cursor goes by is not only distracting, it can block access to regions of a page. Take for example the site, Mashable. We’re not picking on them. There are plenty of other sites like this.

The Mashable home page uses hover menus (click image for full size)

As you move the mouse cursor from the address bar, where you entered the site’s domain name, to any of the elements below the menu, a sub-menu instantly appears. In the screenshot below, the huge Business sub-menu has blocked access to a large portion of the page, including links to featured pages on the site.

Large hover menus block access to other page elements (click image for full size)

As a result of the masking nature of these menus, you’re forced to find a safe path around the right side of the page rather than being able to move the cursor straight down the page. What would happen if the hover menus extended all the way across the page? Even worse, combine that scenario with a smaller screen and escaping the menus may become quite a chore. Instead of MMN, this could be called Landmine Navigation.

The good thing about Mashable’s menu is that it uses a visual indicator, the down-arrow beside the menu label, so that you know where there is a sub-menu. The Videos menu, for example, has no sub-menu and has no down-arrow beside its label.

So, how should menus operate? You already know the answer. Take a look at the operating system or Web browser you’re using right now. How does its menus operate? Do they fly open without interaction? What about drop down controls in toolbars? Do they pop down when your cursor passes over? No. All these things require a bona fide interaction, a click. The Web shouldn’t break this expected, and more sane, behavior.

Now, you may say that desktop software and operating systems are the old way and the Web is the new way. OK, then let’s take a look at an interface that is even newer than Web. On mobile devices such as smartphones and tablet computers, how are menus accessed? How can a hover menu operate in this environment? Touch screens must be touched to interact with on-screen elements. There is no hover.

The paradigm for good menu interaction design already exists and is familiar. There was no need to disrupt it on the Web, causing irritation, awkward usability and decreased accessibility for those with disabilities.

Menus should be clicked to open them. They should have a visual indicator, such as a down arrow/triangle, when they lead to a sub-menu. Once a menu is open, is it OK to have others fly open when moving the cursor between menus since you’ve already initiated navigation. The Google AdWords interface is a good example of all of these principles applied to a Web application’s menus.

The Google AdWords UI implements sane menu behavior (click image for full size)

In what other ways are hover menus problematic? In what ways are they helpful?

Photo via jeroen020 (Flickr/Creative Commons)

Comments

Tell us what you're thinking. Leave a comment.

There are no comments on this post.

Add a Comment

Fill in the form and submit it. Comments are moderated and may not appear to everyone immediately.

Bear