SlideShare a Scribd company logo
1
Forms
Caroline Jarrett
Designing forms for
technical specialists
and their users
Background:
the European Bioinformatics Institute
In 2010, I had the opportunity to give a talk on forms at the EBI,
part of the European Molecular Biology Laboratory (EMBL).
“ EBI provides freely available data from life science experiments, performs
basic research in computational biology and offers an extensive user
training programme, supporting researchers in academia and industry”.
A typical EBI form allows highly-trained scientists to perform difficult
tasks on complex data.
These slides present some before-and-after suggestions that
provoked lively discussion. We sometimes agreed that the original
was better.
Thanks again to EBI for a great experience. 2
3
Agenda Label placement on forms
What really matters in forms design
Are all the users equally specialist?
4
Reading forms is different from using them
Ordering
a prospectus
• User has
chosen a
prospectus
• Postcode
lookup for
the address
5
6
One person’s
heat map
• Small green
dots show
narrow focus
on labels and
left end of fields
• Red crosses
show clicks
7
Back to labels.
The ‘narrow focus’ means big jumps for the users’ eyes.
8
Mario Penzo’s recommendation:
“Place labels above or right-align them”
Penzo, M (2006) Label Placement in Forms
http://www.uxmatters.com/MT/archives/000107.php
9
Are all these questions equivalent?
Where do the answers come from?
• Your address
• Your city
• Company you work for
• Number of colleagues
• Your address
• Your city
• Company you work for
• no
of colleagues
• Name
• Surname
• Age
• City
10
Easy questions and hard
questions prompt different
patterns of reading
• Users glance at
populated answers
• Users look mostly at
the left end of the
answer space for
easy questions
• Users read complex
instructions quite
carefully...
• ... provided they are on
the way to their goal
A design tip: make sure that the label is
unambiguously associated with the field
11
Before
A design tip: make sure that the label is
unambiguously associated with the field
12
After?
Easy questions or hard questions? For whom?
13
14
Agenda Label placement on forms
What really matters in forms design
Are all the users equally specialist?
Users care about what they want to achieve
with the form; design can be overcome
• Most users don’t care about:
– Where the labels are positioned
– The design and placement of the required field indicator
– Whether the label has a colon on the end of it
• Most users do care about:
– Whether they understand the questions
– Whether they can answer the questions
– Whether the form will accept their answers
– What the organisation will do with their answers
15
The definition of usability:
who is using the product for what purpose
16
The extent to which a product can be used
by specified users to achieve specified goals
with effectiveness, efficiency and satisfaction
in a specified context of use
(ISO 9241:11 1998)
17
Understand your users’ goals
• What does the user get out of it?
– What does the user achieve by filling in this form?
• How does the user feel about it?
– Does the user have a choice?
– Does the user trust your organisation?
• What is the user expecting?
– What does the user expect to tell you?
– What do other organisations ask the user in similar circumstances?
18
Think about effectiveness, efficiency, context
• Effectiveness
– What is the user’s definition of ‘success’ with this form?
• Efficiency
– Will it be difficult to find the answers?
– How long can the user spare?
– How long will this take?
• Context
– What else is happening?
– What will happen next?
– What happened before?
What are the tasks for this form?
19
20
Agenda Label placement on forms
What really matters in forms design
Are all the users equally specialist?
This form has new users as well as
experienced users
21
A glimpse into the FAQ
22
23
A suggested approach to the preamble:
before
24
A suggested approach to the preamble:
after
25
A bit about me:
Caroline Jarrett
www.effortmark.co.uk
Twitter @cjforms
Jarrett and Gaffney (2008)
Forms that work:
Designing web forms
for usability
Morgan Kaufmann /
Elsevier
Stone, Jarrett, Woodroffe
and Minocha (2005)
User interface
design and
evaluation
Morgan Kaufmann /
Elsevier
26

More Related Content

Similar to Caroline Jarrett: Forms and their Users

Career guideinterestinventory schools_v080114
Career guideinterestinventory schools_v080114Career guideinterestinventory schools_v080114
Career guideinterestinventory schools_v080114
Maanveer Singh
 

Similar to Caroline Jarrett: Forms and their Users (20)

Better UX Surveys part 1
Better UX Surveys part 1Better UX Surveys part 1
Better UX Surveys part 1
 
Labels on forms for STC Dallas, 2010
Labels on forms  for STC Dallas, 2010Labels on forms  for STC Dallas, 2010
Labels on forms for STC Dallas, 2010
 
Complex forms for APPU, October 2010
Complex forms for APPU, October 2010Complex forms for APPU, October 2010
Complex forms for APPU, October 2010
 
Complex forms-for-upa2010
Complex forms-for-upa2010Complex forms-for-upa2010
Complex forms-for-upa2010
 
Labels and buttons on forms
Labels and buttons on formsLabels and buttons on forms
Labels and buttons on forms
 
Usability reports for prototype jam Nov. 30 2015 presentation
Usability reports for prototype jam Nov. 30 2015 presentationUsability reports for prototype jam Nov. 30 2015 presentation
Usability reports for prototype jam Nov. 30 2015 presentation
 
Usability requirements
Usability requirements Usability requirements
Usability requirements
 
Requirements Engineering for the Humanities
Requirements Engineering for the HumanitiesRequirements Engineering for the Humanities
Requirements Engineering for the Humanities
 
Contextual Inquiry
Contextual InquiryContextual Inquiry
Contextual Inquiry
 
Learning design toolkit v0.2
Learning design toolkit v0.2Learning design toolkit v0.2
Learning design toolkit v0.2
 
501 Talks Tech: Design Thinking Workshop by Dupla Studios
501 Talks Tech: Design Thinking Workshop by Dupla Studios501 Talks Tech: Design Thinking Workshop by Dupla Studios
501 Talks Tech: Design Thinking Workshop by Dupla Studios
 
UI For Alien Cowboys
UI For Alien CowboysUI For Alien Cowboys
UI For Alien Cowboys
 
Rapid User Research - a talk from Agile 2013 by Aviva Rosenstein
Rapid User Research - a talk from Agile 2013 by Aviva RosensteinRapid User Research - a talk from Agile 2013 by Aviva Rosenstein
Rapid User Research - a talk from Agile 2013 by Aviva Rosenstein
 
UXPA International 2013 The Note-Taker's Perspective
UXPA International 2013 The Note-Taker's Perspective UXPA International 2013 The Note-Taker's Perspective
UXPA International 2013 The Note-Taker's Perspective
 
The Note-Taker’s Perspective During Usability Testing: Recognizing What’s Imp...
The Note-Taker’s Perspective During Usability Testing: Recognizing What’s Imp...The Note-Taker’s Perspective During Usability Testing: Recognizing What’s Imp...
The Note-Taker’s Perspective During Usability Testing: Recognizing What’s Imp...
 
Career guideinterestinventory schools_v080114
Career guideinterestinventory schools_v080114Career guideinterestinventory schools_v080114
Career guideinterestinventory schools_v080114
 
Human Computer Interaction: Lecture 2: Interaction Design
Human Computer Interaction: Lecture 2: Interaction DesignHuman Computer Interaction: Lecture 2: Interaction Design
Human Computer Interaction: Lecture 2: Interaction Design
 
Labels On Forms For Uxlx 2010
Labels On Forms   For Uxlx 2010Labels On Forms   For Uxlx 2010
Labels On Forms For Uxlx 2010
 
Education & Game Principles: Context, Theory & Application
Education & Game Principles: Context, Theory & ApplicationEducation & Game Principles: Context, Theory & Application
Education & Game Principles: Context, Theory & Application
 
Exploring CSR benefits
Exploring CSR benefitsExploring CSR benefits
Exploring CSR benefits
 

More from Francis Rowland

