Detail thinking Form interactive design: 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.

The location of the error tip should also be considered as having less interference with other information.

As shown in the following figure: the error in the Ctrip hint box clearly obscures the entry to the city and the Popular City Association box below also hides most of the filled areas. This practice seriously interferes with the completion of other search items. Of course, the designer's consideration may be to reduce the user's operation, when the error can be directly to choose and modify the address.

As shown in the following illustration: Kuxun in the error prompt, the alert bomb box was used, although it was very prominent to highlight the error, but forced the user to do the determined action, causing the user to be unable to do other things.

Prompt message content clear and understandable

What prompts the message content to give the user what kind of hint? What is wrong, what wrong, how to change.

As shown in the following illustration: Qunar When the address selection is the same starting and arriving place, jumps the page to display the prompt, the prompt content is as follows. The industry has a different view of this type of informational message, and some people like this kind of more user-friendly descriptive information, but some people like more concise hints. Personally, it is desirable to have a vivid description of humanity, but the principle of brevity still needs to be followed, at least we can find our mistakes in the shortest possible time and know how to modify them.

Show all error prompts at once

When the user submits the filled information, there will be two different situations: one is to tell the error message by article, and one is to list the wrong hints at once.

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.

As shown in the following figure: in Hipmunk, the checksum is a one-time checksum error display, and the prompt appears uniformly below the text box, clear and unambiguous.

As shown in the following figure: Ctrip for the city calendar box verification is one-by-one check, if the user fills out to arrive in the city the same, and the departure date is later than the arrival date, the checksum will be displayed one by one, so that users should be able to modify the completion of the behavior is divided

Of course, the main reason for this test is that the focus of error after submission is in the text box to the city, and provides an address selector for easy modification, so it will block the location of the calendar selector below, resulting in the inability to produce 2 error messages at the same time. But this procedure can be modified at least, 2 text boxes are error red, and in a certain place to display all error prompts.

b) Correlation Checksum

The so-called correlation check, is the input between the items will have a logical relationship of mutual influence.

In terms of air tickets, the departure city and the arrival of the city must not be the same, and the departure date must be sooner than the arrival date, so the design needs to consider a variety of error situations.

There are three approaches: one is to prompt the error message, the other is to restrict the user's behavior, and the third is to automatically revise the information filled by the user.

As shown in the following figure: Qunar The return date of three days after the default injection, when I modified the go-to date later than the return date, it will automatically correct the return date for me to fill in the last three days of the journey date. Personally, this behavior is not desirable in lieu of user action, because the substituted operation is not necessarily what the user wants, and it is easy for the user to ignore the modification behavior.

As shown in the following figure: Orbitz when I fill out the go-to date, the date before the process in the calendar selector is displayed as an optional state. Most of the time this method is still desirable, although when users fill out and then modify the process will still cause the date to fill the error, but the normal operation of the crowd has avoided a lot of error probability.

Ctrip has a very special situation, is the airline's auxiliary search. Designers have to consider when filling in the departure of the city and after the arrival of the city for the airline's dropdown box to select a number of restrictions, only show Shanghai to Beijing airlines with flights. This is also a limitation that prevents users from searching without results.

Summary: Calibration is a very important interactive behavior, this article we only to the ticket search for example to verify the analysis, there is a certain versatility, but for different business or different forms or there will be a lot of special place. As an interactive design we need to understand its versatility and flexibility in the application of various designs.

Author: s++

Article Source: Ctrip ued