SlideShare a Scribd company logo
1 of 84
Download to read offline
IAD 1 • Q3 • HC2
FORM DESIGN
     Hoorcollege 1/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 DESIGN
 waarom 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 IN
ONTWORPEN
VANUIT
PERSPECTIEF
 BEZOEKER
Hoe omschrijft
de bezoeker zijn
 membership?
FORM DESIGN
HOGE IMPACT
10–40%
HOGERE COMPLETION RATES
ONE BUTTON
      Case study
HET FORMULIER:
• 2 velden

• 2 knoppen

• 1 link
SIMPEL TOCH?
$300.000.000
 GEMISTE INKOMSTEN
HET FORMULIER:
• E-mail address & Password

• Login & Register

• Forgot password?
PLAATS IN HET PROCES


1. shop    2. shopping   3. check out   4. payment   5. review
               cart




                            rz o!
                         hie
GEMAK WERD EEN
 GIGANTISCHE
   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.000
     EXTRA WINST
HOE ONTWERP
JE EEN “GOED”
 FORMULIER?
DAT HANGT ER
  VAN AF…
FACTOREN
BUSINESS GOALS,
USER NEEDS, CONTEXT,
TESTING, METRICS,
TECHNOLOGIE, ETC…
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
STRATEGIE
WAT & WAAROM?
BALANS
TUSSEN BUSINESS
 NEEDS EN USER
    NEEDS
ORGANISATIE
hoe 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
DOORSTROOM
verlicht 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             status




        positie
DE TAB TOETS
LABELING
  Labeling 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
UITVOER
LAAT REGELMATIG TE
   WENSEN OVER
BETERE UITWERKING:
1. Laat label zien
2. OnClick input: fade label
3.OnType: laat label verdwijnen
Hc2 • Q3 • IAD1

More Related Content

Similar to Hc2 • Q3 • IAD1

Creating Effective Forms with Constant Contact.pdf
Creating Effective Forms with Constant Contact.pdfCreating Effective Forms with Constant Contact.pdf
Creating Effective Forms with Constant Contact.pdf
T.E. Digital
 
Design for Business Impact - Increase Your ROI & Velocity
Design for Business Impact - Increase Your ROI & VelocityDesign for Business Impact - Increase Your ROI & Velocity
Design for Business Impact - Increase Your ROI & Velocity
Chloë Bregman, CSPO
 

Similar to Hc2 • Q3 • IAD1 (20)

3 Essential Metrics For Event Marketers
3 Essential Metrics For Event Marketers3 Essential Metrics For Event Marketers
3 Essential Metrics For Event Marketers
 
Automate Business Processes with Point-and-Click Solutions
Automate Business Processes with Point-and-Click SolutionsAutomate Business Processes with Point-and-Click Solutions
Automate Business Processes with Point-and-Click Solutions
 
What Does Full-on Personalization Look Like and How Do I Get There? Sitecore ...
What Does Full-on Personalization Look Like and How Do I Get There? Sitecore ...What Does Full-on Personalization Look Like and How Do I Get There? Sitecore ...
What Does Full-on Personalization Look Like and How Do I Get There? Sitecore ...
 
Scott Digital Marketing 5 P's of Digital Marketing
Scott Digital Marketing 5 P's of Digital MarketingScott Digital Marketing 5 P's of Digital Marketing
Scott Digital Marketing 5 P's of Digital Marketing
 
SaaStrU 301: Unlocking Growth in the Internet Economy: a Perspective from Str...
SaaStrU 301: Unlocking Growth in the Internet Economy: a Perspective from Str...SaaStrU 301: Unlocking Growth in the Internet Economy: a Perspective from Str...
SaaStrU 301: Unlocking Growth in the Internet Economy: a Perspective from Str...
 
Creating Effective Forms with Constant Contact.pdf
Creating Effective Forms with Constant Contact.pdfCreating Effective Forms with Constant Contact.pdf
Creating Effective Forms with Constant Contact.pdf
 
B2B Ecommerce through Magento and how integration will help
 B2B Ecommerce through Magento and how integration will help B2B Ecommerce through Magento and how integration will help
B2B Ecommerce through Magento and how integration will help
 
Pekka Koskinen (Leadfeeder,Founder & CEO) "How to reach $150k MRR without sal...
Pekka Koskinen (Leadfeeder,Founder & CEO) "How to reach $150k MRR without sal...Pekka Koskinen (Leadfeeder,Founder & CEO) "How to reach $150k MRR without sal...
Pekka Koskinen (Leadfeeder,Founder & CEO) "How to reach $150k MRR without sal...
 
The Ultimate Campaign Planning Framework
The Ultimate Campaign Planning FrameworkThe Ultimate Campaign Planning Framework
The Ultimate Campaign Planning Framework
 
Chp12 E Business Design
Chp12 E Business DesignChp12 E Business Design
Chp12 E Business Design
 
( Template) Business plan template
( Template) Business plan template( Template) Business plan template
( Template) Business plan template
 
How To Prepare for the Launch of Your B2B eCommerce Platform by Four51
How To Prepare for the Launch of Your B2B eCommerce Platform by Four51How To Prepare for the Launch of Your B2B eCommerce Platform by Four51
How To Prepare for the Launch of Your B2B eCommerce Platform by Four51
 
The Next-Generation Sales Development Team
The Next-Generation Sales Development TeamThe Next-Generation Sales Development Team
The Next-Generation Sales Development Team
 
What are the Features of Form Builder
What are the Features of Form BuilderWhat are the Features of Form Builder
What are the Features of Form Builder
 
