Member-only story
Mobile doesn’t have hover, dude!
Ideas to cope with the absence of hover
I lost count of how many times I needed to say “Mobile doesn’t have hover” in a meeting discussing a project’s plan.
I already saw people defending the idea of hovering on mobile when the user scrolls the screen. The behavior of dragging a cursor with the mouse is very different from the scroll behavior. If the user activates a hover because of it, it would be by accident which is bad, since we design things to make the users have control of what they want to do.
Also, a button with hover on mobile can make the user need to tap twice to activate the button function. Terrible.
I’m very critical of using hover even on the desktop because its real reason for use can be easily overlooked. But if used correctly, it can be useful.
On the desktop, a lot of interactions can rely on the hover state. Hover can be used to indicate that an element is clickable, to trigger an animation, or to show up some complementary hidden information.
There are cases that we need to adapt the design from desktop to mobile or make it work better on smaller devices.
Here I won’t focus on good practices of hover in general, but it can be mentioned if it influences mobile adaptation necessity.
Below I list the most common solutions I’ve been using:
