Would You Click This Button?


Would you click this button?

It might depend on what item you are adding to your cart, how much you want the item, etc. The button itself might also make a difference. Let’s call this button, Button A.

As far as buttons go, Button A is a pretty average button. It has hover and focus styles, a “cart” icon, and it’s big enough to click with a mouse or finger. This is the type of dependable button you want most of the time.

It’s solid and you can’t make it much better. Or can you?

Perhaps you can if you play around with the micro-interactions. You can make the button even more clickable.

Imagine: You are online shopping. You hover over the button. Your pulse quickens. You’re unsure if you are going to add the item to your cart. Oh, but you really want it. Ugh, it’s probably too expensive.

Then, you see this (your queue to hover):

Right as you’re about to pull away and forsake this item, you notice something. The button shimmers! At least you think it does.

You spend some more time ogling the button. It looks fun to click. You wonder what will happen when you click it. You forget that clicking the button is a means to an end. Clicking Button B becomes the end. Might as well click it.

Unfortunately, Button B doesn’t have any mesmerizing active styles, but you get the point.1 Button B scores much higher on clickability than Button A because the shimmer casts a tiny amount of doubt on the outcome of “Add to Cart.” It challenges your mental model of all the plain buttons you click every day.

My guess is you are more likely to click or at least spend extra time thinking about clicking Button B, irrespective of the action. Now, if that’s the case, you might want to go make all your buttons act like Button B, but that would be a bad idea.

Remember: Button A is terrifically normal. Most of the time, people will click it without ever paying attention to what it does. You don’t want to make a fuss about normal, every day actions. You want to save Button B for special interactions, where a small nudge might lead to the click you want.2

Micro-interactions can make all the difference.

Now there is only one more thing left to do: Consider Button C. Would you click this button? Is Button C more clickable than Button B?

Note: If you read this post on a mobile device, I recommend you also check it out on a device with a cursor.

  1. In fact, Button B doesn’t even need to do anything different from Button A when clicked. It just needs to make you think it will.
  2. Please use responsibly and be humane about influencing people’s behavior.