The design of form interaction--checking thinking

Do you often encounter when filling out a form, submitted countless times but still can not pass the check; or whether you're crazy about where there's a mistake in filling it out, or if you've ever met a lot of information you filled out, and then when you click the button to submit, check the error and you find that all the information you've filled out is empty. Or you've been through a lot of validation problems, so now we're starting to think about the design of the form checksum.

What about the check?

1, READY?

Refer to the checksum, we often contact the form after the submission of the error message class information, but in fact, before filling out the form of the prompt information and form to fill out the check has a great relationship.

Such hints can http://www.aliyun.com/zixun/aggregation/17185.html "> help users reduce the likelihood of errors before filling out the form. It appears in the form of the following categories:

A) A brief hint-like: icon,icon+ text, text, dark hints.

Appearance: The general prompt information is shorter, can let the user at a glance to remember, and does not interfere with the form filling out the item.

Alipay.com Payment Page

Alibaba.com Registration

B Complex hints---------------display with thumbnail information or icon, viewed by clicking and hover.

Appearance: The prompt information content is more, needs the user to read carefully, and cannot the simple memory, the direct full display may affect the entire form filling out, therefore this kind of situation needs hover or clicks the operation to carry on the view. Hover or click on a floating layer, mask, or jump to a new page, and so on.

Taobao.com Ticket Boarding person fill in the page

Ctrip.com Ticket Boarding person fill in the page

C Limit Operations-before filling out a form, there are some disabled states to fill in or action items, only if certain conditions are activated by the user.

Occurrence: When filling items and items with the relationship between, the previous fill item will affect the content or state of the following fill in the item, or when the entry is less, fill in the item can be real-time checksum, you can make the main submit action items to limit the status.

Livestream.com Ticket Boarding person fill in the page

D Other Tips--when filling out a form, there is a special but simpler and clearer hint, such as using a picture description.

Appearance: When filling out the form of a single note is difficult to express the words clearly, this time can use pictures, video and other auxiliary ways to help users understand quickly.

Alipay.com water and Electricity fee page

2, ing~

When you have finished browsing the overall form, the next step is to fill it out. In the process of filling in, we will encounter a lot of types of validation, such as: real-time check the Friendship class tips, real-time verification of the warning, the relevance of the check hint. The real-time checksum is also divided into three states one is the help prompt after focus, the checksum in the input, the checksum after lost focus.

Appearance: The prompt information content is more, needs the user to read carefully, and cannot the simple memory, the direct full display may affect the entire form filling out, therefore this kind of situation needs hover or clicks the operation to carry on the view. Hover or click on a floating layer, mask, or jump to a new page, etc.

A) instant check of the Friendship class tips

Instant check of the Friendship class tip is not the submission can not pass the error alert, but to give users some more reasonable advice or help.

Ctrip.com fill out the Boarding man page

(When you choose a child ticket, you will be prompted for certain restrictions on the child's ticket.) When you enter a date of birth that is inconsistent with the type of purchase you have previously chosen, you are advised to purchase a more appropriate type, but not mandatory. ）

Buy360.com Registration page

(When the onfocus will appear below the Help hint class information, of course there are many websites will make dark hints.) ）

163.com Registration page

(When the onfocus will appear on the right side of the password strength, will be based on your password changes and prompts your password strength.) ）

B. Instant Check Alerts

The warning prompt for instant checksums is an error class hint that affects the form's inability to commit.

Warning note classes have a very high level of validation, so they need to be very obvious in color and position. There are a number of websites that have even suggested that the error content and how to modify it after the error are displayed in the hint.

163.com Registration page

Buy360.com Registration page

c) Correlation Checksum

The correlation check is a logical relationship between the items that are filled in, and the correct completion of the latter will depend on the contents of the previous items.

Buy360.com Registration page

(An error is prompted when the password fill item is not consistent with the confirmation password entry.) ）

China Merchants Bank Credit card Payment page

Ctrip Travel Plan Create page

The error is prompted when there is a conflict between the travel Plan destination 1 and the destination 2 time period. ）

3, action!

When you fill out the form and start triggering the Submit button, the form begins to validate the form before it is submitted. At present, there are more than two kinds, one is a hint, the other is a one-time full hint.

A) Tips

One tip is that after submitting the form, although there are multiple errors, each commit displays an error in order only. Article-by-article informed the error prompts, will cause the user to change after the submission and need to repeat the changes, the line of sight up and down, constantly modify the submission, many operations to complete the process of the entire form.

Yihaodian.com Registration page

b All tips at once

A one-time full prompt is to list all errors when submitting the form.

Yahoo.com Registration page

Hotels.com Reservation Page

(the website design not only all the errors at once all listed in the Fill box to the right, and the hover state of the submit button will again render all errors, click on an error will direct anchor jump to the error filling area.) ）

Thinking：

There are 4 basic principles of error: Instant feedback error prompts, the location of the error hint is appropriate and clearly prominent, the message content is clear and understandable, a one-time display of all error prompts.

In addition to these basic design principles, in the design of the form of the calibration, there will be many of the points that I am very entangled, the following list some of my personal experience.

1, in the design of verification, although the need to take into account the obvious error prompts, but in reality, and the size of the page and layout-related, need to consider the actual situation to decide.

2, as far as possible to avoid unnecessary errors, one is automatically injected into the value of the second is restricted operation;

For example, in the ID card fill out the ID card information, if the following also need to fill in the birth date, can be directly injected into the ID card on the date of birth.

3, some error check will automatically fix some information, but this kind of behavior please do not forget to inform the user.

4, the Friendship class prompts the verification important level is always below the warning class error check, in the vision and the interaction position should consider as appropriate.

5, error messages appear in the position of visual effects should be unified, and in the position to remain within the user's visible range.

6, the page automatically anchors to error items, if it is more than can be anchored to the first item, it is best to on the focus to the error of filling out.

7, do not easily empty the user fill out the content.

8, error prompts not only show the error point, but also recommend the user some correct fill out the proposal.

9, after the error prompted, again on the focus to fill in the item, do not hide the error hint.

Source Address: http://ued.ctrip.com/blog/?p=3047