SlideShare une entreprise Scribd logo
1  sur  26
Forms
and their users
Designing forms for
technical specialists
Caroline Jarrett
1
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
Agenda Label placement on forms
What really matters in forms design
Are all the users equally specialist?
3
Reading forms is different from using them
4
Ordering
a prospectus
• User has
chosen a
prospectus
• Postcode
lookup for
the address
5
One person’s
heat map
• Small green
dots show
narrow focus
on labels and
left end of fields
• Red crosses
show clicks
6
Back to labels.
The ‘narrow focus’ means big jumps for the users’ eyes.
7
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 8
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
9
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
10
A design tip: make sure that the label is
unambiguously associated with the field
Before
11
A design tip: make sure that the label is
unambiguously associated with the field
After?
12
Easy questions or hard questions? For whom?
13
Agenda Label placement on forms
What really matters in forms design
Are all the users equally specialist?
14
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
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)
16
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?
17
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?
18
What are the tasks for this form?
19
Agenda Label placement on forms
What really matters in forms design
Are all the users equally specialist?
20
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

Contenu connexe

Similaire à Designing forms for technical specialists by @cjforms

Caroline Jarrett: Forms and their Users
Caroline Jarrett: Forms and their UsersCaroline Jarrett: Forms and their Users
Caroline Jarrett: Forms and their UsersFrancis Rowland
 
Label placement on forms, STC Seattle 2010
Label placement on forms, STC Seattle 2010Label placement on forms, STC Seattle 2010
Label placement on forms, STC Seattle 2010Caroline Jarrett
 
Deciphering the DNA of innovation platforms
Deciphering the DNA of innovation platforms Deciphering the DNA of innovation platforms
Deciphering the DNA of innovation platforms Zelalem Lema
 
Deciphering the DNA of innovation platforms
Deciphering the DNA of innovation platformsDeciphering the DNA of innovation platforms
Deciphering the DNA of innovation platformsILRI
 
Complex forms at Clarity2010
Complex forms at Clarity2010Complex forms at Clarity2010
Complex forms at Clarity2010Caroline Jarrett
 
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
 
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
 
Career guideinterestinventory schools_v080114
Career guideinterestinventory schools_v080114Career guideinterestinventory schools_v080114
Career guideinterestinventory schools_v080114Maanveer Singh
 
Labels On Forms For Uxlx 2010
Labels On Forms   For Uxlx 2010Labels On Forms   For Uxlx 2010
Labels On Forms For Uxlx 2010Caroline Jarrett
 
Treating users as learners - 2015 PSU Web Conference
Treating users as learners - 2015 PSU Web ConferenceTreating users as learners - 2015 PSU Web Conference
Treating users as learners - 2015 PSU Web ConferenceVictor Yocco
 
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
 
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
 
UI For Alien Cowboys
UI For Alien CowboysUI For Alien Cowboys
UI For Alien CowboysMatt Jones
 
Learning design toolkit v0.2
Learning design toolkit v0.2Learning design toolkit v0.2
Learning design toolkit v0.2lcallion
 

Similaire à Designing forms for technical specialists by @cjforms (20)

Caroline Jarrett: Forms and their Users
Caroline Jarrett: Forms and their UsersCaroline Jarrett: Forms and their Users
Caroline Jarrett: Forms and their Users
 
Label placement on forms, STC Seattle 2010
Label placement on forms, STC Seattle 2010Label placement on forms, STC Seattle 2010
Label placement on forms, STC Seattle 2010
 
Deciphering the DNA of innovation platforms
Deciphering the DNA of innovation platforms Deciphering the DNA of innovation platforms
Deciphering the DNA of innovation platforms
 
Deciphering the DNA of innovation platforms
Deciphering the DNA of innovation platformsDeciphering the DNA of innovation platforms
Deciphering the DNA of innovation platforms
 
Complex forms at Clarity2010
Complex forms at Clarity2010Complex forms at Clarity2010
Complex forms at Clarity2010
 
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
 
