What is a form? And tips to improve the content and flow of complex forms. Slides by Caroline Jarrett @cjforms. Presented in Melbourne and Sydney, October 2015.

1. Caroline Jarrett @cjforms
Jessica Enders @formulate
#formsthatwork Gerry Gaffney @gerrygaffney
Designing
Forms that
Work

2. Thanks, Donna Spencer
2
Coming up:
UX Australia Redux
Sydney 4th November 2015
Melbourne 12th November 2015

3. 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 clinics
3

4. 4
I’m a forms specialist
I do things like collecting
cartoons about forms
@cjforms

5. 5

6. 6
and having a favourite joke form
@cjforms

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

8. 8
which gets even better as you scroll
@cjforms

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

10. I’ve been thinking about official forms for ages
10 Image credit: Caroline Jarrett

11. Which page is
the first one in
the form?
11

12. 12
“service”
“transaction”
Allows
someone to
achieve a
goal
Asks
questions
and expects
answers
Looks like a
form and
works like a
form
It’s a form
if it …
@cjforms

13. 13
Content
Strategy
and
Plain
Language
Asks
questions
and expects
answers
Interaction
Design
Looks like a
form and
works like a
form
Service
Design
and
Process
Design
Allows
someone to
achieve a
goal
@cjforms

14. 14
Users’
goals
(and business ones)
Allows
someone to
achieve a
goal
Asks
questions
and expects
answers
The answers
you need
The questions
you ask
Looks like a
form and
works like a
form
Where you
put the pixels
@cjforms

15. 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 understand
and answer
Goals achievedLovely and legible.
Simple interaction
Appearance
A great form works well across
all three layers

16. 16 Schema from http://www.formulate.com.au/blog/the-4-layers-of-a-form
Process
Q&A
Goals achieved
Goals achieved
Easy to understand
and answer
Goals achievedLovely and legible.
Simple interaction
Layout
Flow
A great online form works across
all four layers

17. Agenda
Introduction: what is a form?
Content and writing questions
Visual design for forms
Form design processes
Form design clinics
17

18. 18

19. 19

20. 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. 21

22. Tip
Allow for many, both, and other
Image © nopitycity.com
Used with permission from
Ricky Buchanan22

23. 23

24. Where is ‘Confirm
Family Name?
24

25. Tip
If 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. 26

27. Tip
Apply changes consistently
Image credit: http://www.glenelg.net used with permission from Fraser Smith27

28. 28
Attempt 2: selected screens
@cjforms

29. 29

30. Tip
Make use of information
that you already have
Step A
Step B
Step C
Step D
30

31. 31

32. 32

33. 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_M
ontagne,_an_alias_of_OSS_agent_Virginia_Hall.jpg
33

34. 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
35

36. Tip
Make it easy for users
to do the right thing
36

37. 37
And now, from Australia to UK
@cjforms

38. 38

39. 39

40. 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
41

42. Rushers do better
42

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
43

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

45. 45

46. 46

47. 47

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

49. 49

50. 50

51. Tip
Design for satisficing
and optimising
Satisfice:
Choose first plausible option
Optimise:
Consider all options,
choose the best
51

52. 52

53. 53

54. Tip
54

55. The Home Office focused on visas from China
https://gds.blog.gov.uk/2015/02/16/china-tourist-visas-user-research/
55

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

57. #gdsteam@timpaul @cjforms

58. #gdsteam@timpaul @cjforms
Google ‘service manual form structure’

59. #gdsteam@timpaul @cjforms

60. #gdsteam@timpaul @cjforms

61. #gdsteam@timpaul @cjforms

62. Please join the discussions
https://designpatterns.hackpad.com
62

63. 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. 64
Jessica Enders
@formulate

65. 65
Gerry Gaffney
@gerrygaffney
Information & Design
Designing for humans

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

67. 67
twitter @cjforms
caroline.jarrett@effortmark.co.uk
www.effortmark.co.uk
Caroline Jarrett