All about effective button design in interfaces

Today s post is quite closely intertwined with two other blog posts – a note about button types in interfaces, as well as a selection of examples of button designs on sites from 2009 to the present day. It will be a great addition for them and will allow them to consider the issue from a slightly different (more practical) perspective. Beginner and experienced designers should be interested.

In order to properly organize user interaction with your site / application, we need to remember how physical buttons came to be. In fact, they were the direct predecessors of the user interface components that are so widely used in all digital products today.

The invention of buttons was a real breakthrough in its day. With their help, you can set in motion a device, car or system, and at the same time, a person does not even need to understand the principles of building these devices. In The Power Button, Rachel Carpenter traces the origins of the modern “button culture” and describes how buttons evolved into digital controls.

“You press the button, we do the rest,” Kodak used this catchy slogan to address its potential customers.

In fact, the instant execution of the desired task with a simple touch still fascinates people. While a plethora of new home appliances and other devices are increasingly offering touch-based control options, the physical will take some time to disappear. And the behavioral habits they form directly affect how intuitive and easy to use your interface elements will be. The note is a translation of this article.

VS link buttons

The buttons show what actions users can take. They are found almost everywhere in the user interface: dialog boxes, forms, toolbars, etc. There are a number of differences between them and links:

• Links allow you to go to some other place, for example, to another page (“Read more”), to your personal account, etc.
• The buttons allow you to perform a specific action: “Send”, “Create an account”, “Upload”, etc.

The state of the button shows its current status

The correct design of the element allows you to effectively organize the interaction with users. Each of the button states should have distinct characteristics that distinguish them from other options and environments, but they should not drastically change the appearance of the component or create a lot of visual noise.

In the screenshot above, you see:

• Normal state – indicates that the component is ready for use.
• In focus – is activated when someone selects an element, for example, using the keyboard or mouse.
• On hover – becomes active when a person places the cursor on an interactive element (implemented using the CSS hover property).
• Active or depressed position – displays that the user has clicked on the button.
• Progress / Loading – it is used when the action cannot be performed in one click. It indicates that the object is in the process of being executed.
• Deactivated state – indicates that the component is not currently interactive, but may be enabled in the future.

Buttons come in different colors, shapes and sizes

The most common are rectangular shapes with rounded corners, which are easy to recognize and look good next to an input field. The choice of style for these objects depends on the action they allow you to perform, the current platform and specific recommendations. Here are some of the most popular design options:

Styles convey the importance of an action

Mostly special styles are used to highlight more important actions. Create a kind of hierarchy of them that will direct the user to where there will be many options to choose from. Usually, one prominent button is made (this style is often called “primary”), as well as several middle “minor” and slightly accented “tertiary” elements. You may have seen something similar when working with color in the article How to make a website color palette.

Place an important button immediately in focus state

For the most frequently selected element on the contact page or in the login form, it is better to use the focus state immediately. This often helps the majority to complete the required tasks faster.

The exceptions are those cases when all options are equal or when a certain action carries some kind of danger (usually highlighted in red), and you want the person to click on the button consciously, and not automatically.

“Don t make me think”

This is the title of a book by usability engineer Steve Krug. One of the many points he touches on is how important it is to make the interface intuitive for people.

There is no need to create any complex puzzles or “labyrinths” in your solutions. After years of using various devices and products, we have a certain expectation of how the buttons look and function. If the elements in the application or website differ significantly from this expectation, it will be confusing.

Do not use the same color for interactive and non-interactive elements. Otherwise, it will be difficult to know which one to click.

Stick to a specific sequence

“Consistency is one of the most powerful principles of usability. If it can be traced, then users already know what awaits them next, after pressing the button, ”- Jakob Nielsen.

Consistency in the interface increases speed and accuracy when working with it, helps to avoid mistakes. Think over everything in such a way that the user understands that everything is under control and that with the help of your product he will be able to achieve his goals. When creating primary, secondary and tertiary styles, try to have something in common – color, shape, etc.

Make items big enough

Clicking a button should be a simple task. If the user cannot successfully do this, or in the process of clicking mistakenly lands on a neighboring element, then this will lead to a negative experience with your product and loss of time.

It is best to create pressure targets at least 48×48 dp. Moreover, their physical size will be approximately 9 mm, regardless of the size of the screen. The recommended size for sensor elements is at least 7-10 mm.

For buttons, icons or pictograms for websites, you must make sure that the target to click goes beyond the visual boundaries of the element. And this applies not only to smartphones or tablets, but also to devices where people work with a mouse.

Don t forget accessibility

This recommendation should apply to all components on the screen. The size of the target to hit is just one factor that affects the user experience. But there are other nuances – font size, color and contrast. You can test for yourself how your solutions work in certain conditions – now there are many tools for this.

Designers need to work closely with the development team. Since the role of a button is to make elements clickable, it is best to use the role = “button” property to make the element readable by a screen reader.

Control gestures are becoming more popular

Gesture control allows users to interact with the application / site using a touchscreen. Nowadays, in mobile design, gestures such as swipe, double or long press are increasingly used for actions. This control is best done as an alternative way to accomplish the task for more advanced users.

Good button lettering also plays a big role.

The lettering is just as important as the appearance of the element. Using an incorrect label can confuse a person, waste time, and possibly make serious mistakes in the course of his work.

A good solution is to invite users to take action. It is best to use verbs or specifically indicate what exactly can be done using this button (for example, “Add to cart” (?) Or “Confirm order” (?)).

It is best not to select Yes / No labels or overly general choices such as Confirm.

“OK / Cancel” or “Cancel / OK”? Both are good

Both are just a bunch of buttons that let you make choices. Therefore, in what order they will be placed does not matter.

• Going “OK” first can help save the user some time if we know he’s likely to click it first. On Windows, OK comes first.
• If “OK” is in second place, then this approach excludes clicking “on the machine”. When it is in second place, it allows you to evaluate all the options, and only then choose the one you need. This approach avoids mistakes and hasty decisions. Apple puts the OK button in second place.

Any of the sequences has the right to life and somehow does not seriously affect usability.

Deactivated buttons are annoying

Probably everyone was in this situation. You are stuck on a specific page and trying to figure out why you cannot complete the process due to a disabled button. Similar solutions are used to indicate that the component is not currently interactive, but may be enabled in the future. Also, the buttons are disabled because removing it from its “home” location and reappearing later can be confusing.

However, it is best not to deactivate the buttons if possible. If users have not provided any required information, you can simply highlight empty fields or display an error notification. On this topic, we advise you to additionally read how to make the authorization form perfect.

Total. Well, now you know exactly which decisions for the placement and design of buttons in the interface are the best choices and why. We think that these tips will be useful not only for beginners. If you have something to add on the article, write below.