SlideShare ist ein Scribd-Unternehmen logo
1 von 26
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

Weitere ähnliche Inhalte

Ähnlich wie Designing Forms for Technical Specialists and Their Users

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, 2010Caroline Jarrett
 
Complex forms for APPU, October 2010
Complex forms for APPU, October 2010Complex forms for APPU, October 2010
Complex forms for APPU, October 2010Caroline Jarrett
 
Labels and buttons on forms
Labels and buttons on formsLabels and buttons on forms
Labels and buttons on formsCaroline Jarrett
 
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 presentationMissouri Western State University
 
Requirements Engineering for the Humanities
Requirements Engineering for the HumanitiesRequirements Engineering for the Humanities
Requirements Engineering for the HumanitiesShawn Day
 
Learning design toolkit v0.2
Learning design toolkit v0.2Learning design toolkit v0.2
Learning design toolkit v0.2lcallion
 
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 Studios501 Commons
 
UI For Alien Cowboys
UI For Alien CowboysUI For Alien Cowboys
UI For Alien CowboysMatt Jones
 
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 RosensteinAviva Rosenstein
 
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...UXPA International
 
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 UserWorks
 
Career guideinterestinventory schools_v080114
Career guideinterestinventory schools_v080114Career guideinterestinventory schools_v080114
Career guideinterestinventory schools_v080114Maanveer Singh
 
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 DesignSazzadHossain764310
 
Labels On Forms For Uxlx 2010
Labels On Forms   For Uxlx 2010Labels On Forms   For Uxlx 2010
Labels On Forms For Uxlx 2010Caroline Jarrett
 
Education & Game Principles: Context, Theory & Application
Education & Game Principles: Context, Theory & ApplicationEducation & Game Principles: Context, Theory & Application
Education & Game Principles: Context, Theory & ApplicationLa Trobe University
 

Ähnlich wie Designing Forms for Technical Specialists 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
 
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...
 
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
 
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
 

Mehr von Francis Rowland

Visual note-taking: listening, learning, remembering
Visual note-taking: listening, learning, rememberingVisual note-taking: listening, learning, remembering
Visual note-taking: listening, learning, rememberingFrancis Rowland
 
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 2015Francis Rowland
 
Les super pouvoirs du sketching
Les super pouvoirs du sketchingLes super pouvoirs du sketching
Les super pouvoirs du sketchingFrancis Rowland
 
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 visualisationsFrancis Rowland
 
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)Francis Rowland
 
What the heck are sketchnotes?
What the heck are sketchnotes?What the heck are sketchnotes?
What the heck are sketchnotes?Francis Rowland
 
VIZBI 2013 - UX design tutorial
VIZBI 2013 - UX design tutorialVIZBI 2013 - UX design tutorial
VIZBI 2013 - UX design tutorialFrancis Rowland
 
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 wantFrancis Rowland
 
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 2012Francis Rowland
 
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 accessFrancis Rowland
 
Speed sketching UX Cambridge 2011
Speed sketching UX Cambridge 2011Speed sketching UX Cambridge 2011
Speed sketching UX Cambridge 2011Francis Rowland
 
Reactome: Usability testing - is it useful?
Reactome: Usability testing - is it useful? Reactome: Usability testing - is it useful?
Reactome: Usability testing - is it useful? Francis Rowland
 
Usability Testing is Easy! (redux)
Usability Testing is Easy! (redux)Usability Testing is Easy! (redux)
Usability Testing is Easy! (redux)Francis Rowland
 
Usability Testing is Easy!
Usability Testing is Easy!Usability Testing is Easy!
Usability Testing is Easy!Francis Rowland
 

Mehr von 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!
 

Kürzlich hochgeladen

办理学位证加州州立大学洛杉矶分校毕业证成绩单原版一比一
办理学位证加州州立大学洛杉矶分校毕业证成绩单原版一比一办理学位证加州州立大学洛杉矶分校毕业证成绩单原版一比一
办理学位证加州州立大学洛杉矶分校毕业证成绩单原版一比一Fi L
 
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,Aginakm1
 
group_15_empirya_p1projectIndustrial.pdf
group_15_empirya_p1projectIndustrial.pdfgroup_15_empirya_p1projectIndustrial.pdf
group_15_empirya_p1projectIndustrial.pdfneelspinoy
 
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degreeyuu sss
 
Call Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts Service
Call Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts ServiceCall Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts Service
Call Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts Servicejennyeacort
 
306MTAMount UCLA University Bachelor's Diploma in Social Media
306MTAMount UCLA University Bachelor's Diploma in Social Media306MTAMount UCLA University Bachelor's Diploma in Social Media
306MTAMount UCLA University Bachelor's Diploma in Social MediaD SSS
 
Call Girls Aslali 7397865700 Ridhima Hire Me Full Night
Call Girls Aslali 7397865700 Ridhima Hire Me Full NightCall Girls Aslali 7397865700 Ridhima Hire Me Full Night
Call Girls Aslali 7397865700 Ridhima Hire Me Full Nightssuser7cb4ff
 
