Download - Interaction Design 3.1: Why Form Design
![Page 1: Interaction Design 3.1: Why Form Design](https://reader036.vdocuments.site/reader036/viewer/2022070304/54c7e9554a795999488b476b/html5/thumbnails/1.jpg)
Interaction Design 102 Vragen of feedback? @ferrydendopper
Why Form Design Matters
Introduction to designing forms
![Page 2: Interaction Design 3.1: Why Form Design](https://reader036.vdocuments.site/reader036/viewer/2022070304/54c7e9554a795999488b476b/html5/thumbnails/2.jpg)
Interaction Design 103 Vragen of feedback? @ferrydendopper
Module 3:Form Design
Duur: 8 weken
![Page 3: Interaction Design 3.1: Why Form Design](https://reader036.vdocuments.site/reader036/viewer/2022070304/54c7e9554a795999488b476b/html5/thumbnails/3.jpg)
Interaction Design 103 Vragen of feedback? @ferrydendopper
Programma
Week:1. Why Form Design Matters (introduction)2. Form Elements3. …4. …5. …6. …7. …8. …
![Page 4: Interaction Design 3.1: Why Form Design](https://reader036.vdocuments.site/reader036/viewer/2022070304/54c7e9554a795999488b476b/html5/thumbnails/4.jpg)
Interaction Design 103 Vragen of feedback? @ferrydendopper
Boeken
Web Form DesignLuke Wroblewski
![Page 5: Interaction Design 3.1: Why Form Design](https://reader036.vdocuments.site/reader036/viewer/2022070304/54c7e9554a795999488b476b/html5/thumbnails/5.jpg)
Interaction Design 103 Vragen of feedback? @ferrydendopper
Lesstof & Beoordeling
50% Tentamen Colleges Boek:
• hst. x
50% Opdracht Webformulier ontwerpen
![Page 6: Interaction Design 3.1: Why Form Design](https://reader036.vdocuments.site/reader036/viewer/2022070304/54c7e9554a795999488b476b/html5/thumbnails/6.jpg)
Interaction Design 103 Vragen of feedback? @ferrydendopper
Forms suck!
6
![Page 7: Interaction Design 3.1: Why Form Design](https://reader036.vdocuments.site/reader036/viewer/2022070304/54c7e9554a795999488b476b/html5/thumbnails/7.jpg)
Interaction Design 103 Vragen of feedback? @ferrydendopper
7
Een formulier staat tussen jou en je doel in.
Product
Bestelling
Form
ulier
![Page 8: Interaction Design 3.1: Why Form Design](https://reader036.vdocuments.site/reader036/viewer/2022070304/54c7e9554a795999488b476b/html5/thumbnails/8.jpg)
Interaction Design 103 Vragen of feedback? @ferrydendopper
User Needs Business
Goals
Geen formulier Lang formulier
![Page 9: Interaction Design 3.1: Why Form Design](https://reader036.vdocuments.site/reader036/viewer/2022070304/54c7e9554a795999488b476b/html5/thumbnails/9.jpg)
Interaction Design 103 Vragen of feedback? @ferrydendopper
![Page 10: Interaction Design 3.1: Why Form Design](https://reader036.vdocuments.site/reader036/viewer/2022070304/54c7e9554a795999488b476b/html5/thumbnails/10.jpg)
Interaction Design 103 Vragen of feedback? @ferrydendopper
![Page 11: Interaction Design 3.1: Why Form Design](https://reader036.vdocuments.site/reader036/viewer/2022070304/54c7e9554a795999488b476b/html5/thumbnails/11.jpg)
Interaction Design 103 Vragen of feedback? @ferrydendopper
![Page 12: Interaction Design 3.1: Why Form Design](https://reader036.vdocuments.site/reader036/viewer/2022070304/54c7e9554a795999488b476b/html5/thumbnails/12.jpg)
Interaction Design 103 Vragen of feedback? @ferrydendopper
![Page 13: Interaction Design 3.1: Why Form Design](https://reader036.vdocuments.site/reader036/viewer/2022070304/54c7e9554a795999488b476b/html5/thumbnails/13.jpg)
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
![Page 14: Interaction Design 3.1: Why Form Design](https://reader036.vdocuments.site/reader036/viewer/2022070304/54c7e9554a795999488b476b/html5/thumbnails/14.jpg)
Interaction Design 103 Vragen of feedback? @ferrydendopper
![Page 15: Interaction Design 3.1: Why Form Design](https://reader036.vdocuments.site/reader036/viewer/2022070304/54c7e9554a795999488b476b/html5/thumbnails/15.jpg)
Interaction Design 103 Vragen of feedback? @ferrydendopper
Ik wil geen relatie,
ik wil alleen iets kopen!
![Page 16: Interaction Design 3.1: Why Form Design](https://reader036.vdocuments.site/reader036/viewer/2022070304/54c7e9554a795999488b476b/html5/thumbnails/16.jpg)
Interaction Design 103 Vragen of feedback? @ferrydendopper
Het probleem
E-mail Address
Password
Login Register
Forgot password?
![Page 17: Interaction Design 3.1: Why Form Design](https://reader036.vdocuments.site/reader036/viewer/2022070304/54c7e9554a795999488b476b/html5/thumbnails/17.jpg)
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?
![Page 18: Interaction Design 3.1: Why Form Design](https://reader036.vdocuments.site/reader036/viewer/2022070304/54c7e9554a795999488b476b/html5/thumbnails/18.jpg)
Interaction Design 103 Vragen of feedback? @ferrydendopper
Het verschil
Customers
45%
Revenue
$300Mln
Customer Satisfaction
![Page 19: Interaction Design 3.1: Why Form Design](https://reader036.vdocuments.site/reader036/viewer/2022070304/54c7e9554a795999488b476b/html5/thumbnails/19.jpg)
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
![Page 20: Interaction Design 3.1: Why Form Design](https://reader036.vdocuments.site/reader036/viewer/2022070304/54c7e9554a795999488b476b/html5/thumbnails/20.jpg)
Interaction Design 103 Vragen of feedback? @ferrydendopper
![Page 21: Interaction Design 3.1: Why Form Design](https://reader036.vdocuments.site/reader036/viewer/2022070304/54c7e9554a795999488b476b/html5/thumbnails/21.jpg)
Interaction Design 103 Vragen of feedback? @ferrydendopper
Het verschil
Enquiries / wk
180
(2)
Sales / Q
$20Mln
(1)
Customer Satisfaction
![Page 22: Interaction Design 3.1: Why Form Design](https://reader036.vdocuments.site/reader036/viewer/2022070304/54c7e9554a795999488b476b/html5/thumbnails/22.jpg)
Interaction Design 103 Vragen of feedback? @ferrydendopper
![Page 23: Interaction Design 3.1: Why Form Design](https://reader036.vdocuments.site/reader036/viewer/2022070304/54c7e9554a795999488b476b/html5/thumbnails/23.jpg)
Interaction Design 103 Vragen of feedback? @ferrydendopper
![Page 24: Interaction Design 3.1: Why Form Design](https://reader036.vdocuments.site/reader036/viewer/2022070304/54c7e9554a795999488b476b/html5/thumbnails/24.jpg)
Interaction Design 103 Vragen of feedback? @ferrydendopper
![Page 25: Interaction Design 3.1: Why Form Design](https://reader036.vdocuments.site/reader036/viewer/2022070304/54c7e9554a795999488b476b/html5/thumbnails/25.jpg)
Interaction Design 103 Vragen of feedback? @ferrydendopper
Verhaalformulier
![Page 26: Interaction Design 3.1: Why Form Design](https://reader036.vdocuments.site/reader036/viewer/2022070304/54c7e9554a795999488b476b/html5/thumbnails/26.jpg)
Interaction Design 103 Vragen of feedback? @ferrydendopper
Verhaalformulier
Sales
25-40%
![Page 27: Interaction Design 3.1: Why Form Design](https://reader036.vdocuments.site/reader036/viewer/2022070304/54c7e9554a795999488b476b/html5/thumbnails/27.jpg)
Interaction Design 103 Vragen of feedback? @ferrydendopper
Verhaalformulier
![Page 28: Interaction Design 3.1: Why Form Design](https://reader036.vdocuments.site/reader036/viewer/2022070304/54c7e9554a795999488b476b/html5/thumbnails/28.jpg)
Interaction Design 103 Vragen of feedback? @ferrydendopper
Verhaalformulier
![Page 29: Interaction Design 3.1: Why Form Design](https://reader036.vdocuments.site/reader036/viewer/2022070304/54c7e9554a795999488b476b/html5/thumbnails/29.jpg)
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
![Page 30: Interaction Design 3.1: Why Form Design](https://reader036.vdocuments.site/reader036/viewer/2022070304/54c7e9554a795999488b476b/html5/thumbnails/30.jpg)
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
![Page 31: Interaction Design 3.1: Why Form Design](https://reader036.vdocuments.site/reader036/viewer/2022070304/54c7e9554a795999488b476b/html5/thumbnails/31.jpg)
Interaction Design 103 Vragen of feedback? @ferrydendopper
![Page 32: Interaction Design 3.1: Why Form Design](https://reader036.vdocuments.site/reader036/viewer/2022070304/54c7e9554a795999488b476b/html5/thumbnails/32.jpg)
Interaction Design 103 Vragen of feedback? @ferrydendopper
![Page 33: Interaction Design 3.1: Why Form Design](https://reader036.vdocuments.site/reader036/viewer/2022070304/54c7e9554a795999488b476b/html5/thumbnails/33.jpg)
Interaction Design 103 Vragen of feedback? @ferrydendopper
![Page 34: Interaction Design 3.1: Why Form Design](https://reader036.vdocuments.site/reader036/viewer/2022070304/54c7e9554a795999488b476b/html5/thumbnails/34.jpg)
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
![Page 35: Interaction Design 3.1: Why Form Design](https://reader036.vdocuments.site/reader036/viewer/2022070304/54c7e9554a795999488b476b/html5/thumbnails/35.jpg)
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
![Page 36: Interaction Design 3.1: Why Form Design](https://reader036.vdocuments.site/reader036/viewer/2022070304/54c7e9554a795999488b476b/html5/thumbnails/36.jpg)
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)
![Page 37: Interaction Design 3.1: Why Form Design](https://reader036.vdocuments.site/reader036/viewer/2022070304/54c7e9554a795999488b476b/html5/thumbnails/37.jpg)
Interaction Design 103 Vragen of feedback? @ferrydendopper
Vragen? Feedback?
@ferrydendopper