Designing better buttons: Consistency, hierarchy & buttons vs links

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:

1. Consistency and Recognisability

2. Establishing Visual Hierarchy (Primary vs. Secondary Actions)

3. 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 (first mentioned in the book “Web Form Design: Filling in the Blanks”) 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.