Forms that work: Understanding forms to improve their design by @cjforms

FormsUnderstanding forms to improve their designCaroline Jarrett @cjforms 2013

that work

Introductions• Who we are

• What we do

• Why we’re interested in forms

2

What makes a good form?• Compare these forms

• Which is the best? Why?

• Which is the worst? Why?

3

4

A mixed selection of post with a brown ‘On Her Majesty’s Service envelope peeking out. That means ‘tax form’.

5

Allows someone to

achieve agoal

Asks questions

and expects answers

Looks like a form and

works like a form

It’s a form if it …

6

Asks questions

and expects answers

Allows someone to

achieve agoal

Users’ goals

(and business ones)

The answers you need

The questionsyou ask

Looks like a form and

works like a form

How youlay outthe form

7 Schema from “Forms that work: Designing web forms for usability”, Jarrett and Gaffney (2008) www.formsthatwork.com

Easy to understand and to answer Goals

achieved

Easy to read and to work with

Relationship

Conversation

Appearance

A great formworks well across all layers

Today’sagenda

TestingAppearance

Conversation

Relationship

8

9

Allows someone to

achieve agoal

• What does the user get out of it?– What does the user achieve by filling in this form?

• How does the user feel about it? – Does the user have a choice?– Does the user trust your organization?

• What is the user expecting?– What does the user expect to tell you?– What do other organisations

ask the user in similar circumstances?

Understand your users’ goals

Let’s think about people• Write a story about someone who will fill in your form

– Pick a name for the person.– Why is the person filling in the form?– How does the person feel about it?– What is ‘success’ for the person?– How long does the person expect to take?

10

11Diagram from Jarrett, C, and Gaffney, G (2008) “Forms that work: Designing web forms for usability” inspired by Dillman, D.A. (2000) “Internet, Mail and Mixed Mode Surveys: The Tailored Design Method”

Trust

Perceivedreward

Perceivedeffort

Response relies on effort, reward, and trust

12

• If the question is relevant to purpose

• If the effort of answering is acceptable

• Willingness to put in effort depends on relationship =

trust + context

Why do users answer questions?

Relationship changes constantly• As we step through the example form:

– Add a point for each time the mood goes UP– Take off a point for each time the mood goes DOWN

• If you think the UP is a real winner, make it two or even

more points

• If you think the DOWN is a real loser, make it two or even

more points

• We’ll compare scores at the end

13

14

Businessgoals also

matterInformation requirement

Information needs of data users

Overall business purpose

The other half of the relationship isthe organisation’s goals

15

• 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

Use a question protocol to find outwhich answers you need

Now try it• Is any of the information already held in the

organisation?

• Who uses the information that this form collects?

• Have you watched those people do their work with this

form?

16

17

• Look for: minimum time, maximum time, mode, errors,

loops, customer contacts, staff involvement.

But most of all: for errors.

Image credit: Shutterstock

Track a sample of forms through your process

18

There are three ways to get the information that we need

Today’sagenda

TestingAppearance

Conversation

19

Relationship

20 Thanks to Ginny Redish for this example

http://mva.state.md.us

People don’t want to read

21

National Audit Office 2002

“Officials need to take a behaviourally realistic view of how citizens fill in forms and to cut back the length of guidance leaflets as well as forms themselves.

Forms and guidance should be designed to facilitate a 'quick start‘ approach by people.”

They want a ‘quick start’

22

Let’s start with a web form example

23

Hit by a wall of words – skip it

24

Look for the first box to type into

25

What question goes in the box?

26

Do I want to give that information?

27

Here is the circular reading pattern

28

It’s typical to read forms in a circular pattern

29Romano, J. C. and J. M. Chen (2011). "A Usability and Eye-Tracking Evaluation of Four Versions of the Online National Survey of College Graduates (NSCG): Iteration 2." Survey Methodology: 01.

And to ignore or skip the instructions

30 Image credit: Romano Bergstrom, Erdman & Lakhe, mentioned in Jarrett and Bergstrom (in review) “Eye tracking the user experience” Morgan Kaufmann

Reading a bit of the instructions

Then less

and less

Circular reading pattern

Paper formsare similar

31

1. Translate all the text into plain language– Choose words and phrases that your users understand– Write to the user– Use layout to organize your text

• White space• Headings• Bullet points• Lists

2. Move the text to where it is needed

3. Turn instructions into questions

4. Slash everything else

Fight hard for very short instructions

32

• Work out what the user is expected to read before they

start filling in the form

• Revise it in four steps:1. Plain language

2. Move text to where it is needed

3. Turn instructions into questions

4. Slash everything else

Example: fighting the instructions

33Image credit: Shutterstock

To get good answers, ask good questions

34 Jarrett and Gaffney (2008), adapted from Tourangeau, Rips and Rasinksi (2000)

Read the question

Find the answer

Judge the answer

Provide the answer

The four steps of answering a question

35

Effort put into bridging