CustomerGauge B2b Net Promoter Score Measurement
CustomerGauge B2b Net Promoter Score MeasurementCustomerGauge B2b Net Promoter Score Measurement
CustomerGauge B2b Net Promoter Score Measurement
 
Creating a business first digital marketing strategy
Creating a business first digital marketing strategyCreating a business first digital marketing strategy
Creating a business first digital marketing strategy
 
Ideal Customer Profile Guide
Ideal Customer Profile GuideIdeal Customer Profile Guide
Ideal Customer Profile Guide
 
Marketing Process - Go-to-Market Plans
Marketing Process - Go-to-Market PlansMarketing Process - Go-to-Market Plans
Marketing Process - Go-to-Market Plans
 
Design for Business Impact - Increase Your ROI & Velocity
Design for Business Impact - Increase Your ROI & VelocityDesign for Business Impact - Increase Your ROI & Velocity
Design for Business Impact - Increase Your ROI & Velocity
 
Digital Disruption in Distribution and Manufacturing: How to Be a B2B Leader
Digital Disruption in Distribution and Manufacturing: How to Be a B2B LeaderDigital Disruption in Distribution and Manufacturing: How to Be a B2B Leader
Digital Disruption in Distribution and Manufacturing: How to Be a B2B Leader
 

More from Santi Jansen (8)

Les1 q1 ethiek
Les1 q1 ethiekLes1 q1 ethiek
Les1 q1 ethiek
 
Beoordelingscriteria q3
Beoordelingscriteria q3Beoordelingscriteria q3
Beoordelingscriteria q3
 
Beoordelingscriteria q3
Beoordelingscriteria q3Beoordelingscriteria q3
Beoordelingscriteria q3
 
HC3 • Q3 • IAD1 DT
HC3 • Q3 • IAD1 DTHC3 • Q3 • IAD1 DT
HC3 • Q3 • IAD1 DT
 
Les 4 • Q3 • IAD1 DT
Les 4 • Q3 • IAD1 DTLes 4 • Q3 • IAD1 DT
Les 4 • Q3 • IAD1 DT
 
Les3 • Q3 • IAD1
Les3 • Q3 • IAD1Les3 • Q3 • IAD1
Les3 • Q3 • IAD1
 
les 2 • q3 • cmd iad1
les 2 • q3 • cmd iad1les 2 • q3 • cmd iad1
les 2 • q3 • cmd iad1
 
Les1q3iad1
Les1q3iad1Les1q3iad1
Les1q3iad1
 

Recently uploaded

Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
ZurliaSoop
 

Recently uploaded (20)

UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdfUGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
 
FSB Advising Checklist - Orientation 2024
FSB Advising Checklist - Orientation 2024FSB Advising Checklist - Orientation 2024
FSB Advising Checklist - Orientation 2024
 
Micro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdfMicro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdf
 
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
 
Sociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning ExhibitSociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning Exhibit
 
COMMUNICATING NEGATIVE NEWS - APPROACHES .pptx
COMMUNICATING NEGATIVE NEWS - APPROACHES .pptxCOMMUNICATING NEGATIVE NEWS - APPROACHES .pptx
COMMUNICATING NEGATIVE NEWS - APPROACHES .pptx
 
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
 
Key note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdfKey note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdf
 
Graduate Outcomes Presentation Slides - English
Graduate Outcomes Presentation Slides - EnglishGraduate Outcomes Presentation Slides - English
Graduate Outcomes Presentation Slides - English
 
Food safety_Challenges food safety laboratories_.pdf
Food safety_Challenges food safety laboratories_.pdfFood safety_Challenges food safety laboratories_.pdf
Food safety_Challenges food safety laboratories_.pdf
 
How to Manage Global Discount in Odoo 17 POS
How to Manage Global Discount in Odoo 17 POSHow to Manage Global Discount in Odoo 17 POS
How to Manage Global Discount in Odoo 17 POS
 
Exploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptx
Exploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptxExploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptx
Exploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptx
 
Plant propagation: Sexual and Asexual propapagation.pptx
Plant propagation: Sexual and Asexual propapagation.pptxPlant propagation: Sexual and Asexual propapagation.pptx
Plant propagation: Sexual and Asexual propapagation.pptx
 
Unit 3 Emotional Intelligence and Spiritual Intelligence.pdf
Unit 3 Emotional Intelligence and Spiritual Intelligence.pdfUnit 3 Emotional Intelligence and Spiritual Intelligence.pdf
Unit 3 Emotional Intelligence and Spiritual Intelligence.pdf
 
Accessible Digital Futures project (20/03/2024)
Accessible Digital Futures project (20/03/2024)Accessible Digital Futures project (20/03/2024)
Accessible Digital Futures project (20/03/2024)
 
How to setup Pycharm environment for Odoo 17.pptx
How to setup Pycharm environment for Odoo 17.pptxHow to setup Pycharm environment for Odoo 17.pptx
How to setup Pycharm environment for Odoo 17.pptx
 
80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...
80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...
80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...
 
Application orientated numerical on hev.ppt
Application orientated numerical on hev.pptApplication orientated numerical on hev.ppt
Application orientated numerical on hev.ppt
 
How to Create and Manage Wizard in Odoo 17
How to Create and Manage Wizard in Odoo 17How to Create and Manage Wizard in Odoo 17
How to Create and Manage Wizard in Odoo 17
 
On National Teacher Day, meet the 2024-25 Kenan Fellows
On National Teacher Day, meet the 2024-25 Kenan FellowsOn National Teacher Day, meet the 2024-25 Kenan Fellows
On National Teacher Day, meet the 2024-25 Kenan Fellows
 

Hc2 • Q3 • IAD1