• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Forms that work: Understanding forms to improve their design by @cjforms
 

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

on

  • 1,814 views

A day-long workshop on forms design, focusing on why businesses need forms and how people interact with them. ...

A day-long workshop on forms design, focusing on why businesses need forms and how people interact with them.

Accessibility note: I apologise that this version of my presentation is inaccessible. I'm working on it. Meanwhile, if a PowerPoint version with alt-text on the images would help you then please email me caroline.jarrett@effortmark.co.uk and I'll be very glad to send you that and to work with you to get a better version that meets your needs.

Statistics

Views

Total Views
1,814
Views on SlideShare
1,762
Embed Views
52

Actions

Likes
4
Downloads
26
Comments
0

1 Embed 52

https://twitter.com 52

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • • Who we are • What we do • Why we’re interested in forms 2
    • • Compare these forms • Which is the best? Why? • Which is the worst? Why? 3
    • A mixed selection of post with a brown ‘On Her Majesty’s Service envelope peeking out. That means ‘tax form’. 4
    • It’s a form if it … Looks like a form and works like a form Asks questions and expects answers 5 Allows someone to achieve a goal
    • How you lay out the form The questions you ask Asks questions and expects answers The answers you need 6 Looks like a form and works like a form Allows someone to achieve a goal Users’ goals (and business ones)
    • A great form works well across all layers Appearance Easy to read and to work with Conversation Easy to understand and to answer 7 Relationship Goals achieved Schema from “Forms that work: Designing web forms for usability”, Jarrett and Gaffney (2008) www.formsthatwork.com
    • Relationship Conversation Testing 8 Appearance
    • 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? 9 Allows someone to achieve a goal
    • • Write a story about someone who will fill in your form – – – – – 10 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?
    • Response relies on effort, reward, and trust Perceived effort Perceived reward Trust 11 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”
    • 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 12
    • • 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
    • The other half of the relationship is the organisation’s goals Overall business purpose Information needs of data users Information requirement 14 Business goals also matter
    • 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-formfield-is-necessary.php • http://bit.ly/94T9N6 15
    • • 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
    • Track a sample of forms through your process • Look for: minimum time, maximum time, mode, errors, loops, customer contacts, staff involvement. But most of all: for errors. 17 Image credit: Shutterstock
    • There are three ways to get the information that we need 18
    • Relationship Conversation Testing 19 Appearance
    • People don’t want to read http://mva.state.md.us 20 Thanks to Ginny Redish for this example
    • 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 21
    • Let’s start with a web form example 22
    • Example - page 2, screen 1 23 Wall of words
    • Example - page 2, screen 2 24
    • It’s typical to read forms in a circular pattern 25
    • And to ignore or skip the instructions 26 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.
    • Paper forms are similar Reading a bit of the instructions Then less and less Circular reading pattern 27 Image credit: Romano Bergstrom, Erdman & Lakhe, mentioned in Jarrett and Bergstrom (in review) “Eye tracking the user experience” Morgan Kaufmann
    • 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 28
    • 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. 2. 3. 4. 29 Plain language Move text to where it is needed Turn instructions into questions Slash everything else
    • To get good answers, ask good questions 30 Image credit: Shutterstock
    • The four steps of answering a question Read the question Find the answer Judge the answer Provide the answer 31 Jarrett and Gaffney (2008), adapted from Tourangeau, Rips and Rasinksi (2000)
    • Finding answers can be complex Organization’s information requirement Judging and placing come later 32 Effort put into bridging this gap depends on relationship User’s information world Slot-in answers Gathered answers Third-party answers Created answers
    • 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 33
    • 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 34
    • 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 35
    • 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) 36
    • • Look at the questions on the form • Can you find examples of questions for each of these strategies? – – – – 37 Slot-in answers Gathered answers Third-party answers Created answers
    • 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  Should the form go to someone else?  Fully-formed question Third-party 38
    • • Review the questions on this form • Any of them need some re-writing? • If so – let’s try it 39
    • The four steps of answering a question Read the question Find the answer Judge the answer Provide the answer 40 Jarrett and Gaffney (2008), adapted from Tourangeau, Rips and Rasinksi (2000)
    • 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: – – – – – 41 By a young child At an informal social occasion In a formal meeting At a doctor’s reception desk When buying something by telephone
    • • Look at the questions on this form • Where do the answers come from? • How might they change based on judgement? 42
    • 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
    • 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? 45
    • Relationship Conversation Testing 46 Appearance
    • The basics: contrast, style & size Contrast Contrast Contrast Contrast Style Size 47 Style Size
    • A 48
    • B 49
    • C 50
    • A 51
    • B 52
    • C 53
    • All those screenshots were from the same form: Applying for a US passport 54
    • Create a simple set of rules and apply them everywhere Image credit: Fraser Smith glenelg.net
    • Relationship Conversation Testing 56 Appearance
    • 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 57
    • Relationship Conversation Testing 58 Appearance
    • 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/ 59
    • 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 – – – – 60 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?
    • • 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 61
    • A great form works well across all layers Appearance Easy to read and to work with Conversation Easy to understand and to answer 62 Relationship Goals achieved Schema from “Forms that work: Designing web forms for usability”, Jarrett and Gaffney (2008) www.formsthatwork.com
    • Some resources for forms design Forms that work: http://www.formsthatwork.com Presentations: http://www.slideshare.net/cjforms 63
    • Caroline Jarrett twitter @cjforms caroline.jarrett@effortmark.co.uk 64