Analysis on the design of website forms (1) how to better guide users

　　

 

A form is mainly used for data collection. You need to enter the form by yourself, such as the name, email address, gender, address, message suggestion, password setting, and personal account management. Nowadays, forms are everywhere. Successful form design can not only improve user satisfaction, but also collect more precise data. On the contrary, failed form design can only collect error clutter information, this may eventually lead to the loss of potential users.

　　I. Organize the content of the form to give users a friendly guide

First, we need to clearly tell you what type of form the user fills in and what can be done after it is filled out? Which of the following questions must be asked? Is there any other way to obtain user information? There are three types of forms: vertical arrangement, progressive filling (Multi-page display), and left and right layout. The organizational form features of these three forms determine their specific styles through different use environments. The following describes some specific examples:

　　

 

Figure 1

According to the Web practice survey, the common organizational structure of the uninstall software interface is arranged vertically. Generally, the top part is to clearly specify the purpose of the form and then present the specific problem of the form. In an unmount form, the content must be simplified to reduce user input, and multiple choice questions should be provided as much as possible, with no required items. You need to know that users do not like to fill out forms, especially when users uninstall software, they do not have much patience to fill out forms. 1. The vertical content organization form of the detachment form. The top part is the speech, which clearly states the purpose of asking these questions. The following is the content of the grouping form. This simple form of vertical layout is easier to obtain user feedback.

　　

 

Figure 2

　　

 

Figure 3

　　

 

Figure 4

　　

 

Figure 5

Under certain circumstances, many questions need to be answered in order, understand and organize the situation of each form to get the best answer, if the form is displayed in the form of dialog, there will naturally be intermittent theme, so multiple webpages are required to turn the conversation into a number of meaningful and easy-to-understand theme. 2 -- fill in the Multi-page display form in Figure 5. Think of a form as a conversation with a specific person, rather than a bunch of data input boxes. Each form uses different situational questions to communicate with users, so the actual response rate is higher.

　　

 

Figure 6

When a form wants to collect more answers, you can consider asking some optional questions after filling out the form to help you get more answers. The use of tags in a form should be unified, concise, and single word. Such labels should be easier to understand. 6. In form design, the layout of left and right is used. Mandatory and important form items are placed on the left side, and available forms are assisted on the right side to reduce the visual scalability of the page form content, the content on the overall interface is arranged in the center, which is also easy to read.

2. Fill in the form feedback to provide users with considerate Guidance

To improve the form completion rate and accuracy, designers will try to avoid a variety of scattered factors and provide a clear, clear, simple web form. This is why any visual effect needs to be used very appropriately. Use visual means to solve such errors and reduce users' misunderstandings. When a user submits data with an error message, is it swollen? First, let the user know where the error occurred and how to correct it.

　　

 

Figure 7

　　

 

Figure 8

Figure 7 mailbox registry single page, when the user submits an error message or an error occurs, there will be a striking red visual element next to the error as a guide, it is a good solution for users who cannot find out where the error is. (For element symbols indicating the error, you may need to consider the need of a user group with weak color blindness during processing, they don't see this strong color prompt, but there is a reminder element like an exclamation point that I want to solve this two-way requirement ). When the user name is registered at the same time, the following is a prompt in the drop-down box, indicating the structure in which the address has been registered, provide users with some help on creating a suffix when they want to name a username with the same prefix, and provide feedback on text icons after filling in Figure 8 correctly.

　　

 

Figure 9

　　

 

Figure 10

Figure 9 and 10 show two error message styles in the registry list. When the input is successful, the message disappears. Different text feedback may be displayed if the input is incorrect or the input does not conform to the standard, inform the user of the cause of the error, and press enter to modify it in time to avoid feedback to the user after filling in all the information.

　　3. the style of the creative form makes it easy and pleasant for users.

The style of the input box and tag needs to be defined according to the overall interface style. You can get more viewers by displaying different creative types. So it is important to design a good idea to optimize the form.

　　

 

Figure 11

Figure 11 blackwave uses a notebook to record important events and inserts them into the form. It uses handwritten methods and notes to attract attention. These interesting designs perfectly convey its functions to users.

　　

 

Figure 12

　　

 

Figure 13

In the form design in Figures 12 and 13, in order to make visitors do not feel the boring layout, the elements of artistic conception such as Retro nostalgia are used to display the form in a way that is stacked with paper.

　　

 

Figure 14

Figure 14 wing cheng's form style is similar to this conceptual website. It has a simple and basic form layout and a unique visual angle, just to make the form more interesting.

　　

 

Figure 15

Figure 15 the form of Orca Bay Sea Foods is completely integrated with the website layout.

　　

 

Figure 16

　　

 

Figure 17

The creative expression of the form comes from the style and characteristics of the overall website, which echo the main perspective of the overall website. It will not feel abrupt during browsing and the overall connection is strong. The main visual style of the 16 ArtFlavours homepage and the form style of the graph 17ArtFlavours adopt the same processing method, all of which are pieced together by block textures to make the user feel more comfortable with the form, it can also impress visitors, and is consistent with the overall style of the website.

The above section briefly summarizes the form and provides an overview of the form layout, interactive feedback filled in, and uniqueness of the creative form, I hope this article will help you with form design.

Reprinted please indicate from "Baidu MUX"