SlideShare uma empresa Scribd logo
1 de 33
Design tips
for complex forms
Caroline Jarrett
Clarity 2010 Lisbon
FORMS
CONTENT
Versions of this presentation
• I gave this presentation as part of the Clarity 2010
conference in Lisbon, Portugal in October 2010.
• There is a longer version, for the pre-conference seminar
on Health and Social Services.
– More examples
– More tips.
• There is a similar version for APPU (Associação
Portuguesa de Profissionais de Usabilidade)
– Different examples
• All versions are available at:
http://slideshare.net/cjforms
2
Caroline Jarrett
twitter @cjforms
caroline.jarrett@effortmark.co.uk
3
A lot of forms advice is about forms like this…
4
http://www.lukew.com/resources/articles/PSactions.asp
So what happens if we have to work with this?
5
© Effortmark Ltd, from “Forms that work: Designing web forms for usability"
A complex form
• Lasting power of attorney
for health and personal
affairs
– “Living will”
6
A complex form
• Privacy on
Facebook
7
http://www.nytimes.com/interactive/2010/0
5/12/business/facebook-privacy.html
Relationship Good forms help users to
achieve their goals
8
Tip:
Give them a form when they want a form
• The challenge:
– There are many different forms e.g. according to type of application, jurisdiction, eligibility
The idea:
– Make sure that you have a single decision page
– Get users answering questions as quickly as possible
• Examples:
– Finding a housing benefit form
9
10
11
12
The link I needed was on that page,
but required scrolling. A lot.
13
14
15
16
17
Conversation Good forms ask questions that
users can answer
18
Tip:
Provide a list of materials for users to assemble
• The challenge:
– Users have to gather their answers from a range of different sources
• The complications:
– Users may not realise that they’ll need all sorts of bits and pieces
The idea
– Provide a list of the items that the users will need
Even better idea
– Get users to answer a series of questions about the specific items
• Variation
– Provide a cast of characters (people involved in preparing the form)
19
Application for a
student loan:
typical example
20
Application for a student loan:
slightly better example
21
Tip: Use a summary menu instead of a
progress indicator
• The challenge:
– It helps users if they can see how much they have done on the form,
but the form doesn’t ‘progress’ from screen to screen
The idea
–Use a summary menu so that users can choose
which part of the form to do next
• Example:
US government Central Contractor Registration form
22
The summary menu changes as you finish
chunks of the form
23
Tip:
Work hard to have great save/resume features
• The challenge:
– Users have to assemble data from several sources,
so they are unlikely to fill in the form in one session.
The idea
–Ensure that they can save the form and get back to
where they were without difficulty
–Have a retention policy
• Decide how long you will retain partially-completed forms
• Decide whether or not you will tell the user about this
• Example:
– In a review of job application forms on 6 top-rated UK local government web sites, only one
site had good save and resume features
24
Appearance Good forms look attractive
and easy to read
25
Tip: Avoid two-column forms
• The challenge:
– You have a large number of fields and the form looks dauntingly long
– It’s tempting to use two (or even more) columns to crush
the fields into a smaller space
The idea
– If your users will use the form constantly as part of their everyday
work, do contextual enquiry to find out whether a tightly-packed
layout will be more or less efficient for them
– If your users encounter the form infrequently,
avoid two-column forms
• Examples:
– Two-column forms are easy to mess up, giving a poor reading order
26
Two column form.
What is the reading order?
27
Two column form.
What is the reading order?
28
Two column form.
What is the reading order?
29
Tip: Segment the form by topic;
and if multiple users are involved, by user
• The challenge:
– You have a large number of fields and the form looks dauntingly long
The idea
– Cut the form into smaller sections. It will seem less difficult.
– Don’t go crazy! You want chunks that are big enough to create topics.
• Example:
– not the most complicated, but a type of form many of us are familiar with:
the event submission
30
Splitting everything up makes it look as if
nothing goes together
31
Stripping out some of the lines creates better
chunks (and makes the form look shorter)
32
Question
time
Caroline Jarrett
caroline.jarrett@effortmark.co.uk
@cjforms
+44 1525 370379
I’m a consultant, hire me:
Consultancy: www.effortmark.co.uk
Training: www.usabilitythatworks.com
Free stuff:
Forms advice: www.formsthatwork.com
Editing: www.editingthatworks.com
Columns: www.usabilitynews.com
“Caroline’s Corner”
www.uxmatters.com
“Good Questions”
33