Speed sketching UX Cambridge 2011
Speed sketching UX Cambridge 2011Speed sketching UX Cambridge 2011
Speed sketching UX Cambridge 2011
Francis Rowland
 

More from Francis Rowland (20)

Sabotage
Sabotage Sabotage
Sabotage
 
Visual note-taking: listening, learning, remembering
Visual note-taking: listening, learning, rememberingVisual note-taking: listening, learning, remembering
Visual note-taking: listening, learning, remembering
 
A UX Journey into the World of Early Drug Discovery - UX Cambridge 2015
A UX Journey into the World of Early Drug Discovery - UX Cambridge 2015A UX Journey into the World of Early Drug Discovery - UX Cambridge 2015
A UX Journey into the World of Early Drug Discovery - UX Cambridge 2015
 
Les super pouvoirs du sketching
Les super pouvoirs du sketchingLes super pouvoirs du sketching
Les super pouvoirs du sketching
 
Le Design Studio
Le Design StudioLe Design Studio
Le Design Studio
 
Useful questions to ask when designing data visualisations
Useful questions to ask when designing data visualisationsUseful questions to ask when designing data visualisations
Useful questions to ask when designing data visualisations
 
Jeux d'Innovation (FLUPA UX Day 2013)
Jeux d'Innovation (FLUPA UX Day 2013)Jeux d'Innovation (FLUPA UX Day 2013)
Jeux d'Innovation (FLUPA UX Day 2013)
 
What the heck are sketchnotes?
What the heck are sketchnotes?What the heck are sketchnotes?
What the heck are sketchnotes?
 
VIZBI 2013 - UX design tutorial
VIZBI 2013 - UX design tutorialVIZBI 2013 - UX design tutorial
VIZBI 2013 - UX design tutorial
 
User research: the gentle art of not asking users what they want
User research: the gentle art of not asking users what they wantUser research: the gentle art of not asking users what they want
User research: the gentle art of not asking users what they want
 
Design for Society
Design for SocietyDesign for Society
Design for Society
 
Why usability problems go unfixed - UX Bristol 2012
Why usability problems go unfixed - UX Bristol 2012Why usability problems go unfixed - UX Bristol 2012
Why usability problems go unfixed - UX Bristol 2012
 
Vizbi 2012 Takeaway
Vizbi 2012 TakeawayVizbi 2012 Takeaway
Vizbi 2012 Takeaway
 
The user experience of EGA data access
The user experience of EGA data accessThe user experience of EGA data access
The user experience of EGA data access
 
Speed sketching UX Cambridge 2011
Speed sketching UX Cambridge 2011Speed sketching UX Cambridge 2011
Speed sketching UX Cambridge 2011
 
Drupal at the EBI
Drupal at the EBIDrupal at the EBI
Drupal at the EBI
 
Reactome: Usability testing - is it useful?
Reactome: Usability testing - is it useful? Reactome: Usability testing - is it useful?
Reactome: Usability testing - is it useful?
 
Usability Testing is Easy! (redux)
Usability Testing is Easy! (redux)Usability Testing is Easy! (redux)
Usability Testing is Easy! (redux)
 
Cocoa for Scientists
Cocoa for ScientistsCocoa for Scientists
Cocoa for Scientists
 
Usability Testing is Easy!
Usability Testing is Easy!Usability Testing is Easy!
Usability Testing is Easy!
 

Recently uploaded

National-Learning-Camp 2024 deped....pptx
National-Learning-Camp 2024 deped....pptxNational-Learning-Camp 2024 deped....pptx
National-Learning-Camp 2024 deped....pptx
AlecAnidul
 
Heuristic Evaluation of System & Application
Heuristic Evaluation of System & ApplicationHeuristic Evaluation of System & Application
Heuristic Evaluation of System & Application
Jaime Brown
 
Research about Venice ppt for grade 6f anas
Research about Venice ppt for grade 6f anasResearch about Venice ppt for grade 6f anas
Research about Venice ppt for grade 6f anas
anasabutalha2013
 

