UX Cambridge 2013 Caroline Jarrett @cjforms
Workshop results
These slides are from a workshop at the UX Cambridge conference,
September 2013.
We had some lively discu...
Four people with inspiring ideas about forms
3
Agenda
‘Complex’ and ‘simple’ in forms
Users and usage of complex
forms
Conversation and flow in
complex forms
Appearance ...
5
It’s a form
if it …
Asks
questions
and expects
answers
Looks like a
form and
works like a
form
Allows
someone to
achieve...
Asks
questions
and expects
answers
Looks like a
form and
works like a
form
6
Allows
someone to
achieve a
goal
Content
Stra...
Asks
questions
and expects
answers
Looks like a
form and
works like a
form
7
Allows
someone to
achieve a
goal
The answers
...
Let’s start with a few forms
• Three forms coming up….
• Is the form simple or complex?
• Why?
8
9 Image credit: step3reality.com
10
11 Image credit: bt.com
What makes a form complex?
• Compare your ideas within your teams
• Pick the top three to share with all of us
12
Workshop results
• Three teams came up with loads of ideas about what makes
forms easy or difficult.
• The top choices wer...
Most of all:
if users expect it to be complex, it is.
• This form is complex.
Even though we haven’t seen it yet.
14
Four people with inspiring ideas about forms
15
Karen Schriver, information designer
• Follow her @firstwren
• “Information design is a process of orchestrating content v...
We want to organise the
Candy Apple Street Festival in New York
17 Image credit: Flickr - indieink
Assign roles in the team
• Decide who you want to be for today’s purposes
18
And this is part of our preparation
19
Karen talks about this form in:
Schriver, K. (2011).
“La retórica del rediseño en c...
Let’s test those ideas
• Do our ideas successfully diagnose whether
this is a complex form or not?
20
Workshop results
Our top choices for easier forms – possible
heuristics
Our heuristic says
this form is….
Did the heuristi...
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
23 Image credit: Fraser Smith glenelg.net
How to catch them at it ?
• How would we find people who are
planning to hold a street festival?
24
Workshop results
• Workshop participants had these tips for catching the right people at
the right moment:
– Recruit peopl...
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
27 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
31 Image credit: Shutterstock
The four steps of answering a question
Read the question
Find the answer
Judge the answer
Provide the answer
32
Jarrett an...
Four people with inspiring ideas about forms
33
Kathryn Summers, low literacy expert
• Follow her @SummersKathryn
• Co-author, “Design to Read” in
“Rhetorical AccessAbili...
What about reading the form?
• Suppose the Candy Apple team has a mix of
people:
– Older and younger
– High and low levels...
Workshop results
• We chose a section from the instructions for this form that talked
about lighting poles and GFI outlets...
Try VocabProfile for a quick
check of the words you’re using
37
http://www.lextutor.ca/vp/eng/
Where does the answer come from?
• Have a look at the questions on the form.
• Which person on the Candy Apple team
will f...
Provide a list of stuff to assemble
and deal with
39 Image credit: Flickr jmaclynn
Sometimes more than one person
has to fill in the form.
40 Image credit: Shutterstock.com
How many people for our form?
• Let’s have another look at those answers.
• How many people do we have to talk to?
41
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
Provide a list of actors
and their roles
45 Image credit: http://commons.wikimedia.org/wiki/File:Country_Wife_1675_cast_cr...
Four people with inspiring ideas about forms
46
Ginny Redish, writing and usability expert
• Follow her @GinnyRedish
• Even if you already have the first edition of
“Lett...
What steps do we need in the new form?
• How are we going to organise the flow for the form?
• What are the steps in the p...
Simple forms may progress
49
Complex forms often don’t.
50
Easy but worrying Horrendous Even worse
A summary menu updates as you finish the
chunks of the form in any order
51
Use summary menus rather than
progress indicators
52 Image credit: shutterstock.com
Agenda
‘Complex’ and ‘simple’ in forms
Users and usage of complex
forms
Conversation and flow in
complex forms
Appearance ...
Four people with inspiring ideas about forms
54
Jessica Enders, forms and survey expert
• Follow her @Formulate
• Find her articles at: http://formulate.com.au/
55
Remember the craze for “MadLibs” forms?
Jessica did one that works.
56
Make sure that each label is:
57
More about label placement on these forms:
http://bit.ly/cXPcuV
• near to its own field
•...
One example of best practice in this form:
unsplit names
58
http://formulate.com.au/articles/the-name-riddle/
Try to avoid splitting names,
especially for mixed ethnicities
59
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
• Try VocabProfile for a quick check of the words you’re using
• Provide a list of stuff to as...
And tips about appearance
• Ensure each label is:
– near to its own field, and
– far from any other field
• Try to avoid s...
A great form works well across
all three layers
64
Appearance
Conversation
Relationship Goals achieved
Schema from “Forms ...
More tips http://www.slideshare.net/cjforms
65
Caroline Jarrett
66
twitter @cjforms
caroline.jarrett@effortmark.co.uk
www.formsthatwork.com
Upcoming SlideShare
Loading in …5
×