Mais conteúdo relacionado

Semelhante a Shorter version of complex forms at Clarity2010

Your data is great, but does it work for your users
Your data is great, but does it work for your usersYour data is great, but does it work for your users
Your data is great, but does it work for your users
vickybuser
 

Semelhante a Shorter version of complex forms at Clarity2010 (20)

Complex forms-for-upa2010
Complex forms-for-upa2010Complex forms-for-upa2010
Complex forms-for-upa2010
 
Complex forms at Clarity2010
Complex forms at Clarity2010Complex forms at Clarity2010
Complex forms at Clarity2010
 
Ideas for design of complex transactions by @cjforms 2013
Ideas for design of complex transactions by @cjforms 2013Ideas for design of complex transactions by @cjforms 2013
Ideas for design of complex transactions by @cjforms 2013
 
MSc Seminar on Forms Design
MSc Seminar on Forms DesignMSc Seminar on Forms Design
MSc Seminar on Forms Design
 
Your data is great, but does it work for your users
Your data is great, but does it work for your usersYour data is great, but does it work for your users
Your data is great, but does it work for your users
 
MBUID survey
MBUID surveyMBUID survey
MBUID survey
 
São Paulo MuleSoft Meetup - Messaging patterns
São Paulo MuleSoft Meetup - Messaging patternsSão Paulo MuleSoft Meetup - Messaging patterns
São Paulo MuleSoft Meetup - Messaging patterns
 
Guerilla Human Computer Interaction and Customer Based Design
Guerilla Human Computer Interaction and Customer Based DesignGuerilla Human Computer Interaction and Customer Based Design
Guerilla Human Computer Interaction and Customer Based Design
 
Danske Bank HELP Universe
Danske Bank HELP UniverseDanske Bank HELP Universe
Danske Bank HELP Universe
 
UX Design Process | Sample Proposal
UX Design Process | Sample Proposal UX Design Process | Sample Proposal
UX Design Process | Sample Proposal
 
Discussing a Topic Map for How to Design a Better Form 2019 March
Discussing a Topic Map for How to Design a Better Form 2019 MarchDiscussing a Topic Map for How to Design a Better Form 2019 March
Discussing a Topic Map for How to Design a Better Form 2019 March
 
Field Research at the Speed of Business
Field Research at the Speed of BusinessField Research at the Speed of Business
Field Research at the Speed of Business
 
Issue-based metrics
Issue-based metricsIssue-based metrics
Issue-based metrics
 
Usability requirements
Usability requirements Usability requirements
Usability requirements
 
DDL Programme Meeting Oct12
DDL Programme Meeting Oct12DDL Programme Meeting Oct12
DDL Programme Meeting Oct12
 
208-09-writing.ppt
208-09-writing.ppt208-09-writing.ppt
208-09-writing.ppt
 
Designing forms for technical specialists by @cjforms
Designing forms for technical specialists by @cjformsDesigning forms for technical specialists by @cjforms
Designing forms for technical specialists by @cjforms
 
The art of problem solving --> ensure you right the right business requiremen...
The art of problem solving --> ensure you right the right business requiremen...The art of problem solving --> ensure you right the right business requiremen...
The art of problem solving --> ensure you right the right business requiremen...
 
Early proposal for how to change our internal collaboration and communication...
Early proposal for how to change our internal collaboration and communication...Early proposal for how to change our internal collaboration and communication...
Early proposal for how to change our internal collaboration and communication...
 
Course buddy fall16_tuesday_group11
Course buddy fall16_tuesday_group11Course buddy fall16_tuesday_group11
Course buddy fall16_tuesday_group11
 

Mais de Clarity2010

Euro clear-presentation est1
Euro clear-presentation est1Euro clear-presentation est1
Euro clear-presentation est1
Clarity2010
 
Euro claro-apresentação
Euro claro-apresentaçãoEuro claro-apresentação
Euro claro-apresentação
Clarity2010
 
Making EU legislation more accessable - William Robinson
Making EU legislation more accessable - William RobinsonMaking EU legislation more accessable - William Robinson
Making EU legislation more accessable - William Robinson
Clarity2010
 
Plain legal French in Canada and in the world - Nicole Ferbach
Plain legal French in Canada and in the world - Nicole FerbachPlain legal French in Canada and in the world - Nicole Ferbach
Plain legal French in Canada and in the world - Nicole Ferbach
Clarity2010
 
Transparency in Financial Disclosure Bill Lutz
Transparency in Financial Disclosure Bill LutzTransparency in Financial Disclosure Bill Lutz
Transparency in Financial Disclosure Bill Lutz
Clarity2010
 
Legal language and technology - Bill Lutz
Legal language and technology - Bill LutzLegal language and technology - Bill Lutz
Legal language and technology - Bill Lutz
Clarity2010
 
Engaging legal help just got easier - Anne Marie Chisnall - Write Ltd
Engaging legal help just got easier - Anne Marie Chisnall - Write LtdEngaging legal help just got easier - Anne Marie Chisnall - Write Ltd
Engaging legal help just got easier - Anne Marie Chisnall - Write Ltd
Clarity2010
 
Plain language in norway’s civil service
Plain language in norway’s civil servicePlain language in norway’s civil service
Plain language in norway’s civil service
Clarity2010
 
Putting a law firm’s precedents into plain language - Daphne Perry
Putting a law firm’s precedents into plain language - Daphne PerryPutting a law firm’s precedents into plain language - Daphne Perry
Putting a law firm’s precedents into plain language - Daphne Perry
Clarity2010
 

Mais de Clarity2010 (20)

Euro clear-presentation est1
Euro clear-presentation est1Euro clear-presentation est1
Euro clear-presentation est1
 
Euro claro-apresentação
Euro claro-apresentaçãoEuro claro-apresentação
Euro claro-apresentação
 
Euro clear-presentation
Euro clear-presentationEuro clear-presentation
Euro clear-presentation
 
Euro klaar algemeen
Euro klaar algemeenEuro klaar algemeen
Euro klaar algemeen
 
Making EU legislation more accessable - William Robinson
Making EU legislation more accessable - William RobinsonMaking EU legislation more accessable - William Robinson
Making EU legislation more accessable - William Robinson
 
Plain legal French in Canada and in the world - Nicole Ferbach
Plain legal French in Canada and in the world - Nicole FerbachPlain legal French in Canada and in the world - Nicole Ferbach
Plain legal French in Canada and in the world - Nicole Ferbach
 
Transparency in Financial Disclosure Bill Lutz
Transparency in Financial Disclosure Bill LutzTransparency in Financial Disclosure Bill Lutz
Transparency in Financial Disclosure Bill Lutz
 
Legal language and technology - Bill Lutz
Legal language and technology - Bill LutzLegal language and technology - Bill Lutz
Legal language and technology - Bill Lutz
 
Gautrain team 2
Gautrain   team 2Gautrain   team 2
Gautrain team 2
 
World of warcraft team 4
World of warcraft   team 4World of warcraft   team 4
World of warcraft team 4
 
Engaging legal help just got easier - Anne Marie Chisnall - Write Ltd
Engaging legal help just got easier - Anne Marie Chisnall - Write LtdEngaging legal help just got easier - Anne Marie Chisnall - Write Ltd
Engaging legal help just got easier - Anne Marie Chisnall - Write Ltd
 
Clarity2010 A nova linguagem da Segurança Social
Clarity2010 A nova linguagem da Segurança SocialClarity2010 A nova linguagem da Segurança Social
Clarity2010 A nova linguagem da Segurança Social
 
European plain language diploma
European plain language diplomaEuropean plain language diploma
European plain language diploma
 
Plain language in norway’s civil service
Plain language in norway’s civil servicePlain language in norway’s civil service
Plain language in norway’s civil service
 
Putting a law firm’s precedents into plain language - Daphne Perry
Putting a law firm’s precedents into plain language - Daphne PerryPutting a law firm’s precedents into plain language - Daphne Perry
Putting a law firm’s precedents into plain language - Daphne Perry
 
