Hoorcollege Web form design 2/2. IAD1 Q3.

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

3. PROGRAMMA
1. Input fields
2. Acties
3. Help
4. Errors
5. Succes &
6. Inline validatie

4. INPUT FIELDS
De basis van formulier interactie

5. KIES
JUISTE
TYPE

6. TEXT BOX
VRIJE INVOER

7. RADIO BUTTONS
1 KEUZE MOGELIJK

8. CHECK BOX
1 OF MEERDERE
KEUZES MOGELIJK

9. DROP DOWN
1 KEUZE MOGELIJK
UIT LANGERE LIJST

10. VEEL GEMAAKTE
KEUZES OOK
BOVEN AAN

11. LIST BOX
1 OF MEERDERE
KEUZES MOGELIJK

12. DROPDOWN
CHOOSER
KEUZE IN POP-UP

13. JUISTE
FORMAT EN
LENGTE

14. STRUCTURED
FORMAT

15. FORGIVING
FORMAT

16. FILL IN THE
BLANKS

17. LENGTE VELD
GEEFT
INDICATIE
WAARDE

20. “VERPLICHTE”
VELDEN

21. DUIDELIJK
AANGEVEN
NAAST HET
LABEL

23. ACTIES
Dingen gedaan krijgen

24. TWEE
SOORTEN

25. PRIMARY
GERICHT OP
“COMPLETION”

26. SUBMIT, SAVE,
CONTINUE,
NEXT STEP

27. SECONDARY
HINDEREN
“COMPLETION”

28. BACK, CANCEL,
RESET, SAVE FOR
LATER

29. VERMIJD
SECONDARY
ACTIONS ZOVEEL
MOGELIJK

30. PAS TOE MET
DUIDELIJK
VISUEEL
ONDERSCHEID

31. COMMUNICEER
ACTIES IN
UITVOERING

32. HELP
Gebruikers op weg helpen

33. HELP = HULP IN
GEVAL VAN
“NOOD”

34. ALS DE
GEBRUIKER ER
WELLICHT NIET
UIT ZOU KOMEN

35. “VREEMDE” DATA,
EXTRA UITLEG,
VERKLARING
CONCEPTEN

36. HELP !=
COMPENSATIE
VOOR
TEKORTKOMING
DESIGN

37. MAAK INPUT NIET
AFHANKELIJK
VAN HELPTEKST

38. PLAATS
TRIGGERS NAAST
LABELS

39. BEN ZO SPECIFIEK
MOGELIJK

40. ERRORS
Houston, we have a problem…

41. COMMUNICEER
ERRORS HELDER,
SPECIFIEK EN IN
CONTEXT

42. GEEF
OPLOSSINGEN

43. VOORKOM
DEAD-ENDS

44. GEBRUIK EEN
TOP-LEVEL
MELDING

46. SUCCES
Geen nieuws != goed nieuws

47. COMMUNICEER
WANNEER ACTIES
SUCCESVOL ZIJN

48. VOORKOM
DEAD-ENDS

50. INLINE VALIDATIE
Bevestiging in het moment

51. VALIDEER INLINE

52. BIJ VOORKEUR
REAL-TIME
(DIRECT FEEDBACK)

55. GEEF SUGGESTIES

58. COMMUNICEER
LIMIET IN
REAL-TIME