Hover is dead. Long live hover.

During February 2013, the web underwent a huge change in how it was used and over three years later it is still a well guarded secret from engineers and designers alike. That month, two laptops hit the market: The Chromebook Pixel and the Microsoft Surface. These were the first mainstream devices to come with touch screen displays in a laptop format. Since then, the 2-in-1 has become a mainstay and, with them, the mouse hover has become largely unreliable.

Two and a half years ago, I was doing user research sessions on a desktop web product that allowed readers to comment on a news article inline. We’d observed tons of people of all ages and kinds who would scan large bodies of text by hovering over each line with their mouse cursor or even by highlighting the text they’d already completed. With this in mind, we decided make our product invisible until a person hovered over any given paragraph. It worked perfectly… Until one man brought in the original Surface Pro.

The Surface Pro is equipped with a touchpad (with USB support for a mouse) and a touchscreen. The man would read the article like he would on a tablet or a phone, flicking his finger along the screen to scroll.

This meant he couldn’t use our product. He’d never see it. Even if he knew where to look, he physically couldn’t make the UI appear.

This baffled our Mac-centric team, and eventually we discarded this run-in as a one-off data point. The original Surface wasn’t doing great in the market at the time we hoped this issue would just disappear.

It didn’t…

How to use hover in a brave, new world

Since then, the number of Windows and Chromebook laptops that offer touch screens has exploded. Every major PC manufacturer now sells a 2-in-1 tablet laptop device (including  Apple). The IDC claims 2-in-1 tablets will make up 30 percent of all tablets shipped by 2020.

When designers and engineers set out to build something for desktop web, they make assumptions about the capabilities of these devices. A typical UI guide swaps out large clunky buttons for smaller ones, increases information density on-screen, and adds easy to access hover capabilities. This needs to be rethought in a touch-enabled world.

+ Do

Hover actions are still very important. Mice and trackpads aren’t going anywhere yet. Using the hover action for them can give important user feedback about whether something is clickable or what the outcome may be.

• Do use hover as clear feedback on clickable elements for people using a mouse.
• Do use hover to trigger shortcut actions, but make sure they are optional.
• Always have a primary way to do the same actions with your fingers.

At Instacart, our product cards have important actions that appear on hover. You can also click the card to bring up the full detail view with the same actions.

× Don’t

Don’t use hover as the primary action to trigger anything essential. Ever.
For 👏🏼 the 👏🏼 rest 👏🏼 of 👏🏼 your 👏🏼 life.

The next time you read a feedback email from someone who uses your product telling you they cannot do a primary action from their laptop, listen to them. It may lead you to killing hover once and for all.