Data Input Medium Priority 27% Adoption 2 Seconds Saved
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.
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.
Auto-Format Numerical Fields has an 27% adoption rate among our benchmark group.
Put spaces or dash marks between every 4 numbers. Like so: 4744-1234-5678-1234
Everyone knows how phone numbers are written. Don’t deviate from that convention.
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.