Hi there. If we haven’t met before, I’m Adam and I’m obsessed with designing forms. And I have been for almost 20 years.
What is it about forms then?
Every meaningful interaction on the web is achieved by a form of some sort. Whether it’s letting users renew their passport, send an email or buy something.
Basically anything that isn’t just reading content.
What’s interesting though is that on first glance, forms are easy. In a few minutes you can have text boxes and radio buttons on screen and working.
But look around the internet for a minute, and you’ll find a million and one usability issues revolving around forms.
I’m pretty sure I’ve come across every single one of them. And spent hours solving each one in a way that works for everyone.
And some forms have more than just fields and buttons. They can contain complex interactions or form part of a wider journey—both of which need due care and attention.
So, if I was designing a new form, I’d want to know how to avoid the common issues. And to use my time to solve newer and perhaps more difficult problems.
Seriously, who wants to spend time solving something that’s already been solved?
That’s right—nobody.
Much of what I’m going to say might sound obvious and boring. But boring is good, we don’t need to over complicate matters.
So if you’re looking for new and innovative ways to design forms, this is not for you.
This is about designing forms that everyone can use and complete as quickly as possible. Because nobody actually wants to use your form. They just want the outcome of having used it.
This guide is quick and to the point—a whistle stop tour of the knowledge I’ve accrued in my years of form design. It’s not exhaustive, but rather an entry point, designed to save you time on the basics.
Many points I make link off to other articles. If you read each of them, you’ll be more than equipped to make simple and accessible forms that get out of the user’s way.
Let’s begin.
Placeholders suck and float labels suck too.
Seriously, don’t mess with labels.
Only ask for information you need.
Avoid double-barrelled questions because they’re hard to understand.
Don’t mark required fields, mark optional ones. Better yet, avoid optional fields.
Use hint text to tell users why you’re asking them for certain information—it’s not always obvious. Or if the user has to satisfy a complex set of password rules.
Error messages should be a last resort.
Inputs are not for entertainment so make inputs look like inputs.
Make your inputs 44px in height or more.
The width of an input gives users a clue about the length of content required. So don’t make all inputs the same size for aesthetic purposes.
Avoid multi column form layouts. They’re error prone, slower to use and can cause abandonment.
Make buttons look like buttons and put them in the correct position.
Use sentence case for labels, hint text and errors because it’s easier to read and spot nouns.
Don’t validate as the user types.
Avoid the maxlength attribute.
Validate on submit.
Forgive trivial mistakes like extra spaces.
Show errors above the input, not below.
Colour errors red and use a warning icon to provide a comparable experience for colour blind users.
Error messages should be clear and concise.
Start by putting each question onto a page of its own.
Put back links in the top left of the page. Avoid putting links within the body of the form as it disrupts the tab sequence.
Let users check their answers and make changes before submission.
After submission show users a confirmation page and send them an email.
Now’s the best time to let your brand shine through because this is the beginning of the relationship—not the end.
Use the browser’s autofill routine to stop users from typing data manually and avoid typos.
Use autocapitalize="none", autocorrect="off" and spellcheck="false" to stop browsers automatically changing user input on fields that expect grammatically incorrect data—like email addresses and passwords.
Don’t mix up radio buttons and checkboxes. Remember you can include more than 7 options.
Select boxes should be a last resort because they’re hard to use.
Don’t use datalist as it’s buggy and lacks support. Use an accessible autocomplete instead.
Use three separate text boxes for dates. Only use a date picker when users need to find a date in relation to another, or if they need to know the day, week or month that the date relates to. Date pickers are really tricky so roll up your sleeves.
Use a stepper component to help users make small numerical adjustments quickly and easily.
Avoid multi-input fields like when asking for a sort code.
File uploads: accept large files; accept as many file types as you can; don’t rely on the multiple attribute because it lacks support and only allows users to select files from a single directory.
That probably took you about 2.5 minutes to read.
But if you’d like to master form design and have 2.5 hours to spare, you might like my course, Form Design Mastery:
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。