![Page 1: Let's have a lovely chat about forms: @cjforms at WWCLondon 2014](https://reader035.vdocuments.mx/reader035/viewer/2022070302/5470526baf795946438b456b/html5/thumbnails/1.jpg)
WWC October 2014 Caroline Jarrett @cjforms
Let’s havea lovely chat about forms
![Page 2: Let's have a lovely chat about forms: @cjforms at WWCLondon 2014](https://reader035.vdocuments.mx/reader035/viewer/2022070302/5470526baf795946438b456b/html5/thumbnails/2.jpg)
2
In honour of Ada Lovelace day:Four people with inspiring ideas about forms
![Page 3: Let's have a lovely chat about forms: @cjforms at WWCLondon 2014](https://reader035.vdocuments.mx/reader035/viewer/2022070302/5470526baf795946438b456b/html5/thumbnails/3.jpg)
3
![Page 4: Let's have a lovely chat about forms: @cjforms at WWCLondon 2014](https://reader035.vdocuments.mx/reader035/viewer/2022070302/5470526baf795946438b456b/html5/thumbnails/4.jpg)
4
“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 …
![Page 5: Let's have a lovely chat about forms: @cjforms at WWCLondon 2014](https://reader035.vdocuments.mx/reader035/viewer/2022070302/5470526baf795946438b456b/html5/thumbnails/5.jpg)
5
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
![Page 6: Let's have a lovely chat about forms: @cjforms at WWCLondon 2014](https://reader035.vdocuments.mx/reader035/viewer/2022070302/5470526baf795946438b456b/html5/thumbnails/6.jpg)
6
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
![Page 7: Let's have a lovely chat about forms: @cjforms at WWCLondon 2014](https://reader035.vdocuments.mx/reader035/viewer/2022070302/5470526baf795946438b456b/html5/thumbnails/7.jpg)
7 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 8: Let's have a lovely chat about forms: @cjforms at WWCLondon 2014](https://reader035.vdocuments.mx/reader035/viewer/2022070302/5470526baf795946438b456b/html5/thumbnails/8.jpg)
8
Four people with inspiring ideas about forms
![Page 9: Let's have a lovely chat about forms: @cjforms at WWCLondon 2014](https://reader035.vdocuments.mx/reader035/viewer/2022070302/5470526baf795946438b456b/html5/thumbnails/9.jpg)
9
• Follow her @Formulate
• Find her articles at: http://formulate.com.au/
Jessica Enders, forms and survey expert
![Page 10: Let's have a lovely chat about forms: @cjforms at WWCLondon 2014](https://reader035.vdocuments.mx/reader035/viewer/2022070302/5470526baf795946438b456b/html5/thumbnails/10.jpg)
10
• Follow her @firstwren
• “Information design is a process of orchestrating content visually and
verbally, making the structure salient to people who engage with it.”
Karen Schriver, information designer
![Page 11: Let's have a lovely chat about forms: @cjforms at WWCLondon 2014](https://reader035.vdocuments.mx/reader035/viewer/2022070302/5470526baf795946438b456b/html5/thumbnails/11.jpg)
11
• Follow her @SummersKathryn
• Co-author, “Design to Read” in
“Rhetorical AccessAbility” (2013)
edited by Lisa Meloncon
• Shorter version in User Experience
magazine, linked from
http://www.designtoread.com
Kathryn Summers, low literacy expert
![Page 12: Let's have a lovely chat about forms: @cjforms at WWCLondon 2014](https://reader035.vdocuments.mx/reader035/viewer/2022070302/5470526baf795946438b456b/html5/thumbnails/12.jpg)
12
• Follow her @GinnyRedish
• Even if you already have the first edition of
“Letting go of the words”, buy the 2nd edition
Ginny Redish, writing and usability expert
![Page 13: Let's have a lovely chat about forms: @cjforms at WWCLondon 2014](https://reader035.vdocuments.mx/reader035/viewer/2022070302/5470526baf795946438b456b/html5/thumbnails/13.jpg)
13
1. Don’t look at it.
2. Choose a persona and write the story of why
that persona is filling in this form.
3. Fill in the form as that persona, as honestly as
you can.
4. Now look at it.
How did it work across the three layers?• Appearance• Conversation• Relationship
How to look at a form
![Page 14: Let's have a lovely chat about forms: @cjforms at WWCLondon 2014](https://reader035.vdocuments.mx/reader035/viewer/2022070302/5470526baf795946438b456b/html5/thumbnails/14.jpg)
14
1. Don’t look at it.
2. Choose a persona and write the story of why
that persona is filling in this form.
3. Fill in the form as that persona, as honestly as
you can.
4. Now look at it.
How did it work across the three layers?• Appearance• Conversation• Relationship
Now you try it: ‘Get a quote’ on http://systango.com/
![Page 15: Let's have a lovely chat about forms: @cjforms at WWCLondon 2014](https://reader035.vdocuments.mx/reader035/viewer/2022070302/5470526baf795946438b456b/html5/thumbnails/15.jpg)
15
• “Forms that work”: http://www.formsthatwork.com
• Columns on Uxmatters.com:– Don’t Put Hints Inside Text Boxes in Web Forms
http://www.uxmatters.com/mt/archives/2010/03/dont-put-hints-inside-text-boxes-in-web-forms.php
– Don’t Put Labels Inside Text Boxes (Unless You’re Luke W)http://www.uxmatters.com/mt/archives/2013/02/dont-put-labels-inside-text-boxes-unless-youre-luke-w.php
– The Question Protocol: How to Make Sure Every Form Field Is Necessaryhttp://www.uxmatters.com/mt/archives/2010/06/the-question-protocol-how-to-make-sure-every-form-field-is-necessary.php
– Eye Tracking of Forms and Surveyshttp://www.uxmatters.com/mt/archives/2014/09/eye-tracking-in-user-experience-design.php
Some resources for forms design
![Page 16: Let's have a lovely chat about forms: @cjforms at WWCLondon 2014](https://reader035.vdocuments.mx/reader035/viewer/2022070302/5470526baf795946438b456b/html5/thumbnails/16.jpg)
16
More tips http://www.slideshare.net/cjforms