09-UX.pdf
09-UX.pdf09-UX.pdf
09-UX.pdf
 
Ux
Ux Ux
Ux
 
Better UX Surveys part 1
Better UX Surveys part 1Better UX Surveys part 1
Better UX Surveys part 1
 
Usability requirements
Usability requirements Usability requirements
Usability requirements
 
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
 
Career guideinterestinventory schools_v080114
Career guideinterestinventory schools_v080114Career guideinterestinventory schools_v080114
Career guideinterestinventory schools_v080114
 
Labels On Forms For Uxlx 2010
Labels On Forms   For Uxlx 2010Labels On Forms   For Uxlx 2010
Labels On Forms For Uxlx 2010
 
Contextual Inquiry
Contextual InquiryContextual Inquiry
Contextual Inquiry
 
Treating users as learners - 2015 PSU Web Conference
Treating users as learners - 2015 PSU Web ConferenceTreating users as learners - 2015 PSU Web Conference
Treating users as learners - 2015 PSU Web Conference
 
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
 
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
 
UI For Alien Cowboys
UI For Alien CowboysUI For Alien Cowboys
UI For Alien Cowboys
 
Learning design toolkit v0.2
Learning design toolkit v0.2Learning design toolkit v0.2
Learning design toolkit v0.2
 

Plus de Caroline Jarrett

Creating truly accessible forms, SDinGov 2024
Creating truly accessible forms, SDinGov 2024Creating truly accessible forms, SDinGov 2024
Creating truly accessible forms, SDinGov 2024Caroline Jarrett
 
Using surveys to uncover audience insights
Using surveys to uncover audience insightsUsing surveys to uncover audience insights
Using surveys to uncover audience insightsCaroline Jarrett
 
2023 Surveys that work Olin.pptx
2023 Surveys that work Olin.pptx2023 Surveys that work Olin.pptx
2023 Surveys that work Olin.pptxCaroline Jarrett
 
The Phylogenetic Tree in forms design - making forms work for complex academ...
The Phylogenetic Tree in forms design - making forms work for complex  academ...The Phylogenetic Tree in forms design - making forms work for complex  academ...
The Phylogenetic Tree in forms design - making forms work for complex academ...Caroline Jarrett
 
Four ways to make a better survey WebExpo2023
Four ways to make a better survey WebExpo2023Four ways to make a better survey WebExpo2023
Four ways to make a better survey WebExpo2023Caroline Jarrett
 
Content design in practice May 2023.pptx
Content design in practice May 2023.pptxContent design in practice May 2023.pptx
Content design in practice May 2023.pptxCaroline Jarrett
 
Two ways to improve your survey, webinar for Delib 2023.pptx
Two ways to improve your survey, webinar for Delib 2023.pptxTwo ways to improve your survey, webinar for Delib 2023.pptx
Two ways to improve your survey, webinar for Delib 2023.pptxCaroline Jarrett
 
How to save money by fixing forms, WebExpo2023
How to save money by fixing forms, WebExpo2023How to save money by fixing forms, WebExpo2023
How to save money by fixing forms, WebExpo2023Caroline Jarrett
 
Two ways to improve your surveys: the Most Crucial Question and the Burning I...
Two ways to improve your surveys: the Most Crucial Question and the Burning I...Two ways to improve your surveys: the Most Crucial Question and the Burning I...
Two ways to improve your surveys: the Most Crucial Question and the Burning I...Caroline Jarrett
 
How to look at a form Boye 22.pptx
How to look at a form Boye 22.pptxHow to look at a form Boye 22.pptx
How to look at a form Boye 22.pptxCaroline Jarrett
 
Prune tune postpone explain.pptx
Prune tune postpone explain.pptxPrune tune postpone explain.pptx
Prune tune postpone explain.pptxCaroline Jarrett
 
