When used well, drop-down menus should help users to navigate more effectively. 

They allow easy access to various sections of a website, and allow designers to tidy up busy layouts. 

In this post I want to look at how drop-downs should be activated. Is it better that users open menus by mousing over them, or by a click?

Hover or click: pros and cons

I did float this question on Twitter recently and received a range of answers, though perhaps hover was slightly favoured, at least for desktop. 

I'm looking from a desktop perspective here, and these are the pros and cons of each approach as I see them. 

Hover

Pros: 

  • It's easier, less work for the user to activate the menu. 
  • Most sites use this, so it's what users expect. In fact I struggled to find an example that was clickable. 
  • It allows users to navigate more quickly. 

Cons: 

  • Easy (and irritating) to activate by accident. 
  • Can be hard to close big menus. 
  • Can be too easy to mouse away and lose the menu. 
  • Items close to the edges of the menu are harder to click, as it's easy to mouse away from the menu. 

Click

Pros: 

  • Avoids accidental user activation. 
  • Lets the user decide whether to open the menu. 
  • Harder to close by mistake. 

Cons: 

  • People may expect to navigate to the category page, not open a menu. 
  • The time delay in activating and closing may interrupt the user journey. 

Examples of drop-down menu activation

ASOS

The drop-down operates when users hover the mouse over the label. It is deactivated when the cursor is moved out of that area. 

The menu, though it contains plenty of links, is super-massive, so it's easy to get rid of, and not too hard to trigger accidentally. 

House of Fraser

This is activated by hovering and has several levels.

While a smaller menu may be harder to use, the size of these menus means that accidentally clicking away from the menu is hard to do. 

Google

Google's small drop-downs are clickable. This makes sense with smaller menus as they remain on screen wherever you move the cursor. 

Econsultancy

Our drop-down menus are pretty big, and were initially activated by hovering when we relaunched the site

However, we felt that the ease of activation of such a big menu and the subsequent difficulty in moving the cursor away from the menu area was a UX problem. 

So, we have made the menus clickable: 

This has solved the accidental activation issue, but has it caused other problems?

For example, do users who click on the 'blog' link on the navigation bar expect to be taken to the blog page rather than to open a menu? 

Is there a better way to solve this problem, or have we got it more or less right? 

We're looking at making more changes to the drop-downs (and elsewhere), but would love to hear your thoughts....

Graham Charlton

Published 19 February, 2015 by Graham Charlton

Graham Charlton is the former Editor-in-Chief at Econsultancy. Follow him on Twitter or connect via Linkedin or Google+

2565 more posts from this author

Comments (17)

Comment
No-profile-pic
Save or Cancel
Pete Austin

Pete Austin, CINO at Fresh Relevance

Click is much better for me, because I use PC and tablet about equally and I like sites to work the same on both.

Click is also better if you're personalizing your menu with top product suggestions (like this site does with featured posts on its "blog" menu, but with products chosen to suit the menu category and the current shopper). This is because the shopper can choose several products without re-opening the menu.
http://www.triggeredmessaging.com/blog/how-to-design-web-pages

over 2 years ago

Avatar-blank-50x50

Jason acevedo, director at The Limited

You have to also assess the impact of each on your responsive or mobile execution as one size may not fill all

over 2 years ago

Avatar-blank-50x50

Jason Goldberg, VP Strategy at Razorfish

Obviously hoover-overs don't work on touch devices. So if you go hoover, you end up using different conventions on mobile vs. desktop which can be harder for multui-devices users.

over 2 years ago

Avatar-blank-50x50

Ren Walker, Art Director at Adpearance

What about combining onClick with a delayed onHover? The user could access a mega menu via click but those unfamiliar with the interaction, the menu would appear after 1s.

I know Amazon has also experimented successfully with tracking cursor movement to build better fly-out menus. Similarly tracking the intended path or the acceleration of the cursor could help determine intention.

over 2 years ago

Avatar-blank-50x50

George Liapis, eMarketing at Buldoza S.A.

Replying to Jason Goldberg, the hovers *can* work on mobile devices perfectly. You just need a custom (or not) JQuery/JavaScript in order to set a simple rule of making the user who taps on a menu category not being navigated to that category but trigering the event of opening the menu - the second time he/she taps on the same category, the site navigates them there.

We have tried this with our mega-menu and it really beefed our results in tablet and smartphone conversion rate (we have a non-responsive site for the time being unfortunately).

Replying to Graham now, that question you raise is a really interesting one.

In e-commerce - as a user - when I see menus that require clicking, I find it kinda weird and immediately think that they did this on purpose for their mobile users, sacrificing the desktop experience. The problems with navigating and accidentally hovering away or in another category can be also easily fixed with the use of the hoverIntent jQuery Plug-in, by simply adding micro-delays which are critical for eliminating most "accidents".

In blogs or the news industry (or Google as you well-pinpointed), I really don't give it much attention, although it will frustrate me to see a menu popping up when the category which I click doesn't have a facing-down-arrow to the right (like your menu does).

over 2 years ago

Avatar-blank-50x50

Tony Edey, .

Horses for courses to some extent. I've worked on a site with an 'on hover' sub menu and it didn't have the problem of accidental activation because all other clickable CTAs were far below it. It was also a small sub nav so even if you did accidentally activate it, all that happened was a big image was partially obscured momentarily. Not really an issue. For touch devices it was an on click activation and close.

And then I've worked on another site where the sub nav clashed heavily with clickable content imediately below it, and it made more sense to make it 'click/tap to activate' to avoid accidental activation.

All I'm saying is I don't think there is a 'one size fits all' answer, but certainly careful consideration should be given on a case by case basis. It can get more complex where the nav is the same site wide, but different pages/sections use different layouts but you only want one behaviour for the main nav. In that instance I'd probably favour on-click as that should work in most cases, though I don't think is necessarily ideal for desktop.

over 2 years ago

Avatar-blank-50x50

Tuguldur Baatar, Digital Web Manager at Beds & Bars

I'm glad econsultancy made the menu clickable instead of hover as it use to be very annoying with accidental hovers when switching between tabs to read related facts and figures.

I think hover/click menu depends on the size of the drop down and its active area. So anything with smaller foot print should be hover and anything big should be clickable.

Obviously for mobile all menu should be either click or swipe.

over 2 years ago

Graham Charlton

Graham Charlton, Editor in Chief at ClickZ Global

This article was intended just to look at the desktop implementation, and I really wanted some feedback on our own drop-downs. On mobile, we have a different navigation structure, so I'm looking here for the best desktop solution for our readers.

I found the auto opening of the previous drop-down intensely annoying, but I'm not sure we have it right now, though perhaps that's the size of the menu rather than anything else.

over 2 years ago

Avatar-blank-50x50

Jason Goldberg, VP Strategy at Razorfish

Graham,

I think you made a wise choice with click to open for your site. Some of your menus (such as Channels) are so large, that the user loses all scent for the underlying content when the menu opens, so if there were inadvertent opens it would be particularly annoying.

Your click to open also avoids what I call "Peek-a-boo menus". If a user hoovered to open your Channel menu, and then wanted to go to the far left to select "US", they would invariably drag the mouse over "Research" on the way, which would cause the target to move away from the user. There are javascript approaches to minimize it, but best to avoid it all together,

George, I appreciate your comment, but you haven't made hoover work on tablets, you've converted hoover to on-click. Only certain pressure/proximity sensitive tablets can truly support a hover event (old Windows Tablets did for example).

over 2 years ago

Avatar-blank-50x50

George Liapis, eMarketing at Buldoza S.A.

Hey Jason, now I understand what you meant in the begining - yes, what we did was to improve the experience, "emulating" the first-tap to act like a hover would (practically, making the tablet / mobile experience a click-menu one).

The modern tablets & smartphones which support hover are the Galaxy Note ones - their stylus has proximity sensor, so you can have quite an interesting experience while browsing.