this gap depends on relationship

Organization’s information requirement

User’s information world

Third-party answers

Gatheredanswers

Slot-in answers

Judging and placing come later

Created answers

Finding answers can be complex

36

• User has a pre-packaged answer– Personal details (name, address etc)– Method of payment– Details of employment / education

• Answer is available and salient

• Looking for the right slots for the answer

• Willingness to reveal the answer depends on relationship

Slot-in answers

37

• User has to get the information from somewhere else

• Examples– Serial number of your computer– Reference number of this order

• Willingness to spend time

depends on relationship

Gathered answer

38

• User has to ask someone else– The boss– Someone at the next desk– Someone in the family– A medical practitioner– An insurer

• Examples– Currently prescribed medications for family member– Spouse’s credit card number

• Willingness to spend time and thoroughness of the

research depend on relationship

Third-party answers

39

• User has to construct an answer– reviewing knowledge– predicting it– finding an opinion

• Examples– If this cereal was a person, what would it be like?– Are you likely to buy this new cereal?– How many packets of cereal do you buy in a month?

• You may think the user will gather the answer, but they

guess (create)

Created answer

Now try it – our example• Look at the questions on the form

• Can you find examples of questions for each of these

strategies?– Slot-in answers– Gathered answers– Third-party answers– Created answers

40

41

Slot-in Brief prompts

Introduction to explain why the question is relevant

Create May need help to constrain or structure the answer

Gather May need explanations, links to help, pictures

Fully-formed question

Third-party Should the form go to someone else?

Fully-formed question

The type of answer can influencethe way you write the questions

Now try it – our example• Review the questions on this form

• Any of them need some re-writing?

• If so – let’s try it

42

43 Jarrett and Gaffney (2008), adapted from Tourangeau, Rips and Rasinksi (2000)

Read the question

Find the answer

Judge the answer

Provide the answer

The four steps of answering a question

44

• Think about answering the question

“What is your name?”

• Now think about asking it when asked:– By a young child– At an informal social occasion– In a formal meeting– At a doctor’s reception desk– When buying something by telephone

We select an answer in the context of the relationship

Now try it – another example• Look at the questions on this form

• Where do the answers come from?

• How might they change based on judgement?

45

46 Jarrett and Gaffney (2008), adapted from Tourangeau, Rips and Rasinksi (2000)

Read the question

Find the answer

Judge the answer

Provide the answer

The four steps of answering a question

Is a dolphin more like a rhino or a shark?

47

48

• Look at the categories on offer on this form.

• Can we thinking of any extra real-world things that might

not fall into these categories?

Now try it – our example

Today’sagenda

TestingAppearance

49

Relationship

Conversation

50Siz

SizeSize

StyleStyle

ContrastContrast ContrastContrast

The basics: contrast, style & size

Which layout appeals more? A

51

Which layout appeals more? B

52

Which layout appeals more? C

53

Which page appeals more? A

54

Which page appeals more? B

55

Which page appeals more? C

56

57

All those screenshots were from the same form: Applying for a US passport

Image credit: Fraser Smith glenelg.net

Create a simple set of rules and apply them everywhere

Today’sagenda

TestingAppearance

59

Conversation

Relationship

Exercise – putting it together• Let’s try working through the three layers:

• Who will fill this in?

What answers do we need?

• What questions should we ask to get those

answers?

• What is the correct order for the questions?

• Aim: create a first draft prototype for testing

60

Today’sagenda

TestingAppearance

61

Conversation

Relationship

62

• Best: ask a real user to try filling out your form– Next best: ask an approximate user to try filling out your form

• Next best: Just ask anyone to complete it

• For more detailed instructions, visit:http://infodesign.com.au/usabilityresources/usabilitytesting/

Watching a user working on your form is the single best way to understand it

63

• Understanding the answer– Could you tell me what that question is asking you?

• Finding the answer– How would you work out the answer to that question?– Where would you look for the answer to that question?

• Judging the answer– Did you expect to be asked that question?– Does it explain why it asked that question?– Did it leave out a question you expected?– Is it OK for <organisation> to ask that question?

Ask some questions about the questions

Let’s try some testing• If you’re a ‘Participant’

– Move one group along and wait for your instructions

• If you’re a ‘Facilitator’– Greet the participant– Invite the participant to fill in your prototype form – If the participant has any questions, answer as best you can

• If you’re an ‘Observer’– Take notes on what you see and hear– You’ll be reporting back to your team

64

65 Schema from “Forms that work: Designing web forms for usability”, Jarrett and Gaffney (2008) www.formsthatwork.com

Easy to understand and to answer Goals

achieved

Easy to read and to work with

Relationship

Conversation

Appearance

A great formworks well across all layers

66

Presentations: http://www.slideshare.net/cjforms

Forms that work: http://www.formsthatwork.com

Some resources for forms design

67

twitter @cjformscaroline.jarrett@effortmark.co.uk

Caroline Jarrett