forms that work, a workshop organised by ux australia 2015
TRANSCRIPT
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:[email protected]
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
