Have you ever thought about whether your buttons and links are having a negative impact on customer experience? No? We thought not.
It’s often the small details like call to action buttons and microcopy which cost satisfaction and conversion - not because they’re difficult to do but simply because they’re overlooked during the design process.
We’ve worked with some incredible clients and user tested websites and software with huge design budgets behind them and even those guys get it wrong. We see bad button and link design all the time and frankly, we’re bored of it. User research should focus on more than highlighting how a user clicks a button. It’s about revealing the more interesting, often subtle but always useful things.
In the words of Donna Summer and Barbra Streisand, “enough is enough, I can’t go on, I can’t go on no more…”. It’s time to sort this sh*t out.
A physical signal that something is clickable is imperative for usability because if it doesn’t look clickable, people won’t click it. Your design needs to make it obvious links are links and buttons are buttons.
It sounds basic but we see buttons and links all the time which are so well hidden that people assume they’re just part of the copy and try clicking elsewhere, on random images usually.
There are a number of ways you can highlight a button or link. Most commonly, you see things like shadows, outlines and icons (like little arrows or disclosure > buttons) and, despite what your designer may have told you, there’s also nothing wrong with old school underline blue links. Look at Amazon for example - their buttons may look a little dated but you can be damn sure people know where to click to buy something.
Proximity - closeness in space and time. Make sure your buttons are as close to what they control as possible. Why? So that people click on the right thing at the right time duh!
We can usually tell when a button is too far away from its associate action because a) a user isn’t sure where to go next and b) companies add a load of additional copy explaining where the button is and how to click it. ಠ_ಠ
The Gestalt principles of grouping are useful here. Created in the late 19th century and developed over time by a group of philosophers and psychologists, the Gestalt principles attempt to understand the human “ability to acquire and maintain meaningful perceptions in an apparently chaotic world” and their central principle is that “the mind forms a global whole with self-organizing tendencies”.
The proximity law, useful here, shows how we as humans, naturally group objects or shapes that are close to one another, regardless of their shape, size, colour, object and for our example, content. So, as you can imagine, if a button or CTA sits alongside something completely unrelated, our brain naturally assumes they are linked. That is why we often click straight through on websites only to find ourselves frustrated and in the wrong place or worse, signed up to something we didn’t want to be.
Duolingo, the language learning app does a great job at creating highly effective button and link design with reference to the proximity law. See here, their “Get started” CTA is clearly visually associated with “Learn a language for free. Forever.” heading leaving the user in no doubt as to where to click next.
It’s likely that there are numerous calls to action on your website or software. Chances are they have different levels of priority - some could be links to your newsletter sign up form, some could be links to payment. Clearly whilst both important, the payment link should be the highest priority.
This leads me to another design myth: No, all the buttons on your website do not need to look the same for consistency. Generally in most contexts there is a next logical action for users to take and it’s rare that there are equally valid next actions for every instance.
Instead, when placing multiple buttons alongside one another, you need to consider what the primary action is vs secondary actions. A good example here is to look at credit card payment forms. Often, the “Cancel” and “Continue” buttons are presented identically. This is terrible design which increases the likelihood of users making mistakes. Priority is key - make the button to progress forward more prominent and the “destroy everything I’ve done in the last couple of minutes” less prominent. Simples…
A great example of priority button design can be found on Booking.com’s account creation pages. The primary action of ‘Register’ stands out clearly from the other multiple routes a user can choose to take.
If your button and link design is done properly, you won’t need reams of copy to explain how to interact because it’ll be self evident from the design. Highly effective buttons describe their action, not explain it. For example, “Send message” or “Add to basket” rather than ‘Click here’. Usability wise, it's essential that the outcome of clicking a button is obvious and avoids any ambiguity whatsoever.
From a copy perspective, once you’ve nailed your design, there could even be room for a little creativity. Sure, you need to be careful though - language needs to be appropriate and you definitely need to make sure the button text is still crystal clear but why not have fun and inject some personality?
Birchbox, the monthly beauty subscription service has some nice examples of fun link copy. They don’t use them throughout the site but as touches here and there. What's more, it’s still clear what the action is but the language is creative.
We said it wasn’t difficult, and it really isn’t. For effective buttons and links, all you need to remember are four key elements: Signify, locate, prioritise and tell. Manage these and not only will your users will be happy, your bank balance will be too. Good luck…