:hover should be dead

:hover’s days are numbered. It has little time left in this world.

I am serious.

Here are the main reasons why:

• It doesn’t exist on touch devices
• It isn’t really accessible
• It often creates frustrating interactions

Touch Devices

I said touch devices, not mobile, for a reason. Touch devices are expanding out of our phones and into our environment at an increasing rate. They are also expanding into our laptops and desktops. So saying your "target market" is desktop doesn’t mean you can use hover.

Because that guy on a Dell Inspiron that he paid $650 for is also going to struggle with them when he touches your website with his fingers. He might switch back to his touchpad... but he also might just leave frustrated he can’t figure out how to open your menu.

Accessibility

Keyboard users don’t get hover. They get active but not hover. That’s a big deal. Screen readers also aren’t the best with faking hover if they do it at all. They are great with active though.

Frustrating Interactions

Just think about nested hover state menus. There is a reason desktop applications require you to click on at least that first level of menus. Because accidentally moving your mouse off of the menu you just opened shouldn’t close it.

This could have landed under accessibility as well. Imagine for a moment browsing your site with a hand that has a tremor. Think about how hard your menu would be for me if my hand shook.

UX Movement has some nice images and discussion around "hover tunnels" and why they are a huge problem for users.

death to hover

So let’s get rid of hover. It doesn’t actually make anything better and it makes lots of things worse. It is a "clever" interaction not a good one.

If you enjoyed this article please share it! I also have a newsletter that you might enjoy as well. Thanks! -Daniel