This document provides information about an 8-week course on designing dialogues and forms. It includes the course schedule, assigned readings from two books on user interface design, and details on a group assignment to design a web form for registering children in daycare. Students will be evaluated on the usability and documentation of their form design, as well as justifying their design choices. The course emphasizes best practices for form design through lectures, readings, and a practical project.

1. Interaction Design 102 Vragen of feedback? @ferrydendopper
Why Form Design Matters
Introduction to designing forms

2. Interaction Design 103 Vragen of feedback? @ferrydendopper
Module 3:
Designing Dialogues
Duur: 8 weken

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. Interaction Design 103 Vragen of feedback? @ferrydendopper
Boeken
Web Form
Design
Luke Wroblewski
About Face 3
Alan Cooper

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. 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. Interaction Design 103 Vragen of feedback? @ferrydendopper
Forms suck!
7

8. Interaction Design 103 Vragen of feedback? @ferrydendopper
8
Een formulier staat tussen jou en je
doel in.

9. Interaction Design 103 Vragen of feedback? @ferrydendopper
User
Needs Business
Goals
Geen formulier Lang formulier

10. Interaction Design 103 Vragen of feedback? @ferrydendopper

11. Interaction Design 103 Vragen of feedback? @ferrydendopper

12. Interaction Design 103 Vragen of feedback? @ferrydendopper

13. Interaction Design 103 Vragen of feedback? @ferrydendopper

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. Interaction Design 103 Vragen of feedback? @ferrydendopper

16. Interaction Design 103 Vragen of feedback? @ferrydendopper
Ik wil geen relatie,
ik wil alleen iets kopen!

17. Interaction Design 103 Vragen of feedback? @ferrydendopper
Het probleem
E-mail Address
Password
Login Register
Forgot password?

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. Interaction Design 103 Vragen of feedback? @ferrydendopper
Het verschil
Customers
45%
Revenue
$300
Mln
Customer
Satisfaction

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. Interaction Design 103 Vragen of feedback? @ferrydendopper

22. Interaction Design 103 Vragen of feedback? @ferrydendopper
Het verschil
Enquiries / wk
180
(2)
Sales / Q
$20
Mln
(1)
Customer
Satisfaction

23. Interaction Design 103 Vragen of feedback? @ferrydendopper

24. Interaction Design 103 Vragen of feedback? @ferrydendopper
Verhaalformulier

25. Interaction Design 103 Vragen of feedback? @ferrydendopper
Verhaalformulier
Sales
25-40%

26. Interaction Design 103 Vragen of feedback? @ferrydendopper
Verhaalformulier

27. Interaction Design 103 Vragen of feedback? @ferrydendopper
Verhaalformulier

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. 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. Interaction Design 103 Vragen of feedback? @ferrydendopper

31. Interaction Design 103 Vragen of feedback? @ferrydendopper

32. Interaction Design 103 Vragen of feedback? @ferrydendopper

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. 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. 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. Interaction Design 103 Vragen of feedback? @ferrydendopper
Vragen? Feedback?
f.den.dopper@hr.nl
@ferrydendopper