Design Patterns – Buttons

Credit Card Checkout Template
CTA buttons are used to guide users towards a conversion goal and makes it easy for them to know where you want them to click.
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.
 
Reference
UX Practices: 8 Handy Tips on CTA Button Design
7 Basic Rules for Button Design
The King vs. Pawn Game of UI Design
Call for Attention. UI Design Tips on CTA Buttons

newsletter

Sign up to our newsletter!

Subscribe to our newsletter and for the latest news and updates.