Illustration by Bhavya Minocha
Creating a great user experience while simultaneously driving business goals is one of the most important challenges designers face. Of the many tools in a designer’s belt, UI button design and placement is one of the most powerful when it comes to achieving specific user actions that also meet these business goals.
With this in mind, it’s important to take the time to understand all the ways that buttons work, and how to use them to make the best possible experience. You should begin by asking yourself the following questions:
- How do users understand an element is a button?
- When/in what context should I choose a more engaging button style?
In this guide I’ll not only be helping you answer these questions, but also offering helpful tips for the best button design practices.
But, what’s a Button?
Let’s start at the very top, shall we? Let’s define what buttons are.
Buttons give users options – they can choose to take an action or make a choice based on what they’re engaging with on a website or mobile app. In essence buttons are the means through which designers communicate what actions are possible to take.
How do users know that they’re interacting with a button and what response to expect? This is where button types come into play. We use features such as shape, styling and color to make the element look like a button, and ensure that the action is clearly defined within the button itself.
According to Material Design there are three key principles designers should keep in mind when including buttons in an interface:
- Make it identifiable – Buttons should indicate that they can trigger a specific action.
- Make it findable – Buttons should be easy to find among other elements, including other buttons.
- Make it clear – A button’s action and state should be clear.
Types of buttons and when to use them
A common mistake I see designers often make is being too experimental with their button design. If you get too out-of-the-box with it, you may be sacrificing clarity and will end up with a lot of confused users.
With this in mind, let’s dive into common button types:
Call to action
The Call To Action (CTA) button is one of the most important to master as they’re usually closely linked to the business’ goals. CTAs usually prompt users to take a significant action such as “sign up”, “register” or “add to cart”.
Primary buttons
Primary buttons indicate what the interface would want you to do. Not to be confused with “CTA,” primary buttons are a strong visual indicator to help the user complete their journey. Primary buttons, for instance, can be used in situations where the user may want to go “next” or in the case of the example from Amazon below, “Proceed to checkout.”
Image credit Amazon.com.Secondary buttons
Secondary buttons, on the other hand, offer an alternative path to the primary action such as “Go Back” or “Cancel”. Secondary buttons are often found next to primary buttons (or CTA buttons) where there are multiple avenues a user can take. Another example of this is in login screens, where ‘Sign up’ may be a primary action, and ‘Sign In’ is a secondary action.
Tertiary buttons
Tertiary buttons, as the name implies, are meant for lesser actions. These are usually miscellaneous actions that are important but not the most common objective in the experience. These could be actions like “Edit”, “Add New” or “Upload Photo”.
Microcopy is a big deal
In short, “microcopy” is the content that exists inside the button that indicates what action or outcome will occur when they click the button. This is also referred to as the ‘button label’. The best microcopy is understood quickly and drives immediate clicks.
Some factors to keep in mind in order to ensure engaging microcopy include:
- Keep the number of words to a minimum. This reduces the effort needed by the user to understand and take action.
- Use action verbs. Phrases like “Add to Cart” or “Publish Photo” can help build a clear and compelling directive to users.
- Use Title Case or Sentence case. This is not a hard and fast rule, but I’ve found that it’s the most inviting copy styling while still remaining professional.
- Stay consistent. The biggest faux-pas when it comes to microcopy is seeing it change depending on the interface. For example, if you put “Add Friend” on one button, don’t change it to “Add Buddy” on another.
Using color to stand out
Color is one of the easiest ways in which designers can manipulate buttons in order to drive specific actions. Take this interface for instance:
Image credit theskimm.com.Our eyes are quickly drawn to the brightest fleck of color in our field of vision. In this case, it is the yellow ‘Subscribe’ buttons. With this in mind, the primary action on a page needs to have a poignant and distinct contrast from its surroundings. By selecting a colorful and visually dominant button, the designer is able to ensure it gets the highest chance of clicks.
By contrast, secondary and tertiary actions (like ‘Edit or ‘Cancel’) should use less stimulating colors in order to build a clear, visual hierarchy.
Most common button styles
Before we go further, let’s clarify the difference between buttons and text links.
Buttons are used for priority actions and text links typically for secondary actions, or navigation based usage.
“Links should never be used to change the state of an application. This means that clicking on a link should not add, change, or delete any data on the screen” – shared Anthony from UX Movement
If you’re unsure when to use which, use this basic guideline, ask yourself – “will this impact the website’s front or back-end in a significant way?” e.g. create a new post, activate a purchase, add them to an internal database.
If the answer is yes, then you should be using a button, rather than a text link to trigger the action. Text links can play a helpful role when linking out to external sites, or navigating to other sections of the application, typically within body text.
Speaking of, there exists a very wide variety of button styles, however, for ease of use (and for your own sanity), I’ve paired it down to the most commonly used ones.
Ghost buttons
Ghost buttons or Outlined buttons are buttons without fill, meaning they consist only of an outline and leave the surrounding color as the fill. Due to this visual nature they are typically not used to indicate a primary action on a page, but instead a secondary or even tertiary action.
Image credit screenshot from Hootsuite.comCaption: On Hootsuite, the secondary button ‘Upgrade my plan’ is in the ghost button style.
Toggle buttons
Toggles allow a user to change a setting between two states (typically). This is most commonly used when the user has the option to turn on and off an element like the ‘Favorite’ button example below:
However, toggle buttons can also be used when there’s more than two states to showcase a selected action or setting. In this example, only one option in a group of toggle buttons can be selected and active at a time. See the example below:
Floating action buttons (FAB)
Floating action buttons, much like the name implies, are buttons that float above the interface and often remain there across multiple interfaces. FABs typically represent the primary, intended action and usually appear as a circular shape with an icon in its center.
On Slack’s landing page, the chat box in the lower right hand corner is in the form of a floating action button. Image credit slack.com.Button design elements
Aside from the button styles I’ve outlined above, there are design elements you’ll need to consider as you build your interface.
Rounded vs. square button design
You’ll find a variety of button shapes across the web and it may sometimes feel unclear what the ‘right’ shape is vs the ‘wrong’ one. The most common shape for a button is a rectangle that has straight or rounded corners. Which of those two you select depends on the impression you’re trying to leave on the user.
The general rule of thumb I use is that ‘rounded is more friendly, sharp is more serious’. You’ll see this exemplified below with Lyft VS Bank of America.
When to use the icon
As is often the case, icons (think Justin or Beyonce) dream of going solo. It’s no different for buttons.
In the past few years we’ve seen a growing tendency towards experimenting with buttons that only feature an icon and no text. While this does offer some great advantages like a decluttered interface there are some things to keep in mind.
Consider the audience you’re designing for carefully, as some demographics may have trouble discerning the meaning and get frustrated with the experience. However, when the situation makes sense, using icon buttons offer some great benefits:
- With the reduction in size, icon buttons offer greater flexibility in placing it on the interface. You’ll notice that FABs all tend to use this style.
- Icon buttons allow you to stack other icon buttons next to them.
Button padding and spacing
Vertical and horizontal padding can play an important role, particularly for users that increase the font in their browser for a better viewing experience. By selecting specific padding around your buttons you’ll ensure that they remain legible no matter what setting is being used.
In addition to padding you’ll need to consider spacing carefully, especially for the mobile experience. I’ve heard a number of businesses blame the user for underperformances, when in fact it was a simple matter of button spacing. It’s no wonder their customers are hitting the wrong button and giving up if they’re dealing with sub-optimal spacing.
As a general rule of thumb – optimal button spacing ranges from 12 to 48 pixels. But to be a bit more specific, a study found that 44% of the subjects preferred a spacing of 6.35 mm or 24 pixels between adjacent buttons.
With spacing you should also be considering types of buttons. For instance icon buttons require much less space and are therefore more versatile, while raised buttons can add dimension to mostly flat layouts, opening up congested spaces.
View padding between elements within this button. Image credit Material.io guidelines.Button States and Feedback
Designers use button states to make it easier for users to understand the impact of their action. States indicate to the user things like – whether they can click or have already clicked a button.
This type of feedback can be very helpful, in particular with longer, more complex user journeys such as surveys or forms.
Some of the most common button states are:
- Active & disabled state: The active state is when a button is ‘clickable’ or ’tappable,’ the disabled is when it is not. The most common use of this is disabling a button when a user hasn’t completed necessary steps.
- Hover & hover off: This is when a button’s design changes when a user hovers over it in order to show that it’s clickable. It often encourages users to click on them.
- Pressed: You can also add a ‘pressed’ state to a button in order to indicate that it has been successfully selected.
Image credit material.io design kit.Placement and sizing
In order to ensure that the buttons you’re designing are easily noticed and accessible, you’ll need to consider placement and sizing.
Let’s set the basics first – larger buttons tend to get more attention than smaller ones. Additionally, in terms of placement, you’ll note that CTAs are centered or left-aligned fairly unanimously across the web. This is in order to simplify the experience for the visitor/user as they’ll always know where to look when they wish to take a significant action (e.g. purchase an item, set up an appointment, etc…)
Getting more into the weeds – we see, according to this study, that when buttons were too far apart users were slower to click or tap on the intended buttons; while buttons that were too close had the lowest touch accuracy. It’s therefore crucial to find the right balance.
On this topic, Material Design suggests that the touch target should be 48dp x 48dp with 8dp between different touch points.
Larger buttons tend to get more attention, and CTAs are often centered like you see on this mobile page from myrecipes. Image credit screenshot from myrecipes.com.Making button design easy
Rest assured, even with its complexities, UI button design does not need to be difficult. There are countless built-in tools and online guides to support you. Beyond that, there are entire UI kits that you can use in a heartbeat that will get you started quickly with pre-built button designs. Check out Adobe XD resources, Let’s XD and XD Guru for access to free UI kits to get started.
Whether you’re looking to design buttons custom to your brand, or use out of the box components from a UI kit, starting with the foundation of a UI kit template can provide you with a great starting point. Use the existing components and customize them to fit your needs.