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:

  • Raymond Lopez

    agh!!! That Adobe hover accordion is so annoying. Especially when you don’t aim the right slide, you have to go through the animation and try to hover over the slide that you want to see. Good luck with that!
    Thanks for posting this up John.

  • Deb

    We creators often fill websites chock-a-block with so many stuff, slideshows, galleries, tabs, lightboxes and whatnot. I often see my non-tech father stumbling to decide where to click next or go next to find the information he is looking for on that site, failing to distinguish between a block of Advert and actual content and sometimes a page not giving a clear idea of about what the site is. As a result he does not go beyond his safe territory of his bank & employer’s websites.

    For normal people using internet once in 2/3 weeks the web is still like a unknown jungle, where to go what to do like questions always hound them & ultimately limits their activities on the web.

    I often wonder if there should be 2 versions of a website, one for the techxperts who made the site themselves & another for normal folks who cant predict there is more content inside those inactive tabbed-content-areas or hidden content-on-hover boxes.

    Thanks for writing this post. I’m not a designer but curious on the subject of ‘browsing web pages easily’. Also could you write a comparison or observation sort of post which type of ‘contact-us’ page works best for what kinds of users? Like certain group of people can just copy your email ID & proceed to do their stuff, while others need a form to contact you.

  • Erin Young

    Good analysis. I think there are 4 key guidelines for layers that appear on hover or rollover:
    – Design a control area is large and clearly delineated.
    – Be sure to allow that the control area allows the user to mouse around within on state.
    – Keep interactions within the hover as simple as possible.
    – Put the hover on a slight delay.

    Here is the full article:

  • Pingback: » touching vs hover – Tom Altman’s Wedia Conversation()