Hc2 • Q3 • IAD1

84
FORM DESIGN Hoorcollege 1/2 IAD 1 • Q3 • HC2

description

Hoorcollege Web Form Design deel 1. Q3 IAD1

Transcript of Hc2 • Q3 • IAD1

Page 1: Hc2 • Q3 • IAD1

FORM DESIGNHoorcollege 1/2

IAD

1 • Q

3 •

HC

2

Page 3: Hc2 • Q3 • IAD1

PROGRAMMA

1. Belang goed form design

2. Case study

3. Ontwerpen van een goed formulier

4. Formulier organisatie

5. Doorstroom

6. Labeling

Page 4: Hc2 • Q3 • IAD1

BELANG GOED DESIGNwaarom form design belangrijk is

Page 5: Hc2 • Q3 • IAD1

INTERACTIE BEZOEKER

VS SITE

Page 6: Hc2 • Q3 • IAD1

FORMS SUCK!

Page 7: Hc2 • Q3 • IAD1

INVULLEN FORMULIER

NOOIT HET DOEL

Page 8: Hc2 • Q3 • IAD1

FORMULIEREN ENKEL

EEN MIDDEL OM

ONLINE DOELEN TE BEREIKEN

Page 9: Hc2 • Q3 • IAD1

INSIDE OUT ONTWORPEN

Page 10: Hc2 • Q3 • IAD1

WAT HEEFT HET SYSTEEM

NODIG?

Page 11: Hc2 • Q3 • IAD1

OUTSIDE INONTWORPEN

Page 12: Hc2 • Q3 • IAD1

VANUIT PERSPECTIEF

BEZOEKER

Page 13: Hc2 • Q3 • IAD1

Hoe omschrijft

de bezoeker zijn

membership?

Page 14: Hc2 • Q3 • IAD1
Page 15: Hc2 • Q3 • IAD1

FORM DESIGN HOGE IMPACT

Page 16: Hc2 • Q3 • IAD1

10–40%HOGERE COMPLETION RATES

Page 17: Hc2 • Q3 • IAD1

ONE BUTTONCase study

Page 18: Hc2 • Q3 • IAD1

• 2 velden

• 2 knoppen

• 1 link

HET FORMULIER:

Page 19: Hc2 • Q3 • IAD1

SIMPEL TOCH?

Page 20: Hc2 • Q3 • IAD1

$300.000.000GEMISTE INKOMSTEN

Page 21: Hc2 • Q3 • IAD1

• E-mail address & Password

• Login & Register

• Forgot password?

HET FORMULIER:

Page 22: Hc2 • Q3 • IAD1

PLAATS IN HET PROCES

1. shop 2. shopping cart

3. check out 4. payment 5. review

hierzo!

Page 23: Hc2 • Q3 • IAD1

GEMAK WERD EENGIGANTISCHE

DREMPEL

Page 24: Hc2 • Q3 • IAD1

BEZOEKERS RAAKTEN IN

VERWARRING

Page 25: Hc2 • Q3 • IAD1

BEZOEKERS WILDEN NIET AANMELDEN

Page 26: Hc2 • Q3 • IAD1

“I’m not here to enter into a

relationship. I just want to

buy something…”

- first-time shopper -

Page 27: Hc2 • Q3 • IAD1

REGISTER KNOP WEGGEHAALD

CONTINUE KNOP TOEGEVOEGD

Page 28: Hc2 • Q3 • IAD1

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.

Page 29: Hc2 • Q3 • IAD1

45%HOGERE COMPLETION RATE

$300.000.000EXTRA WINST

Page 30: Hc2 • Q3 • IAD1

HOE ONTWERP JE EEN “GOED”

FORMULIER?

Page 31: Hc2 • Q3 • IAD1

DAT HANGT ER VAN AF…

Page 32: Hc2 • Q3 • IAD1

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

Page 33: Hc2 • Q3 • IAD1

DESIGN PRINCIPES

Page 34: Hc2 • Q3 • IAD1

MINIMALISEER DE ELLENDE

Page 35: Hc2 • Q3 • IAD1

VERLICHT DE WEG NAAR VOLTOOIING.

Page 36: Hc2 • Q3 • IAD1

NEEM DE CONTEXT MEE

