Buttons are crucial elements of almost any user interface. They allow users to take action. Pages, dialogs, input forms, toolbars - all those components require buttons.
In this article, I want to review the most common questions that visual designers have about button design.
The foundational rule of good button design is simple - buttons should look like buttons. Border reinforces the feeling of a traditional button and creates an eye-catching target for the user. Without a border, the UI element looks more like a link rather button. That's why if you have a choice, it's safer to use a visible border.
Colors are an essential part of the visual language we use to communicate with our users.
Here are a couple of things to remember when selecting colors:Contrasting colors make it easier to spot the button in a layout. Color reinforce the nature of the action. You can rely on common color meaning when selecting particular colors. For example, stick to red color for potentially dangerous operations such as deleting user information.
But no matter what colors you choose to use, ensure that colors are accessible by everyone who will use your product.
But when it comes to design decisions, the shape of the button should be selected according to the visual design of your product. If the visual design uses a lot of strict geometric objects, that you should probably use sharp-edged buttons.
The goal is to make the interaction with UI comfortable for users. It means that you need to design all UI elements to minimize the risk of incorrect action. The size of the buttons should:
Ghost buttons (also known as hollow buttons) became trendy in recent years. They are particularly common for landing pages. But when it comes to user experience, it's important to remember that ghost buttons are much less effective for capturing user attention (since they have less visual weight).
That's why the choice of ghost vs. filled buttons should be based on the level of emphasis you want to have for your buttons. Generally, filled buttons are used for high emphasis due to more color contrast. For the very same reason, it's not recommended to use a ghost button as a primary call to action button.
Sometimes you need to show two call-to-action buttons side by side. In this case, filled button should be for primary CTA while the hollow button for the secondary action. This high-emphasis button commands the most attention while the ghost will be used as an alternative.
Text labels describe the action that will occur if a user taps a button. Most designers know that button's action should be clear to users.
Good labels are actionable. They prompt the user to complete a certain action by saying what will happen when a user click/tap on it. That's why it's recommended to use verbs (i.e., Send, Get, Apply) to that clearly describe the operation. For example, when your user is going to send an email, design button with the label "Send" instead of "Submit."
Sometimes designers go overboard with the number of words in text labels. While more words might mean more clarity, more words also mean more visual clutter.
Here are two things to remember:
Avoid wrapping text. To keep text legible a text label should remain on a single line.A button container's width shouldn't be narrower than its text. Try to use one or two words per button.
Designers tend to avoid using ALL CAPS for text for two apparent reasons:
But what about button labels? ALL CAPS naturally demands more attention from the user, and it's possible to use ALL CAPS for button labels when you want users to avoid making mistakes while performing a particular action (i.e., deleting an important file).
Yes, you can, but only if the icon has a universal meaning (such as home, print, share, or shopping cart). For other icons, you need to ensure that your users can decode the meaning of your icons. If the meaning isn't clear for users, you can use icons along with text to communicate the meaning. The icon will naturally call attention to a button object while the text label will clarify the meaning of this button.
But do not use two icons in the same button.
Generally, shadows will help you increase the visual prominence of a button and put more emphasis on it. But ultimately, a decision whether you want to use shadows for buttons should be based on the style of your user interfaces. If the majority of UI elements are flat, probably you shouldn't use shadows for your buttons.
Not only a button's action should be clear for the user, you also need to ensure that the state is clear. Typically, it's possible to define the following states of a button:
Color and opacity can be used to communicate the state.