FORM DESIGNHoorcollege 1/2

IAD

1 • Q

3 •

HC

2

PROGRAMMA

1. Belang goed form design

2. Case study

3. Ontwerpen van een goed formulier

4. Formulier organisatie

5. Doorstroom

6. Labeling

BELANG GOED DESIGNwaarom form design belangrijk is

INTERACTIE BEZOEKER

VS SITE

FORMS SUCK!

INVULLEN FORMULIER

NOOIT HET DOEL

FORMULIEREN ENKEL

EEN MIDDEL OM

ONLINE DOELEN TE BEREIKEN

INSIDE OUT ONTWORPEN

WAT HEEFT HET SYSTEEM

NODIG?

OUTSIDE INONTWORPEN

VANUIT PERSPECTIEF

BEZOEKER

Hoe omschrijft

de bezoeker zijn

membership?

FORM DESIGN HOGE IMPACT

10–40%HOGERE COMPLETION RATES

ONE BUTTONCase study

• 2 velden

• 2 knoppen

• 1 link

HET FORMULIER:

SIMPEL TOCH?

$300.000.000GEMISTE INKOMSTEN

• E-mail address & Password

• Login & Register

• Forgot password?

HET FORMULIER:

PLAATS IN HET PROCES

1. shop 2. shopping cart

3. check out 4. payment 5. review

hierzo!

GEMAK WERD EENGIGANTISCHE

DREMPEL

BEZOEKERS RAAKTEN IN

VERWARRING

BEZOEKERS WILDEN NIET AANMELDEN

“I’m not here to enter into a

relationship. I just want to

buy something…”

- first-time shopper -

REGISTER KNOP WEGGEHAALD

CONTINUE KNOP TOEGEVOEGD

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.

45%HOGERE COMPLETION RATE

$300.000.000EXTRA WINST

HOE ONTWERP JE EEN “GOED”

FORMULIER?

DAT HANGT ER VAN AF…

B U S I N E S S G O A L S , USER NEEDS, CONTEXT, T E S T I N G , M E T R I C S , TECHNOLOGIE, ETC…

FACTOREN

DESIGN PRINCIPES

MINIMALISEER DE ELLENDE

VERLICHT DE WEG NAAR VOLTOOIING.

NEEM DE CONTEXT MEE

ZORG VOOR CONSISTENTE

COMMUNICATIE

DESIGN PATTERNS

BEST PRACTICES VOOR COMMON

PROBLEMS

STRATEGIEWAT & WAAROM?

BALANS TUSSEN BUSINESS

NEEDS EN USER NEEDS

ORGANISATIEhoe je formulier te organiseren

TONE OF VOICE SPREEK DE TAAL VAN

DE GEBRUIKER

VS

VS

GROEPEER GERELATEERDE

ITEMS

DIT BEVORDERD SCANNING

VISUEEL DESIGN FUNCTIONEEL

HOUDEN

DOORSTROOMverlicht de weg naar voltooiing…

EEN TITEL DOET VEEL…

THE ART OF START…

Help de gebruiker op weg

BELANGRIJK: CONTEXT

DUIDELIJKE SCANLIJN

GOEDE SPACING

TIP: NEEM 50–70% VELD HOOGTE

ALS MARGE

VERWIJDER AFLEIDENDE ELEMENTEN

TOON PROGRESSIE

scope

positie

status

DE TAB TOETS

LABELINGLabeling design

HTML <LABEL> </LABEL>TAG

WAAR PLAATS JE LABELS?

DAT HANGT ER VAN AF…

TOP ALIGNED

LEZEN LABEL => VELD

± 50 MS

RIGHT ALIGNED

LEZEN LABEL => VELD

± 170–240 MS

LEFT ALIGNED

LEZEN LABEL => VELD

± 500 MS

COMBINED

UITVOERLAAT REGELMATIG TE

WENSEN OVER

1. Laat label zien

2. OnClick input: fade label

3.OnType: laat label verdwijnen

BETERE UITWERKING: