Design tips for complex forms by @cjforms 2013

7,145
-1

Published on

Working with complex forms such as insurance applications, medical claims, government transactions? This workshop at UXPA2013 has tips for improving them.

This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.

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

No Downloads
Views
Total Views
7,145
On Slideshare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
78
Comments
0
Likes
10
Embeds 0
No embeds

No notes for slide

Design tips for complex forms by @cjforms 2013

  1. 1. UXPA 2013 Caroline Jarrett @cjforms
  2. 2. Agenda ‘Complex’ and ‘simple’ in forms Users and usage of complex forms Conversation and flow in complex forms Appearance of complex forms 2
  3. 3. Let’s start with a few forms • Three forms coming up…. • Is the form simple or complex? • Why? 3
  4. 4. 4 Image credit: step3reality.com
  5. 5. 5
  6. 6. 6 Image credit: bt.com
  7. 7. What makes a form complex? • Here are some ideas I had. Do we agree, disagree, add? • A form is complex if: – It looks complicated (many fields, multiple pages) – It uses complex terminology or concepts – The answers require thought, research, or someone else – The task is challenging: • Important consequences • Required rather than optional • Infrequent rather than familiar 7
  8. 8. Most of all: if users expect it to be complex, it is. • This form is complex. Even though we haven’t seen it yet. 8
  9. 9. Agenda ‘Complex’ and ‘simple’ in forms Users and usage of complex forms Conversation and flow in complex forms Appearance of complex forms 9
  10. 10. We know that we need to observe people as they use the forms 10 Image credit: Fraser Smith glenelg.net
  11. 11. How to catch them at it ? • Let’s share ideas about how to solve the problem of investigating and observing forms in use when: – They are completed very infrequently or – The task is split (across people, technology or time) – The design cycle is offset from the completion cycle. 11
  12. 12. Try a ‘replay study’ Users have another go at a complex form: • In their own environment • With their real data • While you watch and take notes. 12
  13. 13. Observing internal users was easier in the days of paper 13 Image credit: http://www.census.gov/history/img/c43f.jpg
  14. 14. 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. 14
  15. 15. Use a question protocol to establish who uses the data 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 15
  16. 16. Agenda ‘Complex’ and ‘simple’ in forms Users and usage of complex forms Conversation and flow in complex forms Appearance of complex forms 16
  17. 17. To get good answers, ask good questions 17
  18. 18. Meet Maria. • In Malta, we thought about Maria doing her taxes. 18 Image credit: Shutterstock.com http://www.slideshare.net/cjforms/ design-tips-for-complex-forms-malta-2012
  19. 19. Now, she’s a new mother. • Maria’s baby Josef was born in May. • She’s Maltese-American and wants to take him to meet his Maltese grandparents. • She needs a passport for him. 19 Image credit: Shutterstock.com
  20. 20. Where does the answer come from? • I’m going to show you some of the questions she has to answer. • Where does Maria get the answer? 20
  21. 21. 21
  22. 22. 22
  23. 23. Some of the help is really helpful 23
  24. 24. Some of the help is really helpful 24
  25. 25. Put just enough help where the user needs it 25 Image credit: Flickr, Betsy Weber
  26. 26. Maria has more challenges ahead… 26
  27. 27. Provide a list of stuff to assemble and deal with 27
  28. 28. Sometimes more than one person has to fill in the form. 28 Image credit: Shutterstock.com
  29. 29. An example: UK ‘living will’ Before review After review http://www.slideshare.net/cjforms/expert-review-improves-a-complex-form-by-cjforms
  30. 30. Before: Introduction mentions 2+ other people
  31. 31. After: Introduction mentions 5+ other people
  32. 32. How many people for Maria’s form? • Hazard a guess: who is involved? • What if Maria is a single mother? 32
  33. 33. Provide a list of actors and their roles 33 Image credit: http://commons.wikimedia.org/wiki/File:Country_Wife_1675_cast_crop.png
  34. 34. This step is a review 34
  35. 35. 35 Oh, I made a mistake.
  36. 36. 36 Oh no – looks like I’ll have to click through every page again.
  37. 37. 37 Phew, it was easier than I expected
  38. 38. Simple forms may progress 38
  39. 39. Complex forms often don’t. 39 Easy but worrying Horrendous Even worse
  40. 40. A summary menu updates as you finish the chunks of the form in any order 40
  41. 41. Use summary menus rather than progress indicators 41 Image credit: shutterstock.com
  42. 42. What about save-and-resume ? • If people need to set aside their form and come back to it, how do you handle that now? • Can they resume on a different device? • How do you identify them? • How long do you keep partial attempts? 42
  43. 43. Work hard to ensure great save- and-resume 43 Image credit: shutterstock.com
  44. 44. Agenda ‘Complex’ and ‘simple’ in forms Users and usage of complex forms Conversation and flow in complex forms Appearance of complex forms 44
  45. 45. Two column form. What is the reading order? 45
  46. 46. Two column form. What is the reading order? 46
  47. 47. Two column form. What is the reading order? 47
  48. 48. Avoid multi-column layouts http://baymard.com/blog/avoid-multi-column-forms 48
  49. 49. Which layout appeals more? A 49
  50. 50. Which layout appeals more? B 50
  51. 51. Which layout appeals more? C 51
  52. 52. Which page appeals more? A 52
  53. 53. Which page appeals more? B 53
  54. 54. Which page appeals more? C 54
  55. 55. All those screenshots were from the passport application 55
  56. 56. Norway mandated Elmer 2 guidelines for government forms in 2006 56 http://www.elmer.no/retningslinjer/pdf/elmer2-english.pdf
  57. 57. Create a simple set of rules and apply them everywhere 57 Image credit: Fraser Smith glenelg.net
  58. 58. Agenda ‘Complex’ and ‘simple’ in forms Users and usage of complex forms Conversation and flow in complex forms Appearance of complex forms Summary 58
  59. 59. We’ve looked at tips about relationship • Try a ‘replay study’ • Track a sample of forms through your process • Use a question protocol to establish who uses the data 59 Goals achievedRelationship Goals achieved
  60. 60. And tips about conversation • Put just enough help where the user needs it • Provide a list of stuff to assemble and deal with • Provide a list of actors and their roles • Provide summary menus rather than progress indicators • Work had to achieve great save-and-resume 60 Conversation Goals achieved Easy to understand and answer
  61. 61. And tips about appearance • Avoid multi-column layouts • Create a simple set of rules and apply them everywhere 61 Appearance Goals achievedLovely and legible
  62. 62. A great form works well across all three layers 62 Appearance Conversation Relationship Goals achieved Schema from “Forms that work: Designing web forms for usability”, Jarrett and Gaffney (2008) www.formsthatwork.com Goals achieved Easy to understand and answer Goals achievedLovely and legible
  63. 63. More tips http://www.slideshare.net/cjforms 63
  64. 64. Caroline Jarrett 64 twitter @cjforms caroline.jarrett@effortmark.co.uk www.formsthatwork.com
  1. A particular slide catching your eye?

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

×