What is a service designer SDinGOV 22 with all stickies.pptx
What is a service designer SDinGOV 22 with all stickies.pptxWhat is a service designer SDinGOV 22 with all stickies.pptx
What is a service designer SDinGOV 22 with all stickies.pptxCaroline Jarrett
 
Helping teenage boys to become responsible adults.pptx
Helping teenage boys to become responsible adults.pptxHelping teenage boys to become responsible adults.pptx
Helping teenage boys to become responsible adults.pptxCaroline Jarrett
 
Some thoughts on surveys: Boye and Company member conference call
Some thoughts on surveys: Boye and Company member conference callSome thoughts on surveys: Boye and Company member conference call
Some thoughts on surveys: Boye and Company member conference callCaroline Jarrett
 
Better surveys - presentation to Loyal Health March 2022.pptx
Better surveys - presentation to Loyal Health March 2022.pptxBetter surveys - presentation to Loyal Health March 2022.pptx
Better surveys - presentation to Loyal Health March 2022.pptxCaroline Jarrett
 
Plain language to improve your survey houston 2022
Plain language to improve your survey houston 2022Plain language to improve your survey houston 2022
Plain language to improve your survey houston 2022Caroline Jarrett
 
Surveys that work:training course for Rosenfeld Media, day 1
Surveys that work:training course for Rosenfeld Media, day 1Surveys that work:training course for Rosenfeld Media, day 1
Surveys that work:training course for Rosenfeld Media, day 1Caroline Jarrett
 
Surveys that work: training course for Rosenfeld media, day 2
Surveys that work: training course for Rosenfeld media, day 2Surveys that work: training course for Rosenfeld media, day 2
Surveys that work: training course for Rosenfeld media, day 2Caroline Jarrett
 
Surveys that work: training course for Rosenfeld Media, day 3
Surveys that work: training course for Rosenfeld Media, day 3 Surveys that work: training course for Rosenfeld Media, day 3
Surveys that work: training course for Rosenfeld Media, day 3 Caroline Jarrett
 
Surveys that work: an introduction to the Survey Octopus and Total Survey Error
Surveys that work: an introduction to the Survey Octopus and Total Survey ErrorSurveys that work: an introduction to the Survey Octopus and Total Survey Error
Surveys that work: an introduction to the Survey Octopus and Total Survey ErrorCaroline Jarrett
 

Plus de Caroline Jarrett (20)

Creating truly accessible forms, SDinGov 2024
Creating truly accessible forms, SDinGov 2024Creating truly accessible forms, SDinGov 2024
Creating truly accessible forms, SDinGov 2024
 
Using surveys to uncover audience insights
Using surveys to uncover audience insightsUsing surveys to uncover audience insights
Using surveys to uncover audience insights
 
2023 Surveys that work Olin.pptx
2023 Surveys that work Olin.pptx2023 Surveys that work Olin.pptx
2023 Surveys that work Olin.pptx
 
The Phylogenetic Tree in forms design - making forms work for complex academ...
The Phylogenetic Tree in forms design - making forms work for complex  academ...The Phylogenetic Tree in forms design - making forms work for complex  academ...
The Phylogenetic Tree in forms design - making forms work for complex academ...
 
Four ways to make a better survey WebExpo2023
Four ways to make a better survey WebExpo2023Four ways to make a better survey WebExpo2023
Four ways to make a better survey WebExpo2023
 
Content design in practice May 2023.pptx
Content design in practice May 2023.pptxContent design in practice May 2023.pptx
Content design in practice May 2023.pptx
 
Two ways to improve your survey, webinar for Delib 2023.pptx
Two ways to improve your survey, webinar for Delib 2023.pptxTwo ways to improve your survey, webinar for Delib 2023.pptx
Two ways to improve your survey, webinar for Delib 2023.pptx
 
How to save money by fixing forms, WebExpo2023
How to save money by fixing forms, WebExpo2023How to save money by fixing forms, WebExpo2023
How to save money by fixing forms, WebExpo2023
 
