05. Buttons

This book is a collection of tips on how to make the web interface more efficient, smarter, and easier to use.

05.01

Button competition

A geometric sans serif with simple forms that are used for teaching kids to write in primary school — exactly what the typeface was designed for.

The buttons compete with each other for the user's attention, although the Cancel action is secondary.
It's a little better. The competition has decreased but attention is still unfocused.
Good. It is clear which button is more important.
Also good. There are still differences between the actions of the buttons.
Very good. The icon emphasizes what is important and helps the user make a decision faster.
It has a right to life. The primary button is not clearly separated from the secondary but the buttons are not bright and can be easily read. The user can find the main thing based on the meaning of what is written, not on the color. It's fast.

Splitting

Sometimes it is not easy to understand which button is the primary and which is the secondary. In this case, the second way to reduce the competition of buttons can help: to split them up into groups. For example, with the help of headings.

The buttons compete with each other for the user's attention.
Not bad. Each button is in its own group and the headings help with scanning the meaning.
Definitely good. And yet there is the primary and secondary. Obviously, if the user starts now and signs up, it will be easier and cheaper for the service than contacting the sales team.
It's better not to do that. Underlining is stronger than color. Even then, a button with a colored background is seen as more of an illustration than an action. User wants to intuitively click on the "Contact sales".
05.02

Destructive button

The destructive action should always be secondary and have less contrast than the primary action.

Destructive action draws more attention to itself. The risk of mistakes and accidental clicks on Delete is high.
It's better this way. The destructive button style is quiet and draws less attention.
Even better. The primary (Save) and secondary (Delete) actions are now clearly separated. Accidental clicks will be minimized.

Location

It is better to place the destructive action in the opposite side from the primary action to prevent accidental clicks.

There is a high chance of accidental clicks on Delete.
It's better, now the destructive action will always be conscious.
05.03

Uniform button style

Unity of style is one of the basic rules of design. It is better to use the same border radius, the same shadow style, etc. on all buttons.

Buttons have different border radius.
Unity of style with the same border radius.
Bad. One button has a shadow, the other does not. Perhaps the button without a shadow is pressed?
Good. Both buttons have a shadow, so they have the same style.
05.04

Uniform disabled states

A button that has a colored background or border in the disabled state must get a gray background. Otherwise it will be visually seen as not disabled.

Color is a powerful tool to get attention, and even muted it creates the false impression that the button can be pressed.
Better. It is always clear that the button in the disabled state has a different style and is the same with all buttons in this state.
Make buttons with disabled state have transparent backgrounds. Then they will work well on any background.
05.05

Size of the button

It is better to increase the font size in small buttons. This makes the button label more readable. It's the other way around in the big buttons. It makes no sense to do a huge font size not proportional to all other text sizes on the page. It is enough to make the same font size as in the regular button.

The font size of the button is too small, it is inconvenient to read.
That's better. Even though the button is small, but thanks to the size of the font, the readability is good.
The font size is too large, most likely it will be disproportionate to the surrounding text size on the page.
Good. The font size in the big button is the same size as in the regular button.

Button height

If the button is to the right or left of the input, it must be the same height as the input.

The input and button have different heights. The unity of style is broken.
Good. The input and button are the same height.
05.06

Padding inside the button

Buttons with equal padding look squeezed and static. A general rule of design: different padding create dynamics and improve the perception of objects within the layout.

The button is static and squeezed.
It looks nicer. The different padding on the sides create a better visual.

Optical adjustment

If there is a caret icon to the right of the button label, it is better to reduce the right pedding. This works with vertical icons. Square, round and horizontally stretching icons usually don't require optical adjustments.

Visually, the padding on the right side looks too big.
It looks balanced with reduced padding on the right.
05.07

Ghost button

The button must be shaped and look like a button. Even if this is a ghost button, it shouldn't really like a ghost.

The button does not look like a button. It's hard to say if it's even a link.
Although the button looks like a link and can obviously be clicked, it is not clear what action it will lead to. More usual if the link simply leads to another page, rather than saving something.
Now that's a real button. Its purpose is obvious.
"View cart" looks like just text. It is not obvious that it can be clicked.
That's better. But there is another problem, underlining emphasizes more than color, so intuitively "View cart" is seen as the main action.
Both buttons have a clear divide into primary and secondary and both look like buttons.
05.08

Buttons in a column

Bright buttons in the column increase noise, take up too much attention and reduce readability of the data.

Too much attention for the "Edit" buttons it makes it difficult to read data in the table.
This is better, now the attention to the buttons is reduced.
Even better, even less attention, even more readable data and kept the the "Edit" action cleart hanks to the color emphasis.
Quite good. The role of the action is combined with the name of the user and clicking on it will open an edit form. There is nothing superfluous in the table.