Hc2 • Q3 • IAD1
-
Upload
santi-jansen -
Category
Education
-
view
275 -
download
3
description
Transcript of Hc2 • Q3 • IAD1
![Page 1: Hc2 • Q3 • IAD1](https://reader036.fdocuments.nl/reader036/viewer/2022081413/5498efffb479590e358b45a5/html5/thumbnails/1.jpg)
FORM DESIGNHoorcollege 1/2
IAD
1 • Q
3 •
HC
2
![Page 2: Hc2 • Q3 • IAD1](https://reader036.fdocuments.nl/reader036/viewer/2022081413/5498efffb479590e358b45a5/html5/thumbnails/2.jpg)
![Page 3: Hc2 • Q3 • IAD1](https://reader036.fdocuments.nl/reader036/viewer/2022081413/5498efffb479590e358b45a5/html5/thumbnails/3.jpg)
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](https://reader036.fdocuments.nl/reader036/viewer/2022081413/5498efffb479590e358b45a5/html5/thumbnails/4.jpg)
BELANG GOED DESIGNwaarom form design belangrijk is
![Page 5: Hc2 • Q3 • IAD1](https://reader036.fdocuments.nl/reader036/viewer/2022081413/5498efffb479590e358b45a5/html5/thumbnails/5.jpg)
INTERACTIE BEZOEKER
VS SITE
![Page 6: Hc2 • Q3 • IAD1](https://reader036.fdocuments.nl/reader036/viewer/2022081413/5498efffb479590e358b45a5/html5/thumbnails/6.jpg)
FORMS SUCK!
![Page 7: Hc2 • Q3 • IAD1](https://reader036.fdocuments.nl/reader036/viewer/2022081413/5498efffb479590e358b45a5/html5/thumbnails/7.jpg)
INVULLEN FORMULIER
NOOIT HET DOEL
![Page 8: Hc2 • Q3 • IAD1](https://reader036.fdocuments.nl/reader036/viewer/2022081413/5498efffb479590e358b45a5/html5/thumbnails/8.jpg)
FORMULIEREN ENKEL
EEN MIDDEL OM
ONLINE DOELEN TE BEREIKEN
![Page 9: Hc2 • Q3 • IAD1](https://reader036.fdocuments.nl/reader036/viewer/2022081413/5498efffb479590e358b45a5/html5/thumbnails/9.jpg)
INSIDE OUT ONTWORPEN
![Page 10: Hc2 • Q3 • IAD1](https://reader036.fdocuments.nl/reader036/viewer/2022081413/5498efffb479590e358b45a5/html5/thumbnails/10.jpg)
WAT HEEFT HET SYSTEEM
NODIG?
![Page 11: Hc2 • Q3 • IAD1](https://reader036.fdocuments.nl/reader036/viewer/2022081413/5498efffb479590e358b45a5/html5/thumbnails/11.jpg)
OUTSIDE INONTWORPEN
![Page 12: Hc2 • Q3 • IAD1](https://reader036.fdocuments.nl/reader036/viewer/2022081413/5498efffb479590e358b45a5/html5/thumbnails/12.jpg)
VANUIT PERSPECTIEF
BEZOEKER
![Page 13: Hc2 • Q3 • IAD1](https://reader036.fdocuments.nl/reader036/viewer/2022081413/5498efffb479590e358b45a5/html5/thumbnails/13.jpg)
Hoe omschrijft
de bezoeker zijn
membership?
![Page 14: Hc2 • Q3 • IAD1](https://reader036.fdocuments.nl/reader036/viewer/2022081413/5498efffb479590e358b45a5/html5/thumbnails/14.jpg)
![Page 15: Hc2 • Q3 • IAD1](https://reader036.fdocuments.nl/reader036/viewer/2022081413/5498efffb479590e358b45a5/html5/thumbnails/15.jpg)
FORM DESIGN HOGE IMPACT
![Page 16: Hc2 • Q3 • IAD1](https://reader036.fdocuments.nl/reader036/viewer/2022081413/5498efffb479590e358b45a5/html5/thumbnails/16.jpg)
10–40%HOGERE COMPLETION RATES
![Page 17: Hc2 • Q3 • IAD1](https://reader036.fdocuments.nl/reader036/viewer/2022081413/5498efffb479590e358b45a5/html5/thumbnails/17.jpg)
ONE BUTTONCase study
![Page 18: Hc2 • Q3 • IAD1](https://reader036.fdocuments.nl/reader036/viewer/2022081413/5498efffb479590e358b45a5/html5/thumbnails/18.jpg)
• 2 velden
• 2 knoppen
• 1 link
HET FORMULIER:
![Page 19: Hc2 • Q3 • IAD1](https://reader036.fdocuments.nl/reader036/viewer/2022081413/5498efffb479590e358b45a5/html5/thumbnails/19.jpg)
SIMPEL TOCH?
![Page 20: Hc2 • Q3 • IAD1](https://reader036.fdocuments.nl/reader036/viewer/2022081413/5498efffb479590e358b45a5/html5/thumbnails/20.jpg)
$300.000.000GEMISTE INKOMSTEN
![Page 21: Hc2 • Q3 • IAD1](https://reader036.fdocuments.nl/reader036/viewer/2022081413/5498efffb479590e358b45a5/html5/thumbnails/21.jpg)
• E-mail address & Password
• Login & Register
• Forgot password?
HET FORMULIER:
![Page 22: Hc2 • Q3 • IAD1](https://reader036.fdocuments.nl/reader036/viewer/2022081413/5498efffb479590e358b45a5/html5/thumbnails/22.jpg)
PLAATS IN HET PROCES
1. shop 2. shopping cart
3. check out 4. payment 5. review
hierzo!
![Page 23: Hc2 • Q3 • IAD1](https://reader036.fdocuments.nl/reader036/viewer/2022081413/5498efffb479590e358b45a5/html5/thumbnails/23.jpg)
GEMAK WERD EENGIGANTISCHE
DREMPEL
![Page 24: Hc2 • Q3 • IAD1](https://reader036.fdocuments.nl/reader036/viewer/2022081413/5498efffb479590e358b45a5/html5/thumbnails/24.jpg)
BEZOEKERS RAAKTEN IN
VERWARRING
![Page 25: Hc2 • Q3 • IAD1](https://reader036.fdocuments.nl/reader036/viewer/2022081413/5498efffb479590e358b45a5/html5/thumbnails/25.jpg)
BEZOEKERS WILDEN NIET AANMELDEN
![Page 26: Hc2 • Q3 • IAD1](https://reader036.fdocuments.nl/reader036/viewer/2022081413/5498efffb479590e358b45a5/html5/thumbnails/26.jpg)
“I’m not here to enter into a
relationship. I just want to
buy something…”
- first-time shopper -
![Page 27: Hc2 • Q3 • IAD1](https://reader036.fdocuments.nl/reader036/viewer/2022081413/5498efffb479590e358b45a5/html5/thumbnails/27.jpg)
REGISTER KNOP WEGGEHAALD
CONTINUE KNOP TOEGEVOEGD
![Page 28: Hc2 • Q3 • IAD1](https://reader036.fdocuments.nl/reader036/viewer/2022081413/5498efffb479590e358b45a5/html5/thumbnails/28.jpg)
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](https://reader036.fdocuments.nl/reader036/viewer/2022081413/5498efffb479590e358b45a5/html5/thumbnails/29.jpg)
45%HOGERE COMPLETION RATE
$300.000.000EXTRA WINST
![Page 30: Hc2 • Q3 • IAD1](https://reader036.fdocuments.nl/reader036/viewer/2022081413/5498efffb479590e358b45a5/html5/thumbnails/30.jpg)
HOE ONTWERP JE EEN “GOED”
FORMULIER?
![Page 31: Hc2 • Q3 • IAD1](https://reader036.fdocuments.nl/reader036/viewer/2022081413/5498efffb479590e358b45a5/html5/thumbnails/31.jpg)
DAT HANGT ER VAN AF…
![Page 32: Hc2 • Q3 • IAD1](https://reader036.fdocuments.nl/reader036/viewer/2022081413/5498efffb479590e358b45a5/html5/thumbnails/32.jpg)
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](https://reader036.fdocuments.nl/reader036/viewer/2022081413/5498efffb479590e358b45a5/html5/thumbnails/33.jpg)
DESIGN PRINCIPES
![Page 34: Hc2 • Q3 • IAD1](https://reader036.fdocuments.nl/reader036/viewer/2022081413/5498efffb479590e358b45a5/html5/thumbnails/34.jpg)
MINIMALISEER DE ELLENDE
![Page 35: Hc2 • Q3 • IAD1](https://reader036.fdocuments.nl/reader036/viewer/2022081413/5498efffb479590e358b45a5/html5/thumbnails/35.jpg)
VERLICHT DE WEG NAAR VOLTOOIING.
![Page 36: Hc2 • Q3 • IAD1](https://reader036.fdocuments.nl/reader036/viewer/2022081413/5498efffb479590e358b45a5/html5/thumbnails/36.jpg)
NEEM DE CONTEXT MEE
![Page 37: Hc2 • Q3 • IAD1](https://reader036.fdocuments.nl/reader036/viewer/2022081413/5498efffb479590e358b45a5/html5/thumbnails/37.jpg)
ZORG VOOR CONSISTENTE
COMMUNICATIE
![Page 38: Hc2 • Q3 • IAD1](https://reader036.fdocuments.nl/reader036/viewer/2022081413/5498efffb479590e358b45a5/html5/thumbnails/38.jpg)
DESIGN PATTERNS
![Page 39: Hc2 • Q3 • IAD1](https://reader036.fdocuments.nl/reader036/viewer/2022081413/5498efffb479590e358b45a5/html5/thumbnails/39.jpg)
BEST PRACTICES VOOR COMMON
PROBLEMS
![Page 40: Hc2 • Q3 • IAD1](https://reader036.fdocuments.nl/reader036/viewer/2022081413/5498efffb479590e358b45a5/html5/thumbnails/40.jpg)
STRATEGIEWAT & WAAROM?
![Page 41: Hc2 • Q3 • IAD1](https://reader036.fdocuments.nl/reader036/viewer/2022081413/5498efffb479590e358b45a5/html5/thumbnails/41.jpg)
BALANS TUSSEN BUSINESS
NEEDS EN USER NEEDS
![Page 42: Hc2 • Q3 • IAD1](https://reader036.fdocuments.nl/reader036/viewer/2022081413/5498efffb479590e358b45a5/html5/thumbnails/42.jpg)
ORGANISATIEhoe je formulier te organiseren
![Page 43: Hc2 • Q3 • IAD1](https://reader036.fdocuments.nl/reader036/viewer/2022081413/5498efffb479590e358b45a5/html5/thumbnails/43.jpg)
TONE OF VOICE SPREEK DE TAAL VAN
DE GEBRUIKER
![Page 44: Hc2 • Q3 • IAD1](https://reader036.fdocuments.nl/reader036/viewer/2022081413/5498efffb479590e358b45a5/html5/thumbnails/44.jpg)
VS
![Page 45: Hc2 • Q3 • IAD1](https://reader036.fdocuments.nl/reader036/viewer/2022081413/5498efffb479590e358b45a5/html5/thumbnails/45.jpg)
VS
![Page 46: Hc2 • Q3 • IAD1](https://reader036.fdocuments.nl/reader036/viewer/2022081413/5498efffb479590e358b45a5/html5/thumbnails/46.jpg)
GROEPEER GERELATEERDE
ITEMS
![Page 47: Hc2 • Q3 • IAD1](https://reader036.fdocuments.nl/reader036/viewer/2022081413/5498efffb479590e358b45a5/html5/thumbnails/47.jpg)
DIT BEVORDERD SCANNING
![Page 48: Hc2 • Q3 • IAD1](https://reader036.fdocuments.nl/reader036/viewer/2022081413/5498efffb479590e358b45a5/html5/thumbnails/48.jpg)
![Page 49: Hc2 • Q3 • IAD1](https://reader036.fdocuments.nl/reader036/viewer/2022081413/5498efffb479590e358b45a5/html5/thumbnails/49.jpg)
VISUEEL DESIGN FUNCTIONEEL
HOUDEN
![Page 50: Hc2 • Q3 • IAD1](https://reader036.fdocuments.nl/reader036/viewer/2022081413/5498efffb479590e358b45a5/html5/thumbnails/50.jpg)
![Page 51: Hc2 • Q3 • IAD1](https://reader036.fdocuments.nl/reader036/viewer/2022081413/5498efffb479590e358b45a5/html5/thumbnails/51.jpg)
![Page 52: Hc2 • Q3 • IAD1](https://reader036.fdocuments.nl/reader036/viewer/2022081413/5498efffb479590e358b45a5/html5/thumbnails/52.jpg)
DOORSTROOMverlicht de weg naar voltooiing…
![Page 53: Hc2 • Q3 • IAD1](https://reader036.fdocuments.nl/reader036/viewer/2022081413/5498efffb479590e358b45a5/html5/thumbnails/53.jpg)
EEN TITEL DOET VEEL…
![Page 54: Hc2 • Q3 • IAD1](https://reader036.fdocuments.nl/reader036/viewer/2022081413/5498efffb479590e358b45a5/html5/thumbnails/54.jpg)
![Page 55: Hc2 • Q3 • IAD1](https://reader036.fdocuments.nl/reader036/viewer/2022081413/5498efffb479590e358b45a5/html5/thumbnails/55.jpg)
![Page 56: Hc2 • Q3 • IAD1](https://reader036.fdocuments.nl/reader036/viewer/2022081413/5498efffb479590e358b45a5/html5/thumbnails/56.jpg)
THE ART OF START…
Help de gebruiker op weg
![Page 57: Hc2 • Q3 • IAD1](https://reader036.fdocuments.nl/reader036/viewer/2022081413/5498efffb479590e358b45a5/html5/thumbnails/57.jpg)
![Page 58: Hc2 • Q3 • IAD1](https://reader036.fdocuments.nl/reader036/viewer/2022081413/5498efffb479590e358b45a5/html5/thumbnails/58.jpg)
BELANGRIJK: CONTEXT
![Page 59: Hc2 • Q3 • IAD1](https://reader036.fdocuments.nl/reader036/viewer/2022081413/5498efffb479590e358b45a5/html5/thumbnails/59.jpg)
DUIDELIJKE SCANLIJN
![Page 60: Hc2 • Q3 • IAD1](https://reader036.fdocuments.nl/reader036/viewer/2022081413/5498efffb479590e358b45a5/html5/thumbnails/60.jpg)
![Page 61: Hc2 • Q3 • IAD1](https://reader036.fdocuments.nl/reader036/viewer/2022081413/5498efffb479590e358b45a5/html5/thumbnails/61.jpg)
![Page 62: Hc2 • Q3 • IAD1](https://reader036.fdocuments.nl/reader036/viewer/2022081413/5498efffb479590e358b45a5/html5/thumbnails/62.jpg)
GOEDE SPACING
![Page 63: Hc2 • Q3 • IAD1](https://reader036.fdocuments.nl/reader036/viewer/2022081413/5498efffb479590e358b45a5/html5/thumbnails/63.jpg)
TIP: NEEM 50–70% VELD HOOGTE
ALS MARGE
![Page 64: Hc2 • Q3 • IAD1](https://reader036.fdocuments.nl/reader036/viewer/2022081413/5498efffb479590e358b45a5/html5/thumbnails/64.jpg)
VERWIJDER AFLEIDENDE ELEMENTEN
![Page 65: Hc2 • Q3 • IAD1](https://reader036.fdocuments.nl/reader036/viewer/2022081413/5498efffb479590e358b45a5/html5/thumbnails/65.jpg)
![Page 66: Hc2 • Q3 • IAD1](https://reader036.fdocuments.nl/reader036/viewer/2022081413/5498efffb479590e358b45a5/html5/thumbnails/66.jpg)
TOON PROGRESSIE
![Page 67: Hc2 • Q3 • IAD1](https://reader036.fdocuments.nl/reader036/viewer/2022081413/5498efffb479590e358b45a5/html5/thumbnails/67.jpg)
scope
positie
status
![Page 68: Hc2 • Q3 • IAD1](https://reader036.fdocuments.nl/reader036/viewer/2022081413/5498efffb479590e358b45a5/html5/thumbnails/68.jpg)
![Page 69: Hc2 • Q3 • IAD1](https://reader036.fdocuments.nl/reader036/viewer/2022081413/5498efffb479590e358b45a5/html5/thumbnails/69.jpg)
DE TAB TOETS
![Page 70: Hc2 • Q3 • IAD1](https://reader036.fdocuments.nl/reader036/viewer/2022081413/5498efffb479590e358b45a5/html5/thumbnails/70.jpg)
![Page 71: Hc2 • Q3 • IAD1](https://reader036.fdocuments.nl/reader036/viewer/2022081413/5498efffb479590e358b45a5/html5/thumbnails/71.jpg)
LABELINGLabeling design
![Page 72: Hc2 • Q3 • IAD1](https://reader036.fdocuments.nl/reader036/viewer/2022081413/5498efffb479590e358b45a5/html5/thumbnails/72.jpg)
HTML <LABEL> </LABEL>TAG
![Page 73: Hc2 • Q3 • IAD1](https://reader036.fdocuments.nl/reader036/viewer/2022081413/5498efffb479590e358b45a5/html5/thumbnails/73.jpg)
WAAR PLAATS JE LABELS?
![Page 74: Hc2 • Q3 • IAD1](https://reader036.fdocuments.nl/reader036/viewer/2022081413/5498efffb479590e358b45a5/html5/thumbnails/74.jpg)
DAT HANGT ER VAN AF…
![Page 75: Hc2 • Q3 • IAD1](https://reader036.fdocuments.nl/reader036/viewer/2022081413/5498efffb479590e358b45a5/html5/thumbnails/75.jpg)
TOP ALIGNED
![Page 76: Hc2 • Q3 • IAD1](https://reader036.fdocuments.nl/reader036/viewer/2022081413/5498efffb479590e358b45a5/html5/thumbnails/76.jpg)
LEZEN LABEL => VELD
± 50 MS
![Page 77: Hc2 • Q3 • IAD1](https://reader036.fdocuments.nl/reader036/viewer/2022081413/5498efffb479590e358b45a5/html5/thumbnails/77.jpg)
RIGHT ALIGNED
![Page 78: Hc2 • Q3 • IAD1](https://reader036.fdocuments.nl/reader036/viewer/2022081413/5498efffb479590e358b45a5/html5/thumbnails/78.jpg)
LEZEN LABEL => VELD
± 170–240 MS
![Page 79: Hc2 • Q3 • IAD1](https://reader036.fdocuments.nl/reader036/viewer/2022081413/5498efffb479590e358b45a5/html5/thumbnails/79.jpg)
LEFT ALIGNED
![Page 80: Hc2 • Q3 • IAD1](https://reader036.fdocuments.nl/reader036/viewer/2022081413/5498efffb479590e358b45a5/html5/thumbnails/80.jpg)
LEZEN LABEL => VELD
± 500 MS
![Page 81: Hc2 • Q3 • IAD1](https://reader036.fdocuments.nl/reader036/viewer/2022081413/5498efffb479590e358b45a5/html5/thumbnails/81.jpg)
COMBINED
![Page 82: Hc2 • Q3 • IAD1](https://reader036.fdocuments.nl/reader036/viewer/2022081413/5498efffb479590e358b45a5/html5/thumbnails/82.jpg)
UITVOERLAAT REGELMATIG TE
WENSEN OVER
![Page 83: Hc2 • Q3 • IAD1](https://reader036.fdocuments.nl/reader036/viewer/2022081413/5498efffb479590e358b45a5/html5/thumbnails/83.jpg)
1. Laat label zien
2. OnClick input: fade label
3.OnType: laat label verdwijnen
BETERE UITWERKING:
![Page 84: Hc2 • Q3 • IAD1](https://reader036.fdocuments.nl/reader036/viewer/2022081413/5498efffb479590e358b45a5/html5/thumbnails/84.jpg)