Two ways to improve your surveys: the Most Crucial Question and the Burning I...
Two ways to improve your surveys: the Most Crucial Question and the Burning I...Two ways to improve your surveys: the Most Crucial Question and the Burning I...
Two ways to improve your surveys: the Most Crucial Question and the Burning I...
 
How to look at a form Boye 22.pptx
How to look at a form Boye 22.pptxHow to look at a form Boye 22.pptx
How to look at a form Boye 22.pptx
 
Prune tune postpone explain.pptx
Prune tune postpone explain.pptxPrune tune postpone explain.pptx
Prune tune postpone explain.pptx
 
What is a service designer SDinGOV 22 with all stickies.pptx
What is a service designer SDinGOV 22 with all stickies.pptxWhat is a service designer SDinGOV 22 with all stickies.pptx
What is a service designer SDinGOV 22 with all stickies.pptx
 
Helping teenage boys to become responsible adults.pptx
Helping teenage boys to become responsible adults.pptxHelping teenage boys to become responsible adults.pptx
Helping teenage boys to become responsible adults.pptx
 
Some thoughts on surveys: Boye and Company member conference call
Some thoughts on surveys: Boye and Company member conference callSome thoughts on surveys: Boye and Company member conference call
Some thoughts on surveys: Boye and Company member conference call
 
Better surveys - presentation to Loyal Health March 2022.pptx
Better surveys - presentation to Loyal Health March 2022.pptxBetter surveys - presentation to Loyal Health March 2022.pptx
Better surveys - presentation to Loyal Health March 2022.pptx
 
Plain language to improve your survey houston 2022
Plain language to improve your survey houston 2022Plain language to improve your survey houston 2022
Plain language to improve your survey houston 2022
 
Surveys that work:training course for Rosenfeld Media, day 1
Surveys that work:training course for Rosenfeld Media, day 1Surveys that work:training course for Rosenfeld Media, day 1
Surveys that work:training course for Rosenfeld Media, day 1
 
Surveys that work: training course for Rosenfeld media, day 2
Surveys that work: training course for Rosenfeld media, day 2Surveys that work: training course for Rosenfeld media, day 2
Surveys that work: training course for Rosenfeld media, day 2
 
Surveys that work: training course for Rosenfeld Media, day 3
Surveys that work: training course for Rosenfeld Media, day 3 Surveys that work: training course for Rosenfeld Media, day 3
Surveys that work: training course for Rosenfeld Media, day 3
 
Surveys that work: an introduction to the Survey Octopus and Total Survey Error
Surveys that work: an introduction to the Survey Octopus and Total Survey ErrorSurveys that work: an introduction to the Survey Octopus and Total Survey Error
Surveys that work: an introduction to the Survey Octopus and Total Survey Error
 

Dernier

2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degreeyuu sss
 
Design principles on typography in design
Design principles on typography in designDesign principles on typography in design
Design principles on typography in designnooreen17
 
办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一
办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一
办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一F La
 
Passbook project document_april_21__.pdf
Passbook project document_april_21__.pdfPassbook project document_april_21__.pdf
Passbook project document_april_21__.pdfvaibhavkanaujia
 
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree 毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree ttt fff
 
办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一
办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一
办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一Fi L
 
FiveHypotheses_UIDMasterclass_18April2024.pdf
FiveHypotheses_UIDMasterclass_18April2024.pdfFiveHypotheses_UIDMasterclass_18April2024.pdf
FiveHypotheses_UIDMasterclass_18April2024.pdfShivakumar Viswanathan
 
Untitled presedddddddddddddddddntation (1).pptx
Untitled presedddddddddddddddddntation (1).pptxUntitled presedddddddddddddddddntation (1).pptx
Untitled presedddddddddddddddddntation (1).pptxmapanig881
 
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degreeyuu sss
 
CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10
CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10
CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10uasjlagroup
 
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
 
