A day-long workshop on forms design, focusing on why businesses need forms and how people interact with them. Accessibility note: I've tried to make this version of the presentation accessible. If you find that it's not working for you, please let me know and I'll try my best to solve the problems. This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.

1. Forms
that work
Understanding forms to
improve their design
Caroline Jarrett @cjforms 2013

2. Introductions
• Who we are
• What we do
• Why we’re interested in forms
2

3. What makes a good form?
• Compare these forms
• Which is the best? Why?
• Which is the worst? Why?
3

4. 4
A mixed selection of post with a
brown ‘On Her Majesty’s Service
envelope peeking out. That means
‘tax form’.

5. 5
Allows
someone to
achieve a
goal
Asks
questions
and expects
answers
Looks like a
form and
works like a
form
It’s a form
if it …

6. Asks
questions
and expects
answers
The questions
you ask
6
Allows
someone to
achieve a
goal
Users’
goals
(and business ones)
The answers
you need
Looks like a
form and
works like a
form
How you
lay out
the form

7. Appearance
A great form
works well
across all
layers
Conversation
Easy to
understand
and to answer
Easy to read
and to work with
Goals
achieved
Relationship
7 Schema from “Forms that work: Designing web forms for usability”, Jarrett and Gaffney (2008) www.formsthatwork.com

8. Today’s
agenda
Testing
Conversation
Appearance
Relationship
8

9. 9
Allows
someone to
achieve a
goal
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 organization?
• What is the user expecting?
– What does the user expect to tell you?
– What do other organisations
ask the user in similar circumstances?

10. Let’s think about people
• Write a story about someone who will fill in your form
– Pick a name for the person.
– Why is the person filling in the form?
– How does the person feel about it?
– What is ‘success’ for the person?
– How long does the person expect to take?
10

11. 11
Response relies on
effort, reward, and trust
Trust
Perceived
reward
Perceived
effort
Diagram from Jarrett, C, and Gaffney, G (2008) “Forms that work: Designing web forms for usability”
inspired by Dillman, D.A. (2000) “Internet, Mail and Mixed Mode Surveys: The Tailored Design Method”

12. 12
Why do users answer questions?
• If the question is relevant to purpose
• If the effort of answering is acceptable
• Willingness to put in effort depends on relationship =
trust + context

13. Relationship changes constantly
• As we step through the example form:
– Add a point for each time the mood goes UP
– Take off a point for each time the mood goes DOWN
• If you think the UP is a real winner, make it two or even
more points
• If you think the DOWN is a real loser, make it two or
even more points
• We’ll compare scores at the end
13

14. 14
The other half of the relationship is
the organisation’s goals
Business
goals also
matter
Overall business purpose
Information needs of data users
Information requirement

15. 15
Use a question protocol to find out
which answers you need
• http://www.uxmatters.com/mt/archives/2010/06/
the-question-protocol-how-to-make-sure-every-form-field-
is-necessary.php
• http://bit.ly/94T9N6

16. Now try it
• Is any of the information already held in the
organisation?
• Who uses the information that this form collects?
• Have you watched those people do their work with this
form?
16

17. 17
• Look for: minimum time, maximum time, mode, errors,
loops, customer contacts, staff involvement.
But most of all: for errors.
Image credit: Shutterstock
Track a sample of forms
through your process

18. 18
There are three ways to get the
information that we need

19. Today’s
agenda
Testing
Conversation
Appearance
19
Relationship

20. People don’t want to read
http://mva.state.md.us
20 Thanks to Ginny Redish for this example

21. 21
They want a ‘quick start’
“Officials need to take a behaviourally
realistic view of how citizens fill in forms
and to cut back the length of guidance
leaflets as well as forms themselves.
Forms and guidance should be designed
to facilitate a 'quick start‘ approach by
people.”
National Audit Office 2002

22. 22
Let’s start with a web form example

23. 23
Hit by a wall of words – skip it

24. 24
Look for the first box to type into

25. 25
What question goes in the box?

26. 26
Do I want to give that information?

27. 27
Here is the circular reading pattern

28. 28
It’s typical to read forms in
a circular pattern

29. 29
And to ignore or skip the instructions
Romano, J. C. and J. M. Chen (2011). "A Usability and Eye-Tracking Evaluation of Four Versions of the
Online National Survey of College Graduates (NSCG): Iteration 2." Survey Methodology: 01.

30. Paper forms
are similar
Reading a bit of
the instructions
Then less
and less
Circular reading pattern
30 Image credit: Romano Bergstrom, Erdman & Lakhe,
mentioned in Jarrett and Bergstrom (in review) “Eye tracking the user experience” Morgan Kaufmann

31. 31
Fight hard for very short instructions
1. Translate all the text into plain language
– Choose words and phrases that your users understand
– Write to the user
– Use layout to organize your text
• White space
• Headings
• Bullet points
• Lists
2. Move the text to where it is needed
3. Turn instructions into questions
4. Slash everything else

32. 32
Example: fighting the instructions
• Work out what the user is expected to read before they
start filling in the form
• Revise it in four steps:
1. Plain language
2. Move text to where it is needed
3. Turn instructions into questions
4. Slash everything else

33. 33
Image credit: Shutterstock
To get good answers,
ask good questions

34. The four steps of answering a question
Read the question
Find the answer
Judge the answer
Provide the answer
34 Jarrett and Gaffney (2008), adapted from Tourangeau, Rips and Rasinksi (2000)

