Interaction Design 3.1: Why Form Design

Interaction Design 102 Vragen of feedback? @ferrydendopper

Why Form Design Matters

Introduction to designing forms


Module 3:Form Design

Duur: 8 weken


Programma

Week:1. Why Form Design Matters (introduction)2. Form Elements3. …4. …5. …6. …7. …8. …


Boeken

Web Form DesignLuke Wroblewski


Lesstof & Beoordeling

50% Tentamen Colleges Boek:

• hst. x

50% Opdracht Webformulier ontwerpen


Forms suck!

6


7

Een formulier staat tussen jou en je doel in.

Product

Bestelling

Form

ulier


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_buttonJared Spool

The 300 Million Dollar Button

http://www.uie.com/articles/three_hund_million_button

http://www.uie.com/articles/three_hund_million_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

$300Mln

Customer Satisfaction


17 fields, including:

• Property information (address, price)

• Applicant information (name, occupation)

• Loan information (amount, repayment period, etc.)

Enquires / wk

2Sales /

Q

$1 Mln



Het verschil

Enquiries / wk

180

(2)

Sales / Q

$20Mln

(1)

Customer Satisfaction





Verhaalformulier


Verhaalformulier

Sales

25-40%


Verhaalformulier


Verhaalformulier


“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/

• Wat vind je wel/niet goed?• Hoe zou jij het formulier maken? (wireframe)

Tijd: 30 minutenDaarna klassikaal conclusies bespreken





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


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


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)


Vragen? Feedback?

[email protected]

@ferrydendopper