over 2 years ago

Ivan Burmistrov

Ivan Burmistrov, Usability Expert at interUX Usability Engineering Studio OÜ

I would suggest to try hover but with a 250 milliseconds delay.

over 2 years ago

Graham Charlton

Graham Charlton, Editor in Chief at ClickZ Global

@Ivan do you have any examples of sites that do this?

over 2 years ago

Ivan Burmistrov

Ivan Burmistrov, Usability Expert at interUX Usability Engineering Studio OÜ

@Graham:

Example is www.sony.com. A perfect example from the non-web world is Windows 7 taskbar: when you hover the mouse pointer over a *running* application's button in taskbar, Windows 7 shows a small thumbnail of running application. I recommend you to try it and observe all the details of taskbar behaviour. The only mistake they probably did is that their delay of 400 milliseconds may be too long. So I recommend to try 250 milliseconds.

See also section "Right interaction: Timing, feedback and support for natural movement" here: http://neoinsight.com/insights/articles/2011/03/09/mega-menu-success-hinges-on-support-for-top-tasks-and-interaction-details/

I would be happy to provide you with additional explanations if necessary (ivan@interux.com).

over 2 years ago

Simon Woolf

Simon Woolf, developer at PersonalSmall Business

Seem like many websites that use delayed-hover menus (e.g. sony.com, lowes.com) end up leaning too heavily on javscript and forget about graceful degradation. The sony.com navigation is just completely broken without javascript. House of Fraser fares a bit better—the menu buttons become links to nav pages—but the experience is quite a bit worse. (Sites that just use css hover, like Asos, still work fine. You actually can do delayed hover without js using css3, but AFAICT no-one does, likely due to needing to support IE8&9).

We've gone to some lengths to make sure that the Econ site's core navigation works as or nearly as well without javascript as with, both with the old hover menus (easy) and the new click-to-open ones (a little trickier).

(2% of our visitors have javascript disabled—including, bizarrely, 30% of people in France, see https://econsultancy.com/scriptstats —and a further 1.4% have browsers old enough that they may as well have javascript disabled. And a few more have javascript enabled, but for whatever reason it doesn't finish executing - e.g. if the user presses Esc part-way through page load).

over 2 years ago

David Mann

David Mann, Conversion Rate Optimisation Consultant at Davidmannheim.co.uk

A question raised so many a time when looking at IA. In my experience it is dependant on a number of factors, UX being the primary and SEO being the secondary. For example, when looking at your own site (econsultancy) is there a /blog page? If so surely the nav item "Blog" should be clickable? Not necessarily because of the primary factor usability. We can always have a /blog page in existence somewhere, but will those pesky SEO consultants tell us off for not linking to it on the homepage.

Essentially in my opinion and experience it differs from site to site and the usual response of "we need to understand our users and test against them for optimal results - what works for one site might not work for another" That being said, in this instance I also think SEO is an important consideration especially when looking at keyword rich links (/blog not being one of them)

Tricky. Would love to see some facts and figures on this

over 2 years ago

Avatar-blank-50x50

Stuart Neilson, Producer at Rawnet

I must admit on first review of the new Econsultancy site I did think selecting the top level items twice would take me to the category landing page - 1 to display the menu 2 to visit the Blog landing page. This is where I think ASOS have it got quite right on tablet (although their menu still needs to be expanded with more space given for the links).

over 2 years ago

Avatar-blank-50x50

heather m, ui developer at na

I wonder how this works for people with accessibility issues. I tried tabbing the nav, which opens the drop down, but I could not tab through the subnav.

about 2 years ago

Comment
No-profile-pic
Save or Cancel
Daily_pulse_signup_wide

Enjoying this article?

Get more just like this, delivered to your inbox.

Keep up to date with the latest analysis, inspiration and learning from the Econsultancy blog with our free Digital Pulse newsletter. You will receive a hand-picked digest of the latest and greatest articles, as well as snippets of new market data, best practice guides and trends research.