Creating a culture that values plain language - Karen Baker
Creating a culture that values plain language - Karen BakerCreating a culture that values plain language - Karen Baker
Creating a culture that values plain language - Karen Baker
 
Japan’s Project to Simplify Courtroom Language - Mami Okawara
Japan’s Project  to Simplify Courtroom Language - Mami OkawaraJapan’s Project  to Simplify Courtroom Language - Mami Okawara
Japan’s Project to Simplify Courtroom Language - Mami Okawara
 
Unique Experience of Estonian Language Planning in the EU Texts - Katre Kasem...
Unique Experience of Estonian Language Planning in the EU Texts - Katre Kasem...Unique Experience of Estonian Language Planning in the EU Texts - Katre Kasem...
Unique Experience of Estonian Language Planning in the EU Texts - Katre Kasem...
 
Simple banking, Helena Englund Hjalmarsson
Simple banking, Helena Englund HjalmarssonSimple banking, Helena Englund Hjalmarsson
Simple banking, Helena Englund Hjalmarsson
 
Effective use of visuals in online presentations and e-learning clarity2010 -...
Effective use of visuals in online presentations and e-learning clarity2010 -...Effective use of visuals in online presentations and e-learning clarity2010 -...
Effective use of visuals in online presentations and e-learning clarity2010 -...
 

Último

Just Call Vip call girls diu Escorts ☎️9352988975 Two shot with one girl (diu )
Just Call Vip call girls diu Escorts ☎️9352988975 Two shot with one girl (diu )Just Call Vip call girls diu Escorts ☎️9352988975 Two shot with one girl (diu )
Just Call Vip call girls diu Escorts ☎️9352988975 Two shot with one girl (diu )
gajnagarg
 
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
dollysharma2066
 
➥🔝 7737669865 🔝▻ dharamshala Call-girls in Women Seeking Men 🔝dharamshala🔝 ...
➥🔝 7737669865 🔝▻ dharamshala Call-girls in Women Seeking Men  🔝dharamshala🔝  ...➥🔝 7737669865 🔝▻ dharamshala Call-girls in Women Seeking Men  🔝dharamshala🔝  ...
➥🔝 7737669865 🔝▻ dharamshala Call-girls in Women Seeking Men 🔝dharamshala🔝 ...
amitlee9823
 
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
instagramfab782445
 
Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)
amitlee9823
 
Anupama Kundoo Cost Effective detailed ppt with plans and elevations with det...
Anupama Kundoo Cost Effective detailed ppt with plans and elevations with det...Anupama Kundoo Cost Effective detailed ppt with plans and elevations with det...
Anupama Kundoo Cost Effective detailed ppt with plans and elevations with det...
sriharipichandi
 
➥🔝 7737669865 🔝▻ dehradun Call-girls in Women Seeking Men 🔝dehradun🔝 Escor...
➥🔝 7737669865 🔝▻ dehradun Call-girls in Women Seeking Men  🔝dehradun🔝   Escor...➥🔝 7737669865 🔝▻ dehradun Call-girls in Women Seeking Men  🔝dehradun🔝   Escor...
➥🔝 7737669865 🔝▻ dehradun Call-girls in Women Seeking Men 🔝dehradun🔝 Escor...
amitlee9823
 
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman MuscatAbortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
Abortion pills in Kuwait Cytotec pills in Kuwait
 
RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...
RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...
RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...
amitlee9823
 

Último (20)

The hottest UI and UX Design Trends 2024
The hottest UI and UX Design Trends 2024The hottest UI and UX Design Trends 2024
The hottest UI and UX Design Trends 2024
 
Sector 104, Noida Call girls :8448380779 Model Escorts | 100% verified
Sector 104, Noida Call girls :8448380779 Model Escorts | 100% verifiedSector 104, Noida Call girls :8448380779 Model Escorts | 100% verified
Sector 104, Noida Call girls :8448380779 Model Escorts | 100% verified
 
Just Call Vip call girls diu Escorts ☎️9352988975 Two shot with one girl (diu )
Just Call Vip call girls diu Escorts ☎️9352988975 Two shot with one girl (diu )Just Call Vip call girls diu Escorts ☎️9352988975 Two shot with one girl (diu )
Just Call Vip call girls diu Escorts ☎️9352988975 Two shot with one girl (diu )
 
