Basic Types of Buttons in User Interfaces

button featured image

While they may go unnoticed if they’re implemented properly, buttons are a vital element in creating a positive and productive user experience. At their most basic, UX buttons are styled links that grab the user’s attention and help drive them in a particular direction. Buttons can link us to other pages or complete an action like submitting a form or making a purchase. They are often used as calls to actions (CTA) we want our users to complete on our website.

What Is a Button?

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:

  1. Make it identifiable Buttons should indicate that they can trigger a specific action.
  2. Make it findable – Buttons should be easy to find among other elements, including other buttons.
  3. Make it clear – A button’s action and state should be clear.

Types of buttons and when to use them

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”.

cta button

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 button

Text buttons

Text buttons are text labels that fall outside of a block of text. The text should describe the action that will occur if a user clicks or taps a button. Text buttons have a low level of emphasis and are typically used for less important actions. Because text buttons don’t have a container, they don’t distract from nearby content.

text button

Ghost buttons

Outlined buttons (often called “ghost” buttons) are a step up in complexity and emphasis from a text button in button design. They typically indicate actions that are important but not the primary action on a page. Outlined buttons should be exactly that: an outline with no fill surrounding text that indicates an action.

ghost button

Raised buttons

Raised (or “contained”) buttons are typically rectangular buttons that “lift” from the surface of the screen via use of a drop shadow. The shadow helps indicate that it is possible to click or press the button. Raised buttons can add dimension to mostly flat layouts, and they highlight functionality on busy, wide, or otherwise congested spaces.

Flutter Raised Button

Toggle buttons

Toggle buttons are typically used in button design for one of two reasons: to group related options or to showcase a selected action or setting. For the former, only one option in a group of toggle buttons can be selected and active at a time. Selecting one option deselects any other. For the latter, the toggle button indicates whether an option is active or inactive.

toggle button

Floating action buttons

According to Google, “A floating action button (FAB) performs the primary, or most common, action on a screen. It appears in front of all screen content, typically as a circular shape with an icon in its center.” A FAB should perform a constructive action such as creating a new item or sharing the item on screen.

floating action button

Factors of Effective Button Design

Shape

a safe bet for website button design is to make buttons square or square with rounded corners, depending on the style of the site or app. Some research suggests that rounded corners enhance information processing and draw our eyes to the center of element.

However, if you do choose to deviate from traditional button shapes, is to make sure you conduct usability testing on your designs to ensure that people can easily identify the buttons.

No matter what shape you choose, be sure to maintain consistency throughout your interface controls so that your user will be able to identify and recognize the appropriate UX elements as buttons.

shape for button

Size and Padding

The size of buttons also play a key role in helping users to identify these elements. You should consider the size of button elements as well as the padding between clickable elements:

Size. When tap is used as a primary input method for your app or site you can rely on MIT Touch Lab study in order to choose a proper size for the your buttons. MIT study founds that averages for finger pads are between 10–14mm and fingertips are 8–10mm, making 10mm x 10mm a good minimum touch target size.

size for button

Padding. Padding between buttons helps separate the controls and gives your user interface enough breathing space.

padding between buttons

Placement

Regarding UX button placement, try to use traditional layouts and standard UI patterns as much as possible because conventional placement for buttons improves discoverability. Using a standard layout will help users understand the purpose of each element — even if it’s a button without other strong visual signifiers. Combining a standard layout with clean visual design and ample whitespace makes the layout more understandable.

Microcopy

UX button microcopy is often a call-to-action that tells users what action they will complete if they click the button. Strong CTA microcopy has to catch users’ attention quickly and lead them right to the action.

For a more effective call-to-action, keep the number of words at minimum. A few appropriately chosen words are much more effective than a long descriptive phrase. In addition, using action verbs and phrases like “Add to Cart” or “Submit” in CTA microcopy can help you give strong and direct instructions to your users on what to do next.

microcopy

Conclusion

Every button (classic or modern one like ghost button or floating action button) is meant to direct users into taking the action you want them to take. Think of the web or app as a conversation started by a busy user. The button plays a crucial role in this conversation — a smooth interaction keeps the conversation flowing along while glitches (such as an unable to find a right button) create interruptions and, at worst, breakdowns.

spectrum spiral colorful symmetric rhythm hd 2560x1440 1634 scaled

Rhythm: The principle of Design

ux writing featured image

UX Writing: Handy Tips on Text Improving User Experience