The “Hover Effect” for Mobile Buttons

A typical interface screen has many elements on it. Hover effects inform users what they can interact with by providing visual feedback on buttons. But there’s a problem — hover effects are for desktop apps, not mobile apps.

There are no mouse devices on mobile, so users don’t have the luxury of using hover effects. Using a hover effect on mobile apps causes buttons to stay stuck in the hovered state when tapped. This stickiness not only confuses users, but it frustrates them when they’re forced to double-tap buttons to initiate an action.

Image for post
Image for post

Removing the sticky hover effect isn’t enough. Mobile users need visual feedback because mistapping buttons is a common problem. The target sizes of mobile buttons are smaller than desktop ones and more challenging to hit. Not only that but sometimes their finger will hit a target with different surface area pressure that won’t always trigger the action.

The hover effect for mobile buttons is a ripple effect. A ripple effect provides the visual feedback users need when they tap a button. Users see a ripple animation on the button that assures them their finger hit the target accurately. If they don’t see a ripple effect, they know they mistapped the button. The visual feedback gives them immediate confirmation of an accurate tap so they don’t end up waiting and wondering why there’s no response if they mistap.

Image for post
Image for post

A ripple animation is intuitive because it mimics the touching of water. When you throw a stone into a pond, there’s a ripple on the surface that allows you to see where it landed. The property of water provides visual feedback, just like a ripple effect.

It’s important to convert your desktop hover effects to mobile ripple effects. Doing so gives users certainty and assurance that they’re hitting their target after a tap attempt. It’s not quite like a hover effect, but it provides the same visual feedback users need when they interact with buttons.

Originally published at https://uxmovement.com on August 29, 2019.

Written by

There’s a good and bad way to design user interfaces. Our publication shows you which way gives the best user experience. https://uxmovement.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store