ARt app | UX Case Study
ARt app | UX Case StudyARt app | UX Case Study
ARt app | UX Case StudySophia Viganò
 
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...katerynaivanenko1
 
Design principles on typography in design
Design principles on typography in designDesign principles on typography in design
Design principles on typography in designnooreen17
 
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一F dds
 
Untitled presedddddddddddddddddntation (1).pptx
Untitled presedddddddddddddddddntation (1).pptxUntitled presedddddddddddddddddntation (1).pptx
Untitled presedddddddddddddddddntation (1).pptxmapanig881
 
定制(CQU文凭证书)中央昆士兰大学毕业证成绩单原版一比一
定制(CQU文凭证书)中央昆士兰大学毕业证成绩单原版一比一定制(CQU文凭证书)中央昆士兰大学毕业证成绩单原版一比一
定制(CQU文凭证书)中央昆士兰大学毕业证成绩单原版一比一Fi ss
 
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档208367051
 
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degreeyuu sss
 
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证nhjeo1gg
 
(办理学位证)约克圣约翰大学毕业证,KCL成绩单原版一比一
(办理学位证)约克圣约翰大学毕业证,KCL成绩单原版一比一(办理学位证)约克圣约翰大学毕业证,KCL成绩单原版一比一
(办理学位证)约克圣约翰大学毕业证,KCL成绩单原版一比一D SSS
 
Dubai Calls Girl Tapes O525547819 Real Tapes Escort Services Dubai
Dubai Calls Girl Tapes O525547819 Real Tapes Escort Services DubaiDubai Calls Girl Tapes O525547819 Real Tapes Escort Services Dubai
Dubai Calls Girl Tapes O525547819 Real Tapes Escort Services Dubaikojalkojal131
 
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...Rishabh Aryan
 
Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Rndexperts
 

Kürzlich hochgeladen (20)

办理学位证加州州立大学洛杉矶分校毕业证成绩单原版一比一
办理学位证加州州立大学洛杉矶分校毕业证成绩单原版一比一办理学位证加州州立大学洛杉矶分校毕业证成绩单原版一比一
办理学位证加州州立大学洛杉矶分校毕业证成绩单原版一比一
 
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
 
group_15_empirya_p1projectIndustrial.pdf
group_15_empirya_p1projectIndustrial.pdfgroup_15_empirya_p1projectIndustrial.pdf
group_15_empirya_p1projectIndustrial.pdf
 
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
 
Call Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts Service
Call Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts ServiceCall Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts Service
Call Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts Service
 
306MTAMount UCLA University Bachelor's Diploma in Social Media
306MTAMount UCLA University Bachelor's Diploma in Social Media306MTAMount UCLA University Bachelor's Diploma in Social Media
306MTAMount UCLA University Bachelor's Diploma in Social Media
 
Call Girls Aslali 7397865700 Ridhima Hire Me Full Night
Call Girls Aslali 7397865700 Ridhima Hire Me Full NightCall Girls Aslali 7397865700 Ridhima Hire Me Full Night
Call Girls Aslali 7397865700 Ridhima Hire Me Full Night
 
ARt app | UX Case Study
ARt app | UX Case StudyARt app | UX Case Study
ARt app | UX Case Study
 
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
 
Design principles on typography in design
Design principles on typography in designDesign principles on typography in design
Design principles on typography in design
 
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一
 
Untitled presedddddddddddddddddntation (1).pptx
Untitled presedddddddddddddddddntation (1).pptxUntitled presedddddddddddddddddntation (1).pptx
Untitled presedddddddddddddddddntation (1).pptx
 
定制(CQU文凭证书)中央昆士兰大学毕业证成绩单原版一比一
定制(CQU文凭证书)中央昆士兰大学毕业证成绩单原版一比一定制(CQU文凭证书)中央昆士兰大学毕业证成绩单原版一比一
定制(CQU文凭证书)中央昆士兰大学毕业证成绩单原版一比一
 
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
 
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
 
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证
 
(办理学位证)约克圣约翰大学毕业证,KCL成绩单原版一比一
(办理学位证)约克圣约翰大学毕业证,KCL成绩单原版一比一(办理学位证)约克圣约翰大学毕业证,KCL成绩单原版一比一
(办理学位证)约克圣约翰大学毕业证,KCL成绩单原版一比一
 
Dubai Calls Girl Tapes O525547819 Real Tapes Escort Services Dubai
Dubai Calls Girl Tapes O525547819 Real Tapes Escort Services DubaiDubai Calls Girl Tapes O525547819 Real Tapes Escort Services Dubai
Dubai Calls Girl Tapes O525547819 Real Tapes Escort Services Dubai
 
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
 
Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025
 

Designing Forms for Technical Specialists 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

Hinweis der Redaktion

  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