Button up! But is it worth it? That is where all the users get stuck when they see a call to action button. The more are the buttons, the longer users take to choose.
They have to evaluate each button to figure out which one fits the bill. Doubt in making that tap will ultimately delay the action or will result in the wrong action. Try to add an element of intuitiveness in your call to action buttons.
The users should not hit the wrong buttons. If your users are missing their targets, the size and spacing of the buttons could be the culprit. Go for optimal size and spacing to make the users hit the right buttons.
The button’s design should not defeat its purpose. If we talk of the Cancel button, what is the objective? It is used to exit the current screen and shift back to the previous one.
It is a savior for the users who want to avoid unwanted changes in the system. The Cancel button rescues in need to add safety; it is not a call to action. This is the reason Cancel buttons should not have color in the first place.
Colors on buttons correspond to a call to action. But, as said earlier, a cancel button is not a call to action as the system undergoes no changes after it is selected. Thus, there is no point in using color as you end up giving the wrong impression to the users. Actually, you should clarify that the button won’t bring any changes to the system and is their freedom from action. Thinking how to go about Cancel buttons? Read on-
Image Credit- Link
The Neutral Tone
The Cancel button should use a neutral color to clarify the neutral, non-committal aspect of the button. When users see that the Cancel button is having no color, they’ll consider it as a route to quick safety.
This is necessary for users who give approval to a confirmation screen by mistake and then want to get rid of it immediately. If each button on a screen has a color, they’ll race for attention. This will make users think over each action for a longer time.
A neutral-colored Cancel button reduces competition and makes the users think faster. Users who are ready to take action won’t be bothered by the Cancel button.
Multiple Names
It is not necessary that all Cancel buttons are marked as ‘Cancel’ but yes; they all serve the same function.
For instance, a Cancel button might have ‘Not Now’, ‘No Thanks’, ‘Maybe Later’ or ‘Skip’ labels depending on the site. If a button dismisses a request, consider it as a Cancel button as it fulfills the same function.
Whenever a screen is flooded with buttons, users are on the lookout to get a clear escape. But if all the buttons have a color, the escape becomes a task in itself. However, if the Cancel button is of a neutral shade, it makes button decisions more intuitive.
Image Credit- Link
Shade of Grey
As soon as you use grey on a button, make it dark enough. If the grey isn’t of the right shade, the button fails in legibility and might even give a disabled look.
You can also check the color contrast with a WCAG 2.0 contrast ratio tool to test whether your grey passes the standards for text color.
Image Credit- Link
Here are some points to create an optimal call to action buttons with good size and space -
Standard Size
Standard size helps to attain optimal buttons. According to research, buttons less than the size of 42 pixels have the lowest touch accuracy.
Even the buttons greater than 72 pixels showed low accuracy. The highest accuracy has been reported with buttons ranging between 42-72 pixels.
This implies that 42 pixels is the minimum and 72 pixels is the maximum button size that’s perfect for the users.
The most sought after button size was 60 pixels, which is around the middle of the limit. 72-pixel buttons that gave the highest touch accuracy is the go-to option of older users.
In case of a large number of buttons, mention the order of importance. Through this, users will determine which actions will contribute to the desired outcome.
By adhering to the button size standard, you can highlight the order of preference effectively. Now, you don’t have to pick any random size and wish that it is compatible with the design.
Spacing Range
Buttons too far or too close both delay the touch targets. As per a study, a range of 12 to 48 pixels is the best for button spacing.
This extensive range is suitable for different button sizes. This wide range when divided into smaller segments gives button sizes like 12-24 pixels for a large button, 24-36 pixels for a medium button, 36-48 pixels for a small button.
A larger button gives a good scope to hit the target even if users go slightly away with their fingers.
But if they are off target with a smaller button, they’ll fail to tap and click an adjacent button. That is the reason smaller buttons require more spacing than larger buttons.
Scan to Order
Common faux pas designers make is to place their prime call to action first as they want to grab users’ attention.
This is useless as the button’s visual weight highlights its presence effectively. Other than that, keeping the main call to action above disrupts the natural scanning flow of the user.
Users have to skim through all the buttons and then take a U-turn in their scanning route to go back to the main call to action.
Instead of prompting users to reverse the direction, keep the main call to action at the last so that the users land to it by scanning all the buttons in between through a single top-to-bottom path.
This makes it convenient for the users to read each and every button before taking the final decision. The bottom location is also feasible for the fingers to reach which further enhances efficiency.
No Text Buttons
Another blunder witnessed on apps is to use text only for a button. Designers create text buttons for actions that are low in priority.
But this is a bad choice for the call to actions as the text doesn’t give the look of a button. The users can miss out on those actions and just notice the bold ones.
Text buttons are no doubt hard to identify, but they are also smaller targets that are difficult to select.
If you want to make your low priority buttons easier to select and identify, keep the text label in the middle of a button outline without a bold color.
This way they will look like buttons and won’t battle with the main call to action.
Visual Contrast
The button with supreme priority is the easiest to recognize. It is the action that points users straight away to their goal. If you are doubtful of your button priority, think which action encourages users for their goal and which action discourages them.
It is important to study the user’s goal and evaluate how each action is taken towards it. By doing this you can chalk out button priority. You are clear as to how much visual weight should be given to each button.
Colour is a useful way to distinguish high priority buttons as it highlights black text and captures the user’s attention. Don’t apply the same color on your buttons as that of your text. It softens the button’s visual hint and makes it difficult to notice.
Blue is the best color for a call to action and is most used by all genders and age groups. It is the most preferred color for page links, making it reliable for the users.
Research indicates that users experience a feeling of trust, security, and reliability when they locate blue. Users have a tendency to select buttons that give rise to these feelings.
Avoid using the same color for two different buttons or users won’t make out which one is more important. Also, refrain from using different colors for each one as it will puzzle the users and they will ponder what the colors mean.
Take up different colors of the same tint for both buttons, but change the saturation and brightness for the button that has medium priority.
This will make a medium priority button-less in color weight than the high priority button.
Even display polarity can be used by way of which you can include light text on dark background for primary button whereas dark text on light for secondary. This will create the highest contrast possible.
Icon for Priority
This tip is useful for color-blind users. Color-blind users fail to recognize the variation between visual weights of buttons.
They need something strong to serve as a visual hint. Placing an icon on the high priority button puts extra focus on it and creates its value. Let’s say,
if you removed the button color and label, the color-blind users can still identify the checkout button. The icon stresses on the button’s purpose and makes it garner a lot of attention.
Wrap Up
To get a good tap rate, you need to make your buttons intuitive. Go for optimal size and spacing to have high touch accuracy. Different visual weights can also direct the users towards desired results. Follow the buttons sequence by sticking to patterns of usability. Use the above techniques to sharpen the UX of your call to action buttons and make every button worth a tap!
