Development Design Projects Contact Home

3 rules for how to always PUSH the right BUTTONS

Let me tell you a short story.

Buttons are important to UI. 👍

The end.

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? too many buttons ux 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. mixed inputs and buttons ux 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. button types ux 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. bad ux in buttons

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. make your buttons big 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. 🤣

Conclusion

There's of course more to buttons and you should definitely think about making a consistent design system.

people pushing buttons

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.

Privacy policy

Also read

Design + UX

How to start a design system - the basics

Design systems may sound scary for an early stage company, but trust me they can have a huge impact on both your MVP and final product. They bring quality, consistency and improve execution speed tremendously. So let's talk about the easy steps to creating a design system.

Design + UX

4 Easy tips for creating much BETTER online forms

Forms are one of the main tools of conversion that we can use online. Yet they're often suffering from poor design that affects that conversion. Let's explore a couple of ways to make your forms better the easy way. If you ever wondered "How can I improve my forms?" - this should help.

We gained our expertise by working for clients such as

Viacom logo
mBank logo
Samsung logo
Payback logo
Analizy logo
Kup Fundusz logo
Seachange logo
Nickelodeon logo
Comedy Central logo
MTV logo
Paramount logo
Viva logo
Szkoła Wyższa Psychologii Społecznej logo
Sage logo
Renault logo
BWM logo
Multikino logo
Oriflame logo
Analizy logo
Kup Fundusz logo
Paramount logo
Viva logo
/user/themes/hype4-theme/img/2019/

Let's talk about
what you want to create.

Contact us! We will get back to you shortly:

Additional contact:

Michał Malewicz

[email protected]

Szymon Adamiak

[email protected]