Usability Medium Priority 65% Adoption 2 Seconds Saved
Have you ever used a touchscreen – maybe at an ATM or a grocery self-checkout – and nothing happens after you press a button? It seems frozen. You get annoyed. The button didn’t even react to your press. Maybe after a moment’s delay it works, but you’re already irritated.
That irritation – and the resulting friction - can be mitigated by implementing buttons with feedback. Show a hover state – something to indicate “Yes, this is a button, click it!” when the cursor is on the button.
Show a nice state change when they click it, too! Users with slow internet speeds might not immediately jump to the next step – let them know that, yes, their click was recognized.
Design convention is to have the hover state be something simple, like a small color shade change. Just enough to let users know that the website is reacting to them and working smoothly.
Upon being clicked, many reactive buttons add a shadow effect of some sort, in a way that resembles clicking a physical button. It’s a satisfying, rewarding click.
Use Responsive Buttons has an 65% adoption rate among our benchmark group.
Make sure each button stands out on the page. Users should never have to hunt down the "Make Purchase" button.
As with most other aspects of web design, it's always good to follow convention. Hover states only need to be a small color change or border glow, and clicks should mimic a physical button being pressed.