Note: button is a necessary element in interaction design. It plays a very important role in the interaction between users and systems. In this article, I will introduce the seven basic principles of creating a valid button separately.
One, the button is the button
When it comes to interacting with the user interface, users need to know immediately what is “clickable” and what is not. Every item in the design requires users to decode. Generally speaking, the more time users need to decode, the poorer the availability.
But how do users understand whether an element is interactive? They rely on previous experience and visual symbols to determine the meaning of elements in the interface, which is why they have to use the appropriate visual elements (such as size, shape, color, shadow, etc.) when creating a button. Visual symbols have important information value, which helps to create visibility in the interface.
Unfortunately, in many interfaces, the symbols of interaction are very weak, which greatly reduces the possibility of discovery. If the interaction is not clear enough, even if users can’t even click which ones are not sure, it will be meaningless to make the design cool.
For mobile users, the problem is even more serious. When trying to understand whether a single element has interactivity, the PC user can move the cursor onto the element and check whether the cursor has changed the state. However, users of mobile terminals do not have such opportunities. They can only click, and there is no other way to detect them.
Do not think that for users, things in the interface are obvious.
In many cases, designers deliberately do not identify buttons as interaction elements, because they think interaction elements are obvious to users. When you design the interface, you should always keep in mind that using familiar design create buttons, the user’s ability to understand interactive elements is far less than yours, because as a designer, you certainly know what your design is for.
Here are a few buttons that most users will be familiar with.
- A filling button with a square border
- A button full of rounded corners
- A shaded button
- The ghost button
In the above example, the “shaded button” is the clearest for the user, and the user knows that it is clickable as soon as it sees the dimension of the button.
Don’t forget to leave white!
The vision of the button itself is important, and the blank part around it is also crucial. Take the ghost button below, for example, some users may think of it as a message box.
Two. Put the button where the user wants
Buttons should be placed where users are easy to find, and users should not be allowed to look for buttons all over the world. If the user fails to find the button, they will not know the existence of the button. Use traditional layout and standard UI mode as far as possible.
The traditional button layout improves the discovery; with a standard layout, the user can easily understand the purpose of each element – even if it is a button without a strong pointer. Combining standard layout with clean visual design and adequate blanks will make layout easier to understand.
Don’t play button games with users to test the discovery of design. When users first come to a page that contains some operable behavior, they should easily find the corresponding buttons.
Three. Function of annotated buttons
A button with a generic or misleading tag can give users a great sense of frustration. When writing button labels, it is necessary to clearly explain the functions of each button. Ideally, the label of the button should clearly describe its function.
You have to let the user know clearly what the reaction will be after a button is pointed. Let’s take a simple example. Suppose the user accidentally points the delete button, we will see the following message:
What does “OK” and “Cancel” mean in this context? Most users will ask themselves, “what happens if I click Cancel?”
So do not design a dialog box or form consisting of only two buttons “OK” and “Cancel”.
Using “Remove” as a label is much clearer than “OK”. Users can see what it means by looking at it. In addition, if “Delete” is a potentially dangerous operation, you can mark it with red.