Writing by Peter Hilton

Guide user input

How to fix, hint, and validate before complaining 2022-04-19 #design

Computer keyboard

Luis VIllafranca

Building a software product doesn’t involve anything harder than naming things until the general public arrive. Whatever your product user interface asks for, people will insist on typing things in wrong and blaming you for the consequences.

You could try preventing users from giving you bad data in the first place, but then you might as well avoid foods you don’t like by refusing to eat. Instead, guide user input in stages.

Fix

no spaces 🙄

Many forms on the web include a phone number field, with a label containing the instruction no spaces. If you choose to respond to the variety of telephone number formats by storing them without spaces or punctuation, don’t make people type in numbers in that format. Instead, write code to remove the spaces.

👍🏻

The same applies for other so-called numbers that people format in different ways, such as credit card numbers or a specific country’s post codes. Don’t start by rejecting invalid input. Do that last, after other tactics failed. First, identify cases where you can safely fix bad input.

Hint

🤔

If you frequently travel by plane, you get used to airline software asking for a booking reference that looks like something like KZVGX5, to look up a reservation. However, industries that don’t all use similar computer reservation systems might have reference numbers you don’t recognise and can’t easily find in booking confirmation emails. Hint text next next to a form input field can tell you what to look for.

👍🏻 6 letters or digits. e.g. KZVGX5

When you don’t accept all possible user input, communicate your expectations. Use hint text to describe valid values.

Report bad input

must be a number

When someone enters their shoe size instead of their age, your software should do three things:

  1. notice the error (validate), instead of trying to use obviously wrong data
  2. inform the user, instead of failing silently
  3. stay neutral and nice, instead of scolding the user.

When you tell people what you expect, they will still enter the wrong value anyway, so validate user input according to the requirements your hint text states.

👍🏻 number ⚠︎ Not a number

When you report a problem, note that hint text and the corresponding validation error message differ. Hint text describes a valid value, while a validation error message describes a problem.

Share on TwitterShare on LinkedIn