Self-cultivation of a UI button

Editor's note: What qualities does a qualified UI button need? In the eyes of many designers, this does not seem to be a big problem, but in actual design, there are many cases where the details of UI buttons are not handled properly. This article "Button Design — UI component series" from senior designer Taras Bakusevych details the "self-cultivation" that a well-designed UI button should have.

In order to better design interactive interfaces, sometimes we need to review history. To design a button, we may not need to trace the entire history of UI interface development, but at least we need to go back to the time before the birth of digital interfaces.

Buttons are important. Buttons are great.

In the era without graphical interfaces, buttons were used to implement complex commands, hiding algorithms and functions behind a button to make appliances, cars or systems work. In the book "Power Button", Rachel Plotnick traced the origins of today's entire button culture. In the book, he believes that buttons have promoted digital technology, allowing complex commands to be popularized in our lives in an easy, convenient and fool-proof way.

"You just need to press the button and we will do the rest." - Kodak cameras use this eye-catching slogan to attract potential consumers.

Even today, a convenient button design is also a reason to attract users. For example, the home button of the iPhone. By simply touching and pressing to complete the task, people can enjoy a strong sense of instant satisfaction. Although thousands of digital products and home appliances have begun to add touch screens, physical buttons have not disappeared, and virtual buttons are the infrastructure of interaction. The experience and cognition shaped by physical buttons in the past century are deeply rooted, and the habits, cognition and culture it has shaped affect the intuitiveness and ease of use of design.

The difference between buttons and links

Buttons convey direct executable operations to users. They usually exist in the entire UI interface system, from various dialog boxes, windows to toolbars. Buttons and links are very similar in some functional experiences, but the difference between the two is very important:

• Use links when navigating to another location. For example, a "View All" page, the profile of user "Roger Wright", etc.
• Buttons for performing specific operations, such as "Upload", "Create", "Merge", etc.

A button tells the user its state

Creating a button requires using the correct style, and the different styles used to indicate the button state are an inevitable task in the button design process. Each state must have a clear "affordance" so that it can be distinguished from other elements and layouts. However, the differentiated design cannot cause the effect of overshadowing the main feature and create visual noise.

• Normal state - indicates that the button is interactive and usable.
• Focus state - tells the user that it has been selected by the keyboard or other means by highlighting it
• Hover state - This state is displayed when the user uses the cursor or other elements to hover over it
• Active state - indicates that the user has pressed the button (and has not yet finished pressing the button)
• Loading state - indicates that the operation is loading, the component is responding, but the operation has not yet completed
• Disabled state - indicates that the current component is in a non-interactive state, but can be enabled later

Buttons come in a variety of colors, shapes, and sizes

Rounded rectangular buttons are the most common buttons. These buttons are placed next to input boxes and are very easy to identify. However, the styles and sizes of buttons vary greatly. The style you use depends on what you want to do, the platform you use, and the specifications you need to follow. Here are some of the most commonly used and popular styles:

Styles can be used to indicate the importance of a button.

Style priority is used to distinguish the importance of buttons and operations. Through style, you can distinguish the importance of the operations behind them, thereby guiding users to make various choices. Usually, you can let the most important button use the highest priority style, which is usually the "primary button", and match it with several secondary priority buttons, while other rarely used, low priority, and not recommended buttons use tertiary styles.

Sometimes buttons don’t have a “default state”

Usually, we use the "default" state for the buttons that users use most often, which is often called the focused state, or the primary style, which can help users complete tasks faster and guide them in the right direction. However, there are exceptions, such as when all options are equal or all operations are potentially risky. At this time, you may use two sub-priority button styles to present all buttons.

"Don't make me think"

"Don't Make Me Think" is a design spirit mentioned in the classic design primer by usability guru Steve Krug. It involves many key points, but the core idea is to make the design obvious and not confuse users. This is based on years of experience accumulated after designing across multiple devices and various products. We have expectations and basic cognition about the function and experience of buttons. If they are too different from the buttons we usually see, it will confuse people.

Avoid using the same color for interactive and non-interactive elements, otherwise it will be difficult for users to determine what can be clicked.

Consistent design can improve interaction accuracy and efficiency

“Consistency is a very powerful usability principle: when things behave and respond consistently, users don’t have to worry about surprises.” — Jakob Nielsen

Consistency improves the speed and accuracy of user interaction and helps avoid errors. This makes the design predictable to a large extent, and users know what they can do. When you create three different levels of styles, try to use relatively consistent and continuous designs. The buttons are highly consistent within the entire system and take into account other platforms that may use it.

Make the button large enough to ensure reliable interaction

Pressing a button should be a simple task. If users can’t tap the button successfully or can’t access nearby elements during the process, it creates a negative experience and wastes time.

For most platforms, try to keep the button size larger than 48×48 dp (the earliest minimum button size on iOS was 44×44 dp). Regardless of the screen size, the physical touch size of the touch button control should be at least 9 mm, and the visible size of the button control on the touch screen should be within the range of 7~10 mm.

For icon buttons, try to make their touch size larger than their visible size. This applies not only to mobile touch screens, but also to ordinary web pages and desktop UIs.

Accessible Design

For each component, sufficient accessibility should be maintained. Strictly speaking, it means following the WCAG standards in details such as color and layout to ensure that users with visual impairments can easily use them. There are a lot of online tools that can help you test the accessibility of your design to ensure accessibility.

Designers should work closely with developers to ensure that buttons work with screen readers, adding role = "button" to the code and ensuring that elements can invoke screen reader controls make everything accessible to visually impaired users.

Remember to take gestures into account

Gesture interaction is now the basis of touch interaction. Interactions such as sliding, double-clicking, and long pressing have been widely accepted by users and are used frequently every day. However, for ordinary users, they are still not very obvious because gestures are "invisible" by default. I suggest supporting gesture interaction, but not as the only interaction method, and still use explicit button interaction as the basis.

Good button labels can promote user action

The label text on a button is just as important as its visual appearance. Using the wrong label text can confuse people, waste time, and cause problems.

That’s why the importance of microcopy is being raised again and again. Good button text is also carefully designed. It’s best to use verbs to provide trend guidance and mark its actual function. Just like the button asks users “Do you want to add (the product) to the shopping cart?” or “Do you want to) confirm the order?”

Avoid using simple text like "yes" and "no" that could be ambiguous.

"Cancel/Confirm" or "Confirm/Cancel"? Both are available

Which one is on the left, “Confirm” or “Cancel”? Some designers may spend hours struggling and confirming this.

• Put "Confirm" first. If we know that "Confirm" may be the choice in most cases, and such placement can save user interaction time, then it can be placed this way.
• Put "Confirm" at the end. Some people think that putting "Confirm" at the end can encourage users to click. More often, putting it in such a position may encourage users to weigh and think whether to click. In Apple's design, "Confirm" is often placed at the end.

There are good arguments for either approach, and neither choice is disastrous. I personally tend to put Confirmation last (probably because I'm a Mac user).

Disabling buttons is maddening

Everyone has encountered this situation more or less, being stuck on the page for a while, trying to figure out what went wrong in the form that prevented them from moving forward. A button in a disabled state is maddening, and although it can be enabled later if triggered correctly, it is frustrating at the moment. Combined with information guidance and error descriptions, keeping the button in a normal state and presenting the "clickable" state will make users more comfortable.

I recommend avoiding using disabled states for buttons as much as possible.

Conclusion

There are many techniques for using buttons, but here are just the most commonly used and most easily overlooked ones. In the design and use of UI controls, over the years, it has gradually been perfected into a set of "design etiquette", which needs to be paid more attention when designing.