Multi-button coexistence design in web design

Before in the design of a web system, discuss with another designer, "Save" and "Cancel" button how to design. My point of view is that saving is more commonly used than canceling the button, but also the main purpose of the user (the user will not use the form for cancellation), so visually, the Save button should be more eye-catching than the Cancel button, so that users can be more easily seen first, thereby improving the user's efficiency.

Below: In the Google analytics system, apply is displayed as a button, and cancel is displayed as a link

I happened to see the "Primary & secondary Actions in Web Forms" article written by Luke Wroblewski. The author defines a button such as "Submit", "save", "continue" as the main action. Because they are the primary purpose of the user manipulating the form, buttons such as Cancel, reset, undo are defined as minor actions because they are not the primary purpose of manipulating the form, and their click effects are negative.

The authors have designed 6 visual forms and tested them for the best performance through an eye-movement tester. The result was somewhat unexpected, and the user completed the form most quickly, visually without distinguishing between major and minor action designs. Even so, the authors suggest a more visible approach to visual cues: "button + link."

Want to go further and discuss why there is this problem. In the absence of a choice, it is easier for users to make decisions quickly, according to Don T made me. Or should not be said to be a decision, because there is no need for users to judge. No extra buttons to attract attention, no extra buttons to point to, and the user completes the operation without hesitation. For example, when the "Next" button appears independently, the user often points very pleasantly.

The following illustration: "Next" that appears independently

But when the button is in pairs or multiple appear, the problem comes, the user must read all the button text in order to make judgments, this is undoubtedly the designer does not want to see. So the button to do some guidance, the client is more common practice is the most commonly used buttons or the main operation of the button to set the focus state.

The following image: Opera Browser exit pop-up dialog box, exit is set as the focus button

The end of the page because there is no button focus state, so there are other ways to achieve the same effect. The common ways to open the visual hierarchy are:

1. Ordering of buttons

The main operation on the Windows system is on the left side, the user's browsing order is also starting from the left, so the button on the left is easiest to be seen by the user first.

2. The size of the button

Generally refers to the length of the button. You can open the visual hierarchy by adding longer text, or by simply adding a long button. Such a button is easier to capture first by the user's sight.

The following figure: the previous page button has only one arrow, and the Next button is the text plus the arrow

The following figure: The OK button is longer than the Cancel button

3. The color texture of the button

Simulate the performance of the client Focus button by adding a color or texture to the button.

The following image: WordPress will "publish" button artificially set to highlight

In a web system such as Google Analytics, because of the system default Style button, it chooses to display the secondary operation as a link, thus opening the visual hierarchy. Such designs are also common in "login" and "register".

Image below: Google account login

Finally, to say one more word, praise Opera's design. Opera's pop-up box, so that users like me, just look at the button can quickly make judgments, without browsing the dialog box body text. If I need to make a quick judgment, just watch the focus button.

By contrast, most software buttons simply say "OK" and "Cancel"; I have to read a large piece of text on top of the button before I dare press one. Not only forced me to choose, but also forced me to read ...

Picture below: Three buttons clearly indicate the action

To sum up what has just been said:

1. If possible, try to give the user only one button.
2. When more than one button is required, and the relationship between the main action and the secondary action is needed, the visual hierarchy is used to give the user better guidance.
3. The text of the button should cause the designer to pay enough attention, assume more important role, help the user to make quick judgment.