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.
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.
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.’
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
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.
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.
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.
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.
Ghost/line buttons: These are buttons that have no solid fill. They are best used for secondary actions.
Floating Action Buttons (FAB): This button is used for primary actions.
Icon and label buttons: These buttons have both an icon and a label.
Icon buttons: Because these buttons have no labels, they are easy to stack.
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.
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.
Design Buttons in UXPin
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.
Turn your Button into a UI Component
Tired of designing the same button over and over again? You can ask your developers to turn your button into UI component. If you don’t have engineers on your team, you can also use a button from a public UI component library, such as Ant Design, etc. You can bring this component to UXPin thanks to its powerful Merge technology and use it in your next prototype.
We’ve just released Merge Component Manager, a handy tool that makes it easy for designers to import and manage UI components in UXPin. Try it out on trial. Just request our salespeople to enable it for your trial account.
