Dunkin Donut Mobile Gift Card – Raibach Interactive Design

Client: Dunkin Donut for ICG Date: 01/2013

Role: Product Design, Lead UX and UI Designer, Researcher, Note Taker. UI styling to match ABS styling.

Solution: When asked for your credit card number: Input masking for mobile – we all do it now. As soon as you type a number the credit card “face” changes to become a VISA or MASTERCARD (or whatever) showing you instantly that the app is preloading what you are typing.

No need for card type, enter number, expire on same line. Address not necessary, name not required – total amount should only be present.
Confirmation pop not necessary.

Getting rid of all this complexity streamlines the checkout process.

Delivery method appears next to amount in the summary area. Editing this is done by reselecting – easy. At the time input masks were a rare desktop expereince and had gained popularity. More industries eventually embraced it as a default approach to mobile credit card processing.

Single-Field Credit Card Input Pattern

A credit card with input masks refers to a method of formatting and securing credit card information during data entry, typically in digital or online environments. Input masking involves automatically formatting the credit card number as it is entered, often by adding spaces or other separators to make the number more readable and easier to validate. For example, credit card numbers are often formatted with spaces after every four digits, mimicking the way they appear on physical cards. This approach helps users verify the accuracy of the number they have entered and reduces errors during the checkout process.

In addition to formatting, input masking can also refer to the practice of hiding or obscuring the actual credit card number during input, which enhances security by preventing the full number from being visible. This is particularly useful in scenarios where the credit card information is being entered into a form or a payment gateway.

References:
Luke Wroblewski has been talking for a long while now about how input masks make form entry a lot less painful for people. He recently highlighted Square Wallet‘s clever single-field credit card capture pattern. The post referenced a phenomenal port of Square’s native app behavior for the Web by Zachary Forrest (@zdfs). Luke’s excellent work was just what I needed to get started.