Design + UX
3 rules for how to always PUSH the right BUTTONS
Let me tell you a short story.
Buttons are important to UI. 👍
See, told you it was short! 😇
But in all seriousness there are only a few simple rules to follow to do buttons right. So why does most companies fail to follow them? Here's one example from some made-up bad site that doesn't exist. (just kidding, it DOES exist 😂).
Not having a design system or even a set of consistent rules is one thing. But do you think those 6 buttons on ONE page are easy to understand? First of all there are different font sizes. Then different borders and border radiuses. Some buttons are all CAPS, while others are not. Some have shadows. Some don't.
See a pattern here? (that's rhetorical - there is none :))
And then somewhere close to all those buttons you stumble upon this mysterious element. What is it?
Is it a portal to another dimension? (not likely). Is it a button with no label? Maybe.
It's an input box. With. NO. LABEL. And it kind of looks like a grey button.
Now you should start seeing a pattern here. Let's explore buttons more in-depth. 🚀
1. Consistency and definition
Ok. I get it. You're not ready to start a design system yet. That's fine (no it's not 😎).
Then here's a quick solution. Define JUST THREE types of buttons and ONLY use those three everywhere. Primary is your main, positive action like "Save", "Continue" or "Checkout". Secondary is a less important option like "Continue shopping" or "See more" Tertiary is the least imporant and/or negative option like "Cancel" or "Skip".
They should all have the same "roundness" to their borders and same font size. Aim for consistency!
Problem solved. 🎉 But try to think about having a proper design system in the future.
2. Button placement
If you have two options next to one another DON'T use the same type of button for both. If they're equally important then decide which one you want to promote.
That was easy.
3. Button size
Most interfaces are now used both on computer and on phones. While there is a difference between the cursor and a finger, you should actually aim for a middle ground. That's because if buttons are BIG enough (think 44p x 44p or larger) they're both easy to tap on with your finger and to find them with your cursor.
Avoid super small buttons wherever possible. (there are some exceptions here like tag lists on desktop).
Nothing beats a game of trying to tap a super small button on a mobile device and succeeding after a couple of tries. 🤣
There's of course more to buttons and you should definitely think about making a consistent design system.
But even those small fixes will decrease the frustration and make your users happier. It's like a touch of ... a button.
And that's the whole point.
Stay up to date!
Sign up for our bi-weekly newsletter to get extra tips and tricks on how to make better products.
We gained our expertise by working for clients such as