Deficits in user experience: the psychological bias that has become the norm
You know how it works. Casually reviewing this mug's review on Unbox Therapy, which apparently isn't leaking yet, I laugh. But by the end of the video, I also get…

Continue reading →

Nordic UX: how minimalism looks Scandinavian
Scandinavia has never been known for luxurious forms. The same sentence is true when it comes to UX – the basis of everything is minimalism. Minimalism is a "calming" solution…

Continue reading →

10 examples of truly high-quality UX that helps you learn about users
Make development your priority. You need to expand your customer base, raise revenue per user, and reduce customer losses. At first, this is possible with careful study. You can get…

Continue reading →

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:

Action button
Common button styles
Selecting the button color and style
The state of buttons and feedback
The label of the button
Touch targets
The placement of the buttons
Honor Board button
Final thoughts
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.
Call-to-action button.
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.

Solid buttons
It’s simple, solid buttons are buttons with a solid fill.
Solid button.
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
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 link
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.

Button-icon
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.

1. Color
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.
Multi-colored buttons.
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»
3. Shadow
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
First variant:

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.
Second option:

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.

” There is a little rotten finger everywhere": Yevgeny Kudryavchenko on what the selling site should be like
As soon as marketers began to directly influence what happens to the brand's website that they promote, the real chaos began. In their attempts to attract more users, increase conversion,…

...

Web designers created the worst UI in history
Web design has come a long way over the years, but that doesn't mean it's perfect. We are constantly writing about how to make the UI better, how to fix…

...

The main myths about website promotion (Part 2)
Myth 4 | website promotion main myths Maybe the promotion of a site is not expensive Destroying the myth: site promotion is expensive, but if the competition on the subject…

...

What do I need to know when ordering a site to avoid overpaying?
I will explain on the example of a banal plastic window. The window is simple and clear to everyone, although the prices for different Windows of the same size are…

...