9 of new people easy to get shot in the form design problem

In the website, the form is the main bridge that the user communicates with us. Through the form, users can buy things, subscribe to new articles, update information ... It can be said that the most important function of the website is to be completed by the form. However, this important aspect of dealing with customers, we really have to do? The following are some common form design issues and how we can fix them.

　　The lesson of millions of dollars

How much is the design of the form? Travel website Expedia has shared a lesson: in their order pages, some users fill out tourist sites, hotels, payment information, and press the "buy Now", but did not successfully complete the transaction. After investigation, it was found that it turns out that after the last name section, there is also a field "Company" that is not required, and some users mistakenly think it is the "company" name to write "bank"; worse, the user will fill in the address of the bank in the immediately followed address field. When the subsequent verification of the credit card, if the address, it will be filled out because the card is not the address of the person, and lead to credit card failure. They removed the field in the new version, guess how bad it was? According to them, just delete this field, help them to increase the income of 12 million dollars a year! Just one optional field ...

I believe everyone agrees with the importance of the form, but the following questions are still very common:

　　1. Require users to fill out non-essential information

We sometimes ask users to fill in more information, usually for follow-up statistics, analysis, but is this really necessary? Instead of interfering with the user's most important tasks, can you reduce the amount of information that needs to be filled in and let the user finish? We might think that it's done by changing some of the fields to a mandatory fill. Users do not have to bother to write it! However, looking at the previous Expedia example, the information that the user understands is sometimes different from what we think.

To try out IBM's new product, you need to fill in a lot of fields, but are these really necessary?

　　2. The main button to send out the form (call to Action) is not obvious enough

After filling out the form, in addition to sending out the form and going to the main path to the next page, there is usually a minor path like Cancel, previous step, and one of the common mistakes is to make the button on the secondary path too eye-catching. A button or link to a secondary path, as long as you can find it, do not need to emphasize the color too much, and make it easy to find the main path button's size and color.

Cancel button with red design, too eye-catching and may lead to delays

Mark the main path button clearly, the secondary path can be found

　　3. It is not clear what the value of the form can be delivered and what the cost will be

Sometimes the user gives up the form, not because our products do not meet the demand, but the user spent time, but still do not know what the cost and risk, what will be, should be made clear, or provide some options for the user to decide. For example, does the user receive an e-mail message after the email is received? What is it about? How often do you get it? To speak clearly, users are more willing to trust the information to us, the user will not because after receiving unexpected electronic newspaper, and then angry and put us into the Junk letter list.

And what is the value of sending out forms? You can also consider adjusting the copy of the call to Action button to emphasize. The most important, users care about the value of directly write it!

　　4. Lack of clear navigation, tell the user the current step to which

Is this form sent out to complete the order? Is it going to pay? The unclear information will make the user afraid to go on. In the past interview experience, some users say: "For unfamiliar services, do not dare to go on like this all the time, very afraid of accidentally paid money." "You can consider providing a process, a progress chart, telling the user exactly which step is now, what's next, what to do, how to get back to the previous step, and so on." CTA can also use more explicit text to tell the user what to do now, like the button before the order, it is better not only write "send out", you can write "send orders" will be more specific.

　　5. Failure to provide timely assistance

In the process, the user will still have some questions about the details, such as when shopping, about when can receive? Will my credit card number be at risk? Email me, do you receive a letter that I don't want to see? You can consider providing some common questions and answers so that users can solve their puzzles instantly.

　　6. Too Long pull-down menu

Some problems we will use the Pull-down menu to deal with, such as currency, nationality ... And so on, but if you plug in dozens of or even hundreds of options, it's not easy to pick, it's just a test of patience. You might consider using a Drop-down menu that provides search functionality, which is quickly and easily filtered when a user enters some content.

Google Analytics Set, select the currency of the Drop-down menu, you can enter the keyword search

　　7. Ambiguous error message

The error message should allow the user to know exactly which field is wrong and how it should be improved. The common mistake is not to indicate which field is wrong, or only to say that the field is wrong, but did not say that the format is wrong, the number is too large too small, or how to amend.

The error message must be clear, if the expected data is to start with HTTP, should be directly described, only write "input the correct URL" is too vague

　　8. Clearly prompts the expected user to fill in the format and content

In the form, you should also indicate the title (label) of the field and use placeholder to provide the fill prompt. If only placeholder, when the user starts to fill in the content, the placeholder content disappears, the user may not be able to discover is writing the content to have the error, or is busy other matter to return after forgot this is to fill what.

field headings and input prompts are essential.

　　9. No proper support for mobile devices

It's never easy to fill out a form on a phone, and it's not easy to design a form on a phone. Must pay attention to the font and button size, layout configuration, must be reminded that the test is best to fill out the actual mobile phone to see, and not only with the simulator! Because the simulator can let us confirm the visual configuration is correct, but the actual use of mobile phone to fill in, only more can feel the actual need to spend more.