0

Thinking only in the scope of a desktop website, I'm wondering about the discoverability of mouse hover functionality.

Allow me to contrive a scenario to explain my question: Let's say I'm designing a web page for a restaurant like the one below:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

This UI is fairly basic with only four main card-style UI elements. Let's say also that, on mouse hover, I have the cards expand and show, say, nutrition facts below each image and description. Besides the nav bar, there's nothing that can be interacted with, and the hover target area is the entire card.

My question is this: Is hover functionality in desktop websites more discoverable on websites with very simple UIs?

(Please don't develop your answers directly for this example, but rather towards the concept itself: hover functionality in simple desktop UIs.)

2
  • By 'more reasonable and safer' do you mean the hover states be more obvious to users? That is, the hover states will be more obvious if the rest of the UI is relatively simple? Commented Jun 16, 2016 at 21:41
  • I'm wondering if hover states would be more discoverable on a site that has only a few large-target areas (in this contrived example, it would be the four "cards" that would exhibit an expanded hover state). I have updated the question accordingly. Commented Jun 16, 2016 at 21:44

2 Answers 2

1

In short, yes, hover states will be more discoverable on a site that has fewer elements.

Imagine these two scenarios:

  1. A full-screen page with a single element in the center with a hover state
  2. A full-screen page with a 16x16 grid of elements, of which only 2 elements have a hover state

Being an interactive medium a user's instinct is to interact with something on the page. Assuming a user with no accessibility issues (or your page is aria compliant):

  • In case 1, there is a nearly 100% chance the user will interact with the hoverable element.

  • In case 2, with more elements there is a smaller chance a user will interact with the hoverable elements. By giving the user more choices you've reduced the likelihood your element will be interacted with.

Even worse, given too many choices a user may be unable to choose what to do and take no action at all. This is how I feel every time I visit weather.com.

I believe there's some overlap here with the famous Jam Study where shoppers were 10x more likely to purchase a jam when the number of jam flavors was reduced from 24 to 6.

A more recent analysis discovered that reducing options can boost sales (or engagement in this case):

  • When people want to make a quick and easy choice (effort-minimizing goal)
  • When making the right choice matters/you are selling complex products (the decision task is difficult)
  • When you show options that are difficult to compare (greater choice set complexity)
  • When your customers are unclear about their preferences (higher preference uncertainty)

So while it depends on the use/implementation, in general fewer choices/elements will result in a higher percent of engagement for an element.

0

Hover is certainly discoverable if the user might expect that clicking on the element would give more information.

In your design, a user who wants more information about a menu item is very likely to try clicking on the item, or its title. Such an action would often lead to more information. So, they would discover the hover functionality (given your caveat of desktop only, of course).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.