Web Form Interactive Design details: Ticket search Form Verification

Article Description: Form Interactive Design three--the ticket search of the check thinking.

In the previous review of the checksum, we have summed up some of the types of validation, the occurrence of the situation, as well as the design of calibration design principles and experience. And in the specific design process, need to combine the business logic of the product, travel ticket booking the whole process, is I have encountered interactive logic, relatively complex situation, its search also includes a lot of input items, and various categories of form control, so its checksum is relatively diverse.

Let's explore the search form in the reservation ticket.

1, 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.

Take the ticket, in the unfinished, there are a lot of websites made a dark hint to assist users more convenient operation input.

The usual practice in China is to prompt you to enter the format, examples, such as:

For example, Taobao, the choice of the address of the input format with a hint of the way to tell users to enter pinyin and the first letter, clear.

Another example is Hipmunk, the return date on the display of dark hints to inform the user if you do not fill out this option to search the one-way result set.

2, in the ticket query most commonly encountered items such as: Voyage type, Address, calendar.

A) Error prompt

The purpose of the error message is to let the user know clearly what is wrong, why, and how to change it.

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.

Instant Feedback Error prompt

As shown in the following figure: Taobao air ticket on the first page of the city and the arrival of the city are Shanghai, will pop up a new page and prompted the error message for the user to wait longer, relative to this kind of hint information displayed in the page more reasonable.

And where to go to the ticket search box, when the departure of the city and the arrival of the city information is empty, or when the calendar chooses to return than go to the journey early, click Search after no response. We initially thought it was our browser out of the problem, not loaded into the JS special effects, the result changed n more than one browser, found that it is no feedback.

The location of the error tip is appropriate and clearly highlighted

The prompt appears in the first place, taking into account the correlation between the error and the location of the currently filled information. Correlation includes the location of error prompts and the effects of visual rendering (e.g. color, or increased pointing arrows, etc.)

As shown in the following figure: Hipmunk is particularly prominent in relevance, the location of the error message directly below the fill item, the entire search area at a glance to see which item error.

As shown in the following illustration: Travelocity is relatively weak in relevance, and the prompt is above the search box, and the error entry is a certain distance from the prompt. Display the screen if it is small, you cannot see the error prompt and fill in one screen.

Although Hipmunk's approach seems clear, there are some limitations. If the page space is more crowded, it is not applicable, because it may cause information-intensive, but also may cause the page to open up and cause errors.

As shown in the following illustration: Expedia's approach is relatively reasonable because its table items are laterally emitted, making the error-Tip and error-box positions relatively close and clearer.

As shown in the following illustration: Elong is weak in the directivity of the error tip, uses a weaker balloon color visually, and does not have an arrow pointing.

[1] [2] Next page