Auto-Format Numerical Fields - Spiralyze

Auto-Format Numerical Fields

Data Input Medium Priority 27% Adoption 2 Seconds Saved

Automatically formatting numerical fields to appear the way users expect speeds up data input, reduces errors, and feels reassuring.
Conversion Opportunity 0.1%

Every number has a pattern and rhythm we expect.

Phone numbers have a 3-digit area code, followed by 3- and 4-number chunks, (678) 867-5309. Credit card numbers are displayed on you credit card in 4 chunks of 4 numbers, 4744-1234-5678-1234.

Imagine seeing a date written out as 08261991. After staring at it for a second, you may recognize it as August 26th, 1991. Now imagine it was written out as 08/26/1991. Much easier to read and makes for a better user experience.

Think back to the credit card number. Imagine you get an error notification that reads “Invalid Card Number.” If the number entered in the field looks like 4744123456781234, that’s just an ugly mass of numbers, and most users will just re-type the whole thing. But if it appears as it is on your credit card, like 4744-1234-5678-1234, it’s much easier to find and fix the error, and move on with your purchase.

Simpler to read, easier to edit - lowered friction.

Usage

The best way to format numbers is to remember how we read the numbers. Your credit card has numbers laid out in 4 chunks of 4 numbers – when typed into the payment info form online, automatically format the number this way. Most users won’t spend time putting the spaces in themselves.

Phone numbers are written out with the 3-digit area code first, sometimes in parentheses. Users won’t naturally put those spaces in, so a number typed in as 6788675309 should appear as (678) 867-5309.

Dates are less common in checkouts, and can vary in format internationally. Current North American standards are Month/Day/Year, or simply Month/Year. Don't get creative with it, just follow convention.

Walmart does not format the phone number, leaving it as an unbroken string.

Etsy separates the card number into chunks as it appears on the card.

Adoption

0
20%
40%
60%
80%
100%

Auto-Format Numerical Fields has an 27% adoption rate among our benchmark group.

Best Practices

Cards Come in 4 Chunks of 4

Put spaces or dash marks between every 4 numbers. Like so: 4744-1234-5678-1234

Phone Numbers

Everyone knows how phone numbers are written. Don’t deviate from that convention.

Dates

Don’t make the user type out the date with slashes or dashes on their own. If they type 08261991, it should appear on the page as 08/26/1991 or 08-26-1991.

Examples

Good

Finishline Example

Finishline properly formats numbers. (click to see phone formatting)

Newegg Example

Newegg properly formats numbers. (click to see card formatting)

Okay

Bass Pro Shops Example

Bass Pro Shops format phone numbers, but not the credit card numbers.

Bad

Barnes and Noble Example

Barnes & Noble does not attempt to auto-format any numerical inputs.