Your SlideShare is downloading. ×
0
Forms 
that work 
Understanding forms to 
improve their design 
Caroline Jarrett @cjforms 2013
Introductions 
• Who we are 
• What we do 
• Why we’re interested in forms 
2
What makes a good form? 
• Compare these forms 
• Which is the best? Why? 
• Which is the worst? Why? 
3
4 
A mixed selection of post with a 
brown ‘On Her Majesty’s Service 
envelope peeking out. That means 
‘tax form’.
5 
Allows 
someone to 
achieve a 
goal 
Asks 
questions 
and expects 
answers 
Looks like a 
form and 
works like a 
form ...
Asks 
questions 
and expects 
answers 
The questions 
you ask 
6 
Allows 
someone to 
achieve a 
goal 
Users’ 
goals 
(and...
Appearance 
A great form 
works well 
across all 
layers 
Conversation 
Easy to 
understand 
and to answer 
Easy to read 
...
Today’s 
agenda 
Testing 
Conversation 
Appearance 
Relationship 
8
9 
Allows 
someone to 
achieve a 
goal 
Understand your users’ goals 
• What does the user get out of it? 
– What does the...
Let’s think about people 
• Write a story about someone who will fill in your form 
– Pick a name for the person. 
– Why i...
11 
Response relies on 
effort, reward, and trust 
Trust 
Perceived 
reward 
Perceived 
effort 
Diagram from Jarrett, C, a...
12 
Why do users answer questions? 
• If the question is relevant to purpose 
• If the effort of answering is acceptable 
...
Relationship changes constantly 
• As we step through the example form: 
– Add a point for each time the mood goes UP 
– T...
14 
The other half of the relationship is 
the organisation’s goals 
Business 
goals also 
matter 
Overall business purpos...
15 
Use a question protocol to find out 
which answers you need 
• http://www.uxmatters.com/mt/archives/2010/06/ 
the-ques...
Now try it 
• Is any of the information already held in the 
organisation? 
• Who uses the information that this form coll...
17 
• Look for: minimum time, maximum time, mode, errors, 
loops, customer contacts, staff involvement. 
But most of all: ...
18 
There are three ways to get the 
information that we need
Today’s 
agenda 
Testing 
Conversation 
Appearance 
19 
Relationship
People don’t want to read 
http://mva.state.md.us 
20 Thanks to Ginny Redish for this example
21 
They want a ‘quick start’ 
“Officials need to take a behaviourally 
realistic view of how citizens fill in forms 
and ...
22 
Let’s start with a web form example
23 
Hit by a wall of words – skip it
24 
Look for the first box to type into
25 
What question goes in the box?
26 
Do I want to give that information?
27 
Here is the circular reading pattern
28 
It’s typical to read forms in 
a circular pattern
29 
And to ignore or skip the instructions 
Romano, J. C. and J. M. Chen (2011). "A Usability and Eye-Tracking Evaluation ...
Paper forms 
are similar 
Reading a bit of 
the instructions 
Then less 
and less 
Circular reading pattern 
30 Image cred...
31 
Fight hard for very short instructions 
1. Translate all the text into plain language 
– Choose words and phrases that...
32 
Example: fighting the instructions 
• Work out what the user is expected to read before they 
start filling in the for...
33 
Image credit: Shutterstock 
To get good answers, 
ask good questions
The four steps of answering a question 
Read the question 
Find the answer 
Judge the answer 
Provide the answer 
34 Jarre...
35 
Finding answers can be complex 
Effort put 
into bridging 
this gap 
depends on 
relationship 
Organization’s 
informa...
36 
Slot-in answers 
• User has a pre-packaged answer 
– Personal details (name, address etc) 
– Method of payment 
– Deta...
37 
Gathered answer 
• User has to get the information from somewhere else 
• Examples 
– Serial number of your computer 
...
38 
Third-party answers 
• User has to ask someone else 
– The boss 
– Someone at the next desk 
– Someone in the family 
...
39 
Created answer 
• User has to construct an answer 
– reviewing knowledge 
– predicting it 
– finding an opinion 
• Exa...
Now try it – our example 
• Look at the questions on the form 
• Can you find examples of questions for each of these 
str...
41 
The type of answer can influence 
the way you write the questions 
Slot-in  Brief prompts 
 Introduction to explain ...
Now try it – our example 
• Review the questions on this form 
• Any of them need some re-writing? 
• If so – let’s try it...
The four steps of answering a question 
Read the question 
Find the answer 
Judge the answer 
Provide the answer 
43 Jarre...
44 
We select an answer 
in the context of the relationship 
• Think about answering the question 
“What is your name?” 
•...
Now try it – another example 
• Look at the questions on this form 
• Where do the answers come from? 
• How might they ch...
The four steps of answering a question 
Read the question 
Find the answer 
Judge the answer 
Provide the answer 
46 Jarre...
Is a dolphin more like a rhino 
or a shark? 
47
48 
Now try it – our example 
• Look at the categories on offer on this form. 
• Can we thinking of any extra real-world t...
Today’s 
agenda 
Testing 
Appearance 
49 
Relationship 
Conversation
50 
The basics: contrast, style & size 
Contrast Contrast Contrast Contrast 
Style Style 
Size Size
Which layout appeals more? A 
51
Which layout appeals more? B 
52
Which layout appeals more? C 
53
Which page appeals more? A 
54
Which page appeals more? B 
55
Which page appeals more? C 
56
57 
All those screenshots were from 
the same form: Applying for a US passport
Create a simple set of rules and 
apply them everywhere 
Image credit: Fraser Smith glenelg.net
Today’s 
agenda 
Relationship 
Testing 
Appearance 
59 
Conversation
Exercise – putting it together 
• Let’s try working through the three layers: 
• Who will fill this in? 
What answers do w...
Today’s 
agenda 
Relationship 
Testing 
Appearance 
61 
Conversation
62 
Watching a user working on your form 
is the single best way to understand it 
• Best: ask a real user to try filling ...
63 
Ask some questions about 
the questions 
• Understanding the answer 
– Could you tell me what that question is asking ...
Let’s try some testing 
• If you’re a ‘Participant’ 
– Move one group along and wait for your instructions 
• If you’re a ...
Appearance 
A great form 
works well 
across all 
layers 
Conversation 
Easy to 
understand 
and to answer 
Easy to read 
...
Some resources for forms design 
Forms that work: http://www.formsthatwork.com 
66 
Presentations: http://www.slideshare.n...
67 
Caroline Jarrett 
twitter @cjforms 
caroline.jarrett@effortmark.co.uk
Upcoming SlideShare
Loading in...5
×

Forms that work: Understanding forms to improve their design by @cjforms

2,368

Published on

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.

Published in: Technology, Education
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,368
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
46
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Transcript of "Forms that work: Understanding forms to improve their design by @cjforms"

  1. 1. Forms that work Understanding forms to improve their design Caroline Jarrett @cjforms 2013
  2. 2. Introductions • Who we are • What we do • Why we’re interested in forms 2
  3. 3. What makes a good form? • Compare these forms • Which is the best? Why? • Which is the worst? Why? 3
  4. 4. 4 A mixed selection of post with a brown ‘On Her Majesty’s Service envelope peeking out. That means ‘tax form’.
  5. 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. 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. 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. 8. Today’s agenda Testing Conversation Appearance Relationship 8
  9. 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. 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. 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. 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. 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. 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. 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. 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. 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. 18 There are three ways to get the information that we need
  19. 19. Today’s agenda Testing Conversation Appearance 19 Relationship
  20. 20. People don’t want to read http://mva.state.md.us 20 Thanks to Ginny Redish for this example
  21. 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. 22 Let’s start with a web form example
  23. 23. 23 Hit by a wall of words – skip it
  24. 24. 24 Look for the first box to type into
  25. 25. 25 What question goes in the box?
  26. 26. 26 Do I want to give that information?
  27. 27. 27 Here is the circular reading pattern
  28. 28. 28 It’s typical to read forms in a circular pattern
  29. 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. 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. 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. 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. 33 Image credit: Shutterstock To get good answers, ask good questions
  34. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 47. Is a dolphin more like a rhino or a shark? 47
  48. 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. 49. Today’s agenda Testing Appearance 49 Relationship Conversation
  50. 50. 50 The basics: contrast, style & size Contrast Contrast Contrast Contrast Style Style Size Size
  51. 51. Which layout appeals more? A 51
  52. 52. Which layout appeals more? B 52
  53. 53. Which layout appeals more? C 53
  54. 54. Which page appeals more? A 54
  55. 55. Which page appeals more? B 55
  56. 56. Which page appeals more? C 56
  57. 57. 57 All those screenshots were from the same form: Applying for a US passport
  58. 58. Create a simple set of rules and apply them everywhere Image credit: Fraser Smith glenelg.net
  59. 59. Today’s agenda Relationship Testing Appearance 59 Conversation
  60. 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. 61. Today’s agenda Relationship Testing Appearance 61 Conversation
  62. 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. 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. 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. 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. 66. Some resources for forms design Forms that work: http://www.formsthatwork.com 66 Presentations: http://www.slideshare.net/cjforms
  67. 67. 67 Caroline Jarrett twitter @cjforms caroline.jarrett@effortmark.co.uk
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×