Page 37: Hc2 • Q3 • IAD1

ZORG VOOR CONSISTENTE

COMMUNICATIE

Page 38: Hc2 • Q3 • IAD1

DESIGN PATTERNS

Page 39: Hc2 • Q3 • IAD1

BEST PRACTICES VOOR COMMON

PROBLEMS

Page 40: Hc2 • Q3 • IAD1

STRATEGIEWAT & WAAROM?

Page 41: Hc2 • Q3 • IAD1

BALANS TUSSEN BUSINESS

NEEDS EN USER NEEDS

Page 42: Hc2 • Q3 • IAD1

ORGANISATIEhoe je formulier te organiseren

Page 43: Hc2 • Q3 • IAD1

TONE OF VOICE SPREEK DE TAAL VAN

DE GEBRUIKER

Page 44: Hc2 • Q3 • IAD1

VS

Page 45: Hc2 • Q3 • IAD1

VS

Page 46: Hc2 • Q3 • IAD1

GROEPEER GERELATEERDE

ITEMS

Page 47: Hc2 • Q3 • IAD1

DIT BEVORDERD SCANNING

Page 48: Hc2 • Q3 • IAD1
Page 49: Hc2 • Q3 • IAD1

VISUEEL DESIGN FUNCTIONEEL

HOUDEN

Page 50: Hc2 • Q3 • IAD1
Page 51: Hc2 • Q3 • IAD1
Page 52: Hc2 • Q3 • IAD1

DOORSTROOMverlicht de weg naar voltooiing…

Page 53: Hc2 • Q3 • IAD1

EEN TITEL DOET VEEL…

Page 54: Hc2 • Q3 • IAD1
Page 55: Hc2 • Q3 • IAD1
Page 56: Hc2 • Q3 • IAD1

THE ART OF START…

Help de gebruiker op weg

Page 57: Hc2 • Q3 • IAD1
Page 58: Hc2 • Q3 • IAD1

BELANGRIJK: CONTEXT

Page 59: Hc2 • Q3 • IAD1

DUIDELIJKE SCANLIJN

Page 60: Hc2 • Q3 • IAD1
Page 61: Hc2 • Q3 • IAD1
Page 62: Hc2 • Q3 • IAD1

GOEDE SPACING

Page 63: Hc2 • Q3 • IAD1

TIP: NEEM 50–70% VELD HOOGTE

ALS MARGE

Page 64: Hc2 • Q3 • IAD1

VERWIJDER AFLEIDENDE ELEMENTEN

Page 65: Hc2 • Q3 • IAD1
Page 66: Hc2 • Q3 • IAD1

TOON PROGRESSIE

Page 67: Hc2 • Q3 • IAD1

scope

positie

status

Page 68: Hc2 • Q3 • IAD1
Page 69: Hc2 • Q3 • IAD1

DE TAB TOETS

Page 70: Hc2 • Q3 • IAD1
Page 71: Hc2 • Q3 • IAD1

LABELINGLabeling design

Page 72: Hc2 • Q3 • IAD1

HTML <LABEL> </LABEL>TAG

Page 73: Hc2 • Q3 • IAD1

WAAR PLAATS JE LABELS?

Page 74: Hc2 • Q3 • IAD1

DAT HANGT ER VAN AF…

Page 75: Hc2 • Q3 • IAD1

TOP ALIGNED

Page 76: Hc2 • Q3 • IAD1

LEZEN LABEL => VELD

± 50 MS

Page 77: Hc2 • Q3 • IAD1

RIGHT ALIGNED

Page 78: Hc2 • Q3 • IAD1

LEZEN LABEL => VELD

± 170–240 MS

Page 79: Hc2 • Q3 • IAD1

LEFT ALIGNED

Page 80: Hc2 • Q3 • IAD1

LEZEN LABEL => VELD

± 500 MS

Page 81: Hc2 • Q3 • IAD1

COMBINED

Page 82: Hc2 • Q3 • IAD1

UITVOERLAAT REGELMATIG TE

WENSEN OVER

Page 83: Hc2 • Q3 • IAD1

1. Laat label zien

2. OnClick input: fade label

3.OnType: laat label verdwijnen

BETERE UITWERKING:

Page 84: Hc2 • Q3 • IAD1