狠狠撸

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

Module 3:
Designing Dialogues
Duur: 8 weken

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.

Boeken
Web Form
Design
Luke Wroblewski
About Face 3
Alan Cooper

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

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)

Forms suck!
7

8
Een formulier staat tussen jou en je
doel in.

User
Needs Business
Goals
Geen formulier Lang formulier

“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

Ik wil geen relatie,
ik wil alleen iets kopen!

Het probleem
E-mail Address
Password
Login Register
Forgot password?

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?

Het verschil
Customers
45%
Revenue
$300
Mln
Customer
Satisfaction

17 fields, including:
? Property information (address, price)
? Applicant information (name, occupation)
? Loan information (amount, repayment period, etc.)
Enquires / wk
2
Sales / Q
$1 Mln

Het verschil
Enquiries / wk
180
(2)
Sales / Q
$20
Mln
(1)
Customer
Satisfaction

Verhaalformulier

Verhaalformulier
Sales
25-40%

“Forms enable commerce,
communities and productivity on
the Web to thrive. It’s no wonder
that form design matters.”
Luke Wroblewski

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

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

Module-opdracht
Ontwerp een online formulier voor het
inschrijven van een of meerdere kinderen bij een
kinderopvangcentrum.
Je werkt in tweetallen.

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)

Vragen? Feedback?
f.den.dopper@hr.nl
@ferrydendopper

狠狠撸

Interaction Design 3.1: Why Form Design

More Related Content

Interaction Design 3.1: Why Form Design