Form design: Take form layout and fill in 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. What happens when you encounter an error message from a user submitting data? First, let the user know what happened, where it went 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.

Third, the creative form of style, to give users a relaxed and enjoyable feeling

The style of the input box and label is defined according to the overall interface style, and through the display of different creative types, you can get more viewers. So it's important to design a good idea to optimize the form.

Figure 11

Figure one blackwave the function of recording important things in notebooks and inserting them into the form. Using handwritten methods and notes, the elements of a note-making, these playful designs make its functions perfectly communicated to the user.

Figure 12

Figure 13

Figure 12 and Figure 13 of the form design, in order to make visitors do not feel the layout of the boring, with retro nostalgia, such as artistic elements, and paper folding way to show the form.

Figure 14

The form style of wing Cheng is more consistent with this conceptual Web site, with a simple and basic form layout, a unique visual angle, just to make the form more interesting to fill out.

Figure 15

The form Orca Bay Sea Foods is designed in a way that is completely integrated with the layout of the site.

Figure 16

Figure 17

form of creative expression from the overall site style features, and the overall site of the main view of the echoes, browsing up will not feel abrupt, the overall contact is strong. such as the main visual style of Artflavours home page and figure 17ArtFlavours form style, using the same treatment methods, all use the cloth piece texture patchwork way, so that users feel more comfortable with the form, also can give visitors a deep impression, and the overall style of the site is also very unified.

The above is a brief summary of the form, from the layout of the form, fill in the interactive feedback and creative form of the uniqueness of the three aspects do some overview, I hope this article can make form design help.

Original address: http://mux.baidu.com/?p=1988