Button Design Guide: How to Get Site Visitors to Actually Click Your Buttons
Buttons are one of the most common UI elements. They make it possible for users to interact with a system and take action by making selections. Buttons are used on forms, website homepages, dialog boxes, and toolbars.
It is important to differentiate between buttons and links. Buttons are used when you want a user to act (submit, cancel, delete) and links are used to direct users to other pages (about me, read more).
Great button design makes it easy for users to take the action that you want them to take which increases conversions. This article will give you a complete guide on how to create irresistible buttons that your site visitors will want to click.
Anatomy of a Perfect Button
Before we discuss how you can design irresistible buttons we need to examine the anatomy of a perfect button. A button has the following elements: Text label, background, border, and an icon. Other than the text label all other elements are optional.
Anatomy of a button
What to Avoid When Designing a Button
Buttons that don’t look like buttons
Before a user can click on your button, they have to know that it’s a clickable element. Make it easy for users to click on your buttons by making it obvious that they are buttons. Users depend on previous experience and visual cues to determine whether a UI element is interactive or not.
While it might be tempting to use cool web button designs, don’t sacrifice usability. Avoid confusing your users and creating friction by using familiar button designs. Examples of common button designs include:
- Square button with fill
- Round button with fill
- Round button with fill and shadows
- Outline/ghost button
Fills and shadows make it easy for users to identify buttons because they make them look press-able. Additionally, ensure that there is enough white space around your buttons to make them stand out even more.
Examples of common button designs
Vague or misleading button labels
If the label of your button is vague or confusing, it can prevent users from taking action or make them take the wrong action
Use labels that clearly explain what the button does and affirm the action that the user is about to take. It is also important to consider the context of the button and adapt the label accordingly. Avoid ‘yes’ or ‘no’ labels and instead, use descriptive labels like ‘Delete’ or ‘cancel.’
Clear button label that affirms the action that the user is about to take
Buttons that don’t provide visual feedback about their state
“The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.”
— Jakob Nielsen
A great button should change its state once a user interacts with it. Users require feedback that tells them if their action has been registered successfully or not. When there is no feedback, users might act over and over again. Feedback can either be visual or audio.
Design buttons that have states such as:
- Primary state-button is interactive and ready to be used
- Active -User has pressed the button
- Hoover– Cursor is placed above the interactive element
- Focused – Button has been highlighted using a keyboard
- In progress– The action is being processed
- Disabled – Button is not interactive
Different button states
Inconsistent button design
“Consistency is one of the most powerful usability principles: when things always behave the same, users don’t have to worry about what will happen.” — Jakob Nielsen
Create buttons that have the same size, shape, and color throughout your site. Having a design library and a style guide helps with this. A consistent button design helps your users take action faster and avoid errors. Plus, it improves the overall look and feel of your site. When there is no consistency, users get confused and they are more likely to make errors.
Consistent versus inconsistent button design
Using too many buttons
“Rule of thumb for UX: More options, more problems.”
— Scott Belsky, Chief Product Officer
Too many buttons make it difficult for users to act, this is known as The Paradox of Choice. Instead of stuffing your design with buttons, think of the most important action that you want your users to take and prioritize it.
Button Hierarchy and Actions
Button hierarchy provides a useful signal for users to determine the most important task on a system. Here are the most common website button design hierarchies and how you can use them to guide users.
CTAs
Call to action (CTA) buttons direct users to take the most important action that you want them to take. An effective CTA button grabs the user’s attention and makes them click. A CTA button should be big, have high contrast, and be placed in the user’s line of sight.
Common CTA’s include website buttons such as UXPin’s that has a very prominent “Join for free” CTA button with high color contrast.
A great CTA button
The Psychology Behind Effective CTA Button Copy
For a CTA button to be effective, it needs more than just good design, it also needs copy that drives action. Poor CTA button copy is confusing, it causes errors and makes users bounce.
Here are a few psychology backed tips to strengthen your CTA copy:
Use action words: Using copy that uses action verbs instead of generic phrases drives users to take action. Instead of giving your users a “yes or no” option use “Save or Discard.”
Use precise language: Don’t leave anything open to interpretation or misinterpretation. Don’t say “Remove” when “Delete” would be a much better option.
Use language that affirms the user’s action: Use words that specify the action that the user is about to take such as “Publish” rather than just “Submit.” This removes uncertainty and gives the user confidence to act.
Use imperatives: Imperatives turn phrases into commands. They reduce the number of words on button copy making it easy to read. Instead of “Yes, create my account” simply use “Create account.”
Primary Actions
Primary actions drive users to the next positive action such as going to the next page, completing an action, or starting a user journey. These web buttons should carry more visual weight and they should be more visually dominant to encourage the user to take the positive action.
Secondary Actions
Secondary actions are alternatives to primary actions. They include ‘back’ and ‘cancel’ buttons. These website buttons should have lower visual prominence to reduce the risk of error and to encourage positive primary action.
The difference in visual prominence between primary and secondary actions
Tertiary Actions
Tertiary actions are important actions that users might not need to take. These actions include editing, adding new information, or deleting. The difference between primary and tertiary actions is determined by the context within which the action is taken.
It is good practice to use smaller buttons that are not very prominent for tertiary actions.
Best Practices for Button Styles, Color, and Design
Button Shape
The best practice for web button shape is to use square buttons or square buttons with rounded edges. These button shapes are recommended because it is easy for users to recognize them as buttons.
There are other button shapes that you can use but they should be used carefully because some users might not recognize them. They include:
Round buttons: These are buttons with rounded edges.
A round button
Ghost/line buttons: These are buttons that have no solid fill. They are best used for secondary actions.
A line button
Floating Action Buttons (FAB): This button is used for primary actions.
A Floating Action Button
Icon and label buttons: These buttons have both an icon and a label.
An icon and label button
Icon buttons: Because these buttons have no labels, they are easy to stack.
An icon button
You can use padding and sizing to enhance the visibility of your buttons. Ensure that your buttons are big enough for mobile users to tap.
Color Palettes
The first thing to consider when choosing the color palette for your website button design is color language. Red buttons mean stop, green buttons for websites mean go and blue buttons mean more information.
Also, consider your brand colors and style guide when choosing button colors. Be sure to maintain uniformity for consistent user experience. Make sure that your buttons have enough contrast and they meet web accessibility guidelines.
Color language
Button Placement and Page Layout
When deciding where you will place your button and the page layout, the context matters a lot. For CTA’s it is best to center the website button and put it high up the page so that it can grab the attention of the user.
For primary action buttons for websites, the jury is still out on the best placement. Option A is when the primary action button comes first and in option B it comes last. The best course of action is to ask yourself what the user expects to see first in your specific context.
Button placement
Design Buttons With The Best UI Tools
For you to design buttons that get clicks, you need the best tools to help you turn your mockups into beautiful buttons. UXPin provides an all in one platform for you to design, prototype, and collaborate with your team. Maintain consistent button designs with the design pattern library and check your buttons for accessibility with our contrast checker.