Jordan_Amanda_DMBS202404_PB1_2024-04.pdf
Jordan_Amanda_DMBS202404_PB1_2024-04.pdfJordan_Amanda_DMBS202404_PB1_2024-04.pdf
Jordan_Amanda_DMBS202404_PB1_2024-04.pdf
 
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
 
❤Personal Whatsapp Number 8617697112 Samba Call Girls 💦✅.
❤Personal Whatsapp Number 8617697112 Samba Call Girls 💦✅.❤Personal Whatsapp Number 8617697112 Samba Call Girls 💦✅.
❤Personal Whatsapp Number 8617697112 Samba Call Girls 💦✅.
 
Sector 105, Noida Call girls :8448380779 Model Escorts | 100% verified
Sector 105, Noida Call girls :8448380779 Model Escorts | 100% verifiedSector 105, Noida Call girls :8448380779 Model Escorts | 100% verified
Sector 105, Noida Call girls :8448380779 Model Escorts | 100% verified
 
Lecture 01 Introduction To Multimedia.pptx
Lecture 01 Introduction To Multimedia.pptxLecture 01 Introduction To Multimedia.pptx
Lecture 01 Introduction To Multimedia.pptx
 
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
 
High Profile Escorts Nerul WhatsApp +91-9930687706, Best Service
High Profile Escorts Nerul WhatsApp +91-9930687706, Best ServiceHigh Profile Escorts Nerul WhatsApp +91-9930687706, Best Service
High Profile Escorts Nerul WhatsApp +91-9930687706, Best Service
 
➥🔝 7737669865 🔝▻ dharamshala Call-girls in Women Seeking Men 🔝dharamshala🔝 ...
➥🔝 7737669865 🔝▻ dharamshala Call-girls in Women Seeking Men  🔝dharamshala🔝  ...➥🔝 7737669865 🔝▻ dharamshala Call-girls in Women Seeking Men  🔝dharamshala🔝  ...
➥🔝 7737669865 🔝▻ dharamshala Call-girls in Women Seeking Men 🔝dharamshala🔝 ...
 
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
 
WhatsApp Chat: 📞 8617697112 Call Girl Baran is experienced
WhatsApp Chat: 📞 8617697112 Call Girl Baran is experiencedWhatsApp Chat: 📞 8617697112 Call Girl Baran is experienced
WhatsApp Chat: 📞 8617697112 Call Girl Baran is experienced
 
Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)
 
VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...
VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...
VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...
 
Anupama Kundoo Cost Effective detailed ppt with plans and elevations with det...
Anupama Kundoo Cost Effective detailed ppt with plans and elevations with det...Anupama Kundoo Cost Effective detailed ppt with plans and elevations with det...
Anupama Kundoo Cost Effective detailed ppt with plans and elevations with det...
 
➥🔝 7737669865 🔝▻ dehradun Call-girls in Women Seeking Men 🔝dehradun🔝 Escor...
➥🔝 7737669865 🔝▻ dehradun Call-girls in Women Seeking Men  🔝dehradun🔝   Escor...➥🔝 7737669865 🔝▻ dehradun Call-girls in Women Seeking Men  🔝dehradun🔝   Escor...
➥🔝 7737669865 🔝▻ dehradun Call-girls in Women Seeking Men 🔝dehradun🔝 Escor...
 
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman MuscatAbortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
 
UI:UX Design and Empowerment Strategies for Underprivileged Transgender Indiv...
UI:UX Design and Empowerment Strategies for Underprivileged Transgender Indiv...UI:UX Design and Empowerment Strategies for Underprivileged Transgender Indiv...
UI:UX Design and Empowerment Strategies for Underprivileged Transgender Indiv...
 
RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...
RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...
RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...
 

