Buttons are one of the main interactive components for users to create user interfaces. In this article, I will introduce the things you need to pay attention to when designing buttons.
In order to design the correct interaction, we need to review the history and origin of the physical button, which is the direct predecessor of the UI components that are widely used in all digital products today. The keys are amazing, even if the user does not understand the underlying mechanism or algorithm, the motion state of the appliance, car or system can be set only by the touch of the finger. In the book "PowerButton", RachelPlotnick traces the origins of today's button culture and describes how buttons become a way of digital commands.
"You come to press the button, we will do the rest."-Kodak cameras attract potential consumers through a catchy slogan.
Even today, this is the main reason why buttons attract users. ** You can make things happen with a simple touch, and people can get instant satisfaction. ** Although a large number of new home appliances and other devices are migrating to touch screen control, the physical buttons will not disappear quickly. The behavior habits formed by them will affect the intuitiveness and ease of use of the button design.
Button vs link
The button communicates the actions that the user can take. They are all over the entire user interface, such as dialog boxes, forms, toolbars, etc. It is important to understand the difference between buttons and links:
-
Use the ** link when navigating to another location , for example: "view all" page, view profile, etc.
-
Use buttons when performing actions , such as: "Submit", "Merge", "Create New ...", "Upload", etc.
Communicate the button state to the user
Creating the correct interactions and styles for your buttons is one of the most important parts of this process. Each state must have a clear prompt to distinguish it from other states and the surrounding layout, but it should not completely change the components or generate a lot of visual noise.
** Normal ( Normal ) ****-** indicates that the component is interactive and enabled.
** Focus ( Focus ) ****-** indicates that the user highlights the component (using the keyboard or other input methods).
** Hover ( Hover ) ****-** indicates that the user places the cursor over the component.
** Active ( Active ) ****-** indicates the active / pressed state, ie the user has clicked on the component.
Progress ** / Loading (Progress / Loading)-** Used when the action is not executed immediately, indicating that the component is completing the action.
** Disable ( Disable ) ****-** indicates that the component is currently in a non-interactive state, but can be enabled later.
Buttons come in various colors, shapes and sizes
The most common are rectangular buttons with rounded corners. These buttons are easy to identify and look good next to the input field. Choosing the right button style depends on the purpose, platform, and guidelines. Here are some of the most popular styles:
Style conveys the importance of action
Styles are mainly used to distinguish between more important actions and less important actions. Create an action hierarchy that will guide users through multiple choices. Typically, you can have a prominent button (this style is often called the "primary" button), as well as several medium-level "secondary" and low-key "third" actions.
Styles are mainly used to distinguish between more important operations and less important operations. The hierarchical structure of actions will guide the user to choose where there are multiple choices. Normally, you can have a prominent button (often called a "primary button"), as well as several medium "secondary buttons" and a low-emphasized "three-level button".
Sometimes there is no "default"
Generally, you want to set the most frequently used buttons to "default" (using the main style) and put them in focus. This can help most users complete tasks faster and point them in the right direction.
The only exception is when all options are equal, or when the operation is particularly dangerous, in which case you want the user to make the choice explicitly, rather than accidentally selecting the default option.
Don't make me think
"Don't Make Me Think" is the title of the book written by usability engineer Steve Krug. One of the many points touched in the book is to make the interface look obvious to users, rather than cause confusion. Based on years of experience using various devices and other products, we have formed certain expectations for the appearance and function of the buttons. If there is a big deviation from the "standard" people think, it will cause delays and confusion to users.
Avoid using the same color for interactive and non-interactive elements . If the colors are the same, it is difficult for people to know where to click.
Consistency improves speed and accuracy
" Consistency is one of the most powerful usability principles: when things always behave the same, users do not have to worry about what will happen accidentally." - Jacob * * * Nielsen ( JakobNielsen )
Consistency improves speed and accuracy and helps avoid mistakes. Establishing predictability can help users feel controllable and the possibility of achieving goals in your products. When you are creating first-, second-, and third-level styles, try to find some common elements, such as colors and shapes. Not only must it be consistent within the design system, but also be aware of the consistency with the platform used.
Make the buttons large enough for reliable interaction
Pressing a button should be a simple task. If the user fails to click the button successfully, or if he or she clicks on an adjacent element in the process, it will cause a negative experience for the user and cause a loss of time.
For most platforms, consider making the touch target at least 48 × 48dp. Regardless of the screen size, the actual physical size of the touch target of this size is about 9 mm, which is convenient for user interaction. The target size of general touch screen elements should be at least 7-10mm. For icon buttons, make sure that the touch target extends beyond the visual range of the element.
Accessible Design
This recommendation should be repeated for each component. The size of the target area is one of the factors affecting accessibility. Other factors include font size, color, and contrast. There are many tools on the web to help you easily check the design performance of your components.
Gestures are widely adopted
Gestures allow users to interact with applications through touch. Using touch as another method of performing tasks can save time and provide tactile control. Although some gestures (such as swiping, double-clicking or long-pressing) are widely used every day, for ordinary users, these gestures are still not very obvious. I suggest using them as an alternative method for advanced users to perform operations.
Ok button label invites users to take action
The button label is as important as its appearance. Using the wrong text label may cause confusion for users, waste time, and may also cause some big errors.
A good button label invites users to take action. It is best to use a verb and mark its actual function on the button. It's like the button asking the user-"Do you want (to add to the shopping basket )?" Or "Do you want (to confirm the order )?".
Avoid using yes *, no or too generic tags, such as submit *.
First "OK" or "Cancel" first? Ok
Both are just options, and designers can argue for hours about their preferences.
-
The "determine" operation front can support the natural reading order. If we know that the operation the user is most likely to choose is "OK", this placement may help save some time. The Windows system puts the "OK" operation first.
-
"Ok" after the operation can improve the process. Some people may equate "OK" with "Next". Therefore, the post-determination operation helps users evaluate all options before taking action, and helps avoid mistakes and hasty decisions. The Apple system puts the "OK" operation last.
Either way, there are good arguments, and no choice can lead to usability disasters. I personally basically put "OK" at the end of the action list (probably because I am mainly a Mac user).
Use the disable button with caution
Everyone has encountered this situation: being stuck on the screen for a few seconds or minutes, trying to figure out why your progress is blocked by the disabled button, and what you need to do to make the button interactive. The disabled control is used to indicate that the component is currently not interactive, but it can be enabled in the future. The disabled button is used because if the button is removed from its native position and displayed after the conditions are met, it may confuse the user.
If possible, I recommend avoiding the disable button. It is best to enable it all the time. If the user does not provide some necessary information, just highlight the empty field or display the notification.
Service recommendation
