UKUPA Jan 10 Clare Barnett and Caroline Jarrett: Election Ballot Usability
Caroline Jarrett @cjforms Forms studio. 2 It’s easy to say which page is the form.
Transcript of Caroline Jarrett @cjforms Forms studio. 2 It’s easy to say which page is the form.
![Page 1: Caroline Jarrett @cjforms Forms studio. 2 It’s easy to say which page is the form.](https://reader035.fdocuments.us/reader035/viewer/2022062519/5697bff81a28abf838cbf164/html5/thumbnails/1.jpg)
Caroline Jarrett @cjforms
Formsstudio
![Page 2: Caroline Jarrett @cjforms Forms studio. 2 It’s easy to say which page is the form.](https://reader035.fdocuments.us/reader035/viewer/2022062519/5697bff81a28abf838cbf164/html5/thumbnails/2.jpg)
2
It’s easy to saywhich page is the form
![Page 3: Caroline Jarrett @cjforms Forms studio. 2 It’s easy to say which page is the form.](https://reader035.fdocuments.us/reader035/viewer/2022062519/5697bff81a28abf838cbf164/html5/thumbnails/3.jpg)
3
“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 …
![Page 4: Caroline Jarrett @cjforms Forms studio. 2 It’s easy to say which page is the form.](https://reader035.fdocuments.us/reader035/viewer/2022062519/5697bff81a28abf838cbf164/html5/thumbnails/4.jpg)
4
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 5: Caroline Jarrett @cjforms Forms studio. 2 It’s easy to say which page is the form.](https://reader035.fdocuments.us/reader035/viewer/2022062519/5697bff81a28abf838cbf164/html5/thumbnails/5.jpg)
5
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 6: Caroline Jarrett @cjforms Forms studio. 2 It’s easy to say which page is the form.](https://reader035.fdocuments.us/reader035/viewer/2022062519/5697bff81a28abf838cbf164/html5/thumbnails/6.jpg)
6 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 7: Caroline Jarrett @cjforms Forms studio. 2 It’s easy to say which page is the form.](https://reader035.fdocuments.us/reader035/viewer/2022062519/5697bff81a28abf838cbf164/html5/thumbnails/7.jpg)
7
How to look at a form
![Page 8: Caroline Jarrett @cjforms Forms studio. 2 It’s easy to say which page is the form.](https://reader035.fdocuments.us/reader035/viewer/2022062519/5697bff81a28abf838cbf164/html5/thumbnails/8.jpg)
Step 1
8
Don’t look at it
yet
![Page 9: Caroline Jarrett @cjforms Forms studio. 2 It’s easy to say which page is the form.](https://reader035.fdocuments.us/reader035/viewer/2022062519/5697bff81a28abf838cbf164/html5/thumbnails/9.jpg)
Step 2
9
Choose a personaWrite the story of why thatpersona is filling in the form
![Page 10: Caroline Jarrett @cjforms Forms studio. 2 It’s easy to say which page is the form.](https://reader035.fdocuments.us/reader035/viewer/2022062519/5697bff81a28abf838cbf164/html5/thumbnails/10.jpg)
Step 3
10
Fill in the form as that persona,as honestly as you can
![Page 11: Caroline Jarrett @cjforms Forms studio. 2 It’s easy to say which page is the form.](https://reader035.fdocuments.us/reader035/viewer/2022062519/5697bff81a28abf838cbf164/html5/thumbnails/11.jpg)
Step 4
11
Now look at itHow did it work acrossthe three layers?
AppearanceConversationRelationship
![Page 12: Caroline Jarrett @cjforms Forms studio. 2 It’s easy to say which page is the form.](https://reader035.fdocuments.us/reader035/viewer/2022062519/5697bff81a28abf838cbf164/html5/thumbnails/12.jpg)
12
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 13: Caroline Jarrett @cjforms Forms studio. 2 It’s easy to say which page is the form.](https://reader035.fdocuments.us/reader035/viewer/2022062519/5697bff81a28abf838cbf164/html5/thumbnails/13.jpg)
13
For design patterns and GOV.UK elements, search for:
“service manual design patterns”
Or go to
https://designpatterns.hackpad.com
“Forms that work”: http://www.formsthatwork.com
My blog: http://www.effortmark.co.uk/blog
Some resources for forms design
![Page 14: Caroline Jarrett @cjforms Forms studio. 2 It’s easy to say which page is the form.](https://reader035.fdocuments.us/reader035/viewer/2022062519/5697bff81a28abf838cbf164/html5/thumbnails/14.jpg)
14
More slides http://www.slideshare.net/cjforms