Should nav items be hover or click to activate dropdown?

Question

When theres a dropdown option, should users expect to hover on it or click on it?

I have seen this done either way.

I recently visited this lightspeed's website. They have a dropdown menu for their Product page. I noticed me and other people are clicking on product while its suppose to be a hover. It will bounce me to the product page and I continue to click on the product page another time before I realize I'll need to hover over it for a second before selecting another option.

https://www.lightspeedhq.com/products/

Is there a standard in doing this (hover or click?). Or maybe lightspeed just has a slow ui transition?

Answer 1

Short answer

Don't user hover.

Long answer

While I don't think it will make too much difference in 2016 as web users are much more familiar with these menus and quickly work it out on a site by site basis, there does appear to be a movement away from using hover menus full stop. How much of this is due to the growth of mobile devices is open to debate. Regardless, I have included some references for further reading on this topic if you're interested:

• 5 Alternatives to Drop-Down Hover Menus
• What are We To Do About Hover Drop Down Menus?
• Hover is dead, long live hover
• Why Hover Menus Do Users More Harm Than Good

Also, if you're interested, The Navigation Treasure Trove: 37 Menu Usability Resources is an interesting read.

Answer 2

You cannot use mouse-hover on touch screens like tablets and large smartphones, and mouse-hover presents accessibility challenges. Hover also frustrates people if it is triggered by accident, or involves unknown interactions, i.e. hover for 1 second, and can be difficult to use with precision if the hover region is small, etc.

So it is much better to use an explicit mouse-click, coupled with the cursor icon changing to a pointer icon (to identify the clickable object, i.e. affordance), which ensures you automatically support touch and accessibility.

Answer 3

That's a pretty bad IxD. Hovers/tooltips should by shown and hidden with the same method used to enter/exit the area. So when the mouse leaves, it should go back to its prior state.

I try to recommend against using hovers in mega menus. Hovering introduces extra things to consider, like timing of the hover to trigger the content to appear. Hover also opens up a can of worms when it comes to ADA standards and accessibility. Also, some users that are rushing will click before the hover can be consumed.

Answer 4

I'm against hover because it crushes consistency and responsive methodology. Keeping things consistent means whether we're on a large or small device, we click to reveal submenu items because touch devices can't effectively hover. The most consistent approach is to avoid hover triggers, actions, and state changes whenever possible and on all devices/breakpoints.

That interactive consistency also ensures that visitors who become accustomed to interacting with the site on one device aren't surprised if they need to use the site on another device.

This consistent approach also affirms the responsive methodology of not penalizing or segmenting users based on their device or its capabilities. It ends up being a slippery slope and can quickly devolve into "let's play music on desktops and change the color of body text on mobile size devices" to the point that the same site becomes unrecognizable across multiple devices. Some might advocate for "hover on desktops" but today's devices have blurred the definition of "desktops." It once meant "non-touch devices" but we now have touch devices with desktop resolutions and we also have desktops with touch screens.

There are lots of hidden alleys but it's tough to get lost if you keep your interactions consistent.

Answer 5

Clicking is probably the most accessible, usable and consistent approach.

It's important however to distinguish the primary navigation items that have dropdowns from the items that do not, as can be seen in the OP's screenshot.

If all primary nav items looked the same then browsing the navigation would be a lottery  -  sometimes you'll end up at the link on the primary navigation item, sometimes you'll trigger a dropdown.