Hey, welcome back!
After a comprehensive look into some of the most common UX psychology principles, today we’re kicking off a series on one of the simplest elements (or so they say) in any UI—buttons.
Now, you might think, “What’s there to discuss about buttons?”
But trust me, there’s so much more beneath the surface.
Designing an effective button requires a wealth of UX knowledge.
How do we decide how it should look? 💭
Where should we place it? 💭
What copy should it have? 💭
How do we differentiate an action button from a destructive one? 💭
And when is having too many buttons on one screen simply an overkill? 💭
These are the fascinating questions I love to mull over when designing buttons.
If you’re someone who enjoys dissecting things, understanding why we do what we do, and discovering how to make things just perfect, you’re in for a treat.
In this series, I’ll answer all these questions in depth.
But today, let’s start with the basics.
What’s Inside:
- Consistency and Recognisability
- Establishing Visual Hierarchy (Primary vs. Secondary Actions)
- Differentiating Buttons from Links
Buttons might seem like minor UI elements, but trust me, there’s more to it than meets the eye.
Designing effective buttons requires careful thought.
Every critical action—from purchasing a product and submitting a form to navigating to the next step—relies on buttons.
Research shows that improving button design can significantly boost overall usability and even conversion rates.
There was one famous case study involving a large retailer that revamped a confusing “Register” button into a clearer “Continue” button, allowing purchases without forced registration.
The result was an annual revenue increase of $300 million!
It’s a great reminder that effective button design isn’t just about aesthetics, but it’s closely linked to cognitive psychology, user trust, and business outcomes.
So, today, we’ll dive into how to maintain visual consistency in button design, establish a hierarchy of actions, and properly distinguish buttons from links.
And, of course, we’ll reflect on why these details matter.
Consistency and Recognisability
Users rely on visual signifiers.
If a button doesn’t look like a button, people might simply miss it or hesitate to click.
In the current trend towards minimalist, “flat” design, many interfaces have stripped away traditional signifiers like shadows, outlines, or gradients.
But this approach doesn’t always work.
In fact, research by the Nielsen Norman Group shows that overly flat designs can suffer from “lost signifiers,” leaving users uncertain about whether something is clickable or not.
On top of that, some of the eye-tracking studies indicated that UIs with weak visual cues demand more effort from users and draw less attention than those with clear 3D-style buttons or underlined links.
So, to ensure your buttons are recognisable, make them look like buttons: ⬇️
- Use consistent styling across your product: colours, shapes, shadows, or outlines, to signal that an element is interactive.
- Avoid styling buttons as plain text or mixing them in with static content.
- As a handy rule of thumb: never treat static text and interactive text the same way visually. For example, if your primary buttons share a unique colour, make sure that colour isn’t used in the background, where it might blend in.
In terms of visual contrast, a button should stand out from its surroundings, having strong contrast in colour and brightness.
This not only signals its interactivity but also meets accessibility guidelines.
Additionally, the thoughtful use of text labels — employing an obvious verb or action phrase — and iconography can further reinforce that your button is indeed clickable.
When users see a “Submit” button styled green with rounded corners on one screen, they expect similar actions elsewhere to follow the same pattern.
Inconsistent button styles or hover behaviours can increase cognitive load as users constantly have to decipher what’s clickable.
And let’s not forget size and click/tap affordances.
Buttons should be large enough for easy interaction on both desktop and touch devices.
Fitts’ Law reminds us that larger targets are easier to hit, so it’s a good idea to provide generous hit areas.
Research from the Baymard Institute, for example, suggests a minimum touch target of around 7×7 mm (roughly 44px square) to reduce tap errors on mobile devices.
Tiny or thinly padded buttons not only frustrate users but can also break the consistency of an otherwise well-designed interface.
In summary, a consistent button design language, one that users instantly recognise through familiar cues, ample contrast, and proper sizing, builds trust and enhances usability.
Visual Hierarchy: Primary vs. Secondary Actions
Not all actions are created equal.
Some are central to the user’s main goal, while others are more peripheral.
An effective design makes this hierarchy visually clear.
The primary action on a screen, the one you expect most users to take or that completes the main task, should draw the most attention.
Secondary or tertiary actions should be visible but less prominent.
You can subtly guide the user’s focus to the most important action by using visual differentiations (like different colours, sizes, or border styles).
For instance, if your brand’s accent colour is blue, you might reserve that bold, high-contrast shade for the primary call to action and use a more muted version for secondary options.
Research by the Baymard Institute indicates that nearly half of e-commerce sites struggle to differentiate their primary buttons, which often leads to users having to hunt for the right button during crucial moments.
Think of it like this: if everything screams for attention, nothing really does.
The primary button should metaphorically shout, while the secondary ones simply whisper.
A classic example is the login vs. sign-up screen. Many services use a bright, inviting button for “Sign Up” and a more subdued text link for “Log In.”
This visual hierarchy helps new users know exactly where to click and keeps returning users from getting confused.
Furthermore, visual weight can be conveyed through typography — using bold text for the primary action — and through whitespace, which separates the primary button from other elements.
This separation ensures that when users scan the page, their eyes are immediately drawn to the key action.
Design your buttons so that the primary action on each screen stands out, while secondary actions remain accessible but understated.
Buttons vs. Links
A fundamental distinction in any UI is knowing when to use a button versus a hyperlink.
While both are interactive, they serve different purposes and come with different user expectations.
Buttons are meant for actions that change the state of the system — submitting a form, saving data, or deleting an item.
They signal immediacy: “Click me, and something will happen right here.”
On the other hand, links are designed for navigation — moving you from one page to another or to a different section of the same page without affecting the state of the system.
Why does this matter?
Well, users have learned that links typically open in new tabs or lead to new pages, and they’re often styled with underlines and a distinctive colour.
Mixing up the two can cause unnecessary confusion.
Imagine seeing a “Next page” control that looks like a big button…it might make you pause, wondering if it will submit something rather than simply navigate you forward.
A classic anecdote from the world of accessibility:
One user, relying on a screen reader, was told to “click the sign-up link”.
However, the interface had a visually link-styled button, which the screen reader identified as a button instead of a link.
This mismatch can lead to frustration and misinterpretation.
So, for best results: ⬇️
- Reserve buttons for primary actions and form submissions.
- Use text links for navigation purposes.
- Avoid styling one as the other; keep the visual cues distinct.
- Maintain consistency in how interactive elements are presented across your interface.
When you separate buttons from links clearly, you reduce cognitive friction.
Users no longer have to guess whether clicking an element will trigger an immediate action or simply take them somewhere else.
Sources & references (11)
- 1.Button Design: Best Practices for Optimal UI ButtonsBaymard Institute
- 2.The $300 Million ButtonCenter CentreUX Articles by Center Centre
- 3.Don Norman’s Seven Fundamental Design PrinciplesUX Collective
- 4.Flat-Design Best PracticesNielsen Norman Group
- 5.THE HIPPER ELEMENT – Flat UI Elements Attract Less Attention and CauseThe Hipper Element
- 6.Designing for Action: Best Practices for Effective ButtonsBalsamiq
- 7.Understanding Success Criterion 2.5.5: Target SizeW3Cby WAI – W3C
- 8.Links VS Buttons: A Perennial ProblemDigitalA11Y• DigitalA11Y
- 9.Better Link Labels: 4Ss for Encouraging ClicksNielsen Norman Groupby NNG
- 10.Ghost Buttons — Not as Bad as We Thought?Medium
- 11.Buttons vs LinksUX MovementImage credit: UX Movement
You might also like:
Share this article:
