Embed Size (px)
DESCRIPTION
Citation preview
Interaction Design 102 Vragen of feedback? @ferrydendopper
Why Form Design Matters
Introduction to designing forms
Interaction Design 103 Vragen of feedback? @ferrydendopper
Module 3:Form Design
Duur: 8 weken
Interaction Design 103 Vragen of feedback? @ferrydendopper
Programma
Week:1. Why Form Design Matters (introduction)2. Form Elements3. …4. …5. …6. …7. …8. …
Interaction Design 103 Vragen of feedback? @ferrydendopper
Boeken
Web Form DesignLuke Wroblewski
Interaction Design 103 Vragen of feedback? @ferrydendopper
Lesstof & Beoordeling
50% Tentamen Colleges Boek:
• hst. x
50% Opdracht Webformulier ontwerpen
Interaction Design 103 Vragen of feedback? @ferrydendopper
Forms suck!
6
Interaction Design 103 Vragen of feedback? @ferrydendopper
7
Een formulier staat tussen jou en je doel in.
Product
Bestelling
Form
ulier
Interaction Design 103 Vragen of feedback? @ferrydendopper
User Needs Business
Goals
Geen formulier Lang formulier
Interaction Design 103 Vragen of feedback? @ferrydendopper
Interaction Design 103 Vragen of feedback? @ferrydendopper
Interaction Design 103 Vragen of feedback? @ferrydendopper
Interaction Design 103 Vragen of feedback? @ferrydendopper
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_buttonJared Spool
The 300 Million Dollar Button
Interaction Design 103 Vragen of feedback? @ferrydendopper
Interaction Design 103 Vragen of feedback? @ferrydendopper
Ik wil geen relatie,
ik wil alleen iets kopen!
Interaction Design 103 Vragen of feedback? @ferrydendopper
Het probleem
E-mail Address
Password
Login Register
Forgot password?
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?
Interaction Design 103 Vragen of feedback? @ferrydendopper
Het verschil
Customers
45%
Revenue
$300Mln
Customer Satisfaction
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
2Sales /
Q
$1 Mln
Interaction Design 103 Vragen of feedback? @ferrydendopper
Interaction Design 103 Vragen of feedback? @ferrydendopper
Het verschil
Enquiries / wk
180
(2)
Sales / Q
$20Mln
(1)
Customer Satisfaction
Interaction Design 103 Vragen of feedback? @ferrydendopper
Interaction Design 103 Vragen of feedback? @ferrydendopper
Interaction Design 103 Vragen of feedback? @ferrydendopper
Interaction Design 103 Vragen of feedback? @ferrydendopper
Verhaalformulier
Interaction Design 103 Vragen of feedback? @ferrydendopper
Verhaalformulier
Sales
25-40%
Interaction Design 103 Vragen of feedback? @ferrydendopper
Verhaalformulier
Interaction Design 103 Vragen of feedback? @ferrydendopper
Verhaalformulier
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
Interaction Design 103 Vragen of feedback? @ferrydendopper
Oefening: Beoordeel een formulier
Bekijk het contactformulier op:http://www.zilverenkruis.nl/consumenten/contact/
• Wat vind je wel/niet goed?• Hoe zou jij het formulier maken? (wireframe)
Tijd: 30 minutenDaarna klassikaal conclusies bespreken
Interaction Design 103 Vragen of feedback? @ferrydendopper
Interaction Design 103 Vragen of feedback? @ferrydendopper
Interaction Design 103 Vragen of feedback? @ferrydendopper
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. Spoolhttp://www.uie.com/articles/three_hund_million_button
The Customer Is A Stranger – Gerry McGovernhttp://www.gerrymcgovern.com/nt/2010/nt-2010-06-07-Customer-stranger.htm
Interaction Design 103 Vragen of feedback? @ferrydendopper
Module-opdracht
Ontwerp een online formulier voor het inschrijven van een eenmanszaak bij de Kamer van Koophandel.
http://www.kvk.nl/download/Formulier-1-inschrijving-eenmanszaak_tcm14-212823.pdf
Interaction Design 103 Vragen of feedback? @ferrydendopper
Wat lever je op?
• Wireframes van je formulier• Beschrijving van ontwerpkeuzes
Wanneer lever je op?
• Einde week 10.(advies: lever tussentijds ook al wat in, dan krijg je feedback)
Interaction Design 103 Vragen of feedback? @ferrydendopper
Vragen? Feedback?
@ferrydendopper
