[UX] Form Design Best Practices

https://www.ventureharbour.com/form-design-best-practices/

General Form Design & Structure

1. Multi-step forms out-perform single-step forms

2. Remove all non-essential fields

3. Use conditional logic to shorten your forms

4. Top-left aligned labels are best for readability & completion (*)

5. Avoid placing questions side-by-side

6. Give people a reason to use your form

7. Group related fields together into sections or steps

8. Choose field types that reduce the number of clicks required to complete (*)

9. Use smart defaults (-)

10. Know when to use radio buttons, checkboxes, and dropdowns (*)

11. Radio buttons should be vertically-stacked

12. Do not slice fields when asking for phone numbers or date of birth

13. Clearly explain why you’re asking for sensitive information (-)

14. When asking for addresses, use a post code / zip code lookup to reduce field entry

15. Use placeholders correctly

16. Always display a field label

17. Use predictive search for fields with lots of pre-defined options

18. If you must ask an optional question, make it clear that it’s optional (-)

19. Selectable images are among the most engaging question type (*)

20. Be careful when asking for phone numbers

21. Input fields should be sized accordingly

Accessibility & Ease of Use

22. Avoid using Captchas (*)

23. Do not rely on colour to communicate

24. Ensure that your entire form can be navigated using the tab key (-)

25. When asking a question that users may not understand, provide clear explanations to guide them to the correct answer

26. Does your form work on all major browsers and devices? (-)

27. Is your form easy to use in bright or low-light situations?

28. Ensure that nothing flashes more than twice per second (-)

29. Enables browser auto-fill

30. Use milestone submissions (-)

31. Optimize the speed of your forms (-)

32. Avoid auto-advancing (automatically jumping to the next question) (*)

33. Use visual cues and icons to make form fields more intuitive

Input Validation & error handling

34. Don’t make your validation too strict (*)

35. Do not ask people to confirm their email or password twice

36. If you must use validation, ensure that it’s inline (to the right of the field) and reports errors early on.

Ideally, inline validation messages should appear around 500ms after a user has stopped typing. (*)

Trust & Social proof

37. Make your form design beautiful (-)

38. Address likely concerns near your form

39. Display strong social proof in close proximity to your form

40. Be careful using security seals, unless you’re asking for payment (*)

41. Display live chat or contact information within view of your form (-)

Multi-step forms & progress indicators

42. When using multi-step forms, always display a progress bar (-)

43. Be mindful of your transition speeds (*)

44. Use clear signposting

Buttons & Call to actions

45. Call to actions should finish the sentence ‘I want to…’ (*)

46. Make sure call to actions are highly contrasted (*)

47. Call to actions should be the same width as fields (-)

48. Avoid using ‘clear’ or ‘reset’ buttons (-)

49. Sequence your questions logically (-)

50. Do not place overly complicated legal messages near your buttons. (-)

51. Do not trick users by auto-enrolling them into your mailing list.

52. Clearly explain what’s next upon clicking the submit button

53. Upon submit, disable the submit button from being pressed again (*)

54. Make it clear what the user can expect to happen next (Duplicated with 52.)

Mobile form optimization

55. Use the mobile device’s native features (camera, geolocation, date picker) to simplify tasks (-)

56. Question fields and buttons should be at least 48 pixels high. (*)

57. All form labels & placeholder fonts should be above 16px (*)

58. Use specific HTML input types to show the correct keypad (*)

(*) - Good read / Good tip

(-) - Not quite useful tip