Buttons that look like buttons

How do users understand whether a design element is interactive or not? They use familiar visual cues to interpret the meaning of an element for themselves. Digital buttons are the descendants of physical buttons - i.e. knobs or buttons. Therefore, it is important to use visual cues to highlight the interactivity of a user interface. If it's not clear to the user which areas are clickable, it doesn't matter how aesthetically pleasing the design is. If the application is not intuitive to use, the user will leave it immediately. With mobile devices, making buttons stand out is even more important. Unlike working on a computer, where you can use the mouse to check which elements are clickable, the status of interactive elements does not change on mobile devices.

Buttons or links

Buttons determine actions that users can perform. They are often placed in UI elements such as dialog boxes, forms, or hero sections. Links, on the other hand, are used to navigate or change context.

Different states

Displaying the appropriate feedback when interacting with buttons is important. Each state of a button must have a clear difference to the other states and other UI elements.

Disabled buttons

We are all familiar with the situation where we cannot continue our action because a deactivated button prevents our progress. This behavior is especially common in various form sections (order, login, registration, etc.). Thus, it is usually made clear that the user cannot proceed because required information is missing. Rarely, however, do users understand the reason for deactivating a control element; instead, they perceive the behavior as a general obstacle, sometimes even as an error. To counteract such situations, an "active" button is displayed, which, however, only performs an action when the information required for its execution is available. A bench mark for input fields that need to be filled out points out to the user the information that is still required.

Different destinations, different buttons

Choosing the right style for a button depends on its purpose. For example, if an action should be available to the user everywhere, a floating action button is often used.

A button that is particularly worth highlighting is one that has a call-to-action (CTA) behind it. CTA buttons have a great impact on their usage rate and are therefore often considered as the most prominent element of the user interface.

Styles

The style of a button helps the user to understand the importance of the action and to recognize a hierarchy in the choice of actions. It is therefore advisable to differentiate between interactive and non-interactive elements in terms of shape and color to counteract difficulties in deciding which action can be performed on each screen.

Consistency in all styles of buttons supports a positive user experience, avoids errors due to misleading interpretations, and lets the user navigate through the application more expeditiously. Therefore, it is imperative to unify the look of all buttons.

Don't make me think

In the book "Don't make me think" by Steve Krug, the author talks about the importance of designing a user interface in such a way that the user can perform the tasks intuitively. Years of experience have led users to develop a certain expectation of buttons. Confusion and errors in operation cannot be avoided if this expectation is not met.

Clean interaction

Pressing a button must be a deliberately chosen and simple interaction. Accidentally or hard to click buttons lead to a poor user experience and frustration. Therefore, depending on the end device, care should be taken to ensure that the dimensions are large enough.

Accessibility

Accessibility should generally be checked for each component. Here, the size of a button is one of the factors that influence accessibility. Other factors are font size, color and contrast. There are many tools that can be used to examine the accessibility of UI elements - for example, webaim.org/resources/contrastchecker, coolors.co/contrast-checker, or Sketch Plugin " Strong".

Labels

How buttons are labeled is as important as how they look. An ambiguously labeled button can confuse the user or lead to errors in operation. Buttons should invite users to perform an action. Therefore, verbs are particularly suitable as labels for buttons that describe the action behind them. Using "Yes" or "No", or generic labels such as "Continue" potentially lead to confusion.

Test and experiment

In our experience, the best way to define the appropriate size of a button is to think about the environment in which the application will be used. For example, if users are in motion (fitness app, navigation app) buttons should be larger than usual. When we want to find the most suitable place for a button, we get our answer with the help of A/B tests.