Everything you need to know about button design

Buttons design are an amazing invention: he poked his finger and the screen lit up on the phone, the car started working, the rocket flew to the other side of the planet … and the user does not even need to understand the mechanisms or algorithms of all the magic. In digital, buttons have become a means of controlling digital space – easily, unobtrusively, and familiarly 🙂

Despite the fact that modern household appliances and other devices are moving to touch control, in the near future physical buttons will not disappear anywhere. They have already formed our behavioral habits and therefore it is intuitive and easy for us to use virtual buttons.

Buttons vs Links

Often we see a sad picture – links are used instead of buttons, and vice versa. The distinction between buttons and links matters:

• Links are used when you navigate to another location, such as the “view all” page, “my profile” page, etc.
• Buttons communicate the action that the user can perform: “send”, “combine”, “create new”, “upload”, etc.

The state of a button informs the user of its status.

Each button state should clearly define its capabilities. One state should be different from the other, as well as from the elements surrounding it, but at the same time, it should not radically change the button itself or create visual noise.

What are the states and what do they report:

Normal – the element is interactive and enabled.

Focus – The user has selected an element.

Hover – The user has placed the cursor on an interactive element.

Active (or clicked)  – the user clicked on the button.

In Progress/Loading – The action takes time to complete and the action is in progress.

Disabled/Inactive – The element is not currently interactive, but can be enabled when performing certain actions.

Button styles

The most commonly used are rectangular buttons with rounded corners that are easy to recognize and look good next to the input field. Choosing the right style for a button will depend on the purpose, the platform, and their guidelines (we’re talking about the iOS and Android guides).

Styles speak about the importance of action

Styles are used to distinguishing more important actions from less important ones. Create a hierarchy of actions to help the user navigate through the choices. It can be one prominent button (this style is often referred to as “primary”) and several media “secondary” and “tertiary” actions with a lower accent.

Not all buttons need to be in the primary style

Typically, a designer will take the most frequently selected button by users, give it a primary style, and give it a focus state. This helps users complete their tasks faster and points to the right choice.

The exceptions are cases where all choices are equal or the action has serious consequences in order to thoughtlessly agree to it, and it cannot be canceled. By making both buttons in the same style, you force the user to read the labels rather than click out of habit on the largest or brightest of them.

Don’t make the user think

“Captain Obvious” on duty: the interface should be clear to users, and not become a quest and a labyrinth. Over the years of using various devices and other products, we have formed a certain idea of ​​u200bu200bhow buttons should look and function. Over-creating and deviating greatly from what is considered “standard” will lead to confusion and, as a result, user errors.

Avoid using the same color for interactive and non-interactive elements. If interactive and non-interactive elements have the same color, it’s hard for people to know where to click.

Consistency around the head

This is one of the most powerful UI principles – when everything works the same way, users don’t have to worry about what happens after clicking.

Consistency will help minimize the number of errors or avoid them altogether. Predictability in the sequence of actions will give users a sense of control and confidence that they will achieve their goals with your product. When you create buttons in primary, secondary, and tertiary style, try to combine them with some common elements: color, shape, etc. Try not only to be consistent within the design concept (or – wow – design system ), but also be aware of where and for what these buttons will be used.

Make buttons the right size

Folk wisdom says: “Do it right – it will be fine.” Clicking a button should be easy, and if the user cannot do such a simple action, or there is a chance of clicking on an adjacent element by mistake, this will lead to a negative experience.

In most cases, it is recommended to make touch areas at least 48×48 dp (dp or dip (density-independent pixels) is an abstract unit of measure that helps make an application or website look the same on different screens and resolutions. In other words, the ratio finger and pixel button). Physically, this is about 9 mm, regardless of the screen size. The recommended target element size for a touch screen is at least 7-10 mm.

If the button is an icon, then make sure that the touch area extends beyond the visual bounds of the element. That is, you do not need to exactly aim at the pixels inside the icon but just poke at the place where this icon is located. This applies not only to mobile devices or tablets, where the main tool is a finger but also to devices where we use a mouse or a stylus.

Button design accessibility

The size of the target area is one of the factors affecting accessibility (also font size, color, and contrast).

There are many tools available to help you easily check how well design elements are performing. Here are a few of them:

• check for contrast
• color check
• check for the contrast between the two colors
• multiple factor check
• checking the availability of colors for certain visual diseases

The designer must work closely with the development team to make the buttons work well with screen readers. The button should be used for interactive elements that respond to the user’s response. By adding role=”button” the element will appear as a button in a screen reader.

Gestures are getting more and more popular

Gestures allow users to interact with an application using touch. Using touch as an alternative way to complete a task can save time and provide tactile control. Although some gestures, such as swiping to launch actions, double-tap to like, or long-press, are being used more and more every day, they are still not very obvious to the average user. They should be used as an alternative way to perform an action for more advanced users.

The caption on the button should encourage action.

What is written on the buttons is just as important as how they look. This is again a matter of frustration and user error.

A good button label motivates users to take action. It’s best to use verbs and label the button with what it actually does. It’s as if the button is asking the user, “Would you like to [add to cart]?” or “Would you like to [confirm order]?”.

Avoid flat “Yes” and “No” or overly generic names like “Submit” (what to send? where to send? what to send for?).

What to put in the beginning: OK/Cancel or Cancel/OK?

Well, Kamon. Both options are just choices, and designers can argue about their preferences for hours.

• Positioning the first button with “OK” means maintaining the natural reading order. For example, Windows puts “OK” first.
• Positioning the OK button second means improving dynamics. This helps users evaluate all options before taking action and helps avoid mistakes and hasty decisions. For example, Apple puts the “OK” button second.

Any of the options has strong arguments in its favor, and none of them will lead to disaster.

Don’t disable buttons

Everyone has been in this situation where they are stuck on the screen for a few seconds or minutes, trying to figure out what is wrong and why nothing can be done due to a blocked inactive button and what needs to be done to make everything work.

Instead of deactivating buttons (for example, you wait for the user to fill in the fields), write what needs to be done to move forward. If the button has an inactive status, and there are no prompts, this can lead the user to a stupor. After all, the logic here is simple: what I see is what I think. And I see that since the button is inactive, then the whole form is inactive.

With the active button and hints, everything will become clearer: I must enter what they want from me, and then click the button.

Obvious but true

Buttons are everything. The user did not understand or made a mistake, and you lost the client. The user is tired of guessing or missing buttons, and you’ve lost a sale. UX / UI is not only about clear and beautiful design concepts but also about such small details that form this “clear and beautiful”.

The material was prepared based on the article Button Design – UI component series.