There is no wonder that pushbuttons are the predecessors of the UI component button.
Their initial mission was the same as the one that they fulfill today, namely - to set off an action that causes specific consequences. In other words, buttons are interactive elements that trigger the action mentioned in them. And, let’s be honest here – buttons won’t be replaced any time soon – once they were created, they were here to stay. There is a link between the action of pushing buttons and the feeling of completing a task. The human brain associates buttons with finishing assignments.
So, it’s no wonder that we can find them anywhere, and they are one of the most important components you can use in a design and user interface. Even more so, what would we, as UI/UX designers, do without buttons? I can’t imagine entering a site that wouldn’t let us interact with it!
However, there are many types of buttons available that can be used in a design. As UI UX designers, it can be challenging to choose the right one to deliver your message. Buttons communicate a certain action to the viewer, so creating the right interactions and style for your buttons is mandatory.
Depending on how they look, buttons will deliver a specific message that will or will not be interpreted accordingly by the viewer. So, we need to learn the different states of buttons available for every UI UX design: normal, focus, hover, active, progress/loading, and disabled.
To get more in-depth, normal buttons have the ability to communicate that the component is enabled and interactive.
- Focus buttons indicate that the user has highlighted an element, either using an input method or a keyword.
- Next, we have hover buttons, which communicate that the users have placed the cursor over an interactive element.
- Active buttons let the user know that they tapped on the button.
- We also mentioned progress/loading buttons. Those are used when the action will not happen immediately, letting us know that the action is in progress.
- Last but not least, we have disabled buttons, which indicate that the element is not interactive.
Yet, the button state is not the only one that matters when we design. The colors, shapes, and sizes we choose when creating a specific button need to support the right message.
Do Button Colors Matter?
To get a closer look at the aesthetically pleasing part of the UI design, let’s think more about colors and how they make us feel. We live around colors and associate colors with certain emotions and actions. We immediately know that when something is green, it means that we did something good. And vice versa, when we spot something red, it might delete or indicate that we filled in something wrong.
So, when choosing the color palette, we need to make sure not to have a red and green button alongside, as we might cause some confusion. Colors are the ones that can set the mood of the whole design, even when it comes to buttons. So, we need to balance our colors and choose them wisely to send the right tone and ensure that our buttons can be easily observed.
Now that we have this in mind let’s think about the button style that suits our UI UX design and message. Usually, buttons are rectangular and have rounded corners to place near an input field and look good easily.
However, like any other aspect mentioned, the purpose will be the one that needs to be kept as the focus when choosing the button style.
Styles are used to determine the hierarchy of importance when it comes to the action that the specific button is giving. For example, a contained button with an icon lets us know that the step is mandatory or essential. On the other hand, when we use an outlined/ghost button, the action may or may not be required. The icon/text button can be missed more easily, with low emphasis.
Even more so, no button can be used universally. Think about situations where you need two buttons - one for approval and one for disapproval. If you use the same type of buttons for both instances, chances are that the views will take more time to decide which one is the approved one. However, suppose you were to use a primary button style (contained button with icon) for the approval action and a secondary button style (Outlined/ghost button with icon) for the disapproval. In that case, the approval button will be differentiated instantly, resulting in a faster decision and a better user experience.
So, in order to have a better user experience we need to make all buttons as predictable as possible and keep track of the style buttons and colors. As we are getting further into what is considered to be standard, at the same time, we are making the user think more and take more time choosing whether or not to press the button.
This is where consistency plays a big part in your design. Being consistent and choosing the same or similar fonts, colors, sizes, and styles makes the design predictable and helps the user better understand the message you are trying to communicate. This will make the viewers feel in control and understand how the design works, giving some familiarity and rapidity when completing specific tasks.
The rapidity that comes when navigating through certain buttons is also given by the size of it. The buttons must be eligible and easy to read by all of us. Time is valuable, and it is easy to understand that all users care about how much time they spend on a task. We all have been in situations where we got annoyed by the fact that we couldn’t tap on a button because it was too small or other buttons were placed too close to it. It is essential to follow a grid and create touch buttons that are large enough.
And now that we are talking about touch buttons let’s mention some of the gestures used daily by all of us. We have swipe gestures that can trigger contextual actions (seen on social media apps, email, to archive or delete), double tap to like or appreciate, and long press, used to make a button bigger. However, these actions are commonly used by more advanced users.
We also need to make sure that our buttons are labeled appropriately and accordingly. Labeling the wrong button or with the wrong text can cause confusion and a slower response and interaction with your design. Encourage people to take action, use a call to action, and avoid Yes/No labels. Think about a situation where you want to finish ordering something online. Questions like ‘Add to basket?’ or ‘Confirm order?’ encourage you to take action and proceed with the order.
As UI/UX designers, we always strive to offer our users the best experience whenever they click on our website or app. We must appropriately design our buttons to maximize the chances of our product’s success.
We at uinkits understand the importance of great user experiences and creating amazing UI designs. That’s why we’ve developed a Figma UI Kit with design components that include these essential UI elements that enable you to design intuitive and user-friendly interfaces effortlessly.
“You press the button, we do the rest.” – Kodak.
Inspired by this iconic tagline from Kodak, we believe in simplifying the design process for you. Our Figma UI Kit, uinkits, is a complete design system with UI components that allows you, as a UI UX designer, to create your products as quickly as pressing a button.
Our design system includes UI components, icons, variables, cards, buttons and everything you need for your design process. All you have to do is take your UI design component needed, and you’re ready to use it in your designs!
