UI fundamentals · 6 min read
Buttons that make sense
Teach people what to click first with clear button weights and honest labels.
Explained like for kids
Buttons are like classroom signs. The big red “Fire drill exit” should look more important than “Hang up coats.” If every button shouts the same way, nobody knows where to go.
Examples
Each example has a kid-friendly “why,” then a clear Don't and Do with a real UI mock so you can see the difference.
One star of the show
Like for kids: In a play, one actor stands in the spotlight. If everyone wears a spotlight, the story gets confusing.
Don’t
Two or three equally loud primary buttons
People freeze. “Which one is the real next step?”
Which one is the main action?
Do
One primary button; quieter styles for the rest
Hierarchy guides the eye to the most important action.
Say what the button does
Like for kids: “OK” is like saying “thing.” “Send invitation” tells you exactly what happens when you press it.
Don’t
Vague labels: OK, Submit, Yes
People must re-read the page to guess the outcome.
Invite Jon to edit this article?
Do
Action labels: “Create account”, “Add to cart”
The button itself explains the result. Faster and safer.
Invite Jon to edit this article?
Big enough to tap
Like for kids: Tiny buttons on a phone are like trying to press a doorbell with oven mitts.
Don’t
Tiny hit areas under ~44×44 points
Miss-taps, rage taps, accidental neighbors.
Easy to miss-tap on a phone
Do
Comfortable target size and clear spacing
Fingers (and mice) need room. Accuracy goes up.
~44pt tall, with breathing room
Friction for scary actions
Like for kids: Deleting your whole Lego city should not be as easy as turning on a lamp.
Don’t
“Delete account” looking like a normal primary button
One wrong tap can cause big damage.
Scary action is the loudest button
Do
Confirm step or quieter style for destructive actions
A little friction protects people from accidents.
Delete your account?
This removes your projects forever. Type DELETE to confirm.
Remember these
- Use three weights: primary, secondary, tertiary.
- Only one primary button per view for the main action.
- Button text should say what happens (“Save draft”, not “OK”).
- Make destructive actions harder to trigger by accident.
Inspired by Practical UI — Buttons chapter (Adham Dannaway). Rewritten in plain language for learning — not a reprint of the originals.