2

Now implementing a new mega-menu. The current mega-menu's submenu options are shown on user cursor hover. Would a more explicit action like mouse click be more appropriate for this (like the example below)?

enter image description here

  • I always thought click is the best choice, even I read a lot of pro/ cons arguments about this. The natural instinct is to click the link to reveal a drop-down menu. – Madalina Taina May 25 at 3:18
4

This is an interesting question.

TL;DR - Personally, I would go with a click because opening a "mega menu" is more of an action.

A good rule of thumb is that you want to keep the distinction between an action (which might be denoted by a mouse click) and interaction (which could be denoted by hover or the like).

Actions make something occur - whether that be changing, adding, deleting or similar. On the other hand, interactions don't imply that something will be changed, added, deleted etc.

Relating to your question, viewing a menu is more of an interaction because you aren't initiating a navigation to anywhere. However, there becomes a point where hovering to show a huge menu can almost be considered an action. For example, on the Microsoft website example you refer to, the menu hides the rest of the page from view - and this could be considered an action because something is being changed. (The user's view)

In conclusion, you should ask yourself whether your "mega menu" is an action or an interaction, and furthering that, whether it changes, adds, deletes or modifies the user's experience in any way. If the user will be initiating an action - use a click. If it is an interaction - use a hover.

2

Click

In this particular case, it would be useful to consider some cons or pitfalls of hover too:

  • False positives: hover actions fires every time the mouse pointer is over the menu. But very often the user does not do this intentionally. The hover area just happens to be along the path the user wants the mouse to go. As @aaron already pointed out in his answer, a mega menu obstructs the rest of the page from view.

    • Non-stickyness: the hover state only persists as long a the mouse is over the object. Please note that any user action with a mouse while in hover is not possible. Your design may not have relevant actions, but think about copy/ paste, screen recording, and other multitasking (eg switch to mail to read the nav path that someone suggested) the user may want to do.

    • False negatives: if the user moves their pointer 1 pixel too far outside the hover item, the item will collapse in. This is not so much an issue for the mega-menu, which has a large hover area when open. But some hover-menus are less forgiving. They frustrate the user with sub-sub-menus, and if the user misses the trajectory from menu to sub-menu, the hover interaction forces them to start again.

I would pose that hover is great for very light interactions, such a button ripple effect, or an animation. For more complex interactions - such as revealing hidden navigation and click options - where the user needs to read, and pause and think, go with click.

  • The false negatives issue can be somewhat mitigated by putting in place a timeout so that the menu doesn’t disappear immediately on mouseout. – Mike Eng May 25 at 17:29
  • @MikeEng, very true but don't you think that if you need to implement a fall-back solution to a problem that doesn't exist with a click then you've already answered your question? – Aaron May 25 at 22:24
  • @Aaron I’m not implying that hover is better in this case. Just wanted to point out that one issue could be mitigated. – Mike Eng May 26 at 3:36
1

Hover!

Hovering is a smoother action for exploring!

It is a smoother and a lighter interaction. It helps you explore and navigate the options faster. Think about it as if you are waving the mouse around to check what's there.

Compare that to clicking:

  • Clicking consists of two actions (hover + click).
  • Clicking is somehow a more assertive action compared to hovering.

Mega-menus are large panels with multiple menus and sub-menus. I would vote for the action that allows for a smoother navigation.

0

Both!

I would expect to have to hover to expand a menu, and to click to go to another page.

The problem with just hovering here is that the user might think they landed on a different page when they accidentally hover over the button.

The solution could possibly be a smaller hover menu which the user can expand by clicking on an "expand" label.

0

How would someone using the keyboard to trigger this hover?

Keyboard enablement really helps disabled people who cannot use a mouse due to mobility or visual issues, however keyboard enablement actually benefits EVERYONE, as there will always be times when it is not possible to use a your mouse, i.e. using your laptop in a place where it is not practical to use a mouse, where your laptop's track pad doesn't give you the accuracy you need.

So always use a click event to trigger behaviour.

  • Couldn't the simulation of a hover be actuated with a keyboard key-press in the same way a click would be simulated? – Aaron Jun 7 at 3:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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