Talk about 9 ways to create a quality Web Form

This article is the author of a reading note, with the CRM system for so long, the form to see every day. If the form has feelings, I guess it doesn't want to see me any more. Is destined, the boss recommended a form design book-"Web form design–filling the Blanks" by Luke Wroblewski, get this book unlike. The book describes the details of the form, the case is sufficient to solve many of the author's unresolved problems over the years. Let's get down to business and talk about creating quality Web forms. Black Feed the dog!

　　1. Label recommended to use right alignment

(Illustration 1: Taobao registration page)

Mateo Penzo's eye movement study in July 2006 found that, if the label was in the top alignment, the user's gaze from the label to the input box would take only 50 milliseconds, the right alignment would take 240 milliseconds, and the left alignment would take 500 milliseconds. If you are efficient, you should prioritize the top of the label.

We look at Taobao registration page of the form using the right alignment, is to consider the top alignment will occupy too much vertical space, once the table items too much, on the form page operation will cause inconvenience, so the right alignment.

So I suggest that, if the table items are not many, limited to consider the top of the label alignment, but also to take into account the high efficiency and the vertical space of the page, then choose the right alignment. Is that not a left-aligned label useless? In fact, research has also shown that when it comes to a professionally strong, user-unfamiliar form that requires more time to understand the label item, you can consider the left alignment.

　　2. required and optional fill

(Illustration 2: Required vs. optional)

This book puts forward a point of view, if the required fields are more, it is sufficient to mark the entries; If more fields are selected, the required fields are marked.

It does make the most efficient distinction between required and optional fields, but now most Internet users for "*" on behalf of the required to fill this has been understood, so the author is recommended in the form as much as possible with "*" to distinguish between required and optional, after all, this is the most common scheme. However, the login form does not follow this rule, and everyone knows that the label entries in the login form are mandatory, and you can also activate the login button based on the status of the label entry.

　　3. Instant Feedback

The text in the earlier form is placed directly next to the label, but many users do not read the text or simply ignore it. In fact, you can combine user action form behavior to dynamically display help information, such as user focus on which tab item, then show which corresponding interpretation copy. Tencent Weibo registration page has one detail to do better:

(Illustration 3: Tencent Weibo registration page)

When the user enters the mailbox has been registered, will immediately give the corresponding prompt, saves the user to enter the additional registration information the cost, but does not let the user fill out then clicks "Submits" the button to give the server to make one judgment.

Of course, in addition to this, there is the password strength and password requirements of the real-time checksum, designed to save user input when thinking time, so that users fill out the form more efficiently.

　　4. Error message

The error message in the form, or some inappropriate hint information presentation, is also the most influential element in the form design.

(Icon 4:error message)

There are more table items in the diagram above, and it is possible to scroll the page in a small size screen to see the full form information, because the click Submit button to the server to verify the data, so in the case of multiple table items, you need to unify in the form of the head of the error message, and it is best to have anchor points, click to direct to the wrong location, save the time users find.

However, as previously said, if you can check the information in the foreground, as far as possible to the front desk check, in addition to save the user's form operation time, you can guarantee the consistency of the experience.

　　5. Smart Default

(Illustration 5: Taobao/cat Shopping cart page, the sensitive data in the picture has been erased)

In the form design, you can save a lot of time by helping users fill out forms that need to be filled out in a smart default way. For example, the Taobao/day cat Shopping cart page in the picture, after each purchase, users need to fill in the address, if the address will be completed to help users save and set the default, in the subsequent purchase process, you can go directly to the next link, eliminating this step of time.

　　6. Set the Tab key to jump

The author thinks that the tab jump is also a way to improve the efficiency of the user to operate the form, but also the designer in the form design must take into account a detail, the tab jump and the table single visual order to maintain the same.

The details are small, but the impact is very large. Many sites do not do very well in this detail. As a negative example:

(Fig. 6: Alipay Checkout interface, the sensitive data in the picture has been erased)

The above picture is the payment Treasure Cashier's page, comes from two different electricity merchant website respectively. According to the design logic of the form, the cursor will automatically focus on the payment password input box after the user enters the account name by pressing the TAB key, but there is a completely different logic in the left and right two interfaces. The left page presses the TAB key after entering the account name and jumps directly to the "Forget account name?" On this link, and on the right, everything is OK.

　　7. Agree & Submit

The last item in many registration forms is to allow users to check with the * * * agreement, in many cases completely nonsense. So this step with the Submit button can be merged together, eliminating the one-step operation.

(Illustration 7: NetEase Mailbox Registration page)

　　8. The action in progress

The last step in completing the form is to submit, which is critical. It's not just that after submitting the results are fed back to the user (the immediate feedback mentioned above), if the network conditions are slow, or the amount of information is large, resulting in a long wait time (in many cases), then we should tell the user all this, so that the user does not feel the waiting time is very long. It also reduces the user's repeated click of the "Submit" button.

(Illustration 8: Submit button small animation)

　　9. Form of dialogue

(Illustration 9: Dialog form)

This is some additional information. A list of items can actually be transformed into a problem, so that users feel like chatting on the other side of the internet, so that the most relaxed and pleasant mood to fill out the form.

　　Summarize

The internet is evolving, and so is the form, which has evolved to give the user more efficient input and a more relaxed and enjoyable use of the experience. In the design process, the designer should put efficiency first, and then improve the experience details of interactive vision on the basis of efficiency supremacy.

Welcome to Ali 37.2-degree experience of the micro-letter public number: