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 ...
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...
Are all these questions equivalent?
Where do the answers come from?
• Your address
• Your city
• Company you work for
• Nu...
Easy questions and hard
questions prompt different
patterns of reading
• Users glance at
populated answers
• Users look mo...
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 th...
The definition of usability:
who is using the product for what purpose
The extent to which a product can be used
by specif...
Understand your users’ goals
• What does the user get out of it?
– What does the user achieve by filling in this form?
• H...
Think about effectiveness, efficiency, context
• Effectiveness
– What is the user’s definition of ‘success’ with this form...
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:
Designi...
Upcoming SlideShare
Loading in …5
×

Designing forms for technical specialists by @cjforms

1,599 views

Published on

Technical specialists and scientists want forms that are easy to use, just like everyone else - even for their technical work. These slides come from a talk I did at EMBL-EBI in 2010.

This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.

Published in: Design, Business, Technology

Designing forms for technical specialists by @cjforms

  1. 1. Forms and their users Designing forms for technical specialists Caroline Jarrett 1
  2. 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? 3
  4. 4. Reading forms is different from using them 4
  5. 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 6
  7. 7. Back to labels. The ‘narrow focus’ means big jumps for the users’ eyes. 7
  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 8
  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 9
  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 10
  11. 11. A design tip: make sure that the label is unambiguously associated with the field Before 11
  12. 12. A design tip: make sure that the label is unambiguously associated with the field After? 12
  13. 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? 14
  15. 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. 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. 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. 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. 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? 20
  21. 21. This form has new users as well as experienced users 21
  22. 22. A glimpse into the FAQ 22
  23. 23. 23
  24. 24. A suggested approach to the preamble: before 24
  25. 25. A suggested approach to the preamble: after 25
  26. 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

×