UI designer’s cheat sheets: creating buttons
Buttons are my favorite design element. In this article, we will look at different types of buttons, types of interactions, and States. To save time, let’s focus on the” normal ” buttons. Therefore, we will ignore radio buttons, tabs, checkboxes, and other similar types of buttons.
So, in this article, we will look at:
Common button styles
Selecting the button color and style
The state of buttons and feedback
The label of the button
The placement of the buttons
Honor Board button
1. Action button
In this section, we’ll look at the hierarchy of buttons and the language they communicate in. The actions of buttons are determined not by how they look (although users should be able to understand from their appearance what a particular button means), but rather by how they are used.
1. Call-to-action buttons (CTA/C2A)
The call-to-action button, depending on the situation, usually prompts users to register/buy now/log in, etc.These buttons should be used where the platform wants to strongly suggest an action that should be done by the user.
For a call to action, I like to use rounded buttons, as they are quite effective at attracting attention.
2. Primary action
Although the call-to-action and primary action buttons may look the same, I would like to separate them. While the CTA buttons perform their function, the primary buttons should be a strong visual indicator that will help the user make the journey. These buttons should be used in situations where the user wants to “Finish”, “Start”, “Next”, and so on.
Primary action button.
For this type of button, I use simple rectangular buttons with rounded edges.
3. Secondary action
Secondary buttons are the “Back” button next to the primary “Next” button. Or the “Cancel” button next to the “Confirm” button. Secondary buttons are an alternative to the primary action that we provide to users.
Two options for secondary actions next to the primary ones.
We recommend using contour buttons or text links for these buttons.
4. Tertiary action
Tertiary buttons are usually used for different actions. For example, when an action is important but may not match what the user wants to do at the moment. This can be the “add friend”, “edit”, “add new” or “delete” button, provided that these actions are not primary.
Tertiary buttons in different forms.
Simply put, you need to use less visible button styles to do this.
2. Common button styles
In this section, we’ll look at common button styles. The style is just the aesthetic of the button, not how it should be used.
It’s simple, solid buttons are buttons with a solid fill.
Contour and Ghost buttons
Contour button is a button with no fill. Although they are often used interchangeably, contour buttons are usually light in color (with a dark outline and text), and Ghost buttons are dark in color (with a light outline and text).
The contour button (on the left) and the phantom button (on the right).
Rounded buttons are buttons that have the maximum rounded corner radius.
The rounded button.
Note: the rounded buttons Next to each other look terrible. Every time you place several rounded buttons next to each other, the UI designer cries somewhere.
FAB (floating action button)
Floating action buttons are a thoughtful design solution that is popular in Google Material Design. Although they may look like a button with an icon, they are actually used for the primary action on the screen.
The button is FAB.
Text links are a very simple type of button. There are several ways to show that the label is a link. This can be the color, underline, position of the link, or just the text itself (for example, “Read more”).
Design of text links.
When it comes to color, most sites use blue, since it is most identifiable as a link.
Button ” icon with an inscription”
The popularity of icon buttons has increased, but some buttons still need a label to convey the message correctly.
Button ” icon with an inscription”
The most difficult thing in working with such buttons is to find the correct ratio of the icon and font.
Option 1: the icon size corresponds to the height of capital letters.
Option 2: the icon size is much larger than the line height.
Warning: if the icon is only slightly higher than the height of capital letters, it will look inharmonious.
There is no label on the icon button, only the icon is present. This saves them a lot of space in the interface. They also allow you to place other icon buttons in a small space.
Buttons-icons in different styles.
Warning: if you are developing a product for people who don’t know much about computers, use the button that says. Especially for buttons with more abstract content.
Icon next to the text link
Some text links can be supplemented with an icon. They usually don’t go beyond the line height.
Link buttons with icons.
3. Selecting the button color and style
There are several factors to consider when designing buttons.
During product design, you should always think about people’s shortcomings. To make sure that colors are available to everyone, you can use an online service to check the contrast. Here’s the one I use.
Also, when choosing a color palette, consider the color language. So, how inconsistency of context and color can cause confusion.
The button “Delete”, “View alerts”, “Save” and “More”.
For example, the green “Delete” button will confuse any user, as will the red “Save”button.
2. The rounded corners
Rounding the corners, namely the border-radius property, is what gives the buttons personality. Buttons with sharp edges look more serious, and rounded ones look more relaxed.
Buttons with different settings of the fillet radius.
Note: as mentioned earlier, do not place several rounded buttons next to each other, as this hurts the eye.
Read also: how UX developer teams are structured in ” Shopify»
The shadow on the button creates a feeling that the button is outside the page, and it really attracts attention. Shadows can also be used to indicate different States. Material Design uses the shadow very organically, making the button “closer” when hovering the cursor.
Buttons with different shadow settings.
4. Label style
The label style depends on the font and how easy it is to read. When selecting a font, make sure that it is legible.
Buttons with different label styles.
Here are some simple ways to make a font readable:
It is better to use capital letters at the beginning of each sentence, or capitalize the initial letters of all words in a sentence, than to capitalize all letters. (Although Material Design uses buttons with all capital letters).
Make sure that the label color is highlighted against the background of the button. This tool will help you do this.
When choosing a font, make sure that it is legible and large enough. Also, the font must be of medium density.
5. The vertical spacing
The size of the button plays a big role in the accessibility of the interface. Most inexperienced designers will say something like “Buttons should have a height of 36 pixels”. This is not the best solution, especially for web design. You should always consider the line height of the font you are using and add a unit of measurement to it. For example: “the Label of my button has a line height of 20 pixels, and the vertical indent is 8 pixels.”
Buttons with different vertical margins.
Ask why? There are two reasons:
People with visual impairments can increase the font size in the browser, so you need to change the font size without reducing the height of the button.
This is how developers create buttons – they add padding to block layout elements, not to the line height.
6. The horizontal spacing
Align the button width to the grid. This is a good way to keep all buttons of the same length. However, this limits the number of words you can use.
Buttons whose width is determined by the grid.
Setting the margin on the sides. I usually set a standard for the minimum width of the button so that there are no very small buttons. Although this method allows you to fit any amount of text, the buttons can get very uneven.
Buttons whose width is determined by the indent and length of the label.
Read also: 10 best podcasts for UX designers
4. The state of buttons and feedback
Button States let the user know whether they can click or have already done so successfully. Also keep in mind that a button can have multiple States. For example, it can be “active” and” hang ” at the same time.