Designing the perfect button

When interacting with the interface, users should immediately understand which elements are clickable and which are not. The more effort it takes for users to understand the interface, the less user-friendly it is for them.

When creating buttons for mobile applications, you need to consider the size of the touch zone. According to a study by MIT Touch Lab (IT laboratory, USA), the optimal size of the touch zone will be 10x10 mm.

Don't play "find the button" game with the user

The order of the buttons is important, especially if there are paired buttons. For example, how to arrange the Back/Forward buttons? Logically, the button that moves you forward should be on the right, and the button that moves you backward should be on the left.

It's important to place buttons where people expect to see them!

Focus on the most important action

In the example below, the main action is highlighted in color and is also located on the right side of the window, close to the thumb of the right hand, which minimizes the time for pressing the button.

Buttons should say what will happen when pressed.

Exactly the same buttons as above, but without the corresponding inscription. Do you feel the difference?

Button shape

When creating buttons, you can use various shapes, even some original and unusual ones (although you should be careful with the last option).

The main thing is to maintain the unity of style throughout the site.

Button priority

The main action button should be made more visible by increasing its size or using a contrasting color.

Take care of order

The order of digging should reflect the conversation between the user and the system. When designing an interface, think in advance what actions the user will want to see on the screen.

Don't forget to answer

When a user clicks a button, he expects to receive a response confirming the interaction. When a button does not provide feedback, the user thinks that the system did not receive the command and repeats the action.

For some operations (for example, downloading), you should not only give an answer, but also show the current state of the process.

Button types and behavior

Volumetric button

With a flat website design, it is advisable to add visual effects for buttons in a static state. In this example, when you hover/click the button, the shadow disappears and it becomes darker.

Flat buttons

The main advantage of flat buttons is that they do not distract attention from the content. And can be used as secondary.

Switch button

This button allows you to switch between two states. Almost all switches are used as On/Off buttons. 

Radio buttons can also be used to group together items that are related to each other. But the layout must clearly indicate that these buttons are part of an entire group of elements.

Icons are best used when the user can make a selection and deselect it, there are no other options. For example, give or remove a star from a product. Apple uses toggles in the Settings section.

Outline buttons

These are transparent buttons of a simple shape. Usually there is a very thin line along the outline of the button, and the inside contains plain text. When clicked, the button fills with color

These buttons are best used for secondary content because they won't compete with your primary call-to-action buttons.

Button states

A button has several states, and the user must clearly understand its current state.

Normal condition

Windows 8 is a prime example of bad button design. It is difficult for the user to understand whether objects in the settings menu are clickable.

State in Focus

The right thing to do is to let the user know that he is hovering over the button. The user immediately understands that their action has been accepted and wants visual confirmation.

Pressed state

By animating different elements of your design, you can add a fresh twist, get a little creative, and delight the user.

Inactive state

There are two options - hide the button, or display it in an inactive state.

Conclusion

Buttons are designed to guide the user and push him to take the action you are interested in. Therefore, it is worth taking care to make this element of the highest quality possible. Difficulty finding the right button will be a hindrance at best, and a complete failure at worst.

Think of a site or app as a conversation with the user, and buttons as a means of communication. A site without buttons is a monologue, with buttons it is a dialogue. The button plays an important role in this conversation.