let's have a lovely chat about forms: @cjforms at wwclondon 2014
DESCRIPTION
Working on forms gives you the opportunity to get involved in process design, service design, interaction design, improved content - and have fun. At the Women Who Code event on 14th October 2014, we chatted about forms in general and then enjoyed doing some forms studios on two forms.TRANSCRIPT
WWC October 2014 Caroline Jarrett @cjforms
Let’s havea lovely chat about forms
2
In honour of Ada Lovelace day:Four people with inspiring ideas about forms
3
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 …
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
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
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
8
Four people with inspiring ideas about forms
9
• Follow her @Formulate
• Find her articles at: http://formulate.com.au/
Jessica Enders, forms and survey expert
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
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
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
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
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/
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
16
More tips http://www.slideshare.net/cjforms
