MUXL is a community of experience creators and innovators working in UX, Product, Mobile, Design & Development, collaborating to diffuse ideas and knowledge in a supportive and creative environment. https://mobileuxlondon.com Chaymae studied User Experience Design after an extended career in art direction. She has always wanted to do something creative but that has a good impact on people’s lives. Today she aims to help reduce people’s frustration by designing accessible and delightful digital products. In this talk Chaymae will be giving tips about how to design good forms taking in consideration accessibility and usability.

1. How to Design Good Forms
@ChaymaeLougmani

2. A form is an electronic
document containing a structured
set of related user input fields

3. Where do we use forms?

4. Everywhere.

5. Many businesses rely on the
effectiveness of their forms
The $300 Million Button by Jared M. Spool
https://articles.uie.com/three_hund_million_button/

6. Users frequently leave sites
•They keep getting an error in a form
•They don’t want to register
•They don’t want to give unnecessary
information

7. Best Practice in Form Design
Top 10 Recommendations by KATHRYN WHITENTON
https://www.nngroup.com/articles/web-form-design/

8. 1- Keep it short

9. © 1996-2017, Amazon.com, Inc. or its affiliates

10. 2- Visually group related labels and fields

11. https://www.nngroup.com/articles/form-design-white-space/

12. Option A Option B
http://www.lukew.com/ff/entry.asp?571
?
vs

13. 3- Present fields in a single column layout

14. www.lukew.com/ff/entry.asp?571

15. www.lukew.com/ff/entry.asp?571

16. 4- Use logical sequencing

17. Password
Must have at least 6 characters
Name
Enter your name

18. Consider regional or cultural differences

19. 5- Avoid placeholder text

21. Password
Label
Form field
Placeholder text
Must have at least 6 characters

22. Copyright © 2017 Waitrose

24. 6- Match fields to the type and size of the input

25. Marks & Spencer

26. Hotmail, Microsoft

27. 7- Distinguish optional and required fields

28. http://patternry.com/p=required-form-fields/

29. http://patternry.com/p=required-form-fields/

30. 8- Explain any input or formatting requirements

31. ©2017 asos.com Ltd

32. 9- Avoid Reset and Clear buttons

34. 10- Provide highly visible and
specific error messages

35. Google

36. Forms and accessibility

38. Associate labels explicitly
Label and input tags
https://www.w3.org/WAI/tutorials/forms/labels/

39. Tag the groups for screen readers
Fieldset and legend tags
https://www.w3.org/WAI/tutorials/forms/labels/

40. Empathy

41. Empathy is key to design accessible
digital products
@ChaymaeLougmani
Thanks