Hover menus: Boon or Bane for the User Experience?

Yesterday, I read a really good article about the negative impacts of hover menus at uxmovement.com.  In it, the author brings up some good points about how hover menus (also called pulldown or rollover menus) can negatively impact the user experience on your web site.

He did a great job of explaining the pitfalls of hover menus.  I'd like to add a couple more and then talk about reasons why clients ask for hover menus in the first place.

To summarize the article at uxmovement:

• Hover menus change expected behavior for the act of moving your mouse.  (Most users move their mouse to find and verify links, not to view content or reveal navigation.)
• Hover menus force users to go through hover tunnels.  (Multi-level rollover menus often require exact mouse movement patterns... one slip of the mouse, and you have to start over.)
• Hover menus make periph­eral items slow and hard to click.  (Moving your cursor near the edge of the first or last item in a menu makes the expansion disappear.)
• Hover menus make index pages harder to find.  (Do the primary menu items have their own pages, or are they merely a means to reveal a submenu?  If primary menu items have their own links to unique pages, users tend to skirt these "index" pages when using hover menus.)

To that list of detriments to user experience, I'd like to add the following:

Hover menus don't work well on mobile devices.  Most mobile devices are "touch" interfaces, meaning you use your finger instead of a mouse... therefore, there is no such thing as "hover". If you touch an item in the primary menu, you immediately go to the link, rather than seeing the secondary menu.

They add to the load time for each page.  The entire menu structure for hover menus must be loaded on every single page.  Although the difference in load time per page might be negligible for users, Google has now begun including page load time into their search engine ranking algorithm.  For a complex site, loading that entire menu with each page might increase load time by 25% or more. Although Google doesn't publish their algorithm, it's safe to say that this increased load time might negatively impact your search engine ranking.

Why Would We Want Hover Menus?

Let's face it, we web developers get requests for many features... and we have experience to tell us that some of those features can be detrimental to our clients' web site.  But we still need to listen to our clients and understand the reasons for their requests.  Clients asking for hover menus often point to these reasons:

• To speed navigation to nested content,
• to provide an immediate overview of the breadth and organization of the entire site,
• because a lot of other sites are using them,
• to provide a "cool" interactive effect.

Regardless of how much we web developers like to harp about web standards and design purity, in the real world, each of these factors must be weighed on its own merit.

Speeding Navigation to Nested Content

One of the chief factors in retaining web visitors is ensuring they can find the content they want within a couple mouse clicks.  Although hover menus can definitely aid in this quest, there's absolutely no reason that that goal can't be attained through good content organization and a well-conceived design.  Rarely have I worked on a site where we couldn't get users to their content within two clicks.  Well-designed web sites load quickly, and so the difference between one and two clicks is negligible.

Additionally, using a more traditional menu allows us to guide users more precisely.  Often, there are certain pages that you really want your prospective customers to see first.  The gentle guidance available afforded by a traditional menu benefits the viewer by ensuring they see the big picture first.  In other words, we want to guide users based on their needs, not necessarily on the informational architecture of the site.

Providing an Immediate Overview of the Entire Site

There's no question that hover menus can provide an interactive sitemap on every page of your site.  However, as was stated in the uxmovement article, users often get frustrated traversing multiple levels of rollover submenus with a mouse.  One slip, and you have to start over from the top.  Therefore, judicious use of a hover menu means limiting it to a single secondary level (generally, a horizontal main menu with one level of vertical pulldowns).

So if you're trying to give your users the big picture, a well-designed home page and a separate sitemap page (linked in the footer) are more effective than a hover menu.

Lots of Sites Now Use Rollover Menus / The "Cool" Interactive Effect

Many sites now make use of some type of rollover menus.  There's no doubt that they are everywhere and that they provide a bit more perceived interactivity.  However, there are more effective ways to add interactivity and "wow" factor to your web site.  And those other methods can often provide more return on investment than the typical hover menu.

Will Hover Menus Help You Turn Visitors into Customers?

If you look through my portfolio, you'll see sites with traditional menus and sites with hover menus.  I have seen no clear evidence that hover menus actually help my clients' sites attain their goals, and so I generally try to steer my clients toward tradtional static menus.  But I can't deny that hover menus make sense on some sites.

The bottom line: the purpose of your web site is to attract visitors and turn them into customers.  There are no hard and fast rules.  Many factors come into play, including the size of the site, how savvy your audience is, and the percentage of mobile users visiting your web site.  An experienced, conscientious web developer will help you weigh these factors and explain the impact of your decisions.  He will also be able to help you measure the results of those decisions.*

* With proper planning, we can test the relative effectiveness of two approaches by conducting A/B testing (serving two different versions of the site concurrently, each with a different type of menu of menu), and then measuring the bounce rate and conversion rate for each version.