Interactive Design: improve the interaction quality of text boxes by using input masks

[Editor's note]: The translators @ C7210 mobile app designers have been striving to reduce user input. The screen is too small to touch your fingers accurately. It is common to make mistakes during the input process.

The input cannot be reduced without limit. In many cases, we need to consider how to make the input easier.

An input mask is a method that limits the content format and prevents incorrect input. For example, we can make the phone number input box accept only numbers, rather than responding to any other types of characters. The accepted number can also be limited to a certain range or mode. However, the input mask function is not limited to error prevention. It can also be used in more "active" places, such as merging multiple inputs into a logical sequence, this eliminates the need to switch back and forth between multiple input boxes.

　　The following translation is based on the first-person perspective of the original author.

Recently, I (author of the original English article) saw an interesting input method in Square's iPhone app (Square Wallet, you can enter the credit card type, card number, validity period, CVV number (three digits behind the card), and zip code in one input box.

　　

 

The leftmost icon in the input box represents a credit card. The main content is used to enter the card number. The mask rule is a typical four-digit separation. The system determines the type of the Card Based on the card number, such as VISA or MasterCard, and changes the credit card icon on the left. This method saves the user the step of selecting the card type and is a very positive information feedback method, this allows users to feel that the system has responded to their operations (read this article to provide positive feedback on successful operations ).

　　

 

When the user correctly fills in the 16-digit card number, the text box will automatically change the display mode. The previously entered card number will only display the last 4 digits, the three saved fields are assigned with the validity period, CVV code, and zip code. When you type the content, you can also obtain the help of the input template, such as format limitation, determination of date validity, automatic adding of slashes, and automatic focusing on the next field.

　　

 

Here is a great detail. When you enter the CVV code, the icon on the left will change (as shown in), prompting you that the so-called CVV code is the three digits behind the card; very considerate.

At present, it seems that people have a very good response to this interactive model; this is definitely true. Only one text box is used, which effectively utilizes the error prevention and auxiliary functions of the input mask, and greatly reduces the usage of text boxes in traditional mode-Squre!

It is also worth mentioning that Zachary Forrest "Transplanted" this interactive mode to the Web end through the front-end technology. Interested friends may wish to look around.

Via: lukew & FunctionSource

Translator's blog: BeForWeb

Http://beforweb.com/