There are many times when designing for interaction where you need to make a decision between hover and click to take action. Your choice can make the difference between a good and bad user experience.

There are different types of interactions that make sense to apply on hover, and there are others that make sense to apply on a click. Typically you want to give the user a hint that there is some action to take when they hover(tooltip, color change, etc.). You want to let the user make the decision to take that action or not, giving them more control over their experience.

Of course there are exclusions to this, a drop down menu in your main navigation is one of them. Though if you are using a multi-tiered drop down, a click based functionality might be a better choice due to added complexity, giving more margin of error on the users end.

Adobe’s homepage has examples of both good and bad user experience when it comes to hover vs. click interaction.

The good:

Submenu drop downs on hover in the main nav. Drop down menus come in many varieties, most on hover, some on click. Here Adobe offers their submenu options on hover, if they were using a more complex menu structure with more than 1 tier then hover might not be the best interaction for this navigation. They stick with a commonly understood convention and execute it well. The addition of an arrow or some form of notifying the user that there is a dropdown menu might be a possible option for them as well.

The bad:

Adobe’s Products and solutions accordion changes on hover. This is not so good, it really catches the user off guard. Typically accordions are set to reveal their hidden content when the user clicks on the label, not when the user hovers. As you can see, a mere moving of the cursor to get out of the content’s way can trigger the next chunk of info to show, the user is not taking action to get this information, it is just a mistake. A better use of this feature/tool would be to set a hover state on the label, a slightly lighter color grey. This would notify the user that there is an option to click and reveal more info, but it lets the user make that decision for themselves.

In summary:

A few things to consider when in the position to make the choice between hover vs. click:

Related Reading: