When designing forms, there are some simple rules to keep in mind for a successful user experience.
1. Keep form field names on top
If the name of the field is in the box, the user might forget what they’re supposed to be typing once they’ve made the field active and the title disappears. Having the field name on top of the box is also the only way to fully be accessible. The name on top will ensure a screen reader reads the form in the right order.
2. When possible, don’t create new types of form fields
Web forms have been around for a long time now, and people have learned the standards. If you try to make a new kind of radio button or checkbox, chances are you’ll just confuse your users instead of impressing them with your creativity. Like Steve Krug says, “Don’t make them think.”
3. Use as few fields as possible
This one seems obvious, but if you don’t need it, don’t ask for it! Try to combine fields as often as possible as well. For example, instead of asking for first name and last name as two different inputs, just use the full name as one text field. The fewer fields you use, the less complex your forms are, and the faster your users can complete them!
4. Keep fields in a single column
It’s tempting to have related fields share a row to save vertical space, but this just increases the cognitive load and slows people down, creating a more frustrating experience. Keeping the fields in single columns allows for faster scannability and, as an added bonus, is mobile-friendly by default!
5. Inline validation
If a user makes a detectable mistake while filling out the form, don’t make them wait until they hit the submit button before telling them. Do it live!
6. Group related form fields
Using section headers, create logical groupings of your form fields. It will help your users know what kind of information to expect. Chunking up data like this also helps reduce cognitive load and gets people through more content faster.