Design of
survey forms
Workshop at the General Online Research Conference
Cologne, Germany, March 2014
#GOR14, Cologne

Ca...
Introductions

Agenda

The three layers of the form
Relationship
Conversation
Appearance

2
3
4
It’s a form
if it …

Looks like a
form and
works like a
form

Asks
questions
and expects
answers

5

“transaction”

Allows...
Interaction
Design

Content
Strategy
and
Plain
Language

6

Asks
questions
and expects
answers

Looks like a
form and
work...
Where you put
the parts on
the page

The questions
you ask
Asks
questions
and expects
answers

The answers
you need

Looks...
A great form works well across
all three layers
Appearance

Lovely and legible.
Goals achieved

Simple interaction

Conver...
9
Forms and questionnaires differ
in how the answers are used
Form:
answers used individually

10

Questionnaire:
answers ag...
Introductions

Agenda

The three layers of the form
Relationship
Conversation
Appearance

11
Understand the relationship
• Who will use this form?
• Why will they use it?
• When and where?

• How will they use it?
•...
• Who will use this form?
– Choose a photograph of someone who will use the form (“persona”)
– Choose a name for the perso...
Tip

14

Create a story to help you decide
what you need to find out about
the people who use your form
and their goals
Introductions

Agenda

The three layers of the form
Relationship
Conversation
Appearance

15
Who are
you?

16
Too late!

17
Where‟s the
box for me to
type into?

18
OK, there
it is

19
Think about where we are in the conversation
(suggested version, page 1)

20
Think about where we are in the conversation
(suggested version, page 2)

21
Tip

Think about the questions that
respondents have for you
Who are you?
Why do I have to do this?
Why do you need this a...
23
Tip

24

You don’t need a progress bar
on a simple form
• Navigation type 1: the left-hand menu
– Always available
– Sometimes grows depending on your answers

• Navigation type ...
“Walls of words” are challenging to read

26
My suggested version is shorter and clearer

27
• We can get „walls of words‟ inside complex questions
• Review this „before‟ and „after‟ suggestion
• Your views?

28
Tip

Demolish walls of words
For ideas how to do it, try:
http://www.editingthatworks.com/step6.htm

Image credit: Francis...
Introductions

Agenda

The three layers of the form
Relationship
Conversation
Appearance

30
I reviewed some button research at IDC2012
http://www.slideshare.net/cjforms/
buttons-on-forms-and-surveys-a-look-at-some-...
The basic eye movement on forms:
look for a box, turn left to read the label

A

B

C

D

Where to put the button?
32

E
Best place for a button:
aligned with left-hand end of text boxes

3 Looks here
last

33

1

Looks here
first for button

...
Tip

Put the buttons in the right place
relative to the questions
Then work out where the buttons go compared to each othe...
Tip

Basic best practices for buttons
1.

Make buttons look like buttons.

2.

Put buttons where users can find them.

3.
...
36
37
38
39
40
41
All those screenshots were from
the US passport application

42
Norway mandates the Elmer guidelines
for government forms

http://www.brreg.no/elmer/elmer_2_1_english.pdf

43
GOV.UK has a service manual

https://www.gov.uk/service-manual/usercentered-design/resources/forms.html

44
Tip

45

Create a simple set of rules and
apply them everywhere

Image credit: Fraser Smith glenelg.net
• What topics do we need to see in our set of rules?
• Do we want:
– The same topics as in the GOV.UK page?
– Those topics...
Introductions

Agenda

The three layers of the form
Relationship
Conversation
Appearance
Summary

47
A great form works well across
all three layers
Appearance

Lovely and legible.
Goals achieved

Simple interaction

Conver...
Some resources for forms design
• “Forms that work”: http://www.formsthatwork.com
• Columns on Uxmatters.com:
– Don‟t Put ...
More tips http://www.slideshare.net/cjforms

50
Caroline Jarrett
twitter @cjforms
caroline.jarrett@effortmark.co.uk
www.formsthatwork.com

51
Upcoming SlideShare
Loading in...5
×

Survey forms GOR14 by @cjforms

3,881

Published on

Workshop on the design of survey forms led by Caroline Jarrett at the General Online Research conference, Cologne, German, 5 March 2014.

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

Published in: Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,881
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
24
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • Appearance: a good form is lovely and legible with simple interactionConversation: a good form is easy to understand and to answerRelationship: a good form makes sure that goals are achieved
  • Original block of text:Passenger Focus carries out regular large scale surveys of rail passengers' journeys. Passenger Focus is the official, independent rail consumer watchdog. The rail industry and government pay close attention to the survey results and use them to prioritise improvements. The Department for Transport and Office of Rail Regulation, among others, use the results to assess the performance of the rail industry. To find out more or see how previous surveys led to change see http://www.passengerfocus.org.uk.
  • Suggested version:Passenger Focus is the official, independent rail consumer watchdog.We do regular large scale surveys of rail passengers’ journeys.The rail industry and government pay close attention to our survey results and use them to prioritise improvements.Find out how (link: title: previous surveys led to change, with destination: http://www.passengerfocus.org.uk).
  • Appearance: a good form is lovely and legible with simple interactionConversation: a good form is easy to understand and to answerRelationship: a good form makes sure that goals are achieved
  • Survey forms GOR14 by @cjforms

    1. 1. Design of survey forms Workshop at the General Online Research Conference Cologne, Germany, March 2014 #GOR14, Cologne Caroline Jarrett @cjforms
    2. 2. Introductions Agenda The three layers of the form Relationship Conversation Appearance 2
    3. 3. 3
    4. 4. 4
    5. 5. It’s a form if it … Looks like a form and works like a form Asks questions and expects answers 5 “transaction” Allows someone to achieve a goal
    6. 6. Interaction Design Content Strategy and Plain Language 6 Asks questions and expects answers Looks like a form and works like a form Allows someone to achieve a goal Service Design and Process Design
    7. 7. Where you put the parts on the page The questions you ask Asks questions and expects answers The answers you need Looks like a form and works like a form Allows someone to achieve a goal Users‟ goals (and business ones) 7
    8. 8. A great form works well across all three layers Appearance Lovely and legible. Goals achieved Simple interaction Conversation Relationship 8 Easy to understand Goals achieved and to answer Goals achieved Schema from “Forms that work: Designing web forms for usability”, Jarrett and Gaffney (2008) www.formsthatwork.com
    9. 9. 9
    10. 10. Forms and questionnaires differ in how the answers are used Form: answers used individually 10 Questionnaire: answers aggregated
    11. 11. Introductions Agenda The three layers of the form Relationship Conversation Appearance 11
    12. 12. Understand the relationship • Who will use this form? • Why will they use it? • When and where? • How will they use it? • What will they achieve by using it? 12 Picture credits: Flickr @chelmsfordpubliclibrary
    13. 13. • Who will use this form? – Choose a photograph of someone who will use the form (“persona”) – Choose a name for the persona – Write three sentences about who the persona is • Write the story your persona and the form: – – – – 13 Why the persona is using the form When and where the persona will use the form How the persona will use the form What the persona will achieve by using the form
    14. 14. Tip 14 Create a story to help you decide what you need to find out about the people who use your form and their goals
    15. 15. Introductions Agenda The three layers of the form Relationship Conversation Appearance 15
    16. 16. Who are you? 16
    17. 17. Too late! 17
    18. 18. Where‟s the box for me to type into? 18
    19. 19. OK, there it is 19
    20. 20. Think about where we are in the conversation (suggested version, page 1) 20
    21. 21. Think about where we are in the conversation (suggested version, page 2) 21
    22. 22. Tip Think about the questions that respondents have for you Who are you? Why do I have to do this? Why do you need this answer? Where can I find this answer? Why are you asking this question? How do I contact you? How much more do I have to do? Can I take a break? 22 Image credit: Shutterstock
    23. 23. 23
    24. 24. Tip 24 You don’t need a progress bar on a simple form
    25. 25. • Navigation type 1: the left-hand menu – Always available – Sometimes grows depending on your answers • Navigation type 2: the summary page – A separate page which shows sections – May have a „build my form‟ process before it starts • Which do we prefer? Why? 25
    26. 26. “Walls of words” are challenging to read 26
    27. 27. My suggested version is shorter and clearer 27
    28. 28. • We can get „walls of words‟ inside complex questions • Review this „before‟ and „after‟ suggestion • Your views? 28
    29. 29. Tip Demolish walls of words For ideas how to do it, try: http://www.editingthatworks.com/step6.htm Image credit: Francis Rowland 29
    30. 30. Introductions Agenda The three layers of the form Relationship Conversation Appearance 30
    31. 31. I reviewed some button research at IDC2012 http://www.slideshare.net/cjforms/ buttons-on-forms-and-surveys-a-look-at-some-research-2012 31
    32. 32. The basic eye movement on forms: look for a box, turn left to read the label A B C D Where to put the button? 32 E
    33. 33. Best place for a button: aligned with left-hand end of text boxes 3 Looks here last 33 1 Looks here first for button 2 Then looks here
    34. 34. Tip Put the buttons in the right place relative to the questions Then work out where the buttons go compared to each other http://www.uxmatters.com/mt/archives/2012/05/7-basic-best-practices-for-buttons.php 34
    35. 35. Tip Basic best practices for buttons 1. Make buttons look like buttons. 2. Put buttons where users can find them. 3. Make the most important button look like it‟s the most important one. 4. Put buttons in a sensible order. 5. Label buttons with what they do. 6. If users don‟t want to do something, don‟t have a button for it. 7. Make it harder to find destructive buttons. http://www.uxmatters.com/mt/archives/2012/05/7-basic-best-practices-for-buttons.php 35
    36. 36. 36
    37. 37. 37
    38. 38. 38
    39. 39. 39
    40. 40. 40
    41. 41. 41
    42. 42. All those screenshots were from the US passport application 42
    43. 43. Norway mandates the Elmer guidelines for government forms http://www.brreg.no/elmer/elmer_2_1_english.pdf 43
    44. 44. GOV.UK has a service manual https://www.gov.uk/service-manual/usercentered-design/resources/forms.html 44
    45. 45. Tip 45 Create a simple set of rules and apply them everywhere Image credit: Fraser Smith glenelg.net
    46. 46. • What topics do we need to see in our set of rules? • Do we want: – The same topics as in the GOV.UK page? – Those topics plus other pages? – Different topics? 46
    47. 47. Introductions Agenda The three layers of the form Relationship Conversation Appearance Summary 47
    48. 48. A great form works well across all three layers Appearance Lovely and legible. Goals achieved Simple interaction Conversation Relationship 48 Easy to understand Goals achieved and to answer Goals achieved Schema from “Forms that work: Designing web forms for usability”, Jarrett and Gaffney (2008) www.formsthatwork.com
    49. 49. Some resources for forms design • “Forms that work”: http://www.formsthatwork.com • Columns on Uxmatters.com: – Don‟t Put Hints Inside Text Boxes in Web Forms http://www.uxmatters.com/mt/archives/2010/03/dont-put-hints-inside-textboxes-in-web-forms.php – Don‟t Put Labels Inside Text Boxes (Unless You‟re Luke W) http://www.uxmatters.com/mt/archives/2013/02/dont-put-labels-insidetext-boxes-unless-youre-luke-w.php – The Question Protocol: How to Make Sure Every Form Field Is Necessary http://www.uxmatters.com/mt/archives/2010/06/the-question-protocolhow-to-make-sure-every-form-field-is-necessary.php 49
    50. 50. More tips http://www.slideshare.net/cjforms 50
    51. 51. Caroline Jarrett twitter @cjforms caroline.jarrett@effortmark.co.uk www.formsthatwork.com 51
    1. A particular slide catching your eye?

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

    ×