Hc2 • Q3 • IAD1

409 views
348 views

Published on

Hoorcollege Web Form Design deel 1. Q3 IAD1

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
409
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Hc2 • Q3 • IAD1

  1. 1. IAD 1 • Q3 • HC2FORM DESIGN Hoorcollege 1/2
  2. 2. PROGRAMMA1. Belang goed form design2. Case study3. Ontwerpen van een goed formulier4. Formulier organisatie5. Doorstroom6. Labeling
  3. 3. BELANG GOED DESIGN waarom form design belangrijk is
  4. 4. INTERACTIE BEZOEKER VS SITE
  5. 5. FORMSSUCK!
  6. 6. INVULLEN FORMULIER NOOIT HET DOEL
  7. 7. FORMULIEREN ENKEL EEN MIDDEL OMONLINE DOELEN TE BEREIKEN
  8. 8. INSIDE OUTONTWORPEN
  9. 9. WAT HEEFT HET SYSTEEM NODIG?
  10. 10. OUTSIDE INONTWORPEN
  11. 11. VANUITPERSPECTIEF BEZOEKER
  12. 12. Hoe omschrijftde bezoeker zijn membership?
  13. 13. FORM DESIGNHOGE IMPACT
  14. 14. 10–40%HOGERE COMPLETION RATES
  15. 15. ONE BUTTON Case study
  16. 16. HET FORMULIER:• 2 velden• 2 knoppen• 1 link
  17. 17. SIMPEL TOCH?
  18. 18. $300.000.000 GEMISTE INKOMSTEN
  19. 19. HET FORMULIER:• E-mail address & Password• Login & Register• Forgot password?
  20. 20. PLAATS IN HET PROCES1. shop 2. shopping 3. check out 4. payment 5. review cart rz o! hie
  21. 21. GEMAK WERD EEN GIGANTISCHE DREMPEL
  22. 22. BEZOEKERS RAAKTEN INVERWARRING
  23. 23. BEZOEKERSWILDEN NIETAANMELDEN
  24. 24. “I’m not here to enter into arelationship. I just want to buy something…” - first-time shopper -
  25. 25. REGISTER KNOP WEGGEHAALDCONTINUE KNOP TOEGEVOEGD
  26. 26. You do not need to create anaccount to make purchases onour site. Simply clickContinue to proceed tocheckout. To make your futurepurchases even faster, youcan create an account duringcheckout.
  27. 27. 45%HOGERE COMPLETION RATE$300.000.000 EXTRA WINST
  28. 28. HOE ONTWERPJE EEN “GOED” FORMULIER?
  29. 29. DAT HANGT ER VAN AF…
  30. 30. FACTORENBUSINESS GOALS,USER NEEDS, CONTEXT,TESTING, METRICS,TECHNOLOGIE, ETC…
  31. 31. DESIGNPRINCIPES
  32. 32. MINIMALISEER DE ELLENDE
  33. 33. VERLICHTDE WEG NAARVOLTOOIING.
  34. 34. NEEM DECONTEXT MEE
  35. 35. ZORG VOOR CONSISTENTECOMMUNICATIE
  36. 36. DESIGNPATTERNS
  37. 37. BEST PRACTICESVOOR COMMON PROBLEMS
  38. 38. STRATEGIEWAT & WAAROM?
  39. 39. BALANSTUSSEN BUSINESS NEEDS EN USER NEEDS
  40. 40. ORGANISATIEhoe je formulier te organiseren
  41. 41. TONE OF VOICESPREEK DE TAAL VAN DE GEBRUIKER
  42. 42. VS
  43. 43. VS
  44. 44. GROEPEERGERELATEERDE ITEMS
  45. 45. DIT BEVORDERD SCANNING
  46. 46. VISUEEL DESIGN FUNCTIONEEL HOUDEN
  47. 47. DOORSTROOMverlicht de weg naar voltooiing…
  48. 48. EEN TITEL DOET VEEL…
  49. 49. THE ART OF START…Help de gebruiker op weg
  50. 50. BELANGRIJK: CONTEXT
  51. 51. DUIDELIJKE SCANLIJN
  52. 52. GOEDE SPACING
  53. 53. TIP:NEEM 50–70%VELD HOOGTE ALS MARGE
  54. 54. VERWIJDERAFLEIDENDEELEMENTEN
  55. 55. TOONPROGRESSIE
  56. 56. scope status positie
  57. 57. DE TAB TOETS
  58. 58. LABELING Labeling design
  59. 59. HTML <LABEL></LABEL>TAG
  60. 60. WAAR PLAATS JE LABELS?
  61. 61. DAT HANGT ER VAN AF…
  62. 62. TOP ALIGNED
  63. 63. LEZEN LABEL => VELD ± 50 MS
  64. 64. RIGHT ALIGNED
  65. 65. LEZEN LABEL => VELD± 170–240 MS
  66. 66. LEFT ALIGNED
  67. 67. LEZEN LABEL => VELD ± 500 MS
  68. 68. COMBINED
  69. 69. UITVOERLAAT REGELMATIG TE WENSEN OVER
  70. 70. BETERE UITWERKING:1. Laat label zien2. OnClick input: fade label3.OnType: laat label verdwijnen

×