To tap or not to tap — that is the question on the user’s mind when they see a call to action button.
The more buttons there are, the longer it takes for users to decide. They have to examine each button to figure out which one best meets their goal. Any uncertainty could cause them to take no action or the wrong action.
You can prevent this by making your call to actions intuitive. When users can see which button is important to their task, they’re able to take action right away. Below are a few UX techniques you can use to make your call to action buttons intuitive.
Order Buttons According to Scanning Pattern
A common mistake designers make is to place their main call to action first because they want users to notice it first. This is unnecessary because the button’s visual weight already makes it noticeable.
Not only that, but placing the main call to action first breaks the user’s natural scanning pattern. Users have to scan all the buttons and then reverse their scanning direction to go back to the main call to action.
Instead of forcing users to re-scan buttons, place the main call to action last so users can get to it by scanning the buttons in a single top-to-bottom flow. This makes it efficient for them to examine each button before deciding. The bottom location is also the easiest for fingers to reach which further improves efficiency.
Distinguish Buttons from Text with an Outline
Another mistake is to use text only to represent a low priority button. This is a poor choice for a call to action because the text doesn’t look like a button. It looks like plain text which can cause users to overlook those actions.
Not only are text buttons harder to recognize, but they’re also smaller targets that are harder to tap. To make your low priority buttons easier to tap and recognize, place the text label inside a button outline without a solid color. Now, the buttons appear as buttons and don’t compete with the main call to action.
Add Color to High Priority Buttons
The button with the highest priority is easiest to identify. It’s the action that leads users directly to their goal. If you’re unsure of your button priority, consider which action progresses users toward their goal and which action regresses them.
In the example, the “checkout” button has highest priority because it progresses users toward their goal the fastest. It should have the most visual weight and highest contrast. But it’s not clear which action has medium priority — “view cart” or “keep shopping”.
The “view cart” action takes users to view the items they added to their cart, which then leads to checkout. The “keep shopping” action regresses users back to the product pages further away from the checkout.
Based on this analysis, “view cart” has a medium priority and “keep shopping” has a low priority. The “view cart” button deserves more visual weight and higher color contrast than the “keep shopping” button.
By understanding the user’s goal and examining how each action progresses users toward it, you’re able to establish button priority. Now, you’re ready to give each button the right amount of visual weight.
Color is an effective way to signify high priority buttons because it stands out from black text and grabs the user’s attention. Don’t use the same color on your buttons as your text. It weakens the button’s visual cue and makes it harder to notice.
Blue is the ideal color for call to actions because research shows it’s most preferred by all genders and age groups. It’s also the most common color used for page links, making it more familiar to users.
The research also found that users feel a sense of trust, security and reliability when they see blue. Users are more likely to tap buttons that evoke these feelings.
Also, don’t use the same exact color for two different buttons or users won’t know which one has a higher priority. And don’t use different colors for each one or you’ll confuse users and cause them to wonder what the colors mean. It would give each button the same visual weight and signal equal priority.
Instead, use a distinct color with the same hue for both buttons, but vary the saturation and brightness for the medium priority one. This makes the medium priority button lighter in visual weight than the high priority button. Now, both buttons aren’t competing and there’s a clear winner.
To enhance the contrast more, you can invert the display polarity. Use light text on a dark background for the primary button and dark on light for the secondary one. This gives the high priority action a brighter text label and the highest contrast possible.
Vary the Font Weight of Text Labels
Using the same boldness on each text label puts the same amount of emphasis on them. It’s better to emphasize each text label with different font weights to signify priority when users read them.
Vary the font weights of the text labels so that the high priority button is the most bold. Then make the medium priority button less bold and the low priority button the least bold. You’ll have to choose a typeface that offers different font weights to do this.
In the example, the “checkout” label is bolder and brighter than the rest. The “view cart” label is semibold and “keep shopping” label is medium. As a result, the text labels reflect the visual weight of each action.
Put an Icon on the High Priority Button
The last technique is the cherry on top that will make your buttons accessible to color blind users. Color blind users won’t be able to tell the difference between the visual weight of buttons. They need something more than color to serve as a visual cue.
Putting an icon on the high priority button adds the extra emphasis to set it apart. If you removed the button color and label, color blind users could still recognize the checkout button.
The icon strengthens the button’s cue and guarantees it’ll attract the most attention. Eye tracking research has shown that visual elements get more eye fixations than text.
Are Your Buttons Intuitive?
Your buttons aren’t intuitive if users are spending a long time on the action screen, or if you’re getting a low tap rate. If this is the case, use these techniques to sharpen the UX of your call to action buttons. You’ll see a difference in the before and after version that’ll blow you away.
Originally published at uxmovement.com on March 13, 2019.