Design tips for complex forms by @cjforms 2013

  • 5,463 views
Uploaded on

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

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.

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
5,463
On Slideshare
0
From Embeds
0
Number of Embeds
7

Actions

Shares
Downloads
62
Comments
0
Likes
9

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. UXPA 2013 Caroline Jarrett @cjforms
  • 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. Let’s start with a few forms • Three forms coming up…. • Is the form simple or complex? • Why? 3
  • 4. 4 Image credit: step3reality.com
  • 5. 5
  • 6. 6 Image credit: bt.com
  • 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. 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. Agenda ‘Complex’ and ‘simple’ in forms Users and usage of complex forms Conversation and flow in complex forms Appearance of complex forms 9
  • 10. We know that we need to observe people as they use the forms 10 Image credit: Fraser Smith glenelg.net
  • 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. 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. Observing internal users was easier in the days of paper 13 Image credit: http://www.census.gov/history/img/c43f.jpg
  • 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. 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. Agenda ‘Complex’ and ‘simple’ in forms Users and usage of complex forms Conversation and flow in complex forms Appearance of complex forms 16
  • 17. To get good answers, ask good questions 17
  • 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. 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. 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
  • 22. 22
  • 23. Some of the help is really helpful 23
  • 24. Some of the help is really helpful 24
  • 25. Put just enough help where the user needs it 25 Image credit: Flickr, Betsy Weber
  • 26. Maria has more challenges ahead… 26
  • 27. Provide a list of stuff to assemble and deal with 27
  • 28. Sometimes more than one person has to fill in the form. 28 Image credit: Shutterstock.com
  • 29. An example: UK ‘living will’ Before review After review http://www.slideshare.net/cjforms/expert-review-improves-a-complex-form-by-cjforms
  • 30. Before: Introduction mentions 2+ other people
  • 31. After: Introduction mentions 5+ other people
  • 32. How many people for Maria’s form? • Hazard a guess: who is involved? • What if Maria is a single mother? 32
  • 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. This step is a review 34
  • 35. 35 Oh, I made a mistake.
  • 36. 36 Oh no – looks like I’ll have to click through every page again.
  • 37. 37 Phew, it was easier than I expected
  • 38. Simple forms may progress 38
  • 39. Complex forms often don’t. 39 Easy but worrying Horrendous Even worse
  • 40. A summary menu updates as you finish the chunks of the form in any order 40
  • 41. Use summary menus rather than progress indicators 41 Image credit: shutterstock.com
  • 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. Work hard to ensure great save- and-resume 43 Image credit: shutterstock.com
  • 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. Two column form. What is the reading order? 45
  • 46. Two column form. What is the reading order? 46
  • 47. Two column form. What is the reading order? 47
  • 48. Avoid multi-column layouts http://baymard.com/blog/avoid-multi-column-forms 48
  • 49. Which layout appeals more? A 49
  • 50. Which layout appeals more? B 50
  • 51. Which layout appeals more? C 51
  • 52. Which page appeals more? A 52
  • 53. Which page appeals more? B 53
  • 54. Which page appeals more? C 54
  • 55. All those screenshots were from the passport application 55
  • 56. Norway mandated Elmer 2 guidelines for government forms in 2006 56 http://www.elmer.no/retningslinjer/pdf/elmer2-english.pdf
  • 57. Create a simple set of rules and apply them everywhere 57 Image credit: Fraser Smith glenelg.net
  • 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. 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. 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. 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. 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. More tips http://www.slideshare.net/cjforms 63
  • 64. Caroline Jarrett 64 twitter @cjforms caroline.jarrett@effortmark.co.uk www.formsthatwork.com