Usable form design cheatsheet — part 1
Forms are often underestimated, yet powerful tool. They are like gateway to your castle — they can intimidate your visitors, or make them curious, make them feel invited. Since I still encounter basic usability fails at almost every form I fill, Idecided to sum-up some best practices of form design and create nice handy checklist.
Fist we are going to explore basic usability. Then we will explore user flow and build his emotions. I will continuously expand checklist of things to consider or be aware of while designing beautiful, usable forms.
Themes we are about to cover in this set of articles:
- Form structure — design for scanning (part 1)
- Data input— dont make me click
- Form data handling
- Form user flow design
- Emotions design in forms
What can go wrong?
Ford’s form is perfect example of many usability issues gift-packed in one form. Lets see, how many issues you can spot. We will come back to this screen later.
Form structure — design for scanning
People read web pages differently than they read printed media. On web, they scan quickly through the contents of a page and if they are unable to preprocess what they see, their cognitive overload increases and they are less likely to engage. Therefore, we must be especially cautios to make forms suitable for skim-reading. Well structured form can make great difference.
1. Single-page or multistep form?
Divide your form in multiple steps or present it all at once? Well, it depends on the goal of your form.
Single page forms are great if you need just basic information. For first-contact, specific call-to-action, creating new leads or getting people to subscribe to emails or newsletters.
If you have complex flow, or need more informations, Multistep forms will probably perform better. Users are more-likely to complete the form, because they have already invested in the process. Always provide progress-marker.
2. Determine essential fields
Make it at short as possible — you probably heard this advice before. In practice, it is not always that black and white. Michael Aagard of Unbounce presented case study, that questions this best practice. Read sum-up from CXL. On the other hand, there are plenty of case studies showing how reducing even one form field brought dramatic raise in conversions. So, what is the conclusion?
You should sort out: Do you prefer quality or quantity of leads? Short forms are easier to fill, but leads tend to be of a lower quality and might increase your acquisition cost.
There is no universal rule. Best you can do is test, test and test again.
Always make clear what fields are obligatory or optional. If there are more fields requiered, it is better to explicitly label optional fields. See case study where adding a word “optional“ next to field doubled conversions.
4. Field grouping
Group similar information and label them. Ungrouped, unlabelled forms are shorter, but harder to scan and harder to process.
Image credit: https://www.nngroup.com/articles/form-design-white-space/
5. Columns
Single-column forms are faster to read and complete.
6. Labelling
Similar prinicple as we saw with columns — Top-labelled fields are easier to read. Top-aligned labels lower eye-fixations by half.
Float label pattern seems to be reducing amount of visual fixations even more. See a debate over this pattern and decide for yourself.
Final comparison
Remember picture from begining of this article? Could you design that form better now? Do you think there is even more room for improvement? Lets see next time.
Checklist for form-design
Structure
- Single or multistep form?
- Ale all fields necessary? Are all fields marked accordingly?
- Did I group fields and labelled groups?
- Recommendations Im aware of:
[ ] One column form design
[ ] Top-aligned or float-labelled fields
More to come! There is a lot more to cover on form usability. In next part, we will cover best practises for help texts, error messages, input formats, masks and much more..
