Simplified input: Make the input smoother and make the Web form more approachable

Most people do not like forms, because people come to the site, the main purpose is not to fill out the form, but to browse or buy. Carefully designed forms make the input smoother and enjoyable, while poor design makes people feel good about the wall. So what is a good form? The layout of the page, logical organization, visual style and so on are all noteworthy details, where the simplified input is often mentioned recently, here I share my experience in the work ...

1, the more tall input box

Increase the height of the input box, bold font, you can make the page on the input box to look more easily filled out and read. As the size of the computer monitor becomes larger, such an input frame also appears more atmospheric.

2, add selector.

Rather than let people input to provide a choice, select the content only a few points, automatically filled into the input box, not only can reduce input barriers, but also to prevent errors. You can make any desired data into a selector, such as date, color, address, or history, and so on.

For example: The front of the "other account name" input box, you need to fill in the name of each other, if the other name there are Chinese characters do not know how to do? So we can add an uncommon word selector, as shown in the figure:

Open the font, you can choose to fill in the input box according to the fuzzy pronunciation. In addition, the name of the input box has a checksum, select the completion of the input box to do not forget the contents of the check again.

3, preset text.

The use of preset text to simplify the input is often seen on the phone, and is now used on the Web page. For example, a micro-blog to speak on the input box, will retain the last time you did not send the content, you can edit again.

You'll also see a mix of "input hints" and "preset text" on the web. Of course, what you call them can be, but understand that this is two ways of interacting. The purpose of the input hint is to guide the fill, the text disappears after focusing the input box, and the preset text belongs to the formal content to be modified, the font style should be the same as the formal input, and the text will not disappear after focusing.

When a form entry encounters a selection and must be hard to decide, consider preset text as a good compromise. For example, in a form of application for payment, the main need for users to fill out is "offset account" and "Payment amount", payment instructions is an optional. But for the system, must also collect payment instructions, as one of the transaction credentials, this payment instructions how to deal with it? Compare the following 3 ways, obviously check box is not suitable for the way, because if the user does not fill out we can not collect data, and the way to enter prompts or users to fill out, so the significance is not. Compromise the business and the user two aspects, preset "transfer" Two words is good, do not want to fill out the person can completely skip it.

4, the device reads.

Camera read, voice input ... Recently, a variety of intelligent input methods in the mobile phone is very popular, the Web page is not reconciled to weakness, have added these features ~ still face recognition, do not know soon will be popular?

5, set the input properties.

Now it is more reliable that HTML5 provides some form-type properties. There are some interesting settings in addition to restricting input types. Drag-and-drop properties, which can be dragged directly into the corresponding input box from the desktop. Drag the attachment into the mailbox and automatically fill in the subject if the topic is empty. The range and number properties, which can be directly replaced by the input box, are useful for numeric input, as shown in Chrome:

6. Incremental expansion of additional input

When you encounter additional options that you need to add more advanced or extra, you can use the option of adding deletes immediately. Do not need to fill in, you can completely ignore, need to fill in when the click will be displayed.

7, the use of input feedback.

In addition to the correct completion of the calibration, input feedback can help simplify the user to fill out, there are a lot of tips.

For example, in a mobile phone recharge form, you need to repeat the number to confirm the submission. Repeat the entry again, as if you're sure you're going to make a mistake. Adding feedback to the number attribution (in conjunction with historical records) can prevent this kind of annoying way.

The following example officers transferred Guevara the recommended zip code to fill in the input box to make the computer smarter. The recommended content reduces the thought and filling process.

It's also worth picking up on the way the feedback is displayed. For example, the value of the input box was entered in the letter, the format is wrong. If you are not satisfied with the simplest way to provide the error, try to have the letter typed for 1 seconds before it is deleted, which is easier to understand than simply restricting the input type. In addition, you can automatically modify the display format: After the completion of the number input, automatically add space, you can easily read. This can also be used to prompt the user for a check when emphasis is needed, but it doesn't need to be that complicated in a normal input box.

Automatically fill in the amount of decimal, for example, the following example service fee is a decimal, automatically fill the amount of decimal, you can reduce concerns, but very interesting.

In this case, do you have an interest in seemingly ordinary form design? Input box is the most basic human-computer interaction, everyone has a different understanding, the above, thank you for your reading, look forward to more sharing and discussion!

Author: wyw

Article Source: NetEase Uedc