UI UX for Beginners: Buttons

Welcome to the realm of UI/UX buttons, where each click molds the digital experience. Whether you’re a beginner in design or honing your skills, this guide navigates you through crafting buttons that captivate and navigate effortlessly.

Table of Contents:

1. What is a Button
2. Types of Buttons
3. Anatomy of Buttons
4. Button States
5. Button Shapes
6. Button Sizing
7. Button Hierarchy
8. How to Create a Button in Figma

Let’s Dive Into It! 🚀

What is a button

Buttons are graphic elements or interactive components in a UI. User can click or tap to perform actions or trigger specific functions. Buttons are represented as a rectangular or rounded with text(button label) or icon on it. In UI, buttons are used to initiate actions such as form submission, page navigation or triggering some specific functions. The color, size, shape and text plays a crucial role in it’s design. A buttons role is to encourage user to take actions.

Types of buttons

Choosing the right type of button depends on the context and purpose of the action. Here are some common types of buttons used in UX design:

• Call to Action (CTA) buttons : A large eye-catching button that point user to take a specific action, such as making a purchase or signing up for a service.

CTA Button

• Primary buttons : These are the main action buttons on a page, such as “Getting started” or “Try it”. On a page, a CTA button is always the primary button, but a primary button isn’t necessarily a CTA button.

Primary button

• Secondary buttons: These buttons provide additional options or actions, such as “Cancel” or “Back”.

Secondary button

• Tertiary buttons: These are smaller in size, less critical buttons that still perform specific actions, such as “Back,” “Clear,” or “View/Hide.”

Tertiary Button

• Icon buttons: These buttons use only icons instead of text to represent an action, such as a shopping cart icon for adding items to a cart.

Icon Buttons

Anatomy of buttons

Let’s break down the anatomy of a button:

Anatomy

• Background Color : The color of a button often conveys its importance or the nature of the action it performs. For example, primary actions may use a prominent color, while secondary actions use a less dominant color.
• Label/Text : The text on a button communicates its purpose or action to the user. It should be concise, clear, and actionable, guiding users on what will happen when the button is clicked.
• Paddings : The inner margin of the button.
• Shadows : Shadows add depth and dimension to a button, making it stand out from the background.
• Border radius : Border radius determines the curvature of the button’s corners. A button can have sharp, square corners or rounded corners, depending on the design language.

Button states

In UI/UX design, buttons can exist in different states to provide users with visual feedback about their interactions. Here are some common button states:

Button states

• Active state: Normal state of the button.
• Hover state: When a user hovers their cursor over the button, the hover state is activated. Visual changes, such as color adjustments or subtle animations, can occur to indicate that the button is interactive.
• Pressed state: The active or pressed state is triggered when a user clicks or taps on the button. It provides feedback to let the user know that their interaction has been registered.
• Disabled state: state to indicate that the associated action is not currently available or applicable. In this state, the button is usually visually muted, and interactions are not allowed. This communicates to users that the button is inactive.

Button shapes

The shape of a button is a crucial element that contributes to the overall aesthetic and usability of an interface. Here are Three common button shapes:

Shapes

• Square button: Square buttons have equal-length sides and sharp 90-degree corners, forming a classic, clean shape.
• Square with rounded: These buttons maintain a square shape but have softened corners, providing a modern and friendly appearance.
• Rounded: Fully rounded buttons have all corners smoothed out, creating a circular or elliptical shape.

Rounded Corners Are More Effective Than Sharp Corners This “smoothness” not only speaks to usability but also fosters an emotional connection with the device.

Button sizing

Height: a button height range of greater than 44 pixels and less than 72 pixels provides a clear guideline for designing buttons within a certain size range. This range takes into consideration both touch-friendly dimensions and a design that is visually balanced.

Width: The minimum size for buttons on mobile devices should be 10mm x 10mm. This is based on the average size of a fingertip. However, buttons that are too small may be difficult to click. However we can adjust them based on padding and label size.

Vertical padding: Let suppose our vertical padding is 16 pixels, we can set the horizontal padding by multiplying it by 2. 16 * 2 = 32 PX. so our horizontal padding should be 32 PX.

sizing

Button Hierarchy

In UI/UX design, button hierarchy refers to the organization and prioritization of buttons based on their importance and intended actions. This often involves defining primary, secondary, and tertiary actions. The hierarchy can be established through variations in size, color, or positioning.

MD-Hierarchy structure

Let’s see an example:

Button hierarchy

In this photo we notice the Delete button first then cancel and close button.

How to create a responsive button in figma

Click here to view the design file.

That’s all ! 😃

If you got something from this post please clap and leave your doubts on comments. see you on next blog.