Web design: Make the form fill out more efficiently

Intermediary transaction SEO diagnosis Taobao guest Cloud host technology Hall

Filling out an Internet form is almost every user's daily experience, such as user registration and login, shopping, and so on, all need to fill out a variety of forms. In order to get what the user wants, the form becomes the interactive form between the user completing the requirement and the data required by the website system. The primary goal of the form design is also clearer: make the user quickly and efficiently and easily complete.

Design goals are clear, then how to design the form, the following from the form of the content, organization, process, form element control and interaction, etc. in detail.

Elements of a form

Before we look at how to improve table availability, let's take a brief look at the elements of a general form, and here's what we'll summarize:

Tags: tell users what is the problem with the form?

Input box: Provide users fill out the answer information;

Action: The user submits the form, namely the user clicks a button or the link, performs an operation;

Help text: Help with filling out forms;

Input feedback: Give feedback to user input, input correct or wrong;

Tips for improving the availability of forms

A reasonable organization of information content

Consider the purpose of the user filling out the form, which forms need to be filled out, remove unnecessary form items, and determine the contents of the form. How do you organize it? Table items are not listed from top to bottom, but according to the content of the form, according to a certain logic, through the organization, divided into different content groups, different topics. At the same time, each logical group and the same theme of the table items, but also in accordance with the logical order or user-familiar pattern order, so that users browse and fill out freely. If the table slip long, can also be disassembled into different Web pages, similar to task dismantling, let users fill in step by step.

Brand 1.0 system, when creating a new order, the contents of the form are logically divided into two content groups: basic information (important/required) and additional information (secondary/optional), separating the content group by dividing lines, clear structure and easy browsing. When considering distinguishing a content group, you should consider using less visual information, and too much visual information may result in distraction, resulting in a lot of visual noise to the form.

New Baidu Union account, the form content is longer, at the same time there are several themes, a Web page information is too large, so the use of multiple web pages to organize the form, step-by-step to the user, providing clear path steps, that is clear and simple. When filling, the user provides process instructions to avoid tension and confusion.

Two simplified forms highlight highlights

Depending on the user's use of the data, it is appropriate to hide the advanced form items that are not frequently used or provided to professional users. For example, Brand 1.0 new Creative form, 90% of people do not carry out exposure monitoring link fill, then the default, keep the form of simplicity, so that the vast majority of users quickly completed, to avoid a large number of forms to the user's anxiety, but also to meet the needs of the minority users.

Three clear navigation lines

When you think about how to design your form structure and path, you need to have a basic principle: provide clear navigation lines from beginning to end. The user's browsing line can be inspected by the eye-moving instrument experiment. such as the alignment of the label, the layout of the input box, etc. affect the user's browsing line. When a vertical single path is provided, allowing the user to reduce distraction, you can quickly answer the question and take the least time to complete the task.

such as the following Etre (www.etre.com) provides the eye movement tracking data graph, the form each element constitutes the vertical axis, provides the single path, the user has the clear browsing line, may quickly reply to the question. The other picture, the completion of the process into a curved eye movement, using a single path easier to deal with form problems.

Four consider the user scene to ensure the main flow smoothly

When we design a form, we define a clear linear step, but we rarely actually implement it. Consider user scenarios to ensure that the main process is not interrupted, will cause people to give up the elements to solve. For example, China Merchants Bank card number password payment process, divided into three form steps: Fill in the bank card number, fill in other verification information, payment success. But after the user fills out the card number and other authentication information, often found that the payment exceeded the daily limit, the previous process is, the user interrupted payment process, had to open a new Web page, Bank of China merchants home → online personal banking login → choose a card (card number, query password, additional code) login → online payment → Online Payment amount Management adjusts the amount, then again pays again, enables the user to switch in two operation flow, lets the user various toss. And after the redesign of the design, is very intimate, give information tips at the same time, users can set limits in the current process, to avoid the payment process interruption, while greatly saving the user's operating costs.

And when you create a new ad, choose your own channel, if you don't have the channel you want, you need to create a new channel, add additional pages to the new channel, and at design time, considering the user's scene, next to the Drop-down selection box, add the "New channel" button, to provide users with convenient, reduce the new ad bit flow interruption.

Five select appropriate label alignment

"Should the input box label be top, right, left, or in the input box?" Is the most common problem when designing a form. There are many experiments and studies on this subject (Matteo Penzo's eye-movement experiment, Luke Wroblewski's Luke Wroblewski's findings, Vitaly Friedman's Web Form Design registration form), All indicate that each method has different advantages and disadvantages, which are considered in terms of specific objectives and other factors.

