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.

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