View
283
Download
3
Category
Preview:
DESCRIPTION
Hoorcollege Web Form Design deel 1. Q3 IAD1
Citation preview
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:
Recommended