Forms that work, a workshop organised by UX Australia 2015

Caroline Jarrett @cjformsJessica Enders @formulate

#formsthatwork Gerry Gaffney @gerrygaffney

Designing Forms that Work

Thanks, Donna Spencer

2

Coming up: UX Australia ReduxSydney 4th November 2015Melbourne 12th November 2015

Agenda

With Caroline:

Introduction: what is a form?

Content and writing questions

With Jessica:

Visual design for forms

With Gerry:

Form design processes

With all of us:

Form design clinics3

4

I’m a forms specialist

I do things like collectingcartoons about forms

@cjforms

5

6

and having a favourite joke form

@cjforms

7 http://eastpointpolice.org/SelfArrestForm.htm

8

which gets even better as you scroll

@cjforms

9

http://eastpointpolice.org/SelfArrestForm.htm

10

I’ve been thinking about official forms for ages

Image credit: Caroline Jarrett

11

Which page is the first one in the form?

12

“service”“transaction”

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 …

@cjforms

13

ContentStrategyandPlainLanguage

Asks questions

and expects answers

Interaction Design

Looks like a form and

works like a form

Service Design and ProcessDesign

Allows someone to

achieve agoal

@cjforms

14

Users’ goals

(and business ones)

Allows someone to

achieve agoal

Asks questions

and expects answers

The answers you need

The questionsyou ask

Looks like a form and

works like a form

Where youput the pixels

@cjforms

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

Relationship

Conversation

Goals achieved

Goals achieved Easy to understandand answer

Goals achieved Lovely and legible.Simple interaction

Appearance

A great form works well across all three layers

16 Schema from http://www.formulate.com.au/blog/the-4-layers-of-a-form

Process

Q&A

Goals achieved

Goals achieved Easy to understandand answer

Goals achieved Lovely and legible.Simple interaction

LayoutFlow

A great online form works across all four layers

Agenda

Introduction: what is a form?

Content and writing questions

Visual design for forms

Form design processes

Form design clinics

17

18

19

Tip Provide just-in-time help

What’s this?

Where can I find this?

Why do you need this?

How will you use this?20

21

Tip

22

Allow for many, both, and other

Image © nopitycity.comUsed with permission fromRicky Buchanan

23

Where is ‘Confirm Family Name?

24

TipIf users have to copy from a document to your form,then use the same layout

25 Image credit: https://commons.wikimedia.org/wiki/File:Croatian_driving_licence.jpg

26

Tip Apply changes consistently

Image credit: http://www.glenelg.net used with permission from Fraser Smith27

28

Attempt 2: selected screens

@cjforms

29

TipMake use of information that you already have

Step A

Step B

Step C

Step D

30

31

32

Tip Use the users’ language

Image credit: "French identification certificate for Marcelle Montagne, an alias of OSS agent Virginia Hall" by Photo by Rudi Williams - http://www.defense.gov/DODCMSShare/NewsStoryPhoto/2002-05/hrs_200205021h.jpg at http://www.defense.gov/news/newsarticle.aspx?id=44107. Licensed under Public Domain via Commons - https://commons.wikimedia.org/wiki/File:French_identification_certificate_for_Marcelle_Montagne,_an_alias_of_OSS_agent_Virginia_Hall.jpg#/media/File:French_identification_certificate_for_Marcelle_Montagne,_an_alias_of_OSS_agent_Virginia_Hall.jpg33

34

35

Suggested rewording

We have awarded you a Business Visitor Visa. Your Visa starts on 10 September 2015 and is valid for a year.

You may visit Australia for business meetings, but you are not allowed to work.

If you need to contact us, please email us on:visacontact@dipb.gov.au

We have offices in most countries, listed here: http://www.border.gov.au/about/contact/offices-locations

TipMake it easy for users to do the right thing

36

37

And now, from Australia to UK

@cjforms

38

39

40

41

“Readers” try to read everything first“Rushers” only read when they need to

• Pensioners• Lower-paid

self-employed

• Tax office staff• Accountants• Higher-paid employed

42

Rushers do better

43

Designing for ‘quick start’ isn’t a new idea

“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.”

National Audit Office 2002

How (and why) to print all the thingshttps://designnotes.blog.gov.uk/2015/10/15/how-and-why-to-print-all-the-things/

44

45

46

47

We’re working on autocomplete / autosuggest https://designpatterns.hackpad.com/Autocomplete-autosuggest-type-ahead-l3OHvWUmDml

48

49

50

TipDesign for satisficing and optimising

Satisfice:Choose first plausible option

Optimise:Consider all options,choose the best

51

52

53

Tip

54

The Home Office focused on visas from China

https://gds.blog.gov.uk/2015/02/16/china-tourist-visas-user-research/

55

https://www.gov.uk/design-principles #gdsteam

#gdsteam@timpaul @cjforms

#gdsteam@timpaul @cjforms

Google ‘service manual form structure’

#gdsteam@timpaul @cjforms

#gdsteam@timpaul @cjforms

#gdsteam@timpaul @cjforms

Please join the discussionshttps://designpatterns.hackpad.com

62

Agenda

Coming up after the break(slides only available if you were there)

With Jessica:

Visual design for forms

With Gerry:

Form design processes

With all of us:

Form design clinics

63

64

Jessica Enders@formulate

65

Gerry Gaffney

@gerrygaffney

Information & Design

Designing for humans

66

More slides http://www.slideshare.net/cjforms

67

twitter @cjformscaroline.jarrett@effortmark.co.ukwww.effortmark.co.uk

Caroline Jarrett