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.
UXPA 2013 Caroline Jarrett @cjforms
Agenda
‘Complex’ and ‘simple’ in forms
Users and usage of complex
forms
Conversation and flow in
complex forms
Appearance ...
Let’s start with a few forms
• Three forms coming up….
• Is the form simple or complex?
• Why?
3
4 Image credit: step3reality.com
5
6 Image credit: bt.com
What makes a form complex?
• Here are some ideas I had. Do we agree, disagree, add?
• A form is complex if:
– It looks com...
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
Agenda
‘Complex’ and ‘simple’ in forms
Users and usage of complex
forms
Conversation and flow in
complex forms
Appearance ...
We know that we need to observe people
as they use the forms
10 Image credit: Fraser Smith glenelg.net
How to catch them at it ?
• Let’s share ideas about how to solve the problem of investigating and
observing forms in use w...
Try a ‘replay study’
Users have another go at a complex form:
• In their own environment
• With their real data
• While yo...
Observing internal users was easier
in the days of paper
13 Image credit: http://www.census.gov/history/img/c43f.jpg
Track a sample of forms through
your process
Look for: minimum time, maximum time, mode, errors, loops,
customer contacts,...
Use a question protocol to
establish who uses the data
http://www.uxmatters.com/mt/archives/2010/06/
the-question-protocol...
Agenda
‘Complex’ and ‘simple’ in forms
Users and usage of complex
forms
Conversation and flow in
complex forms
Appearance ...
To get good answers,
ask good questions
17
Meet Maria.
• In Malta, we thought
about Maria doing her taxes.
18 Image credit: Shutterstock.com
http://www.slideshare.ne...
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 ...
Where does the answer come from?
• I’m going to show you some of the questions
she has to answer.
• Where does Maria get t...
21
22
Some of the help is really helpful
23
Some of the help is really helpful
24
Put just enough help where the
user needs it
25 Image credit: Flickr, Betsy Weber
Maria has more challenges ahead…
26
Provide a list of stuff to assemble
and deal with
27
Sometimes more than one person
has to fill in the form.
28 Image credit: Shutterstock.com
An example: UK ‘living will’
Before review After review
http://www.slideshare.net/cjforms/expert-review-improves-a-complex...
Before:
Introduction
mentions 2+
other people
After:
Introduction
mentions 5+
other people
How many people for Maria’s form?
• Hazard a guess: who is involved?
• What if Maria is a single mother?
32
Provide a list of actors
and their roles
33 Image credit: http://commons.wikimedia.org/wiki/File:Country_Wife_1675_cast_cr...
This step is a review
34
35
Oh, I made a
mistake.
36
Oh no – looks like I’ll
have to click through
every page again.
37
Phew, it was easier
than I expected
Simple forms may progress
38
Complex forms often don’t.
39
Easy but worrying Horrendous Even worse
A summary menu updates as you finish the
chunks of the form in any order
40
Use summary menus rather than
progress indicators
41 Image credit: shutterstock.com
What about save-and-resume ?
• If people need to set aside their form and come back
to it, how do you handle that now?
• C...
Work hard to ensure great save-
and-resume
43 Image credit: shutterstock.com
Agenda
‘Complex’ and ‘simple’ in forms
Users and usage of complex
forms
Conversation and flow in
complex forms
Appearance ...
Two column form.
What is the reading order?
45
Two column form.
What is the reading order?
46
Two column form.
What is the reading order?
47
Avoid multi-column layouts
http://baymard.com/blog/avoid-multi-column-forms
48
Which layout appeals more? A
49
Which layout appeals more? B
50
Which layout appeals more? C
51
Which page appeals more? A
52
Which page appeals more? B
53
Which page appeals more? C
54
All those screenshots were from
the passport application
55
Norway mandated Elmer 2 guidelines
for government forms in 2006
56
http://www.elmer.no/retningslinjer/pdf/elmer2-english.p...
Create a simple set of rules and
apply them everywhere
57 Image credit: Fraser Smith glenelg.net
Agenda
‘Complex’ and ‘simple’ in forms
Users and usage of complex
forms
Conversation and flow in
complex forms
Appearance ...
We’ve looked at tips about relationship
• Try a ‘replay study’
• Track a sample of forms through your process
• Use a ques...
And tips about conversation
• Put just enough help where the user needs it
• Provide a list of stuff to assemble and deal ...
And tips about appearance
• Avoid multi-column layouts
• Create a simple set of rules and apply them everywhere
61
Appeara...
A great form works well across
all three layers
62
Appearance
Conversation
Relationship Goals achieved
Schema from “Forms ...
More tips http://www.slideshare.net/cjforms
63
Caroline Jarrett
64
twitter @cjforms
caroline.jarrett@effortmark.co.uk
www.formsthatwork.com
You’ve finished this document.
Download and read it offline.
Upcoming SlideShare
Design tips for complex forms Malta 2012
Next
Upcoming SlideShare
Design tips for complex forms Malta 2012
Next
Download to read offline and view in fullscreen.

Share

Design tips for complex forms by @cjforms 2013

Download to read offline

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.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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
  • webaxe

    Oct. 6, 2016
  • SpeedCrazedMoron

    Nov. 2, 2015
  • sanyuanlin

    Nov. 26, 2014
  • seungilhan3

    Apr. 23, 2014
  • totanus

    Mar. 24, 2014
  • Steveg

    Aug. 25, 2013
  • Ateneae

    Aug. 25, 2013
  • UXPA

    Aug. 9, 2013
  • drhutch

    Aug. 9, 2013
  • KrayF

    Aug. 8, 2013
  • kidsimon

    Jul. 16, 2013

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.

Views

Total views

10,342

On Slideshare

0

From embeds

0

Number of embeds

673

Actions

Downloads

95

Shares

0

Comments

0

Likes

11

×