Designing Buttons
A guide to effective button design.
👋Hello folks, I hope you guys are doing good. In the previous article we explored the world of design system. Today, we’re going to delve into the art of designing buttons effectively. I’m excited to share my learnings with you and hope you enjoy the read!
The button is probably the most common UI design component, so we can find buttons in pretty much every website, web application, and apps.
And when it comes to designing buttons, you might say that it’s very simple you have a piece of text with solid color background behind it and you’re good to go. But honestly, it’s a bit more complicated than that. There are some best practices for button design, and also some things to avoid.
And this article will tell you all about those. Let’s begin with the shape of the Button.
Button Shape
Buttons acts as friendly guides in the digital world, and their shape significantly impacts their appeal and usability.
To ensure easy clicking, buttons should have shape that users instantly recognize. Usually, people are used to rectangular or circular buttons, so using these shapes can enhance the intuitiveness of your interface. The correct button shape depends on the overall style and content of the user interface.
A sleek, modern interface might opt for rounded buttons for a soft, fun, playful and friendly feel, while a traditional interface might stick with classic rectangular shapes.
Button Size
The size of a button is just as important as its shape, when it comes to usability and visual appeal. The size of the button should be determined by the medium in which it’s displayed.
On mobile screens, for example, a button should be at least 44pt x 44pt on iOS and 48pt x 48pt on android to ensure easy tapping with finger. Similarly, on desktop screens, the text of the button should be roughly the same size as the body text for consistency and readability. However, the size of a button can also depend on the context in which it’s displayed, so it’s important to consider the overall layout of your interface.
User testing is the best way to determine the correct size for buttons.
Wording
The words on a button are critical — they set user expectations and drive clicks.
It might have the right size, it might have the right shape, but if it doesn’t say the right thing, then it’s kind of pointless, so wording should be clear, concise and easy to understand, indicating what happens when clicked. For example, “Submit” for form submission or “Learn More” for additional information. Another example could be, if you are in the setting page, don’t just say “Ok” or “Apply” instead the button can say “Save changes” or “Update settings”. I hope you got the idea.
The right wording boosts conversions and improves user experience. Testing different wording can help find the most effective ones.
Padding
Padding is the space between a button’s content and it’s edges.
It’s crucial for creating visually balanced buttons. So now the question is, How much padding is right? As a general rule, use 1x padding on the top and bottom, and 2x padding on left and right — For example, 16px vertically and 32px horizontally.
(It’s not that compulsory to use the same formula only, you can follow any other method if you want)
Buttons that only contain an icon can use the same amount of padding all around. Avoid using different padding values on the same axis, as this can lead to visually unbalanced buttons.
When creating buttons with both text and an icon, ensure there’s enough space between the two elements. As a general rule, use the 1x padding value as spacing. Proper padding enhances the appearance and usability of the buttons, contributing to a better overall user experience.
Button State
Buttons can have different states to indicate their functionality and interaction status. Here are the common states:
- Default State: The normal state of a button when it’s not being interacted with.
- Hover State: When the user’s cursor is over the button, often indicated by a change in color or underline. (Stroke with low opacity)
- Pressed State: The state when the button is clicked on, often shown by a change in appearance to indicate it’s being pressed. (Stroke + Text with low opacity)
- Focused State: When the button is selected for interaction, often indicated by a highlighted border.
- Disabled State: When the button is not clickable, often shown with a different color or opacity to indicate its disabled status.
Type of Buttons
Buttons can vary in their composition and appearance based on their purpose and design. Here are some common types of buttons:
- Primary Button: A button styled to stand out, often with filled background and a distant color, used for important actions.
- Secondary Button: A button with a less prominent appearance, often with a bordered outline, used for secondary actions.
- Tertiary Buttons: A button with a minimalistic style, typically just plain text, used for less important actions or for blending into the interface.
Additionally, Buttons can be categorized based on their style:
- Only Text Button: A button that contains only text used for straightforward action like “Submit” or “Cancel.”
- Text-Icon Button: A button that combines text with and icon, providing both visual and textual cues for the action.
- Only Icon Button: A button that consists of only an icon, used for actions where the icon alone is sufficient to convey meaning.
Choosing the right type and style of button is essential for effective user interaction and communication in your interface design.
