Forms that work, a workshop organised by UX Australia 2015
-
Upload
caroline-jarrett -
Category
Design
-
view
1.469 -
download
0
Transcript of Forms that work, a workshop organised by UX Australia 2015
![Page 1: Forms that work, a workshop organised by UX Australia 2015](https://reader035.fdocuments.in/reader035/viewer/2022070510/58a952e71a28ab77408b51e7/html5/thumbnails/1.jpg)
Caroline Jarrett @cjformsJessica Enders @formulate
#formsthatwork Gerry Gaffney @gerrygaffney
Designing Forms that Work
![Page 2: Forms that work, a workshop organised by UX Australia 2015](https://reader035.fdocuments.in/reader035/viewer/2022070510/58a952e71a28ab77408b51e7/html5/thumbnails/2.jpg)
Thanks, Donna Spencer
2
Coming up: UX Australia ReduxSydney 4th November 2015Melbourne 12th November 2015
![Page 3: Forms that work, a workshop organised by UX Australia 2015](https://reader035.fdocuments.in/reader035/viewer/2022070510/58a952e71a28ab77408b51e7/html5/thumbnails/3.jpg)
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
![Page 4: Forms that work, a workshop organised by UX Australia 2015](https://reader035.fdocuments.in/reader035/viewer/2022070510/58a952e71a28ab77408b51e7/html5/thumbnails/4.jpg)
4
I’m a forms specialist
I do things like collectingcartoons about forms
@cjforms
![Page 5: Forms that work, a workshop organised by UX Australia 2015](https://reader035.fdocuments.in/reader035/viewer/2022070510/58a952e71a28ab77408b51e7/html5/thumbnails/5.jpg)
5
![Page 6: Forms that work, a workshop organised by UX Australia 2015](https://reader035.fdocuments.in/reader035/viewer/2022070510/58a952e71a28ab77408b51e7/html5/thumbnails/6.jpg)
6
and having a favourite joke form
@cjforms
![Page 7: Forms that work, a workshop organised by UX Australia 2015](https://reader035.fdocuments.in/reader035/viewer/2022070510/58a952e71a28ab77408b51e7/html5/thumbnails/7.jpg)
7 http://eastpointpolice.org/SelfArrestForm.htm
![Page 8: Forms that work, a workshop organised by UX Australia 2015](https://reader035.fdocuments.in/reader035/viewer/2022070510/58a952e71a28ab77408b51e7/html5/thumbnails/8.jpg)
8
which gets even better as you scroll
@cjforms
![Page 9: Forms that work, a workshop organised by UX Australia 2015](https://reader035.fdocuments.in/reader035/viewer/2022070510/58a952e71a28ab77408b51e7/html5/thumbnails/9.jpg)
9
http://eastpointpolice.org/SelfArrestForm.htm
![Page 10: Forms that work, a workshop organised by UX Australia 2015](https://reader035.fdocuments.in/reader035/viewer/2022070510/58a952e71a28ab77408b51e7/html5/thumbnails/10.jpg)
10
I’ve been thinking about official forms for ages
Image credit: Caroline Jarrett
![Page 11: Forms that work, a workshop organised by UX Australia 2015](https://reader035.fdocuments.in/reader035/viewer/2022070510/58a952e71a28ab77408b51e7/html5/thumbnails/11.jpg)
11
Which page is the first one in the form?
![Page 12: Forms that work, a workshop organised by UX Australia 2015](https://reader035.fdocuments.in/reader035/viewer/2022070510/58a952e71a28ab77408b51e7/html5/thumbnails/12.jpg)
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
![Page 13: Forms that work, a workshop organised by UX Australia 2015](https://reader035.fdocuments.in/reader035/viewer/2022070510/58a952e71a28ab77408b51e7/html5/thumbnails/13.jpg)
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
![Page 14: Forms that work, a workshop organised by UX Australia 2015](https://reader035.fdocuments.in/reader035/viewer/2022070510/58a952e71a28ab77408b51e7/html5/thumbnails/14.jpg)
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
![Page 15: Forms that work, a workshop organised by UX Australia 2015](https://reader035.fdocuments.in/reader035/viewer/2022070510/58a952e71a28ab77408b51e7/html5/thumbnails/15.jpg)
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
![Page 16: Forms that work, a workshop organised by UX Australia 2015](https://reader035.fdocuments.in/reader035/viewer/2022070510/58a952e71a28ab77408b51e7/html5/thumbnails/16.jpg)
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
![Page 17: Forms that work, a workshop organised by UX Australia 2015](https://reader035.fdocuments.in/reader035/viewer/2022070510/58a952e71a28ab77408b51e7/html5/thumbnails/17.jpg)
Agenda
Introduction: what is a form?
Content and writing questions
Visual design for forms
Form design processes
Form design clinics
17
![Page 18: Forms that work, a workshop organised by UX Australia 2015](https://reader035.fdocuments.in/reader035/viewer/2022070510/58a952e71a28ab77408b51e7/html5/thumbnails/18.jpg)
18
![Page 19: Forms that work, a workshop organised by UX Australia 2015](https://reader035.fdocuments.in/reader035/viewer/2022070510/58a952e71a28ab77408b51e7/html5/thumbnails/19.jpg)
19
![Page 20: Forms that work, a workshop organised by UX Australia 2015](https://reader035.fdocuments.in/reader035/viewer/2022070510/58a952e71a28ab77408b51e7/html5/thumbnails/20.jpg)
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
![Page 21: Forms that work, a workshop organised by UX Australia 2015](https://reader035.fdocuments.in/reader035/viewer/2022070510/58a952e71a28ab77408b51e7/html5/thumbnails/21.jpg)
21
![Page 22: Forms that work, a workshop organised by UX Australia 2015](https://reader035.fdocuments.in/reader035/viewer/2022070510/58a952e71a28ab77408b51e7/html5/thumbnails/22.jpg)
Tip
22
Allow for many, both, and other
Image © nopitycity.comUsed with permission fromRicky Buchanan
![Page 23: Forms that work, a workshop organised by UX Australia 2015](https://reader035.fdocuments.in/reader035/viewer/2022070510/58a952e71a28ab77408b51e7/html5/thumbnails/23.jpg)
23
![Page 24: Forms that work, a workshop organised by UX Australia 2015](https://reader035.fdocuments.in/reader035/viewer/2022070510/58a952e71a28ab77408b51e7/html5/thumbnails/24.jpg)
Where is ‘Confirm Family Name?
24
![Page 25: Forms that work, a workshop organised by UX Australia 2015](https://reader035.fdocuments.in/reader035/viewer/2022070510/58a952e71a28ab77408b51e7/html5/thumbnails/25.jpg)
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
![Page 26: Forms that work, a workshop organised by UX Australia 2015](https://reader035.fdocuments.in/reader035/viewer/2022070510/58a952e71a28ab77408b51e7/html5/thumbnails/26.jpg)
26
![Page 27: Forms that work, a workshop organised by UX Australia 2015](https://reader035.fdocuments.in/reader035/viewer/2022070510/58a952e71a28ab77408b51e7/html5/thumbnails/27.jpg)
Tip Apply changes consistently
Image credit: http://www.glenelg.net used with permission from Fraser Smith27
![Page 28: Forms that work, a workshop organised by UX Australia 2015](https://reader035.fdocuments.in/reader035/viewer/2022070510/58a952e71a28ab77408b51e7/html5/thumbnails/28.jpg)
28
Attempt 2: selected screens
@cjforms
![Page 29: Forms that work, a workshop organised by UX Australia 2015](https://reader035.fdocuments.in/reader035/viewer/2022070510/58a952e71a28ab77408b51e7/html5/thumbnails/29.jpg)
29
![Page 30: Forms that work, a workshop organised by UX Australia 2015](https://reader035.fdocuments.in/reader035/viewer/2022070510/58a952e71a28ab77408b51e7/html5/thumbnails/30.jpg)
TipMake use of information that you already have
Step A
Step B
Step C
Step D
30
![Page 31: Forms that work, a workshop organised by UX Australia 2015](https://reader035.fdocuments.in/reader035/viewer/2022070510/58a952e71a28ab77408b51e7/html5/thumbnails/31.jpg)
31
![Page 32: Forms that work, a workshop organised by UX Australia 2015](https://reader035.fdocuments.in/reader035/viewer/2022070510/58a952e71a28ab77408b51e7/html5/thumbnails/32.jpg)
32
![Page 33: Forms that work, a workshop organised by UX Australia 2015](https://reader035.fdocuments.in/reader035/viewer/2022070510/58a952e71a28ab77408b51e7/html5/thumbnails/33.jpg)
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
![Page 34: Forms that work, a workshop organised by UX Australia 2015](https://reader035.fdocuments.in/reader035/viewer/2022070510/58a952e71a28ab77408b51e7/html5/thumbnails/34.jpg)
34
![Page 35: Forms that work, a workshop organised by UX Australia 2015](https://reader035.fdocuments.in/reader035/viewer/2022070510/58a952e71a28ab77408b51e7/html5/thumbnails/35.jpg)
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
![Page 36: Forms that work, a workshop organised by UX Australia 2015](https://reader035.fdocuments.in/reader035/viewer/2022070510/58a952e71a28ab77408b51e7/html5/thumbnails/36.jpg)
TipMake it easy for users to do the right thing
36
![Page 37: Forms that work, a workshop organised by UX Australia 2015](https://reader035.fdocuments.in/reader035/viewer/2022070510/58a952e71a28ab77408b51e7/html5/thumbnails/37.jpg)
37
And now, from Australia to UK
@cjforms
![Page 38: Forms that work, a workshop organised by UX Australia 2015](https://reader035.fdocuments.in/reader035/viewer/2022070510/58a952e71a28ab77408b51e7/html5/thumbnails/38.jpg)
38
![Page 39: Forms that work, a workshop organised by UX Australia 2015](https://reader035.fdocuments.in/reader035/viewer/2022070510/58a952e71a28ab77408b51e7/html5/thumbnails/39.jpg)
39
![Page 40: Forms that work, a workshop organised by UX Australia 2015](https://reader035.fdocuments.in/reader035/viewer/2022070510/58a952e71a28ab77408b51e7/html5/thumbnails/40.jpg)
40
![Page 41: Forms that work, a workshop organised by UX Australia 2015](https://reader035.fdocuments.in/reader035/viewer/2022070510/58a952e71a28ab77408b51e7/html5/thumbnails/41.jpg)
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
![Page 42: Forms that work, a workshop organised by UX Australia 2015](https://reader035.fdocuments.in/reader035/viewer/2022070510/58a952e71a28ab77408b51e7/html5/thumbnails/42.jpg)
42
Rushers do better
![Page 43: Forms that work, a workshop organised by UX Australia 2015](https://reader035.fdocuments.in/reader035/viewer/2022070510/58a952e71a28ab77408b51e7/html5/thumbnails/43.jpg)
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
![Page 44: Forms that work, a workshop organised by UX Australia 2015](https://reader035.fdocuments.in/reader035/viewer/2022070510/58a952e71a28ab77408b51e7/html5/thumbnails/44.jpg)
How (and why) to print all the thingshttps://designnotes.blog.gov.uk/2015/10/15/how-and-why-to-print-all-the-things/
44
![Page 45: Forms that work, a workshop organised by UX Australia 2015](https://reader035.fdocuments.in/reader035/viewer/2022070510/58a952e71a28ab77408b51e7/html5/thumbnails/45.jpg)
45
![Page 46: Forms that work, a workshop organised by UX Australia 2015](https://reader035.fdocuments.in/reader035/viewer/2022070510/58a952e71a28ab77408b51e7/html5/thumbnails/46.jpg)
46
![Page 47: Forms that work, a workshop organised by UX Australia 2015](https://reader035.fdocuments.in/reader035/viewer/2022070510/58a952e71a28ab77408b51e7/html5/thumbnails/47.jpg)
47
![Page 48: Forms that work, a workshop organised by UX Australia 2015](https://reader035.fdocuments.in/reader035/viewer/2022070510/58a952e71a28ab77408b51e7/html5/thumbnails/48.jpg)
We’re working on autocomplete / autosuggest https://designpatterns.hackpad.com/Autocomplete-autosuggest-type-ahead-l3OHvWUmDml
48
![Page 49: Forms that work, a workshop organised by UX Australia 2015](https://reader035.fdocuments.in/reader035/viewer/2022070510/58a952e71a28ab77408b51e7/html5/thumbnails/49.jpg)
49
![Page 50: Forms that work, a workshop organised by UX Australia 2015](https://reader035.fdocuments.in/reader035/viewer/2022070510/58a952e71a28ab77408b51e7/html5/thumbnails/50.jpg)
50
![Page 51: Forms that work, a workshop organised by UX Australia 2015](https://reader035.fdocuments.in/reader035/viewer/2022070510/58a952e71a28ab77408b51e7/html5/thumbnails/51.jpg)
TipDesign for satisficing and optimising
Satisfice:Choose first plausible option
Optimise:Consider all options,choose the best
51
![Page 52: Forms that work, a workshop organised by UX Australia 2015](https://reader035.fdocuments.in/reader035/viewer/2022070510/58a952e71a28ab77408b51e7/html5/thumbnails/52.jpg)
52
![Page 53: Forms that work, a workshop organised by UX Australia 2015](https://reader035.fdocuments.in/reader035/viewer/2022070510/58a952e71a28ab77408b51e7/html5/thumbnails/53.jpg)
53
![Page 54: Forms that work, a workshop organised by UX Australia 2015](https://reader035.fdocuments.in/reader035/viewer/2022070510/58a952e71a28ab77408b51e7/html5/thumbnails/54.jpg)
Tip
54
![Page 55: Forms that work, a workshop organised by UX Australia 2015](https://reader035.fdocuments.in/reader035/viewer/2022070510/58a952e71a28ab77408b51e7/html5/thumbnails/55.jpg)
The Home Office focused on visas from China
https://gds.blog.gov.uk/2015/02/16/china-tourist-visas-user-research/
55
![Page 56: Forms that work, a workshop organised by UX Australia 2015](https://reader035.fdocuments.in/reader035/viewer/2022070510/58a952e71a28ab77408b51e7/html5/thumbnails/56.jpg)
https://www.gov.uk/design-principles #gdsteam
![Page 57: Forms that work, a workshop organised by UX Australia 2015](https://reader035.fdocuments.in/reader035/viewer/2022070510/58a952e71a28ab77408b51e7/html5/thumbnails/57.jpg)
#gdsteam@timpaul @cjforms
![Page 58: Forms that work, a workshop organised by UX Australia 2015](https://reader035.fdocuments.in/reader035/viewer/2022070510/58a952e71a28ab77408b51e7/html5/thumbnails/58.jpg)
#gdsteam@timpaul @cjforms
Google ‘service manual form structure’
![Page 59: Forms that work, a workshop organised by UX Australia 2015](https://reader035.fdocuments.in/reader035/viewer/2022070510/58a952e71a28ab77408b51e7/html5/thumbnails/59.jpg)
#gdsteam@timpaul @cjforms
![Page 60: Forms that work, a workshop organised by UX Australia 2015](https://reader035.fdocuments.in/reader035/viewer/2022070510/58a952e71a28ab77408b51e7/html5/thumbnails/60.jpg)
#gdsteam@timpaul @cjforms
![Page 61: Forms that work, a workshop organised by UX Australia 2015](https://reader035.fdocuments.in/reader035/viewer/2022070510/58a952e71a28ab77408b51e7/html5/thumbnails/61.jpg)
#gdsteam@timpaul @cjforms
![Page 62: Forms that work, a workshop organised by UX Australia 2015](https://reader035.fdocuments.in/reader035/viewer/2022070510/58a952e71a28ab77408b51e7/html5/thumbnails/62.jpg)
Please join the discussionshttps://designpatterns.hackpad.com
62
![Page 63: Forms that work, a workshop organised by UX Australia 2015](https://reader035.fdocuments.in/reader035/viewer/2022070510/58a952e71a28ab77408b51e7/html5/thumbnails/63.jpg)
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
![Page 64: Forms that work, a workshop organised by UX Australia 2015](https://reader035.fdocuments.in/reader035/viewer/2022070510/58a952e71a28ab77408b51e7/html5/thumbnails/64.jpg)
64
Jessica Enders@formulate
![Page 65: Forms that work, a workshop organised by UX Australia 2015](https://reader035.fdocuments.in/reader035/viewer/2022070510/58a952e71a28ab77408b51e7/html5/thumbnails/65.jpg)
65
Gerry Gaffney
@gerrygaffney
Information & Design
Designing for humans
![Page 66: Forms that work, a workshop organised by UX Australia 2015](https://reader035.fdocuments.in/reader035/viewer/2022070510/58a952e71a28ab77408b51e7/html5/thumbnails/66.jpg)
66
More slides http://www.slideshare.net/cjforms