Buttons in UI Design: Types and Best Practices
Buttons are among the most common and important components in UI Design. It may seem simple, but for a project to be cohesive and intuitive, the designer must think about their size, shape, color and placement.
In this article we will cover the different types of buttons, their states and how to use them in a project.
Buttons Types
CTA — Call To Action Button (Primary Button)
It differs from other buttons, either by color or size. Their goal is to make the user take an action, which is why they are often used on landing pages.
The primary buttons will help the user to complete their journey. As a designer, you can choose one of the brand colors to use on the button. They can be square or round, as long as it has an accent color or size. IOS requirements for mobile apps are at least 44 x 44 pixels.
Secondary Button
Used for the second most important action. Usually you will have more than one button, one being the main action (save) and the other a secondary action (cancel). They are given less visual emphasis and sometimes it’s common for a secondary button to just have an oulined container with no fill (ghost buttons).
Ghost Buttons
This type of button has no fill, just an outline and text. Therefore, they are more used for secondary actions and the designer needs to be careful with the contrast between it and the background.
Icon Buttons
This button has an icon that can be located on the left or right side of the text, depending on the action to be taken and how to best represent it. It is also common to find buttons without text, with just an icon.
Hierarchy
In UI design, there should be a button that by color, size or placement makes it clear that other buttons have less importance in the visual hierarchy. This high-emphasis button commands the most attention.
Buttons States
The different states are used to give feedback to the user while an interaction takes place. Enabled (default) is the normal state, even without interaction. Hover, when on the web (mobile devices don’t typically support a hover interaction), appears when the mouse cursor is over the button. We also have Pressed when we click and Disabled.
Hover state styles are darker or brighter than the background fill color. On pressed, you can place some element that indicates the click, such as an outline or a darker color. Disabled buttons are usually gray or 30% transparent in the background.
Tips
- Try not to put more than 3 words inside a button.
- Usually the secondary button should be on the left side and the primary button on the right side.
- Give equal spacing or good breathing spacing in the button.
Conclusion
These are just some aspects we can work on in buttons and some tips to improve your project. There are still many points that can be worked on to improve accessibility.
Thank you! I hope you liked it :)
