It’s time to finally stop requiring users to format numbers in online forms. Front-end developers need to put in the extra effort to accept any format or provide masks instead of displaying error messages. To make that point to Government of Canada teams, we included forms in a series of studies for the Web Experience Toolkit (WxT) in 2015. Shockingly low percentages of users formatted their answers properly for fields as simple as a telephone number.
Format in label – few use it
The first prototyped form showed the telephone number field as it was then shown in the Web Experience Toolkit form demo. It asks users to enter their phone number with hyphens (a frequent Government of Canada form demand).
- Only 7 of the 13 desktop participants entered their phone number in the requested format
- 6 would have seen an error message if format validation had been added (the HTML5 field is coded as ‘type = tel’ so error messages were only displayed if the number entered had a letter in it, or some other validity issue)
Format in placeholder – even fewer use it
Next, we presented a place-holder in the same input field.
- 4 of 10 desktop participants used the format
- And since there is no hyphen on a mobile phone keypad, only 1 of 7 mobile phone participants used the format.
Label and placeholder – better but not for mobile
For the final formatting attempt, a label and a placeholder were displayed.
- 8 of 10 desktop participants typed in the hyphens – an improvement
- 1 out of 10 phone participants used the hyphen format – no improvement
No format – no problem
Given the poor response to the format cues, the team removed them completely.
- 8 of 29 participants on desktops, screenreaders and phones still used a hyphen, the rest did not – one added brackets around the area code
- A few commented that they wished it showed the format – they’ve been burned by error messages many times, but most just proceeded without it
On our recommendation, the formatting cues in the Web Experience Toolkit demo were removed for telephone numbers and postal codes, and the postal code validity rules were loosened to be case-insensitive, and accept spaces or no spaces between the characters.
Some government form designers complained that not requiring formats means they must write code to format the resulting input for storage in a database. To this, we nod our heads and cite the Gov.UK team’s design principle: “Do the hard work to make it simple.”
- Doing the hard work to make things simple
- No telephone formats on Gov.UK forms either – Form elements at Gov.uk
It is up to developers to do formatting work behind the scenes, so that people using forms can focus on their answers.