35. 35
Finding answers can be complex
Effort put
into bridging
this gap
depends on
relationship
Organization’s
information
requirement
User’s
information
world
Slot-in
answers
Gathered
answers
Third-party
answers
Judging
and placing
come later
Created
answers

36. 36
Slot-in answers
• User has a pre-packaged answer
– Personal details (name, address etc)
– Method of payment
– Details of employment / education
• Answer is available and salient
• Looking for the right slots for the answer
• Willingness to reveal the answer depends on relationship

37. 37
Gathered answer
• User has to get the information from somewhere else
• Examples
– Serial number of your computer
– Reference number of this order
• Willingness to spend time
depends on relationship

38. 38
Third-party answers
• User has to ask someone else
– The boss
– Someone at the next desk
– Someone in the family
– A medical practitioner
– An insurer
• Examples
– Currently prescribed medications for family member
– Spouse’s credit card number
• Willingness to spend time and thoroughness of the
research depend on relationship

39. 39
Created answer
• User has to construct an answer
– reviewing knowledge
– predicting it
– finding an opinion
• Examples
– If this cereal was a person, what would it be like?
– Are you likely to buy this new cereal?
– How many packets of cereal do you buy in a month?
• You may think the user will gather the answer, but they
guess (create)

40. Now try it – our example
• Look at the questions on the form
• Can you find examples of questions for each of these
strategies?
– Slot-in answers
– Gathered answers
– Third-party answers
– Created answers
40

41. 41
The type of answer can influence
the way you write the questions
Slot-in  Brief prompts
 Introduction to explain
why the question is relevant
Create  May need help to constrain or
structure the answer
Gather  May need explanations, links
to help, pictures
 Fully-formed question
Third-party  Should the form go to
someone else?
 Fully-formed question

42. Now try it – our example
• Review the questions on this form
• Any of them need some re-writing?
• If so – let’s try it
42

43. The four steps of answering a question
Read the question
Find the answer
Judge the answer
Provide the answer
43 Jarrett and Gaffney (2008), adapted from Tourangeau, Rips and Rasinksi (2000)

44. 44
We select an answer
in the context of the relationship
• Think about answering the question
“What is your name?”
• Now think about asking it when asked:
– By a young child
– At an informal social occasion
– In a formal meeting
– At a doctor’s reception desk
– When buying something by telephone

45. Now try it – another example
• Look at the questions on this form
• Where do the answers come from?
• How might they change based on judgement?
45

46. The four steps of answering a question
Read the question
Find the answer
Judge the answer
Provide the answer
46 Jarrett and Gaffney (2008), adapted from Tourangeau, Rips and Rasinksi (2000)

47. Is a dolphin more like a rhino
or a shark?
47

48. 48
Now try it – our example
• Look at the categories on offer on this form.
• Can we thinking of any extra real-world things that might
not fall into these categories?

49. Today’s
agenda
Testing
Appearance
49
Relationship
Conversation

50. 50
The basics: contrast, style & size
Contrast Contrast Contrast Contrast
Style Style
Size Size

51. Which layout appeals more? A
51

52. Which layout appeals more? B
52

53. Which layout appeals more? C
53

54. Which page appeals more? A
54

55. Which page appeals more? B
55

56. Which page appeals more? C
56

57. 57
All those screenshots were from
the same form: Applying for a US passport

58. Create a simple set of rules and
apply them everywhere
Image credit: Fraser Smith glenelg.net

59. Today’s
agenda
Relationship
Testing
Appearance
59
Conversation

60. Exercise – putting it together
• Let’s try working through the three layers:
• Who will fill this in?
What answers do we need?
• What questions should we ask to get those
answers?
• What is the correct order for the questions?
• Aim: create a first draft prototype for testing
60

61. Today’s
agenda
Relationship
Testing
Appearance
61
Conversation

62. 62
Watching a user working on your form
is the single best way to understand it
• Best: ask a real user to try filling out your form
– Next best: ask an approximate user to try filling out your form
• Next best: Just ask anyone to complete it
• For more detailed instructions, visit:
http://infodesign.com.au/usabilityresources/usabilitytesting/

63. 63
Ask some questions about
the questions
• Understanding the answer
– Could you tell me what that question is asking you?
• Finding the answer
– How would you work out the answer to that question?
– Where would you look for the answer to that question?
• Judging the answer
– Did you expect to be asked that question?
– Does it explain why it asked that question?
– Did it leave out a question you expected?
– Is it OK for <organisation> to ask that question?

64. Let’s try some testing
• If you’re a ‘Participant’
– Move one group along and wait for your instructions
• If you’re a ‘Facilitator’
– Greet the participant
– Invite the participant to fill in your prototype form
– If the participant has any questions, answer as best you can
• If you’re an ‘Observer’
– Take notes on what you see and hear
– You’ll be reporting back to your team
64

65. Appearance
A great form
works well
across all
layers
Conversation
Easy to
understand
and to answer
Easy to read
and to work with
Goals
achieved
Relationship
65 Schema from “Forms that work: Designing web forms for usability”, Jarrett and Gaffney (2008) www.formsthatwork.com

66. Some resources for forms design
Forms that work: http://www.formsthatwork.com
66
Presentations: http://www.slideshare.net/cjforms

67. 67
Caroline Jarrett
twitter @cjforms
caroline.jarrett@effortmark.co.uk