May 28 2010

Hover vs. Click: When to Use & Why

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:

  • Does your decision allow the user to be in control of their experience?
  • Are you going against a commonly understood method of interaction?
  • Are you forcing the information on the user when they are not requesting it?

Related Reading:

About the Author:

John is a web developer at digital-telepathy. He graduated with a Bachelor of Science degree in Media Arts with an emphasis in Web Design from Platt College of Graphic Design, San Diego and graduated with honors at the top of his class. During his education he interned at digital-telepathy as a developer/support specialist, which then lead to a full-time position upon graduation.On a day to day basis he is always learning and growing in his knowledge of the web, which is a must! When not working John enjoys brewing beer, playing games, baking bread, and most of all spending time with his wife Amy and daughter Eliana.Find him on Google+

Leave a Response

3 Responses

  1. May 28 2010
    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.

  2. May 31 2010
    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.

  3. Jun 25 2010
    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: http://www.erinlynnyoung.com/285/usability-rollover-hover-interactions/

  4. Pingback: » touching vs hover – Tom Altman’s Wedia Conversation