Understanding the UX Buttons and its Types
Buttons are the most important components of UI Design. Buttons help users navigate and achieve their goals. While they go unnoticed if they are not placed properly. Buttons are a vital element in creating a positive user experience. In order to design the right interactions let us understand the UX behind designing buttons When to use, Where to place etc.
UX Button Types
Buttons are placed throughout the UI of your platform to help users to navigate. Most commonly Buttons are of 5 main types:
- Text buttons
- Ghost buttons
- Raised buttons
- Toggle
- FAB(floating action 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. The text button has a low level of emphasis and is used typically for less important actions. Because they don’t have a container and are not able to distract much from the nearby content.
Ghost Buttons
Outlined buttons are often called Ghost buttons. outlined buttons are a step up in complexity and emphasis from a text button in button design. They typically indicated actions that are important but not primary actions on the page.
Raised buttons
Raised (or “contained”) buttons are typically rectangular buttons that “lift” from the surface of the screen via the 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.
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.
Floating action buttons
FAB(Floating action buttons) indicates the primary action of the page and it should be placed bottom -right for the ease of accessibility and people read content from left to right so when placed bottom-right it won't cover the content.
Best Practices for Designing UX Buttons
We’ve talked about the types of UX buttons in button design, but what about the best ways to implement them in your website’s UX design? The best way to indicate a button is to use visual cues. These indicators help people determine whether or not a button is clickable. It’s important to use proper visual signifiers on clickable elements to make them look and function like buttons.
Size
The first element to consider when designing in button design is size. You should consider how large a button is in relation to the other elements on the website page. At the same time, you need to make sure that the buttons you design are large enough for people to interact with.
A good rule of thumb comes to us from the MIT Touch Lab. Studies by the Touch Lab say that making your button a minimum of 10mm x 10mm is a great place to start. Keep in mind that with the rise of responsive web, thinking about how the button will resize and the percentage widths of buttons has become more important.
Color
The primary action on a page needs to carry a stronger visual weight and have a distinct contrast from its surroundings. It should be the visually dominant button. For instance, adding one color to a grayscale UI draws the eye simply and effectively.
Secondary actions (like ‘Cancel’ or ‘Go Back’) should have the weakest visual attraction because reducing the visual prominence of secondary actions minimizes the risk for potential errors while further directing people toward a successful outcome.
Keep in mind that a button isn’t a one-state object. It’s multi-state. Make sure you consider the hover/tap states and active states of the button. Bear in mind that these states should provide enough contrast for people to clearly identify them as different from the default state.
Corner Radius
It is a good practice to design buttons without sharp edges because it may be too hard on the eyes so it is better to design with a corner radius of standard 6px
To read more about corner radius check this from zeta design
https://www.instagram.com/p/CWu30jplKoP/?utm_source=ig_web_copy_link
Finally, Don’t forget to clap.
If you liked it, don’t forget to clap for it (the more the better) so that others might be able to read it too.
Hope you found this article useful. Feel free to drop any feedback in the comments. And if you want to chat about design, product or tech, feel free to drop me a DM on any of the platforms.
