Web page Form Interactive Design details: A reflection of the design of form verification

Article Description: form Interaction Design bis--check 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.

So what's 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 help users reduce the likelihood of errors before filling out a 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, and only if certain conditions are activated can the user operate.

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. ）

Registration page for buy360.com

(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.) ）

[1] [2] Next page