'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
 
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
 
PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024
PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024
PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024CristobalHeraud
 
定制(CQU文凭证书)中央昆士兰大学毕业证成绩单原版一比一
定制(CQU文凭证书)中央昆士兰大学毕业证成绩单原版一比一定制(CQU文凭证书)中央昆士兰大学毕业证成绩单原版一比一
定制(CQU文凭证书)中央昆士兰大学毕业证成绩单原版一比一Fi ss
 
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
 
Pharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdfPharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdfAayushChavan5
 
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
 
ARt app | UX Case Study
ARt app | UX Case StudyARt app | UX Case Study
ARt app | UX Case StudySophia Viganò
 
办理(麻省罗威尔毕业证书)美国麻省大学罗威尔校区毕业证成绩单原版一比一
办理(麻省罗威尔毕业证书)美国麻省大学罗威尔校区毕业证成绩单原版一比一办理(麻省罗威尔毕业证书)美国麻省大学罗威尔校区毕业证成绩单原版一比一
办理(麻省罗威尔毕业证书)美国麻省大学罗威尔校区毕业证成绩单原版一比一diploma 1
 

Dernier (20)

2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
 
Design principles on typography in design
Design principles on typography in designDesign principles on typography in design
Design principles on typography in design
 
办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一
办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一
办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一
 
Passbook project document_april_21__.pdf
Passbook project document_april_21__.pdfPassbook project document_april_21__.pdf
Passbook project document_april_21__.pdf
 
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree 毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
 
办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一
办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一
办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一
 
FiveHypotheses_UIDMasterclass_18April2024.pdf
FiveHypotheses_UIDMasterclass_18April2024.pdfFiveHypotheses_UIDMasterclass_18April2024.pdf
FiveHypotheses_UIDMasterclass_18April2024.pdf
 
Untitled presedddddddddddddddddntation (1).pptx
Untitled presedddddddddddddddddntation (1).pptxUntitled presedddddddddddddddddntation (1).pptx
Untitled presedddddddddddddddddntation (1).pptx
 
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
 
CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10
CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10
CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10
 
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
 
'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 ,
 
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
 
PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024
PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024
PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024
 
定制(CQU文凭证书)中央昆士兰大学毕业证成绩单原版一比一
定制(CQU文凭证书)中央昆士兰大学毕业证成绩单原版一比一定制(CQU文凭证书)中央昆士兰大学毕业证成绩单原版一比一
定制(CQU文凭证书)中央昆士兰大学毕业证成绩单原版一比一
 
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
 
Pharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdfPharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdf
 
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
 
ARt app | UX Case Study
ARt app | UX Case StudyARt app | UX Case Study
ARt app | UX Case Study
 
办理(麻省罗威尔毕业证书)美国麻省大学罗威尔校区毕业证成绩单原版一比一
办理(麻省罗威尔毕业证书)美国麻省大学罗威尔校区毕业证成绩单原版一比一办理(麻省罗威尔毕业证书)美国麻省大学罗威尔校区毕业证成绩单原版一比一
办理(麻省罗威尔毕业证书)美国麻省大学罗威尔校区毕业证成绩单原版一比一
 

Designing forms for technical specialists by @cjforms

  • 1. Forms and their users Designing forms for technical specialists Caroline Jarrett 1
  • 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. Agenda Label placement on forms What really matters in forms design Are all the users equally specialist? 3
  • 4. Reading forms is different from using them 4
  • 5. 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 6
  • 7. Back to labels. The ‘narrow focus’ means big jumps for the users’ eyes. 7
  • 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 8
  • 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 9
  • 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 10
  • 11. A design tip: make sure that the label is unambiguously associated with the field Before 11
  • 12. A design tip: make sure that the label is unambiguously associated with the field After? 12
  • 13. 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? 14
  • 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 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) 16
  • 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? 17
  • 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? 18
  • 19. 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? 20
  • 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