Accessibility issues: the registration form that interacts with the user

Web page Production WEBJX article introduction: a case of form design for an aviation website.

Morning rush to the end of the month to Hangzhou air tickets, through the "where" entrance into the Shanghai Airlines website, incredibly must log in before booking (most of the purchase of tickets to the site can also be set). Look at hundreds of dollars in the face, then register it.

Registration Form I'm happy when I look at it, it's just a few days ago. The core of the text that interacts with the user is a true portrayal of the problem, very typical. Looks very bad, it is very inconvenient to use. Although it did not cause me a lot of obstacles, but certainly delayed a lot of time, not at all relaxed and happy. First look at the following screenshot:

This is a good exercise, mistakes in the classics, the best questions, please think first. I'm going to go straight to the point where I make improvements, with priority differences, which are divided into "accessibility" and "availability", with the first accessibility issues list:

1. Change to a single layout (guided view);
2. Two categories of "account information" and "Ticket information" are divided into two fields (distinguishing content attribute);
3. Each form control is customized to the width of the attribute and grouped ("hints provide useful clues to the organization's answer");
4. Red required asterisk hint should be in advance rather than after (let the user first see);
5. Dropdown option text should not be degraded to render (at least not lighter than the color of field names);
6. "Password" field two words to remove the middle space (without deliberately aligning the top of the "user name");
7. The "Sex" field is replaced by a radio control that has no default value (the dropdown list defaults to "Male" is also wrong);
8. "Date of birth" field made click Selection, and the right calendar icon hint (differentiated guide);
9. The Contact Address field control should use textarea instead of input (the text area is used to write paragraphs of text);
10. The "Country" and "City" fields use Drop-down options to link and merge on performance (same as attributes);
11. The "certificate Type" and "voucher number" fields are merged (same as attributes) on performance;
12. "Contact number" and "Mobile number" field changed to "landline number" and "mobile phone number" (the meaning of the expression should be peer);
13. "Zip" field under "Contact address" (address is more important than postcode);
14. The "Register" button is placed on the left side of "reset" (preferred to see and use);

Note that the above is just an accessibility issue because I haven't used the form yet. Usability issues are found after using the form, I only did a simple test, the incomplete test results list is as follows:

1. Click "Detect whether have the same user name", can not use the warning window to inform the use of "√" prompt. The first should unify the hint effect, the second can use the green character, cannot use the red character.
2. "Password" field after the tab entered the "real name", "Certificate Type" field selection after the tab entered the "Birth date", should be used TabIndex to do the index. Of course, if a single-column layout doesn't have these problems.
3. All error prompts should not use a warning window, preferably after each field.

Some people may say, so seriously do, you do not also successfully ordered success, I can succeed does not mean that everyone is successful. In the professional sense, as a beta version I have no opinion, "complete the task" the goal is to achieve. But the quality of design, such a work can only be a failure (this example design to achieve only two points, the first auxiliary description of the text downgrade, the second distinction between primary and secondary Operation button).

Just use this example to discuss the problem of single and double column layout, the most common two-column layout advantage reason is "can save space, shorten the layout." That's theoretically the case, but a two-column layout can be a lot of hassle to avoid, and the fact that the form is clear and clear is a little bit longer for the user. Save the layout also has design skills available, one of the reduction of unnecessary fields, the second merge with the attributes or associated fields (such as certificate type, identification number), its three hidden priority low field (such as mobile phone number, landline number, should recommend the use of "mobile phone number").

Finally, or looking at the face of hundreds of dollars, take the time to finish this article has an operational optimization program. Online ticket prices change very quickly, because the next single flow is not smooth and affect did not rob a special ticket, I have experienced two times. It is hoped that all the engineers of the aviation website will improve the website, benefit more tourists on the Internet and create value for the company.