Interaction design: Using masking to improve the quality of text frame interaction

The designers of @c7210 mobile applications have been trying to reduce user input. The screen is too small, the fingers can not touch accurately, the input process generated errors is almost routine.

The amount of input cannot be reduced indefinitely, and most of the time we need to consider how to make the input easier.

An input mask is a way to restrict the formatting of content and avoid typos. For example, we can make the phone number input box accept only numeric content and not respond to any other type of character. The accepted numbers can also be limited to a certain range or pattern. However, the input mask's functionality is not limited to error proofing, it can also be used in more "positive" places, such as merging multiple entries into a single logical sequence so that users do not have to switch back and forth in multiple input boxes.

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

The way I see it recently in Square's iphone application (square Wallet) is interesting, and the user can complete the credit card type, card number, expiration date, CVV number (3 digits behind the card) and zip code in an input box.

The leftmost end of the input box is an icon representing the credit card, and the main content is used to enter the card number, and the masking rule is typically 4-bit delimited. With the user input, the system will judge the card category according to the card number, such as Visa or MasterCard, and change the credit card icon on the left accordingly. This approach saves users from selecting a card type, and is a very positive way of providing feedback that allows users to feel the system responding to their actions (read: Provide positive feedback for the user's successful operation).

When the user completes the 16-digit card number correctly, the text box will automatically change the display mode, the card number entered before will only show the last 4 digits, and the 3 fields saved will be assigned to the validity period, CVV code and ZIP code. Users will also be assisted in typing the input mask, such as formatting, date validation, automatic slashes, autofocus to the next field, and so on.

Here's a great detail, when the user enters the CVV code, the icon on the left will change (as shown above), prompting the user that the so-called CVV code is the 3 digits behind the card; very sweet.

At the moment people seem to have a good response to the interactive model; This is absolutely certain. Use only a text box, that is, the effective use of the input mask error proofing and auxiliary functions, but also greatly reduce the traditional mode of use of text boxes--squre to power!

Also worth mentioning is that Zachary Forrest through the front-end technology to this set of interactive mode "transplant" to the web side, interested friends may wish to go to the onlookers.

Via:lukew & Functionsource

Translator Blog: Beforweb

(Lei Feng Net warlial an article, reprint please indicate from Lei Feng Net and author)