How to design a CTA button
- Visual design considerations
- Interaction considerations
Visual design
Users draw on previous experience and visual signifiers to understand the meaning of UI elements like buttons. When designing a button, it’s important to use the appropriate visual signifiers (such as typography, color, shadow, shape, etc.) to make a button element look like a button. These visual signifiers increase the possibility of a user taking action on an element.
Key visual signifiers include the following:
- Typography
- Colour
- Shadows
- Shape
- Icons
Typography
- Rounded fonts go better with buttons that have a corner radius;
- Squared-off fonts go better with buttons that have no corner radius.
- Add letter-space to uppercase text.
Colour
- Use the World Wide Web Consortium’s guidelines to test for contrast between text and background.
- For level AAA there should be an adequate contrast ratio of at least 7:1 between the text and the background.
- For level AA there should be a contrast ratio of at least 4.5:1 between the text and the background.
- Try the Contrast Ratio tool by Lea Verou.
- Use the Color Converter tool to easily convert hex values.
- The HSB colour system makes it easy to modify colour by leveraging saturation and brightness to control luminosity.
- Hue is the actual color. Brightness refers to how much white is mixed in the color while Saturation indicates the amount of grey in a color.
Shadows
- Shadows are a visual signifiers that convey depth and indicate that a button is clickable. This helps create affordances in an user interface.
- Button shadows need to be less opaque on darker backgrounds. Eg. A button shadow opacity of 20% on a white background will need to be less opaque at around 40% on a darker background in order to have the same visual weight.
Shape
- Buttons are typically rectangular, but they don’t have to be.
- See Material Designs’ Circular Floating Button for an example of a circular button shape.
Icons
- Use a stroke weight for icons that are equivalent to the text weight.
- Use corner radii for icons that are similar to the corner radii of the font you are using.
Interaction Design
- CTA’s come in the form of buttons. When we see a button, we know that that’s how we are to take action towards our goal.
- White space near the button makes it easier for users to understand that it’s an interactive element.
- Place buttons where users expect to find them. Arrange copy and buttons in a way that encourages a natural reading flow, directing users to your CTA button.
- Use verbs that imply action like ‘buy’, ‘start’, ‘learn’, ‘apply’, ‘get’ etc.
- Always try to make the primary CTA button more prominent. Increase its size and use a contrasting color within it’s context to capture a users attention.
- Make buttons finger-friendly for mobile users: A good minimum touch target size is 40px/40px.
- The order for buttons should reflect the nature of a conversation between the user and the system. For example, it’s logical that a button that moves you forward should be on the right, and a button which moves you backward should be on the left.
- Don’t use too many buttons. The primary CTA button should be the most prominent.
- When users click or tap on the button, they expect the appropriate feedback. Failure to provide feedback often causes multiple unnecessary operations.
Design Checklist
- The typeface you choose should determine if you will have a corner radius or not.
- Add letter-space to uppercase text.
- Check that the contrast between the text and the background is at level AAA to be safe or a minimum of AA.
- Use the HSB colour system to easily adjust luminosity.
- Button shadows should be less opaque on a dark background than a light background.
- Inline icons should be designed to appear as though they are part of the font you’re using.
- Button shapes are typically rectangular but don’t have to be.
