Behind any digital form that doesn't make you want to throw a bowl of cereal across the living room, lies a series of principles that are based on research in design and psychology.
Engagement
At the start and the end of the form, explain what's expected from me. Let me know if there's any benefits from filling out your form. Think of the form as a conversation. I'm more likely to participate fully and honestly if I know what you expect from me.
Questions and answers that are easy to understand for the recipient.
Find a tone and be consistent.
Estimate completion time.
What to prepare. For example attachments.
Explain what comes next when the user confirms.
Time and effort
A well-designed form respects the time that I put into your form.
Include a visual progress indicator.
Step numbers with checkmarks for completed steps.
Only ask necessary questions.
Layout
I'm more likely to finish a form that feel effortless and pleasant to me.
Step numbers with indication for completed steps.
Group related questions, like personal information, together.
Single column for readability.
Consistent spacing between elements.
Group elements that belong together.
Elements appear in order.
WCAG color contrast.
Focus states are clearly visible.
Text is readable and properly sized.
Interactive elements have adequate hit areas.
Familiar look and feel
Make use of design components and patterns that are known, consistent, clear, and responsive to use.
Visual, haptic, and audible feedback on selection.
Use field types that match the expected answer. For example number when asking for amount.
On smaller devices, use full-width buttons.
Field types that match the expected input.
Take action
Error messages are the part of your form that's most important. It helps me complete your form. If you design this well, I likely won't need help.
Actionable error messages.
Descriptive validation messages.
Red borders for error. Green borders for valid.
Disabled submit button when there are errors.
Screen reader announcements for errors.
Visual indicators that don't rely solely on color.
Status
When I know what the system is doing, I can act accordingly. Explain that something is going on by showing skeleton loaders before actual content loads.
Loading states are clearly indicated.
Form submission status is announced.
Dynamic content updates are announced.
Descriptive feedback for successful actions.
Confirmation message on submission. Receipt if you're required to.
Navigation
I might use a keyboard to navigate. Or maybe I'm unable navigate a smartphone by touching the screen. Your form needs to have accessible navigation. You can use empathy prompts to expand your understanding of user needs.
Interactive elements are focusable.
Logical tab order.
Clear focus indicators.
No keyboard traps.
Extra ease of use
Include these accessibility options for extra ease of use, and enable many to use your form.
Include support for screen magnification.
Form works with browser zoom.
Support for text resizing.
Works with screen readers.
Wide support for languages.