Web Form Design: The layout of the form, the interactive feedback filled out, and the uniqueness of the creative form

Article Description: Analysis of Form design: Take form layout and fill in interactive feedback as an example.

Forms, mainly responsible for data collection functions, need visitors to fill out their own, such as the visitor's name, mailbox, gender, address, message advice, set password, manage personal accounts and so on. Nowadays forms are ubiquitous, and successful form design not only increases user satisfaction, but also collects more accurate data, whereas failed form design collects erroneous, messy information that could eventually lead to the loss of potential users.

First, organize the content of the form, give the user a friendly guide

The first thing to tell the user is what kind of form to fill out and what can be done after filling? What are the questions that must be asked? Is there any other way to get the user's information? The layout of the approximate form is divided into three types: vertical arrangement, progressive filling (multiple page display) and left and right layout. These three forms form the organization function characteristic, decides their concrete style through the different use environment. Here are some examples of the following to do some specific analysis:

Figure 1

According to the Web Practice survey, uninstalling the Software interface common organizational structure, for the vertical arrangement of styles. The general top is for the purpose of explicitly filling out the form, and then renders the specific problem of the form. In the Unload type of form, the content must be streamlined, reduce user input, as far as possible to provide multiple-choice questions, fewer questions, no required. Know that users do not like to fill out forms, especially when users uninstall the software is not too much patience to fill out the form. As shown in Figure 1, the Unload form vertical content organization, the top is a speech, clearly say the purpose of asking these questions, the following is the content of grouped forms. This kind of vertical composition concise form forms form Organization, is advantageous to obtains the user the feedback.

Figure 2

Figure 3

Figure 4

Figure 5

In some cases, many questions need to be answered sequentially, understanding and organizing the situation of each form to get the best answer, if the form of the form of dialogue alone, the theme will naturally break, so you will need multiple pages to make the dialogue into a number of meaningful and easy to understand the topic. As shown in Figure 2--Figure 5, the form of multiple pages of the form is filled out. Take the form as a conversation with a specific person, rather than a bunch of data-entry boxes, and each form communicates with the user in a different context, and the actual answer rate is higher.

Figure 6

When the form wants to collect more answers, consider asking some optional questions after filling out the form to help you get more answers. The label of the form needs to be unified, concise, and individual words, so that the label is easier to explain. As shown in Figure 6 of the form design, using the layout of the left and right layouts, the left on the required and important form items, the right-hand side of the auxiliary put on the choice of form, reduce the content of the page form of the huge visual, the overall interface Content Center arrangement this way is also more beautiful and easy to

Second, fill out the form of feedback, to the user attentive guidance

To improve the completion rate and accuracy of the form, designers try to avoid various distractions and provide a clear, simple Web form. That's why any visual effects need to be used very appropriately. The use of visual means to solve such errors will occur, reduce user misunderstanding. Does it swell when you encounter an error message from a user submitting data? First, let the user know what happened, what was wrong, and how to correct it.

Figure 7

Figure 8

Figure 7 The Mailbox Registration Form page, when the user submits an error message or an error operation occurs, there will be eye-catching red visual elements around its error as a guide, a good solution to the user can not find the wrong where the embarrassment (on the hint of the wrong element symbol, in dealing with this piece may also take into account the color blindness Anomalous trichromatism user group, a requirement, They are not able to see this strong color hint, but there are exclamation points such as reminder elements exist I think can also solve this two-way demand. When a registered user name appears, here Use the dropdown box style hint, this address is in what structure form has been registered, give the user to name the same predecessor of the suffix how to add some of the recommended help, and Figure 8 fill in the correct text icon to give feedback.

Figure 9

Figure 10

The two error hint styles for the registration form in Figures 9 and 10 when the input success prompts will disappear, input errors or input does not conform to the standard will have a corresponding different text feedback, inform the user of the cause of the error, timely return to change, to avoid users fill out all the information and then feedback to the user.

[1] [2] Next page