Asking for Formatting is Asking for Trouble

Posted on January 16, 2017 by Lisa

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)

WET Form Task with daytime phone number input field [1]

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.

WET Form Task with place-holder text in the input field [2]

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

WET Form with a label and place-holder text in input field [3]

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

no-format-tel [4]

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.”

It is up to developers to do formatting work behind the scenes, so that people using forms can focus on their answers.

URLs in this post:

[1] Image:

[2] Image:

[3] Image:

[4] Image:

[5] Form validation demos for Web Experience Toolkit:

[6] Doing the hard work to make things simple :

[7] Form elements at :

Copyright © 2015 Articles. All rights reserved.