Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Forms that work, a workshop organised by UX Australia 2015

2,295 views

Published on

What is a form? And tips to improve the content and flow of complex forms. Slides by Caroline Jarrett @cjforms. Presented in Melbourne and Sydney, October 2015.

Published in: Design

Forms that work, a workshop organised by UX Australia 2015

  1. 1. Caroline Jarrett @cjforms Jessica Enders @formulate #formsthatwork Gerry Gaffney @gerrygaffney Designing Forms that Work
  2. 2. Thanks, Donna Spencer 2 Coming up: UX Australia Redux Sydney 4th November 2015 Melbourne 12th November 2015
  3. 3. Agenda With Caroline: Introduction: what is a form? Content and writing questions With Jessica: Visual design for forms With Gerry: Form design processes With all of us: Form design clinics 3
  4. 4. 4 I’m a forms specialist I do things like collecting cartoons about forms @cjforms
  5. 5. 5
  6. 6. 6 and having a favourite joke form @cjforms
  7. 7. 7 http://eastpointpolice.org/SelfArrestForm.htm
  8. 8. 8 which gets even better as you scroll @cjforms
  9. 9. 9 http://eastpointpolice.org/SelfArrestForm.htm
  10. 10. I’ve been thinking about official forms for ages 10 Image credit: Caroline Jarrett
  11. 11. Which page is the first one in the form? 11
  12. 12. 12 “service” “transaction” 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 … @cjforms
  13. 13. 13 Content Strategy and Plain Language Asks questions and expects answers Interaction Design Looks like a form and works like a form Service Design and Process Design Allows someone to achieve a goal @cjforms
  14. 14. 14 Users’ goals (and business ones) Allows someone to achieve a goal Asks questions and expects answers The answers you need The questions you ask Looks like a form and works like a form Where you put the pixels @cjforms
  15. 15. 15 Schema from “Forms that work: Designing web forms for usability”, Jarrett and Gaffney (2008) www.formsthatwork.com Relationship Conversation Goals achieved Goals achieved Easy to understand and answer Goals achievedLovely and legible. Simple interaction Appearance A great form works well across all three layers
  16. 16. 16 Schema from http://www.formulate.com.au/blog/the-4-layers-of-a-form Process Q&A Goals achieved Goals achieved Easy to understand and answer Goals achievedLovely and legible. Simple interaction Layout Flow A great online form works across all four layers
  17. 17. Agenda Introduction: what is a form? Content and writing questions Visual design for forms Form design processes Form design clinics 17
  18. 18. 18
  19. 19. 19
  20. 20. Tip Provide just-in-time help What’s this? Where can I find this? Why do you need this? How will you use this? 20
  21. 21. 21
  22. 22. Tip Allow for many, both, and other Image © nopitycity.com Used with permission from Ricky Buchanan22
  23. 23. 23
  24. 24. Where is ‘Confirm Family Name? 24
  25. 25. Tip If users have to copy from a document to your form, then use the same layout 25 Image credit: https://commons.wikimedia.org/wiki/File:Croatian_driving_licence.jpg
  26. 26. 26
  27. 27. Tip Apply changes consistently Image credit: http://www.glenelg.net used with permission from Fraser Smith27
  28. 28. 28 Attempt 2: selected screens @cjforms
  29. 29. 29
  30. 30. Tip Make use of information that you already have Step A Step B Step C Step D 30
  31. 31. 31
  32. 32. 32
  33. 33. Tip Use the users’ language Image credit: "French identification certificate for Marcelle Montagne, an alias of OSS agent Virginia Hall" by Photo by Rudi Williams - http://www.defense.gov/DODCMSShare/NewsStoryPhoto/2002- 05/hrs_200205021h.jpg at http://www.defense.gov/news/newsarticle.aspx?id=44107. Licensed under Public Domain via Commons - https://commons.wikimedia.org/wiki/File:French_identification_certificate_for_Marcelle_Montagne,_an _alias_of_OSS_agent_Virginia_Hall.jpg#/media/File:French_identification_certificate_for_Marcelle_M ontagne,_an_alias_of_OSS_agent_Virginia_Hall.jpg 33
  34. 34. 34
  35. 35. Suggested rewording We have awarded you a Business Visitor Visa. Your Visa starts on 10 September 2015 and is valid for a year. You may visit Australia for business meetings, but you are not allowed to work. If you need to contact us, please email us on: visacontact@dipb.gov.au We have offices in most countries, listed here: http://www.border.gov.au/about/contact/offices- locations 35
  36. 36. Tip Make it easy for users to do the right thing 36
  37. 37. 37 And now, from Australia to UK @cjforms
  38. 38. 38
  39. 39. 39
  40. 40. 40
  41. 41. “Readers” try to read everything first “Rushers” only read when they need to • Pensioners • Lower-paid self-employed • Tax office staff • Accountants • Higher-paid employed 41
  42. 42. Rushers do better 42
  43. 43. Designing for ‘quick start’ isn’t a new idea “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 43
  44. 44. How (and why) to print all the things https://designnotes.blog.gov.uk/2015/10/15/how-and-why-to-print-all-the-things/ 44
  45. 45. 45
  46. 46. 46
  47. 47. 47
  48. 48. We’re working on autocomplete / autosuggest https://designpatterns.hackpad.com/Autocomplete-autosuggest-type-ahead-l3OHvWUmDml 48
  49. 49. 49
  50. 50. 50
  51. 51. Tip Design for satisficing and optimising Satisfice: Choose first plausible option Optimise: Consider all options, choose the best 51
  52. 52. 52
  53. 53. 53
  54. 54. Tip 54
  55. 55. The Home Office focused on visas from China https://gds.blog.gov.uk/2015/02/16/china-tourist-visas-user-research/ 55
  56. 56. https://www.gov.uk/design-principles #gdsteam
  57. 57. #gdsteam@timpaul @cjforms
  58. 58. #gdsteam@timpaul @cjforms Google ‘service manual form structure’
  59. 59. #gdsteam@timpaul @cjforms
  60. 60. #gdsteam@timpaul @cjforms
  61. 61. #gdsteam@timpaul @cjforms
  62. 62. Please join the discussions https://designpatterns.hackpad.com 62
  63. 63. Agenda Coming up after the break (slides only available if you were there) With Jessica: Visual design for forms With Gerry: Form design processes With all of us: Form design clinics 63
  64. 64. 64 Jessica Enders @formulate
  65. 65. 65 Gerry Gaffney @gerrygaffney Information & Design Designing for humans
  66. 66. 66 More slides http://www.slideshare.net/cjforms
  67. 67. 67 twitter @cjforms caroline.jarrett@effortmark.co.uk www.effortmark.co.uk Caroline Jarrett

×