Use Responsive Buttons - Spiralyze

Use Responsive Buttons

Usability Medium Priority 65% Adoption 2 Seconds Saved

Reduce friction and boost usability by making sure buttons provide feedback – give your users a sense of accomplishment with each click.
Conversion Opportunity 0.1%

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.

Hover state, then click. Satisfying!

Usage

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.

Toys R Us does not implement responsive buttons.

Bass Pro Shops implements buttons that change color on hover, and are highlighted with a click.

Adoption

0
20%
40%
60%
80%
100%

Use Responsive Buttons has an 65% adoption rate among our benchmark group.

Best Practices

Prominent Buttons

Make sure each button stands out on the page. Users should never have to hunt down the "Make Purchase" button.

Follow Convention

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.

Examples

Good

Bass Pro Shops Example

Bass Pro Shops implements buttons that change color on hover, and are highlighted with a click.

Bad

Toys R Us Example

Toys-R-Us uses flat, unresponsive buttons.