Hover vs click on mega menu

Question

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)?

Answer 1

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.

Answer 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.

Answer 3

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.

Answer 4

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.

Answer 5

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.