Forms

Filling in forms in applications and websites is often a pain, but it needn’t be. A few simple steps and the application of best practices can be the difference between hair-pulling frustration and a seamless form experience.

If Your Forms Are Good, Your Product Is Good

We like to think of our designs in high-minded terms, but let’s be real with each other: most apps are really just forms. Complex forms that let you order food, date people, or buy a house—but forms, nonetheless.

Almost every kind of software product features a form (a page with inputs for text, numbers, and other data that the user has to fill in). They are often the source of major frustration, but if you make your forms and data entry work well, your customers will thank you and your conversion rates will improve.

People generally hate filling in forms—it’s slow and can be clunky and cumbersome—so let’s make users’ lives easier by streamlining and optimizing the data entry process.

The first rule of Form Club is: don’t ask for more information than you need. Time and again, users are asked to sign up to sites that ask for:

• First name
• Last name
...

Validate Data Entry as Soon as Possible

Validation on a form means showing the user some feedback that there’s a problem with some of the information they’ve painstakingly entered.

Validate data entered into a field as soon as possible, when the user moves to the next field, so you know they’re done typing in the current one.

Client-side validation isn’t always technically possible, but you should aim for it wherever you can because the “round trip” to the server and back is frustrating if there are errors.

Figure 51.1: Tell the user to try again before they submit the form

There are lots of techniques for doing this, including plenty of third-party validation libraries for popular programming languages and frameworks. In the bad old days, the user would get a (sometimes partially filled) form back after submitting, with errors marked in red like school homework.

Nowadays, it should be possible to show the user what...

If the Form Fails Validation, Show the User Which Field Needs Their Attention

If you really must validate on the server side and can’t do it on the client side (see #51, Validate Data Entry as Soon as Possible), then never send a user back to a form without telling them what to do next, and never with a generic message such as “there was an error.”

The user will have likely entered several different bits of data and they’ll need to get the context of the form back into their head again, once it comes back from server-side validation. The worst way to do this is by forcing them to scan the whole form again, looking for what they might have got wrong.

Having to scan the whole form again for errors is worse still for partially sighted users with screen readers (or other assistive technology) where the attention needs to be drawn to the specific field that needs to be amended. Highlight the problem (or problems) with the form and show the user where...

Users Don’t Know (and Don’t Care) About Your Data Formats

The overarching principle of both forms and wider UX practice could be summarized as “be forgiving.”

Things that users do can often seem strange and unpredictable, but they probably have good reasons:

• The user who can’t save their name because it has a special character (like an accent or apostrophe)
• The user who can’t enter a phone number because you’re validating for phone number rules of the wrong locale
• The user who does (or doesn’t) put spaces between groups of digits in their payment card number
• The user who spells their name with an emoji (this will happen, I promise)

Just because your developer set telephone fields to be 12 digits and 12 digits only, don’t inflict this kind of madness on your poor users.

Your software should be forgiving—it should allow full names to consist of multiple names, with hyphens...

Pick the Right Control for the Job

UX designers have an extensive palette of controls and UI elements to choose from, so it’s surprising to see that often the wrong controls are added to forms.

You can enhance the UX of a product considerably by using the right control for the job. HTML5 has extensive form controls, supported by all modern browsers, including color pickers, telephone input, URL input with validation, and so on—and the UI libraries of both iOS and Android contain a vast array of controls for almost all occasions.

Show users a fully featured color-picker with:

<input type="color" id="color" name="color">

This produces UI like the following:

Figure 54.1: There’s a full color picker, for free, in HTML!

Similarly, let users pick a month and year with a system-native date picker with:

<input type="month" id="month" name="month">

This will...