Bad web forms are everywhere.
Bad forms are annoying and frustrating. At worst, they waste your time and impact your opportunities.
But web form design doesn’t have to suck! You can build better forms when you follow best practices and keep your respondents in mind.
Let’s start with an example of a very bad web form.
Meet Alexander.
If he looks familiar, it’s because we were inspired by the excellent book Alexander and the Terrible, Horrible, No Good, Very Bad Day by Judith Viorst, illustrated by Ray Cruz. â–¸
Alexander is a teenager, and he’s ready to go to college… except that applying is the last thing on his mind.
But he has to do it, so on his way home from school, he opens the online application on his phone. Of course, it doesn’t work — it’s too long; it’s not meant to be filled out on a phone. Alexander has to go home and get his laptop, with the feeling that it’s going to be a terrible, no good, very bad web form.
Alexander starts the online application, and he’s fast. He’s typing information, and now he’s ready to go to page 2 —
Oh, wait…
Why is this required? Who has a home phone number anymore?
There’s another error. The social security number has to be entered without dashes. Not sure why. Just keep going…
Okay, now we’re good to go to page 2!
Now, careful not to hit that cancel button… You don’t want to lose everything.
Alexander is savvy; he can normally whiz his way through a form. But whenever he presses the tab key, the tab order is all wrong, and it jumps in a weird pattern. Plus, whenever he runs into a checkbox or a radio button, hitting the label doesn’t do anything, so he has to aim for the little icon.
At this point, he doesn’t really feel like working on the application anymore. Mom is calling him to dinner, but he’s not sure what will happen if he leaves the browser like this. Will it time out? There’s no save button anywhere.
So, it’s probably best to keep going.
Done! It’s been long and painful and he’s not quite sure if he checked the box for that scholarship he needs… but it’s finished.
The terrible, no good, very bad web form is behind him.
Two weeks later, Alexander gets an email.
Oh no… it’s a data breach. Including student names, addresses, dates of birth, and social security numbers.
But that’s okay, I suppose. Alexander got in… and, well, he forgot a supplemental form so he didn’t get his scholarship, but he got into a work-study program… So that helps.
Now, however, he still has to deal with this terrible, no good, very bad web form. He’s printing applications and he has to type them into another database. It’s ridiculous.
And then there are those people arguing in front of him about making changes to the form, and it’s taking forever.
Alexander’s experience is pretty common. These are the kinds of issues that people run into all the time, with all kinds of forms:
- No input validation
- Unforgiving formats
- No compliance with standards
- Not responsive or mobile-friendly
- Asks for too much information, or irrelevant information
- Unclear call to action
But what is bad design, exactly?
It’s twofold: bad practices and bad processes.
