Tencent ISUX: Thoughts on form design

Almost every day, we come across forms of various kinds, such as logging in to accounts, filling out information to access services, publishing content, etc. However, the process of filling out a form is often not particularly pleasant. It takes time to input information, click submit, and perhaps wait for approval. Especially when it comes to complex and long forms, if the user experience is poor, it is easy to make people feel frustrated and choose to give up halfway.

So, how do you make your users more efficient at filling out forms, prevent them from making mistakes or losing them in the middle, and increase their enjoyment and conversion rates? This article summarizes the following approaches to Web form design:

Effectively persuade users to fill in

First, tell the user why he is filling out the form, what he is getting out of it, and let the user see the benefit of giving that information to you. GitHub, for example, clearly shows you the help you’ll get when you sign up for it on the right side of its sign-up form:

In addition to telling the user what the benefits are from completing the form, you can be more specific and tell the user why you asked him to fill out a particular piece of information.

Convincing users to fill out forms effectively also requires eliminating negative distractions and gaining their trust. In most cases, the biggest concern users have about filling out forms is how the information will be used once it has been collected by the site. Users don’t want to be bombarded with spam, and they don’t want their private information to be made public. This can be done by citing commitments from influential authorities, or by showing evidence of public impact, such as media coverage, user stories, etc.

You can also be more considerate and tell the user how long it will take to fill out the form.

Organize information properly

If the information is not organized, it is easy to appear complicated and chaotic for a complex form with many items to be filled in, which makes users resist at the very beginning and even choose to give up. Reasonable hierarchical organization of information, can make use of the box line, space interval, color, according to the categories of different information, attributes and correlations for block division, with a step bar to indicate the current process.

Generally, notifications are blue, warnings are yellow, errors are red, and successful confirmations are green.

Clear browsing line, reasonable label, prompt text and button arrangement, avoid unnecessary information repetition, can reduce the user’s visual burden and physical burden.

Hiding information properly can make a form look clean and pleasant, and some information can be set to appear only when relevant actions are needed.

Distinguish between primary and secondary actions. Define primary actions with buttons, secondary actions with links, or give primary action buttons a more distinct style than secondary action buttons.

Save time for users

A form that takes a lot of time to fill out can easily make people impatient. The user is lazy and busy. Try to delete all unnecessary items and consider whether there is a better way (such as conducting follow-up research) to collect the required information besides letting the user mechanically enter data on the form through the keyboard.

A captcha is always one of the most frustrating things a user can do on a form. He has to wait for a captcha to be generated, confirm its contents, and make sure that it is entered correctly before he can click submit. The whole process is of no practical value to him. We can eliminate captchas by changing the experience of entering captchas to make them easier and more fun, or by limiting the number of times users submit a captchas per day with new backend logic.

Our colleagues in the Security Platform anti-malware group have come up with an interesting way to use image captcha:

In addition to the captcha, it takes just as much time to sign up for the double-check password that is often used to fill out forms. At present, many major foreign sites, such as Facebook, Twitter, LinkedIn, Friendster, etc., do not ask users to confirm passwords when filling out registration forms. WordPress doesn’t even require the user to fill in the password. Instead, it sends the password directly to the user’s email.

In addition to the above simple and crude method, using plaintext confirmation when entering a password for the first time can also save the time for entering a password again. For information security, you need to support users to switch to dark text at any time. Here are some ways to confirm your password in plaintext for your reference:

Mouse click and drag operations are more efficient than keyboard input. By adding pickers, shortcut options, intelligent associations, range sliders, number tweaks, etc., users can complete the form more quickly.

Add pickers, shortcut options:

Support drag upload:

Intelligent association:

The range slider:

Fine-tuning number:

Use the drop-down box carefully. The drop-down box is more suitable for selecting dates, provinces and other places with a wide range of options because it will hide information from users and requires external operations to display it. For a limited number of important options, a more obvious selection is more appropriate.

Relax user input requirements, including format, case, etc. Make your system more flexible rather than asking users to change their input habits for you.

Error prevention. Carry out effective real-time verification, so that users can timely modify, supplement missing information; In addition, we can prevent users from making mistakes by limiting their behavior (e.g., when booking a flight ticket, the return time cannot be selected before the departure time, the departure city cannot be the same as the arrival city, etc.) or providing automatic correction.

Make your forms smarter by providing more active interactive feedback, preset text, automatic retrieval of information, automatic formatting, complete decimal points, and more.

For example, when a user enters a credit card number, it can automatically determine what kind of credit card the user uses.

When entering a mobile phone number, the user can determine the location of the phone. If a user enters a wrong number, the user is more likely to be detected.

When the user selects the location, the zip code is automatically filled in.

When the user enters the bank account, the space is automatically broken.

When the user enters the amount, the decimal is automatically added.

Help users make decisions. The more choices a user has, the harder it is to make a decision. At this time, you can properly prioritize each option, highlight one of them, and tell users the reason for your recommendation, so that users can easily compare and choose.

Support common quick operations, such as Tab switching, so that users can complete the entire form without using the mouse.

Offer friendly guidance

Clean up the jargon (database errors, for example) and try to use more friendly language to guide users to fill in and tell them why they are wrong. When a problem arises, clearly explain the cause of the problem and provide effective solutions. If necessary, you can add more vivid photos or visualizations to guide you along with your copywriting.

One-stop service

Submission is not the end of the form, we need to provide a one-stop service to the user, forming a closed loop of the process, so that the user does not jump out in the middle. For example, when a user selects a product and clicks payment on a certain website, he finds that the account balance is insufficient. At this time, he can only recharge before subsequent operations. However, after the recharge, he finds that he can no longer find the selected product and payment page. This is a typical case where the process is not closed loop. Similarly, when the user needs to download resources in the forum, the system prompts reply to download, but the user does not register, need to submit the registration form before this, when the user fills in, but directly jumps to the homepage of the forum.

A good form design not only needs to consider users’ guidance before filling in, timely verification and help when filling in, but also needs to consider the whole process experience after filling in. Think about why the user filled out the form in the first place, so that he can get what he wants most quickly after completing the form. Even if he can’t get it at the moment, he needs to be told why and what to do instead.

Provide design care

According to statistics, about 12% of the population has some mild or severe color vision impairment. Using color as the only element that distinguishes unclickable text from clickable links can make it difficult for people in this section to use. We can use dotted lines, buttons, or other shapes to make it easier for these users to see which areas are clickable.

Finally, add a little more pleasure

Studies show that larger text boxes, moderate white space make people more likely to fill in, and elegant animations make it more fun to fill in. The following cases are for reference: