Interaction Design 3.1: Why Form Design

644 views
541 views

Published on

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

  • Be the first to like this

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

No notes for slide

Interaction Design 3.1: Why Form Design

  1. 1. Interaction Design 102 Vragen of feedback? @ferrydendopper Why Form Design Matters Introduction to designing forms
  2. 2. Interaction Design 103 Vragen of feedback? @ferrydendopper Module 3: Designing Dialogues Duur: 8 weken
  3. 3. Interaction Design 103 Vragen of feedback? @ferrydendopper Programma Week: 1. Waarom form design ertoe doet; 2. Formulier-elementen; 3. Structuur aanbrengen in formulieren; 4. Hints, help en fouten; 5. Inline validatie en slimme defaults; 6. Aanvullende en afhankelijke velden; 7. Progressive engagement.
  4. 4. Interaction Design 103 Vragen of feedback? @ferrydendopper Boeken Web Form Design Luke Wroblewski About Face 3 Alan Cooper
  5. 5. Interaction Design 103 Vragen of feedback? @ferrydendopper Lesstof & Beoordeling Lesstof  Colleges  Boek Web Form Design • Hst 1 t/m 13 Opdracht  Webformulier ontwerpen  Je werkt in tweetallen  Inleveren uiterlijk vrijdag in week 9
  6. 6. Interaction Design 103 Vragen of feedback? @ferrydendopper Beoordeling opdracht  Heb je een effectieve en gebruikersvriendelijke gebruikersinterface ontworpen? (max. 40 punten)  Heb je gebruikersinterface goed gedocumenteerd volgens de standaarden uit IAD? (max. 40 punten)  Heb je je ontwerpkeuzes goed onderbouwd? (max. 20 punten)
  7. 7. Interaction Design 103 Vragen of feedback? @ferrydendopper Forms suck! 7
  8. 8. Interaction Design 103 Vragen of feedback? @ferrydendopper 8 Een formulier staat tussen jou en je doel in.
  9. 9. Interaction Design 103 Vragen of feedback? @ferrydendopper User Needs Business Goals Geen formulier Lang formulier
  10. 10. Interaction Design 103 Vragen of feedback? @ferrydendopper
  11. 11. Interaction Design 103 Vragen of feedback? @ferrydendopper
  12. 12. Interaction Design 103 Vragen of feedback? @ferrydendopper
  13. 13. Interaction Design 103 Vragen of feedback? @ferrydendopper
  14. 14. Interaction Design 103 Vragen of feedback? @ferrydendopper “It's hard to imagine a form that could be simpler: two fields, two buttons, and one link. Yet, it turns out this form was preventing customers from purchasing products from a major e-commerce site, to the tune of $300,000,000 a year. What was even worse: the designers of the site had no clue there was even a problem.” http://www.uie.com/articles/three_hund_million_button Jared Spool The 300 Million Dollar Button
  15. 15. Interaction Design 103 Vragen of feedback? @ferrydendopper
  16. 16. Interaction Design 103 Vragen of feedback? @ferrydendopper Ik wil geen relatie, ik wil alleen iets kopen!
  17. 17. Interaction Design 103 Vragen of feedback? @ferrydendopper Het probleem E-mail Address Password Login Register Forgot password?
  18. 18. Interaction Design 103 Vragen of feedback? @ferrydendopper De aanpassing E-mail Address Password Login Continue > 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. Returning customer? Forgot password? New customer?
  19. 19. Interaction Design 103 Vragen of feedback? @ferrydendopper Het verschil Customers 45% Revenue $300 Mln Customer Satisfaction
  20. 20. Interaction Design 103 Vragen of feedback? @ferrydendopper 17 fields, including: • Property information (address, price) • Applicant information (name, occupation) • Loan information (amount, repayment period, etc.) Enquires / wk 2 Sales / Q $1 Mln
  21. 21. Interaction Design 103 Vragen of feedback? @ferrydendopper
  22. 22. Interaction Design 103 Vragen of feedback? @ferrydendopper Het verschil Enquiries / wk 180 (2) Sales / Q $20 Mln (1) Customer Satisfaction
  23. 23. Interaction Design 103 Vragen of feedback? @ferrydendopper
  24. 24. Interaction Design 103 Vragen of feedback? @ferrydendopper Verhaalformulier
  25. 25. Interaction Design 103 Vragen of feedback? @ferrydendopper Verhaalformulier Sales 25-40%
  26. 26. Interaction Design 103 Vragen of feedback? @ferrydendopper Verhaalformulier
  27. 27. Interaction Design 103 Vragen of feedback? @ferrydendopper Verhaalformulier
  28. 28. Interaction Design 103 Vragen of feedback? @ferrydendopper “Forms enable commerce, communities and productivity on the Web to thrive. It’s no wonder that form design matters.” Luke Wroblewski
  29. 29. Interaction Design 103 Vragen of feedback? @ferrydendopper Oefening: Beoordeel een formulier Bekijk het contactformulier op: http://www.zilverenkruis.nl/consumenten/contact/Pages/e- mail.aspx • Wat vind je wel/niet goed? • Hoe zou jij het formulier maken? (wireframe) Tijd: 20 minuten Daarna klassikaal conclusies bespreken
  30. 30. Interaction Design 103 Vragen of feedback? @ferrydendopper
  31. 31. Interaction Design 103 Vragen of feedback? @ferrydendopper
  32. 32. Interaction Design 103 Vragen of feedback? @ferrydendopper
  33. 33. Interaction Design 103 Vragen of feedback? @ferrydendopper Lezen: Web Form Design (boek) Hoofdstuk 1+5 About Face (boek) Hoofdstuk 21 The $300 Million Button – Jared M. Spool http://www.uie.com/articles/three_hund_million_button The Customer Is A Stranger – Gerry McGovern http://www.gerrymcgovern.com/nt/2010/nt-2010-06-07-Customer-stranger.htm
  34. 34. Interaction Design 103 Vragen of feedback? @ferrydendopper Module-opdracht Ontwerp een online formulier voor het inschrijven van een of meerdere kinderen bij een kinderopvangcentrum. Je werkt in tweetallen.
  35. 35. Interaction Design 103 Vragen of feedback? @ferrydendopper Wat lever je op? • Wireframes van je formulier • Beschrijving van ontwerpkeuzes Wanneer lever je op? • Einde week 9. (advies: lever tussentijds ook al wat in, dan krijg je feedback)
  36. 36. Interaction Design 103 Vragen of feedback? @ferrydendopper Vragen? Feedback? f.den.dopper@hr.nl @ferrydendopper

×