Recently uploaded (16)

National-Learning-Camp 2024 deped....pptx
National-Learning-Camp 2024 deped....pptxNational-Learning-Camp 2024 deped....pptx
National-Learning-Camp 2024 deped....pptx
 
Spring 2024 wkrm_Enhancing Campus Mobility.pdf
Spring 2024 wkrm_Enhancing Campus Mobility.pdfSpring 2024 wkrm_Enhancing Campus Mobility.pdf
Spring 2024 wkrm_Enhancing Campus Mobility.pdf
 
Extended Reality(XR) Development in immersive design
Extended Reality(XR) Development in immersive designExtended Reality(XR) Development in immersive design
Extended Reality(XR) Development in immersive design
 
Pitch Presentation for Service Design in Technology
Pitch Presentation for Service Design in TechnologyPitch Presentation for Service Design in Technology
Pitch Presentation for Service Design in Technology
 
Common Designing Mistakes and How to avoid them
Common Designing Mistakes and How to avoid themCommon Designing Mistakes and How to avoid them
Common Designing Mistakes and How to avoid them
 
The Design Code Google Developer Student Club.pptx
The Design Code Google Developer Student Club.pptxThe Design Code Google Developer Student Club.pptx
The Design Code Google Developer Student Club.pptx
 
Heuristic Evaluation of System & Application
Heuristic Evaluation of System & ApplicationHeuristic Evaluation of System & Application
Heuristic Evaluation of System & Application
 
Dos And Dont's Of Logo Design For 2024..
Dos And Dont's Of Logo Design For 2024..Dos And Dont's Of Logo Design For 2024..
Dos And Dont's Of Logo Design For 2024..
 
Heidi Livengood's Professional CADD Portfolio
Heidi Livengood's Professional CADD PortfolioHeidi Livengood's Professional CADD Portfolio
Heidi Livengood's Professional CADD Portfolio
 
Art Nouveau Movement Presentation for Art History.
Art Nouveau Movement Presentation for Art History.Art Nouveau Movement Presentation for Art History.
Art Nouveau Movement Presentation for Art History.
 
Claire's designing portfolio presentation
Claire's designing portfolio presentationClaire's designing portfolio presentation
Claire's designing portfolio presentation
 
Design lessons from Singapore | Volume 3
Design lessons from Singapore | Volume 3Design lessons from Singapore | Volume 3
Design lessons from Singapore | Volume 3
 
FW25-26 Fashion Key Items Trend Book Peclers Paris
FW25-26 Fashion Key Items Trend Book Peclers ParisFW25-26 Fashion Key Items Trend Book Peclers Paris
FW25-26 Fashion Key Items Trend Book Peclers Paris
 
Redefining Globalization, urbanisation and Localisation
Redefining Globalization, urbanisation and LocalisationRedefining Globalization, urbanisation and Localisation
Redefining Globalization, urbanisation and Localisation
 
Research about Venice ppt for grade 6f anas
Research about Venice ppt for grade 6f anasResearch about Venice ppt for grade 6f anas
Research about Venice ppt for grade 6f anas
 
BIT- Pinal .H. Prajapati Graphic Designer
BIT- Pinal .H. Prajapati  Graphic DesignerBIT- Pinal .H. Prajapati  Graphic Designer
BIT- Pinal .H. Prajapati Graphic Designer
 

