7 UX tips for better online forms
1. Field labels should always be visible, so users do not lose track of them
You can still have fun interactions such as turning the placeholder text into the field label, but it should still be obvious which labels and fields go together. Keep accessibility in mind.
2. Fields should have the correct formatting (especially on mobile)
Number-only fields should not pull up the main alphanumeric keyboard.
Date fields should make it obvious which date format the form is using. When in doubt, use YYYY / MM / DD.
3. Make long forms more engaging by having ‘sections’ or ‘steps’
As a rule of thumb try not to have more than 5 fields per ‘section’ and no more than 3 ‘sections’. Not sure how to start? Group related fields together: [Name, email, address] as one section, [education, training, skills] as another.
4. Long forms should let you save your progress
If you are going to have more than 3 ‘sections’ on your form, let your users save their progress at the end of each ‘section’ so that they can take a mental break and come back.
5. Put the error messages next to the error-causing fields
Everyone hates having to scroll between the error message and the problem field, let alone figuring out which field is causing the problem.
6. Error messages should be helpful, usable concise and easy to understand
Stay away from jargon as much as possible and use examples of what kind of input you were expecting (where you can).
7. (Re)validate each field individually, as well as a whole
Validate the input once your user moves on to the next field. Whilst this might interrupt their flow it will mean filling out the form will take less time than if you only validate each time the ‘submit’ button is pressed.
Never validate as the user types. It leads to increased frustration and a feeling of ‘pressure’ as they fill out the field.
