Forms that work: Understanding forms to improve their design by @cjforms
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

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

on

  • 2,070 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
2,070
Views on SlideShare
2,018
Embed Views
52

Actions

Likes
5
Downloads
36
Comments
0

1 Embed 52

https://twitter.com 52

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

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 Presentation Transcript

  • 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