In the design of a web system, I discussed with another designer how to design the "Save" and "Cancel" buttons. My point is that saving is a more common button than canceling, and it is also the main purpose of the user (the user will not use the form for canceling) vision The Save button should be more eye-catching than the Cancel button, so that it is easier for users to see it first, thus improving users' efficiency.
Below: In Google Analytics, Apply is represented as a button, and cancel is represented as a link
Later, I happened to see that Luke Wroblewski wrote“ Primary & Secondary Actions in Web Forms ”This article. The author defines buttons such as "Submit", "Save" and "Continue" as the main actions. Because they are the main purpose for users to operate forms, and buttons such as "Cancel", "Reset", and "Undo" are defined as secondary actions, because these actions are not the main purpose for operating forms, and their click effects are negative.
The author has designed 6 visual forms and tested which one performs best with an eye tracker. The result was somewhat unexpected. The design scheme that visually does not distinguish between the main action and the secondary action, and the user completes the form fastest. But even so, the author still suggests a more obvious scheme of visual prompt: "button+link".
I want to discuss further why this problem exists. According to don't make me think, it is easier for users to make decisions quickly when there is no choice. Or it should not be said that it is a decision, because there is no need for users to judge. There are no redundant buttons to attract attention, and there are no redundant buttons to click. The user completes the operation without thinking. For example, when the "Next" button appears independently, users tend to click happily.
Below: Independent "Next Step"
But when the buttons appear in pairs or multiple, the problem arises. Users must read all the button text before making a judgment, which is undoubtedly what designers do not want to see. Therefore, some guidance will be done on the button. The common practice of the client is to set the most commonly used button or the main operation button to the focus state.
Below: opera browser Pop up dialog box when exiting, Exit is set as the focus button
On the web side, because there is no button focus state, other methods are needed to achieve the same effect. Common ways to open the visual level are:
1. Button sorting
The main operations on the Windows system are on the left side, and the user's browsing order starts from the left side, so the buttons on the left side are most easily seen by the user first.
2. Button size
Generally, it refers to the length of the button. The visual hierarchy can be extended by lengthening the text or directly lengthening the button. Such buttons are easier to be captured by the user's line of sight first.
Below: The "Previous Page" button has only one arrow, while the "Next Page" button is text plus arrow
Below: The OK button is longer than the Cancel button
3. Color texture of buttons
Add color or texture to the button to simulate the performance of the client focus button.
Below: Wordpress manually sets the "publish" button to highlight
In a web system such as Google Analytics, because it uses buttons of the system's default style, it chooses to display secondary operations in the form of links, thus opening up the visual hierarchy. Such design is also common in "login" and "registration".
Below: Google account login
Finally, I would like to say one more word to praise Opera's design. Opera's pop-up box allows users like me to make quick judgments by simply looking at the button, without having to browse the main text of the dialog box. If I need to make a judgment faster, just look at the focus button.
In contrast, most software buttons only say "OK" and "Cancel"; I have to read a large paragraph of text on the button before I dare to press one of them. Not only forced me to choose, but also forced me to read
Below: The action is clearly described on the three buttons
To sum up:
1. If possible, try to give the user only one button.
2. When multiple buttons need to be presented, and there is a relationship between the main action and the secondary action, users can be better guided by opening the visual hierarchy.
3. The text of the button should attract enough attention from the designer to play a more important role in helping the user make a quick judgment.
From: Tencent CDC