Shorter version of complex forms at Clarity2010

  • 1. Design tips for complex forms Caroline Jarrett Clarity 2010 Lisbon FORMS CONTENT
  • 2. Versions of this presentation • I gave this presentation as part of the Clarity 2010 conference in Lisbon, Portugal in October 2010. • There is a longer version, for the pre-conference seminar on Health and Social Services. – More examples – More tips. • There is a similar version for APPU (Associação Portuguesa de Profissionais de Usabilidade) – Different examples • All versions are available at: http://slideshare.net/cjforms 2
  • 4. A lot of forms advice is about forms like this… 4 http://www.lukew.com/resources/articles/PSactions.asp
  • 5. So what happens if we have to work with this? 5 © Effortmark Ltd, from “Forms that work: Designing web forms for usability"
  • 6. A complex form • Lasting power of attorney for health and personal affairs – “Living will” 6
  • 7. A complex form • Privacy on Facebook 7 http://www.nytimes.com/interactive/2010/0 5/12/business/facebook-privacy.html
  • 8. Relationship Good forms help users to achieve their goals 8
  • 9. Tip: Give them a form when they want a form • The challenge: – There are many different forms e.g. according to type of application, jurisdiction, eligibility The idea: – Make sure that you have a single decision page – Get users answering questions as quickly as possible • Examples: – Finding a housing benefit form 9
  • 10. 10
  • 11. 11
  • 12. 12
  • 13. The link I needed was on that page, but required scrolling. A lot. 13
  • 14. 14
  • 15. 15
  • 16. 16
  • 17. 17
  • 18. Conversation Good forms ask questions that users can answer 18
  • 19. Tip: Provide a list of materials for users to assemble • The challenge: – Users have to gather their answers from a range of different sources • The complications: – Users may not realise that they’ll need all sorts of bits and pieces The idea – Provide a list of the items that the users will need Even better idea – Get users to answer a series of questions about the specific items • Variation – Provide a cast of characters (people involved in preparing the form) 19
  • 20. Application for a student loan: typical example 20
  • 21. Application for a student loan: slightly better example 21
  • 22. Tip: Use a summary menu instead of a progress indicator • The challenge: – It helps users if they can see how much they have done on the form, but the form doesn’t ‘progress’ from screen to screen The idea –Use a summary menu so that users can choose which part of the form to do next • Example: US government Central Contractor Registration form 22
  • 23. The summary menu changes as you finish chunks of the form 23
  • 24. Tip: Work hard to have great save/resume features • The challenge: – Users have to assemble data from several sources, so they are unlikely to fill in the form in one session. The idea –Ensure that they can save the form and get back to where they were without difficulty –Have a retention policy • Decide how long you will retain partially-completed forms • Decide whether or not you will tell the user about this • Example: – In a review of job application forms on 6 top-rated UK local government web sites, only one site had good save and resume features 24
  • 25. Appearance Good forms look attractive and easy to read 25
  • 26. Tip: Avoid two-column forms • The challenge: – You have a large number of fields and the form looks dauntingly long – It’s tempting to use two (or even more) columns to crush the fields into a smaller space The idea – If your users will use the form constantly as part of their everyday work, do contextual enquiry to find out whether a tightly-packed layout will be more or less efficient for them – If your users encounter the form infrequently, avoid two-column forms • Examples: – Two-column forms are easy to mess up, giving a poor reading order 26
  • 27. Two column form. What is the reading order? 27
  • 28. Two column form. What is the reading order? 28
  • 29. Two column form. What is the reading order? 29
  • 30. Tip: Segment the form by topic; and if multiple users are involved, by user • The challenge: – You have a large number of fields and the form looks dauntingly long The idea – Cut the form into smaller sections. It will seem less difficult. – Don’t go crazy! You want chunks that are big enough to create topics. • Example: – not the most complicated, but a type of form many of us are familiar with: the event submission 30
  • 31. Splitting everything up makes it look as if nothing goes together 31
  • 32. Stripping out some of the lines creates better chunks (and makes the form look shorter) 32
  • 33. Question time Caroline Jarrett caroline.jarrett@effortmark.co.uk @cjforms +44 1525 370379 I’m a consultant, hire me: Consultancy: www.effortmark.co.uk Training: www.usabilitythatworks.com Free stuff: Forms advice: www.formsthatwork.com Editing: www.editingthatworks.com Columns: www.usabilitynews.com “Caroline’s Corner” www.uxmatters.com “Good Questions” 33