Confirmation Box Design

The confirmation box, as the name suggests, identifies key http://www.aliyun.com/zixun/aggregation/8172.html "> user behavior, such as" Ask for delete "and" notify deleted. " According to the observation on the Internet, some websites found that the design of the confirmation box lacks rationality. This article talks about own thinking.

category

Depending on the trigger, the confirmation box is divided into two categories: inquiry and notification.

Push Confirmation Box

Ask, like the Confirm in Javascript (), that is: whether to do it?

FLICKR's notification

Tells, like the Javascript in the alert (), namely: the State of doing.

Necessity

Any action that hinders (interrupts) the user's behavior should be done before you leap. Calm down, we really, certainly, must interrupt the user's action? Consider the following three questions to consider "necessity".

is. Since it is the user's own initiative to make this decision, then confirm that the design of the box is not, but the user is easy to operate incorrectly. To solve the problem of "misoperation", let's talk about the confirmation box. Remove the confirmation box. You really can't? Don't you know this is very important to the user really? Use the confirmation box to. It is not possible to remove it. Are you sure? Can't you optimize the process? Use the confirmation box to. Elimination of

Necessity (on Sina Weibo, under Tencent Weibo)

Both microblogs can only add up to 10 labels, and their confirmation boxes are above the limit. What is the best?

Design

Make a confirmation box to ensure its availability.

According to the controllable degree divides into: The primary and the pop-up layer two kinds.

Javascript Native Type

JS Code native Confirm () confirmation box benefits only one, that is coding convenience. Disadvantages are:

styles vary by operating system (and browser) Unable to change the button copy and style without a grade no emotion pop-up layer type

Note: This is not about the pop-up layer, but the confirmation box for the pop-up layer type.

The pop-up layer, because it is pure hand-written, fully controllable, macroscopic:

Mask. Use a mask because the contents of the confirmation box are important. Color depends on the emotional tone of the site, regardless of importance (because it is really important); Centers the caption relative to the center. The title content format is not set. Left-aligned, the format of the form depends on the content of the button. Center or right align the picture. No, or at most one move. can move and keep scrolling to exit the response. You must click a button to respond appropriately because the confirmation box is important. Similarly, do not set the "X" shortcut key in the upper-right corner. Can consider, remember to take care of the visual impairment of the user not more than a word to say matching the user's education level of the language to write a copy, deleted verbatim, unless the ambiguity to take care of the user's feelings. Here one more word, WINS 10,000 words clear clear logic clear

Yes, 8630.html "> Sometimes the head is hot and the logic is messed up." A clear format helps to rationalize (yourself and your users ') logic.

noted consequences

Again, it's really important.

does not use judgment words and pronouns

Just write "yes" and "no" as "delete" and "Cancel" directly.

placed

Flickr Messy Button Order

We used to say "Yes or No" and we said, "No", so we set the order of the buttons in that order. (Vice versa,) Be sure to unify at the whole station, do not have a left for a while right, you call the user point where?

The

style is consistent with the full station button. Do not recommend the use of HTML built-in buttons, after all, has come to this step, do a little more priorities. Encourage users to click on the button to use a prominent/sharp color, instead of using a constant color, or simply use the form of text link

The Cancel button doesn't look right.

Avoid using gray. Because Gray does not look clickable. White also does not agree with the case analysis

Three examples of "Drag to blacklist (Block this person)" were selected.

To drag someone black

Highlights：

not more than one word logically clearly indicate consequences determine = determine, avoid the mishap button copy of Google +: Stop someone (drag someone black)

Highlights：

contains all the highlights of the Watercress experience unified format clear priorities (more recommended to use eye-catching red) do not use pronouns can be redeemed through the photo evoke emotional knowledge: drag someone black

Extended Reading

Xiao Bang "Usability Case analysis" http://cuikai-wh.com/blog/1543

Source: http://cuikai-wh.com/blog/1924