Forms that work: Understanding forms to improve their design by @cjforms
-
Upload
caroline-jarrett -
Category
Technology
-
view
105 -
download
1
description
Transcript of Forms that work: Understanding forms to improve their design by @cjforms
FormsUnderstanding forms to improve their designCaroline Jarrett @cjforms 2013
that work
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 agoal
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
Allows someone to
achieve agoal
Users’ goals
(and business ones)
The answers you need
The questionsyou ask
Looks like a form and
works like a form
How youlay outthe form
7 Schema from “Forms that work: Designing web forms for usability”, Jarrett and Gaffney (2008) www.formsthatwork.com
Easy to understand and to answer Goals
achieved
Easy to read and to work with
Relationship
Conversation
Appearance
A great formworks well across all layers
Today’sagenda
TestingAppearance
Conversation
Relationship
8
9
Allows someone to
achieve agoal
• 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?
Understand your users’ goals
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
11Diagram 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”
Trust
Perceivedreward
Perceivedeffort
Response relies on effort, reward, and trust
12
• If the question is relevant to purpose
• If the effort of answering is acceptable
• Willingness to put in effort depends on relationship =
trust + context
Why do users answer questions?
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
Businessgoals also
matterInformation requirement
Information needs of data users
Overall business purpose
The other half of the relationship isthe organisation’s goals
15
• 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
Use a question protocol to find outwhich answers you need
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
• 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
There are three ways to get the information that we need
Today’sagenda
TestingAppearance
Conversation
19
Relationship
20 Thanks to Ginny Redish for this example
http://mva.state.md.us
People don’t want to read
21
National Audit Office 2002
“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.”
They want a ‘quick start’
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
29Romano, 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.
And to ignore or skip the instructions
30 Image credit: Romano Bergstrom, Erdman & Lakhe, mentioned in Jarrett and Bergstrom (in review) “Eye tracking the user experience” Morgan Kaufmann
Reading a bit of the instructions
Then less
and less
Circular reading pattern
Paper formsare similar
31
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
Fight hard for very short instructions
32
• 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
Example: fighting the instructions
33Image credit: Shutterstock
To get good answers, ask good questions
34 Jarrett and Gaffney (2008), adapted from Tourangeau, Rips and Rasinksi (2000)
Read the question
Find the answer
Judge the answer
Provide the answer
The four steps of answering a question
35
Effort put into bridging
this gap depends on relationship
Organization’s information requirement
User’s information world
Third-party answers
Gatheredanswers
Slot-in answers
Judging and placing come later
Created answers
Finding answers can be complex
36
• 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
Slot-in answers
37
• 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
Gathered answer
38
• 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
Third-party answers
39
• 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)
Created answer
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
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
The type of answer can influencethe way you write the questions
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 Jarrett and Gaffney (2008), adapted from Tourangeau, Rips and Rasinksi (2000)
Read the question
Find the answer
Judge the answer
Provide the answer
The four steps of answering a question
44
• 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
We select an answer in the context of the relationship
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 Jarrett and Gaffney (2008), adapted from Tourangeau, Rips and Rasinksi (2000)
Read the question
Find the answer
Judge the answer
Provide the answer
The four steps of answering a question
Is a dolphin more like a rhino or a shark?
47
48
• 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?
Now try it – our example
Today’sagenda
TestingAppearance
49
Relationship
Conversation
50Siz
SizeSize
StyleStyle
ContrastContrast ContrastContrast
The basics: contrast, style & 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
Image credit: Fraser Smith glenelg.net
Create a simple set of rules and apply them everywhere
Today’sagenda
TestingAppearance
59
Conversation
Relationship
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
Today’sagenda
TestingAppearance
61
Conversation
Relationship
62
• 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/
Watching a user working on your form is the single best way to understand it
63
• 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?
Ask some questions about the questions
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 Schema from “Forms that work: Designing web forms for usability”, Jarrett and Gaffney (2008) www.formsthatwork.com
Easy to understand and to answer Goals
achieved
Easy to read and to work with
Relationship
Conversation
Appearance
A great formworks well across all layers
66
Presentations: http://www.slideshare.net/cjforms
Forms that work: http://www.formsthatwork.com
Some resources for forms design