User Experience analysis: Simplified input makes web forms more friendly

Most people do not like to fill out a table because people come to the website to browse or purchase a table instead of filling out a table. Well-designed forms make the input smooth and pleasant, and poor design makes people vomit blood on the wall. What is a good form? The layout, logical organization, and visual style of pages are all worth noting. Simplified input is often mentioned recently. Here I will share my work experiences...

1. A larger input box

Adding the height and font of the input box makes it easier to enter and read the input box on the webpage. As the computer display grows, such input boxes become more atmospheric.

　　

 

2. Add a selector.

It is better to choose from input. The selected content is automatically filled in the input box as long as a few clicks, which not only reduces input barriers, but also prevents errors. You can make any desired data into a selector, such as date, color, address, or history.

For example, in the previous "Account Name of the other party" text box, you need to enter the name of the other party. What if the other party's name contains Chinese characters that do not know each other? So we can add a selector for uncommon words,

　　

 

Open the font library and select Chinese Characters Based on the Fuzzy pronunciation to enter the input box. In addition, the name input box is verified. Do not forget to verify the content of the input box again after the selection is complete.

　　

 

3. preset text.

The preset text is used to simplify the input, which is often seen on mobile phones and is also frequently used on webpages. For example, the input box for posting on Weibo retains the content you did not send last time and can be edited again.

You can also see a mix of "input prompt" and "preset text" on the Internet. Of course, you can call them either, but you need to understand that these are two ways of interaction. The purpose of the input prompt is to provide guidance, and the text disappears after the input box is focused. The preset text is the formal content to be modified, and the font style should be the same as that of the formal input, after focusing, the text will not disappear.

When it is difficult to choose between optional and mandatory forms, it is a good compromise to consider preset text. For example, in a payment application form, the user must fill in the "other party account" and "payment amount". The payment description is an optional item. However, for the system, a payment instruction must be collected. As one of the transaction creden, how can this payment instruction be handled? Compared with the following three methods, it is clear that the check box method is not suitable, because if the user does not fill in, we cannot collect data, and the user needs to enter the prompt method, so it doesn't make much sense. In terms of business and users, the pre-configured "transfer" is still good. People who do not want to fill it out can skip it.

　　

 

4. device reading.

Camera reading, voice input ...... Recently, various SMART input methods have become very popular on mobile phones, and the Web pages are reluctant to show weakness. These features have been added in succession ~ There is also face recognition. I don't know if it will become popular soon?

5. Set the input attributes.

Some Form Type Attributes provided by html5. In addition to limiting the input type, there are also some interesting settings. Drag-and-drop attribute, which can be directly dragged into the corresponding input box from the desktop. Drag an attachment to your mailbox. if the subject is empty, you can enter the subject automatically. The range and number attributes can directly replace the input box, which is very useful for numerical input. It is displayed in chrome.

　　

 

6. Progressive expansion of additional input

When you need to add advanced or additional options, you can add and delete options in real time. You can ignore it when you do not need to enter it. If you need to enter it, click it to display it.

　　

 

7. Use input feedback.

In addition to verifying whether the entered information is correct, the input feedback can also help simplify user input. There are many tips.

For example, in the mobile phone recharge form, you need to repeat the number to confirm submission. Repeat the input once. It seems that you will definitely make an error. Added the number attribution feedback (along with historical records) to avoid this disturbing approach.

　　

 

In the following example, the recommended zip code obtained by the verification is entered into the input box to make the computer smarter. The recommended content reduces the process of thinking and entering.

　　

 

The Display Method of feedback is also worth looking. For example, if a letter is entered in the value input box, the format is incorrect. If you are not satisfied with the simplest error prompt, you can try to display the entered letter for 1 second and then delete it. This is easier to understand than simply limiting the input type. In addition, the display format can be modified automatically: After the number is entered, spaces are automatically added for easy reading. If you want to emphasize this, You can prompt the user to perform the check. However, it is not necessary to make the check in a common input box.

　　

 

The amount is automatically filled with decimals. For example, the service charge in the following example is a decimal number. The number of decimals of the amount can be reduced and interesting.

　　

 

At this point, are you interested in seemingly common form design? The input box is the most basic human-computer interaction. Everyone has a different understanding. Thank you for reading this article and look forward to more sharing and discussion!

Source: http://uedc.163.com/8957.html