Caroline Jarrett: Forms and their Users

  • 1. 1 Forms Caroline Jarrett Designing forms for technical specialists and their users
  • 2. Background: the European Bioinformatics Institute In 2010, I had the opportunity to give a talk on forms at the EBI, part of the European Molecular Biology Laboratory (EMBL). “ EBI provides freely available data from life science experiments, performs basic research in computational biology and offers an extensive user training programme, supporting researchers in academia and industry”. A typical EBI form allows highly-trained scientists to perform difficult tasks on complex data. These slides present some before-and-after suggestions that provoked lively discussion. We sometimes agreed that the original was better. Thanks again to EBI for a great experience. 2
  • 3. 3 Agenda Label placement on forms What really matters in forms design Are all the users equally specialist?
  • 4. 4 Reading forms is different from using them
  • 5. Ordering a prospectus • User has chosen a prospectus • Postcode lookup for the address 5
  • 6. 6 One person’s heat map • Small green dots show narrow focus on labels and left end of fields • Red crosses show clicks
  • 7. 7 Back to labels. The ‘narrow focus’ means big jumps for the users’ eyes.
  • 8. 8 Mario Penzo’s recommendation: “Place labels above or right-align them” Penzo, M (2006) Label Placement in Forms http://www.uxmatters.com/MT/archives/000107.php
  • 9. 9 Are all these questions equivalent? Where do the answers come from? • Your address • Your city • Company you work for • Number of colleagues • Your address • Your city • Company you work for • no of colleagues • Name • Surname • Age • City
  • 10. 10 Easy questions and hard questions prompt different patterns of reading • Users glance at populated answers • Users look mostly at the left end of the answer space for easy questions • Users read complex instructions quite carefully... • ... provided they are on the way to their goal
  • 11. A design tip: make sure that the label is unambiguously associated with the field 11 Before
  • 12. A design tip: make sure that the label is unambiguously associated with the field 12 After?
  • 13. Easy questions or hard questions? For whom? 13
  • 14. 14 Agenda Label placement on forms What really matters in forms design Are all the users equally specialist?
  • 15. Users care about what they want to achieve with the form; design can be overcome • Most users don’t care about: – Where the labels are positioned – The design and placement of the required field indicator – Whether the label has a colon on the end of it • Most users do care about: – Whether they understand the questions – Whether they can answer the questions – Whether the form will accept their answers – What the organisation will do with their answers 15
  • 16. The definition of usability: who is using the product for what purpose 16 The extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use (ISO 9241:11 1998)
  • 17. 17 Understand your users’ goals • What does the user get out of it? – What does the user achieve by filling in this form? • How does the user feel about it? – Does the user have a choice? – Does the user trust your organisation? • What is the user expecting? – What does the user expect to tell you? – What do other organisations ask the user in similar circumstances?
  • 18. 18 Think about effectiveness, efficiency, context • Effectiveness – What is the user’s definition of ‘success’ with this form? • Efficiency – Will it be difficult to find the answers? – How long can the user spare? – How long will this take? • Context – What else is happening? – What will happen next? – What happened before?
  • 19. What are the tasks for this form? 19
  • 20. 20 Agenda Label placement on forms What really matters in forms design Are all the users equally specialist?
  • 21. This form has new users as well as experienced users 21
  • 22. A glimpse into the FAQ 22
  • 23. 23
  • 24. A suggested approach to the preamble: before 24
  • 25. A suggested approach to the preamble: after 25
  • 26. A bit about me: Caroline Jarrett www.effortmark.co.uk Twitter @cjforms Jarrett and Gaffney (2008) Forms that work: Designing web forms for usability Morgan Kaufmann / Elsevier Stone, Jarrett, Woodroffe and Minocha (2005) User interface design and evaluation Morgan Kaufmann / Elsevier 26

Editor's Notes

  1. © Caroline Jarrett, 2008 UPA conference, 2008 Baltimore, MD, USA
  2. © Caroline Jarrett, 2008
  3. © Caroline Jarrett, 2008
  4. CHI 2010 Caroline Jarrett     
  5. © Caroline Jarrett, 2008
  6. © Caroline Jarrett, 2008
  7. © Caroline Jarrett, 2008
  8. © Caroline Jarrett, 2008
  9. © Caroline Jarrett, 2008
  10. © Caroline Jarrett, 2008
  11. © Caroline Jarrett, 2008
  12. © Caroline Jarrett, 2008
  13. © Caroline Jarrett, 2008
  14. CHI 2010 Caroline Jarrett