1. The document discusses best practices for form design, including minimizing user effort, providing context, and ensuring clear labeling and navigation. 2. A case study is presented where simplifying a registration form from multiple fields and buttons to just an email field and continue button increased completion rates by 45% and generated $300 million in additional revenue. 3. Effective labeling design places labels above or combined with their associated fields for fastest reading times, while right-aligned labels are slightly slower and left-aligned labels are slowest.

1. IAD 1 • Q3 • HC2
FORM DESIGN
Hoorcollege 1/2

3. PROGRAMMA
1. Belang goed form design
2. Case study
3. Ontwerpen van een goed formulier
4. Formulier organisatie
5. Doorstroom
6. Labeling

4. BELANG GOED DESIGN
waarom form design belangrijk is

5. INTERACTIE
BEZOEKER
VS SITE

6. FORMS
SUCK!

7. INVULLEN FORMULIER
NOOIT HET
DOEL

8. FORMULIEREN ENKEL
EEN MIDDEL OM
ONLINE DOELEN TE
BEREIKEN

9. INSIDE OUT
ONTWORPEN

10. WAT HEEFT HET
SYSTEEM
NODIG?

11. OUTSIDE IN
ONTWORPEN

12. VANUIT
PERSPECTIEF
BEZOEKER

13. Hoe omschrijft
de bezoeker zijn
membership?

15. FORM DESIGN
HOGE IMPACT

16. 10–40%
HOGERE COMPLETION RATES

17. ONE BUTTON
Case study

18. HET FORMULIER:
• 2 velden
• 2 knoppen
• 1 link

19. SIMPEL TOCH?

20. $300.000.000
GEMISTE INKOMSTEN

21. HET FORMULIER:
• E-mail address & Password
• Login & Register
• Forgot password?

22. PLAATS IN HET PROCES
1. shop 2. shopping 3. check out 4. payment 5. review
cart
rz o!
hie

23. GEMAK WERD EEN
GIGANTISCHE
DREMPEL

24. BEZOEKERS
RAAKTEN IN
VERWARRING

25. BEZOEKERS
WILDEN NIET
AANMELDEN

26. “I’m not here to enter into a
relationship. I just want to
buy something…”
- first-time shopper -

27. REGISTER KNOP
WEGGEHAALD
CONTINUE KNOP
TOEGEVOEGD

28. You do not need to create an
account to make purchases on
our site. Simply click
Continue to proceed to
checkout. To make your future
purchases even faster, you
can create an account during
checkout.

29. 45%
HOGERE COMPLETION RATE
$300.000.000
EXTRA WINST

30. HOE ONTWERP
JE EEN “GOED”
FORMULIER?

31. DAT HANGT ER
VAN AF…

32. FACTOREN
BUSINESS GOALS,
USER NEEDS, CONTEXT,
TESTING, METRICS,
TECHNOLOGIE, ETC…

33. DESIGN
PRINCIPES

34. MINIMALISEER
DE ELLENDE

35. VERLICHT
DE WEG NAAR
VOLTOOIING.

36. NEEM DE
CONTEXT MEE

37. ZORG VOOR
CONSISTENTE
COMMUNICATIE

38. DESIGN
PATTERNS

39. BEST PRACTICES
VOOR COMMON
PROBLEMS

40. STRATEGIE
WAT & WAAROM?

41. BALANS
TUSSEN BUSINESS
NEEDS EN USER
NEEDS

42. ORGANISATIE
hoe je formulier te organiseren

43. TONE OF VOICE
SPREEK DE TAAL VAN
DE GEBRUIKER

44. VS

45. VS

46. GROEPEER
GERELATEERDE
ITEMS

47. DIT BEVORDERD
SCANNING

49. VISUEEL DESIGN
FUNCTIONEEL
HOUDEN

52. DOORSTROOM
verlicht de weg naar voltooiing…

53. EEN TITEL DOET
VEEL…

56. THE ART OF
START…
Help de gebruiker op
weg

58. BELANGRIJK:
CONTEXT

59. DUIDELIJKE
SCANLIJN

62. GOEDE SPACING

63. TIP:
NEEM 50–70%
VELD HOOGTE
ALS MARGE

64. VERWIJDER
AFLEIDENDE
ELEMENTEN

66. TOON
PROGRESSIE

67. scope status
positie

69. DE TAB TOETS

71. LABELING
Labeling design

72. HTML <LABEL>
</LABEL>TAG

73. WAAR PLAATS
JE LABELS?

74. DAT HANGT ER
VAN AF…

75. TOP ALIGNED

76. LEZEN LABEL => VELD
± 50 MS

77. RIGHT ALIGNED

78. LEZEN LABEL => VELD
± 170–240 MS

79. LEFT ALIGNED

80. LEZEN LABEL => VELD
± 500 MS

81. COMBINED

82. UITVOER
LAAT REGELMATIG TE
WENSEN OVER

83. BETERE UITWERKING:
1. Laat label zien
2. OnClick input: fade label
3.OnType: laat label verdwijnen