Ideas for design of complex transactions by @cjforms 2013

5,908 views

Published on

A workshop at UX Cambridge 2013 #uxcam where we discussed design tips and ideas for tackling complex forms and transactions.

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

Published in: Design, Education, Technology

Ideas for design of complex transactions by @cjforms 2013

  1. 1. UX Cambridge 2013 Caroline Jarrett @cjforms
  2. 2. Workshop results These slides are from a workshop at the UX Cambridge conference, September 2013. We had some lively discussions and talked a lot about what makes forms complex or simple. This version of the slides captures some results at a high level. Many thanks to all the attendees for their contributions. 2
  3. 3. Four people with inspiring ideas about forms 3
  4. 4. Agenda ‘Complex’ and ‘simple’ in forms Users and usage of complex forms Conversation and flow in complex forms Appearance of complex forms 4
  5. 5. 5 It’s a form if it … Asks questions and expects answers Looks like a form and works like a form Allows someone to achieve a goal “transaction”
  6. 6. Asks questions and expects answers Looks like a form and works like a form 6 Allows someone to achieve a goal Content Strategy and Plain Language Service Design and Process Design Interaction Design
  7. 7. Asks questions and expects answers Looks like a form and works like a form 7 Allows someone to achieve a goal The answers you need The questions you ask Users’ goals (and business ones) Where you put the pixels
  8. 8. Let’s start with a few forms • Three forms coming up…. • Is the form simple or complex? • Why? 8
  9. 9. 9 Image credit: step3reality.com
  10. 10. 10
  11. 11. 11 Image credit: bt.com
  12. 12. What makes a form complex? • Compare your ideas within your teams • Pick the top three to share with all of us 12
  13. 13. Workshop results • Three teams came up with loads of ideas about what makes forms easy or difficult. • The top choices were for easier forms were: – Clear positioning of links / make it obvious what the next step is – Avoid too much information / have the right amount of information – Clear text and avoid ambiguity – Fewer fields – Don’t make people remember yet another ID – Set expectations about what’s needed for the form – Think about the users’ knowledge and what’s needed for the answers – Make it easy for users to achieve their gaols • And we need to make sure that we make the form accessible. 13
  14. 14. Most of all: if users expect it to be complex, it is. • This form is complex. Even though we haven’t seen it yet. 14
  15. 15. Four people with inspiring ideas about forms 15
  16. 16. Karen Schriver, information designer • Follow her @firstwren • “Information design is a process of orchestrating content visually and verbally, making the structure salient to people who engage with it.” 16
  17. 17. We want to organise the Candy Apple Street Festival in New York 17 Image credit: Flickr - indieink
  18. 18. Assign roles in the team • Decide who you want to be for today’s purposes 18
  19. 19. And this is part of our preparation 19 Karen talks about this form in: Schriver, K. (2011). “La retórica del rediseño en contextos burocráticos. (The rhetoric of redesign in bureaucratic settings)” In J. Frascara (Ed.), ¿Qué es el diseño de información? (What is information design?) (pp. 156-165). Buenos Aires: Ediciones Infinito.
  20. 20. Let’s test those ideas • Do our ideas successfully diagnose whether this is a complex form or not? 20
  21. 21. Workshop results Our top choices for easier forms – possible heuristics Our heuristic says this form is…. Did the heuristic work? Clear positioning of links / make it obvious what the next step is Complex Yes Avoid too much information / have the right amount of information Complex Yes Clear text and avoid ambiguity Complex Yes Fewer fields ? Hard to say Partly Don’t make people remember yet another ID (Not relevant to this form) (Not really) Set expectations about what’s needed for the form Complex Yes Think about the users’ knowledge and what’s needed for the answers Complex Yes Make it easy for users to achieve their gaols Complex Yes The form must be accessible Inaccessible / complex Yes 21
  22. 22. Agenda ‘Complex’ and ‘simple’ in forms Users and usage of complex forms Conversation and flow in complex forms Appearance of complex forms 22
  23. 23. We know that we need to observe people as they use the forms 23 Image credit: Fraser Smith glenelg.net
  24. 24. How to catch them at it ? • How would we find people who are planning to hold a street festival? 24
  25. 25. Workshop results • Workshop participants had these tips for catching the right people at the right moment: – Recruit people well ahead of time; get them to approach you when they are at the right point to fill in the form – Use remote testing to catch a wider selection of people at the right moment for them – Use a diary study so that people record a variety of moments, including the ones relevant to your complex form 25
  26. 26. 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. 26
  27. 27. Observing internal users was easier in the days of paper 27 Image credit: http://www.census.gov/history/img/c43f.jpg
  28. 28. 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. 28 Image credit: Shutterstock
  29. 29. 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 29
  30. 30. Agenda ‘Complex’ and ‘simple’ in forms Users and usage of complex forms Conversation and flow in complex forms Appearance of complex forms 30
  31. 31. To get good answers, ask good questions 31 Image credit: Shutterstock
  32. 32. The four steps of answering a question Read the question Find the answer Judge the answer Provide the answer 32 Jarrett and Gaffney (2008), adapted from Tourangeau, Rips and Rasinksi (2000)
  33. 33. Four people with inspiring ideas about forms 33
  34. 34. Kathryn Summers, low literacy expert • Follow her @SummersKathryn • Co-author, “Design to Read” in “Rhetorical AccessAbility” (2013) edited by Lisa Meloncon • Shorter version in User Experience magazine, linked from http://www.designtoread.com 34
  35. 35. What about reading the form? • Suppose the Candy Apple team has a mix of people: – Older and younger – High and low levels of education – Varying ethnic backgrounds • Any words or phrases that might cause problems? • Anything else that makes it challenging to read? 35
  36. 36. Workshop results • We chose a section from the instructions for this form that talked about lighting poles and GFI outlets. • The paragraph had long sentences and was hard to read. • We discussed the challenges of making sure that we: – Use the appropriate specialist terminology when designing forms for experts – Avoid inappropriate jargon when designing forms for general audiences – Create appropriate sections in the form where different people will fill in different sections. 36
  37. 37. Try VocabProfile for a quick check of the words you’re using 37 http://www.lextutor.ca/vp/eng/
  38. 38. Where does the answer come from? • Have a look at the questions on the form. • Which person on the Candy Apple team will find the answer? 38
  39. 39. Provide a list of stuff to assemble and deal with 39 Image credit: Flickr jmaclynn
  40. 40. Sometimes more than one person has to fill in the form. 40 Image credit: Shutterstock.com
  41. 41. How many people for our form? • Let’s have another look at those answers. • How many people do we have to talk to? 41
  42. 42. An example: UK ‘living will’ Before review After review http://www.slideshare.net/cjforms/expert-review-improves-a-complex-form-by-cjforms
  43. 43. Before: Introduction mentions 2+ other people
  44. 44. After: Introduction mentions 5+ other people
  45. 45. Provide a list of actors and their roles 45 Image credit: http://commons.wikimedia.org/wiki/File:Country_Wife_1675_cast_crop.png
  46. 46. Four people with inspiring ideas about forms 46
  47. 47. Ginny Redish, writing and usability expert • Follow her @GinnyRedish • Even if you already have the first edition of “Letting go of the words”, buy the 2nd edition 47
  48. 48. What steps do we need in the new form? • How are we going to organise the flow for the form? • What are the steps in the process? 48
  49. 49. Simple forms may progress 49
  50. 50. Complex forms often don’t. 50 Easy but worrying Horrendous Even worse
  51. 51. A summary menu updates as you finish the chunks of the form in any order 51
  52. 52. Use summary menus rather than progress indicators 52 Image credit: shutterstock.com
  53. 53. Agenda ‘Complex’ and ‘simple’ in forms Users and usage of complex forms Conversation and flow in complex forms Appearance of complex forms 53
  54. 54. Four people with inspiring ideas about forms 54
  55. 55. Jessica Enders, forms and survey expert • Follow her @Formulate • Find her articles at: http://formulate.com.au/ 55
  56. 56. Remember the craze for “MadLibs” forms? Jessica did one that works. 56
  57. 57. Make sure that each label is: 57 More about label placement on these forms: http://bit.ly/cXPcuV • near to its own field • far from any other field
  58. 58. One example of best practice in this form: unsplit names 58 http://formulate.com.au/articles/the-name-riddle/
  59. 59. Try to avoid splitting names, especially for mixed ethnicities 59
  60. 60. Agenda ‘Complex’ and ‘simple’ in forms Users and usage of complex forms Conversation and flow in complex forms Appearance of complex forms Summary 60
  61. 61. 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 61 Goals achievedRelationship Goals achieved
  62. 62. And tips about conversation • Try VocabProfile for a quick check of the words you’re using • 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 62 Conversation Goals achieved Easy to understand and answer
  63. 63. And tips about appearance • Ensure each label is: – near to its own field, and – far from any other field • Try to avoid splitting names, especially for mixed ethnicities 63 Appearance Goals achievedLovely and legible
  64. 64. A great form works well across all three layers 64 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
  65. 65. More tips http://www.slideshare.net/cjforms 65
  66. 66. Caroline Jarrett 66 twitter @cjforms caroline.jarrett@effortmark.co.uk www.formsthatwork.com

×