For example:

screen capture

My explanation of what's happening in the gif: When a title has been hovered for a short amount of time, that title expands, pushing other content off the screen and grabbing the user's attention.

I've read that taking actions on hover is not desirable, rather only take action when the user takes explicit action (such as a click). Is that a principle and would it apply in this case?

  • 2
    It's really bad. If I had the time I'd put together an explanation why it's so bad, but I'll just put my 2 cents in the form of a comment. Hover actions aren't necessarily bad but they must be subtle. Expanding and moving things around as a result of hover is too much. Don't do it.
    – obelia
    Jul 5 '15 at 17:13
  • I recently was delightfully suprised that after scrolling it wouldn't register my mouse as hovering, so if I had my mouse over the screen and scrolled down the list, it wouldn't expand anything until I move the mouse again. Jul 6 '15 at 1:43

Is hover the only way you can find out that information? Would someone on a tablet, or someone using keyboard without a mouse be able to find that full information without having to select that item fully?

If hover is just one way to display it - an enhancement, so to speak - then it is OK. But if you have to use your mouse and hover over the item in order to find out the details, or you have to actually select and start watching the film before you get those details, then no, it isn't OK.

Never penalise people who can't / don't use a mouse. Use hover for enhancements, but never for the way.

  • Clearly, Netflix has a touch optimized experience for those devices. This is desktop. If you're trying to use Netflix (or any media site) strictly via keyboard, disappointment will follow. But who would do that? Really, what's the scenario and how common is it? Aug 4 '15 at 20:34
  • @plainclothes many people use keyboard. The great thing about technology is that it can be inclusive for anyone. To basically say "I don't care about people unless they are using a mouse" is kind of ignorant.
    – JonW
    Aug 4 '15 at 22:01
  • I use the keyboard all day long (Quicksilver is my friend). But a site like Netflix isn't really optimized for that and it's not realistic to expect it to be. You can't solve for every use case every time -- to say otherwise is ignorant. Aug 4 '15 at 22:04
  • @plainclothes Netflix is primarily a passive experience - some menus that take you to a video where you don't have to interact with it again at all. It can absolutely, and should be, totally keyboard accessible. Why would anyone think it acceptable for a site like that to discriminate against people with disabilities?
    – JonW
    Aug 4 '15 at 22:12
  • I love that line of reasoning: "This fringe case didn't get priority on their road map, therefore they are bigots". Good luck with that. Aug 4 '15 at 22:24

As always it depends. The reason it's not a best practice is because a hover state can be attained in multiple unintended ways, including scrolling as in the example you listed.

In the case of Netflix, they undoubtedly knew the consequences. That's likely why the hover state has such a short timer before activating, as well as why each tile only expands slightly. That way users get additional information on hover without significantly increasing the error rate (through bad accidental clicks).

Furthermore, I'd postulate that Netflix wouldn't mind if users made an error too much. They might find a show/movie they want to watch. The company's model already has users paying before using the service and no one will seriously leave because they accidentally started playing the wrong content. Is it an intended "happy accident"? Probably not, but I wouldn't doubt that if Netflix were to attempt to do so, they would have a mechanism to track how often that happens, along with the rate of continued viewing.


Dark patterns FTW?

The problem with moving things around on hover is that the targets jump. This isn't really a problem for the item being expanded. As Jamezrp pointed out, that may be intentional. Maybe Netflix is using a dark pattern to try to increase engagement. I say dark because it's not an ideal interaction, but Netflix may have found the "negative" side effect to work in their or their users' favor.

Rule of thumb

In general, you don't want to do this kind of expansion because it creates a certain amount of disorientation. If the thing being expanded (intentionally or not) is just one option among many in the user's consideration set, then they'll have to stumble a bit if they decide to try another option before committing to the click.

A better option

If you're tempted to use a hover pattern (or it's tap equivalent in a touch UI) to provide expanded info, there is a better way. Rather than distorting the whole environment, just change the state of the item in question. In the Netflix example, the additional info could simply be layered over the cover image without any expansion. The cover attracted attention and now it becomes simply a backdrop.

So this ...

Standard cover

Becomes this ...

Expanded entry info without size change

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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