Matteo Penzo's eye-movement experiment found that the top tag, the label moved to the input box takes 50 milliseconds, 10 times times faster than the left-aligned tab (500 milliseconds), and about 5 times times faster than the Right alignment tab (240 milliseconds).

In short, the top of the label, the shortest time to fill the form. But if you minimize the vertical area, consider the right alignment. If you want users to carefully navigate through the labels when they fill out a form, you can use the left alignment when you carefully consider each of the input boxes for your forms.

VI. assistance

For users to fill out the form quickly, generally in the difficult to understand the form of a single increase in Help information, guide users to fill out the forms. Help information that prompts the user how to fill out, common help, usually in the label or input box next to provide Help text, interactive mode has been shown (that is, always appear on the right side of the input box, below or in the input box), instant help (that is, when the input box is activated, help text automatically appear), user-activated instant help ( That is, help information is not displayed by default, user mouse hover triggers help icon to display Help, and user-activated zone help (unifying all the form's help information in one place). In fact, you can consider more ways to better help users, such as often see the expiration of the credit card, when the user activates the input box, the right side of the visual help information, more concise intuitive, better understanding.

Seven Smart defaults

There are many places in the network form that can use smart defaults to reduce the number of choices and input times necessary to speed up the form completion process. By setting the default choices and values that meet the needs of most people, push the default everyone is the same. There is also a personalization default, which is related to the Form object. such as Jingdong purchase order information, intelligent default and personal related, do not need form input, the default before the receipt of the address information, payment distribution methods, invoice information, and so on, in line with the user's needs habits, while avoiding the cost of repeated input. Brand 1.0 new Advertising settings, 96% of the user discount rate is the discount rate of the order, but also to meet the Ka users to modify the advertising discount rate needs, so the input box preset default for the order discount rate, accelerate the majority of users to fill out the form.

Eight Instant feedback verification

Although designing a form ensures that the content of the form is structured clearly and provides meaningful input help, there are always some answers. At this point, direct feedback helps to ensure that people's answers are effective again, providing instant checksums. Instant validation is divided into multiple types of feedback: Confirm the input is appropriate, suggest effective answers, check input information, through real-time update design to help users control within the necessary limits. Such feedback usually occurs when the user starts the input box, continues to enter, or stops typing.

If you are setting a password, require users to enter the number of characters are limited, the character type has a limited password, the use of real-time authentication, not only to tell the user entered the password is valid, whether qualified, rather than fill out all forms, submitted, only to tell me the password need to modify, but also to explain the security of the password, A highly visible way to let users measure password quality.

Direct feedback is not limited to confirming the answers provided, but also providing input suggestions. When users search, the search box can automatically fill in the input process, provide associated search suggestions, can avoid user input errors, but also save the user's spelling time (which is more needed on the phone side).

Nine extra inputs

Additional input can provide more options or advanced options to meet the needs of the users, without prejudice to the users. Less than 10% of users will fill out more than one exposure monitoring link, such users can choose to click the "Add" button to do more input, the immediate increase does not hinder the completion of the task.

Ten other methods

If a user fills out a form that is the same as a form item in an existing form, to avoid repeated input from the user, the user can simply modify a small amount of data to provide a copy-import form data feature.

The key information or difficult to understand the information visualization, clear and effective communication and communications information, the formation of efficient functions, the use of mapping, so that users to achieve the goals of the task efficiently. If the Ad Butler 1.0 Select the Creative template, table list form clear, but the user understand the cost and choice to judge the cost is larger; the new scheme default thumbnail form, emphasis on the creative intuitive, a picture wins thousand words, the user chooses more efficient.

In addition to the above methods, there are some active and secondary action differences, the use of vertical or horizontal tabs, the use of laminated methods. When users fill out a form, they want to complete the task as quickly as possible. It is therefore necessary to design the form clearly and neatly.

Follow-up

With the development of science and technology, the emergence of new technologies such as voice intelligence, photography and sensors, these will certainly open new ideas for form design. It may also be that people do not interact with the system directly through the form of a form, and the form may weaken or disappear.

Resources

Http://www.etre.com

http://www.lukew.com/ff/entry.asp?1502

http://www.smashingmagazine.com/2011/06/27/useful-ideas-and-guidelines-for-good-web-form-design/

Luke Wroblewski "Web Form design:filling in the blanks"