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 design and psychology research.

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.

• Find a tone and be consistent.

• An estimated completion time.

• Things to prepare. For example attachments.

• Explain what comes next before the form is submitted.

Time and effort

A well-designed form respects the time that I spend.

• 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 use.

• 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.

• Text is readable and properly sized.

Familiar look and feel

Make use of design components and patterns that are known, consistent, clear, and responsive to use.

• Interactive elements appear, sound, and feel like they can be interacted with.

• Visual, haptic, and audible feedback on selection.

• Use field types that match the expected answer. For example numbers, ",", ".", and other characters when asking for amount.

• Interactive elements have a large interactive area.

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.

• Loading states are clearly indicated.

• Show skeleton loaders before real content is shown.

• 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.

Ease of use

Include these accessibility options for added ease of use, and enable many to use your form.

• Include support for screen magnification.

• Color contrast that is WCAG AA or AAA compatible.

• Focus states are clearly visible.

• Form works with browser zoom.

• Support for text resizing.

• Works with screen readers.

• Wide support for languages.