Here’s my best practice guidelines for form design.

Working on a design system for a bank has taught on a lot about forms. I’ve watched testing in our labs. I’ve worked alongside experts from specialist accessibility organisations. I’ve seen forms tested by disabled people and users of assistive technology. I’ve also read a lot of research.

From all this learning I’ve formed my own forms best-practice guidelines. I thought it would be useful start recording it. Here’s my work in progress. I do UI/UX so I’m coming at this from a designer’s perspective.

Inclusive Design Principles. Designing forms for people experiencing permanent, temporary or situational disabilities improves the experience for everyone. I also look to the WCAG principles. Your website or app must be:

  • perceivable
  • operable
  • understandable
  • robust and compatible

In summary, think of your user and keep things as simple and as functional as possible. But don’t overvalue simplicity and style at the cost of clarity. In the words of Luke Wroblewski “obvious always wins“.

Back to top ↑

Back to top ↑

Buttons in the wild

Back to top ↑

Radio buttons in the wild

Back to top ↑

Checkboxes in the wild

Back to top

Notifications in the wild

Back to top

  • WCAG 3.3.1
  • Provide a text description when user input falls outside the required format or values W3C Techniques for WCAG 2.1
  • Text needs a 4.5:1 contrast ratio against the background. Check your red text. WCAG 1.4.3
  • Icon needs a 3:1 contrast ratio against the background. WCAG 1.4.11
  • Consider users with colour vision deficiency. Test your error messages on a colour blind person, or using a free colour blind simulator like Color Oracle.
  • Don’t rely on colour alone to convey your message. Provide an additional indicator to colour, like an icon. WCAG 1.4.1

Error messages in the wild

Back to top

Date entry in the wild

Back to top

Select boxes in the wild

Back to top

? These are my opinions based on my experience, research and testing to date. Yours might differ based on your goals, target audience, location and product. Test whenever you can and use your metrics to inform choices. I’m always learning so if you discover a better way of doing something I’d love to hear about it.



Source link

Write A Comment