6

I have been doing some research on this site regarding whether a mega menu on a web site should activate/deactivate via hover or click.

I found a question with good answers regarding actuating the menu.

What I want to know is whether a menu that was opened via click should close via click, or whether the mouse leaving the mega menu area is more usable (i.e. click to activate, mouseout to de-activate)?

2
  • How do I 'mouseout' if I opened the menu on my iPad with a press of the menu option?
    – JonW
    Jul 2, 2013 at 6:14
  • I should clarify that this is for desktop, good point. In mobile the navigation is different anyway since the mega menu as a multi-column element doesn't translate easily Jul 2, 2013 at 15:50

9 Answers 9

8

Mega menu contains a lot of information and user probably is under significant mental load while working with it. So if random mouseouts close the menu the task flow is broken and it's very annoying for user to re-start the work again.

So I think it's reasonable to close mega menus onclick as well as onclick at outside menu area. These actions reflect the user intention in more obvious way then just mouseout.

This question leads me to the rule: the more complex or important interaction is the more protected it should be, considering Murphy's law: "Anything that can go wrong, will go wrong".

3
  • Alexey, don't you think clicking outside the menu area is a recipe for trouble? Given you quote Murphy law, surely the user will click on something they don't mean to?
    – Izhaki
    Jul 2, 2013 at 0:32
  • 1
    I don't think so. First, it's familiar to user, because desktop applications' menu have same behaviour. Second, mouse click is more intended action, although it could happen accidentally sometimes. Intended click outside a menu could be considered as Cancel or Close action. And when you really need some mandatory user action it's better to use modal dialog rather than menu. Jul 2, 2013 at 2:31
  • I agree with Alexey, mouseouts are more likely to happen than onclicks are
    – deemel
    Jul 2, 2013 at 11:48
4

I haven't been able to find sources for this, but my gut feel is that people expect complementary actions to mirror each other.

existing examples:

  • move your arm towards you to pull open a door, and away from you to push it closed
  • hover on a link to activate the underline, and mouse away to get rid of it
  • mouse to the edge of the window to bring up a hidden element in fullscreen mode, and mouse away to hide it again
  • depress a button to switch something on, and pop it out again (with another press) to switch it off

A menu opened with a click would probably be expected to close with a click too.

2
  • To use your first example, you turn a door nob to open it but to close you just push the door closed (turning the knob again isn't required). I think that's kind of what a click to open mouseout to close mirrors? Jun 28, 2013 at 15:24
  • I turn the knob again when I close doors...it goes like this: 1. Turn clockwise to open and pull door towards me; 2. Hold hand at that position while door is open (talking to someone outside or something); 3. Release (=turn anticlockwise) to close after pushing the door back towards the frame. Jul 1, 2013 at 1:08
3

There are lots of issues with mouseout / hover (touch-screen users, keyboard only users etc) so clicking to open / close is a sensible way to negate many of these issues.

If you're concerned that clicking to close isn't as usable as mouse-out (possibly because it's not as obvious that you can click to close something in the same way that clicking to open something is) then you should add a 'Close' link into the menu item itself.

This aids not only the usability - as it makes it clearer how to close the menu - but also makes it a bit more accessible for keyboard users as they now have a way to close the menu without having to use the mouse or without forcing them to have to select a navigation menu option.

You don't even really have to restrict the close click to that link either, yes, clicking it should close the menu, but you can also hook the close into just a click outside the menu to trigger the same functionality.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

3
  • I was thinking about having the menu close if the user clicked the parent menu item or anywhere outside the menu but an explicit close is a good idea as well. I suppose there isn't any real issue with giving three paths to task completion? Jul 2, 2013 at 15:52
  • 1
    my only reservation about having a click to close on the menu item itself is that in several sites I've seen the click to a primary menu item when the menu itself is already open acts as a way of opening the top-level landing page - in a sense a double-click on a menu. However I haven't done much reading / experimenting about what the expected behaviour is when clicking on an already-open menu item so you might be safe to go with that.
    – JonW
    Jul 2, 2013 at 15:58
  • 1
    I am planning on trying a few different variations and then test with some users and see if they have any preference--thanks! Jul 2, 2013 at 16:02
1

In my opinion, it makes sense to have the menu open onclick and close onclick. Similar to a toggle or a light switch, it follows a simple rule of an action causing a reaction and the same action reversing it.

It's also conventional to close a dropdown menu or modal by clicking outside the active area. Since clicking is an intentional action, closing the mega menu even for an outside click seems logical.

1

Why not both? Of course if the user clicks outside the menu you should close it right away. If the user hovers outside the menu, however, this may or may not be "proof positive" that they were finished. The solution is to close immediately on click and close after a short delay on mouse out.

Obviously the timing of this delay is important. If the delay is too short, you still frustrate users who accidentally mouse out of the menu when making a selection. If the delay is too long, the site will feel slow and the interaction may confuse users. The size/complexity of your menu and specifics about your users will guide the delay time.

0

Just additional points to consider:

A particular desktop application I use has a menu that opens on click but closes on mouse out. While it does not have web-style mega menus, the menu and sub-menus can include upwards of 30 items. I cannot even count the times the menu closed after I navigated out accidentally by a few pixels - an especially annoying thing if you spend 8 second to navigate to a level 3 sub menu (with scroll etc). For this very reason menus on the Mac do not close on mouse out.

But, with mega menus the menu area is rather big and you should really ask yourself "What is the chance the user will accidentally hover out"?

0

Don't forget about accessibility issues as well. If the menu only opens on click, that means there isn't a top level link there. That then means that a user using a screen reader and/or keyboard only may have to traverse every mega menu to get to where they want to go which can be quite the burden in certain situations.

I'd strongly suggest:

  • make sure the trigger links are truly links that go to high level pages on the site
  • have the mega menu appear on hover, and close on mouseout
  • make sure you can open the menus via the keyboard (which wouldn't have a hover interaction).

Take a look at what target.com does with their mega menu.

2
  • You cite accessibility as a consideration by then also suggest having the menu open on hover - something that isn't an accessible method of interaction.
    – JonW
    Jul 2, 2013 at 6:07
  • @JonW the 3rd bullet point addresses that. Look at the Target site for an example.
    – DA01
    Jul 2, 2013 at 15:44
0

As a savvy web user, I expect drop-down menus to only close whenever I hover outside of them; I don't expect them to require a mouse-click to close.

I know that opinions are frowned upon here, but the 'right' answer is whatever the majority of your users expect. I believe that most users would have the same expectations as me. You could also do a survey, informal or more serious, of stakeholders to get an idea to answer this question.

0

I know this is a closed question, but I thought I'd throw my two cents in.

I was really surprised to find my favorite implementation at the visa branding website (http://corporate.visa.com/newsroom/visa-logos-and-images.shtml)

The menus appear on mouseover and begin to fade on mouseout, but come back into full opacity if the user goes back into them before the animation has ended.

It's non-invasive, it looks nice, and there's little chance of you losing your spot. It can also be achieved with pure css in modern browsers.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.