SlideShare a Scribd company logo
1 of 30
Label placement in forms Caroline Jarrett and other time-consuming forms controversies FORMS CONTENT
A bit about me: Caroline Jarrett ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
And now, a word from our sponsor ,[object Object],[object Object],[object Object],Jarrett and Gaffney (2009) “ Forms that work: Designing web forms for usability” Morgan Kaufmann
Sneak preview: next UX magazine is on forms ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Where people look on forms Reading forms is different  from using them The ‘narrow focus’ effect – and what  it means for placing labels
Reading forms is different from using them
Are my observations confirmed  by eye-tracking? A look at some heat maps ,[object Object]
Ordering a prospectus ,[object Object],[object Object]
One person’s  heat map ,[object Object],[object Object]
An aggregate ,[object Object],[object Object]
The ‘narrow focus’ means big jumps for the users’ eyes.
Mario Penzo’s recommendation: “Place labels above or right-align them” ,[object Object],[object Object],[object Object],[object Object],Penzo, M (2006) Label Placement in Forms http://www.uxmatters.com/MT/archives/000107.php ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Easy questions and hard questions prompt different patterns of reading ,[object Object],[object Object],[object Object],[object Object]
Update:  Labels above the fields may be no faster  than right aligned labels ,[object Object],[object Object],[object Object],[object Object]
A section of a form where I think left-aligned labels really are necessary
Users can survive a lot
Decide on where to put your labels according to your users, their goals, and the questions Your users and  their goals .... Your questions ... Put the labels ... Willing to reveal the answers; filling in  the form helps them to achieve a goal Simple, only a few of them Above Simple but lots of them Right-justified Complex Left-justified Unwilling to reveal answers or reluctant to fill in the form Simple or complex Left-justified (you’ll need more explanation)
Let’s stress about details  Colons at the end of labels? Sentence or title case? Required field indicator?
Colons at the ends of labels are  a matter of considerable debate  ,[object Object],http://www.usabilitynews.com/news/article3200.asp and  http://www.usabilitynews.com/news/article3112.asp
Sentence or title case? Sentence case wins. (But only just). ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],http://www.usabilitynews.com/news/article2594.asp
Required field indicator? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Miriam Frost Jungwirth, posting on CHI-WEB, 19 April 2007 There’s a theme developing here ....
An example of required field indicators at the wrong end of the field
An example of required field indicators using colour alone
Two ways to trip up your users 1. It’s not OK and I don’t want to Cancel 2. ‘False ends’
Buttons really do matter to users.
1. Label the button with what it does. 2.  If the user doesn't want to do it,  don't have a button for it. ,[object Object],[object Object],[object Object],http://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.1.2.8
‘ False ends’: if it feels like the end of  the conversation, users will stop
‘ False ends’: if it feels like the end of  the conversation, users will stop
Avoid screens in the middle of forms that  have no fields for user entries ,[object Object],[object Object]
Question time Caroline Jarrett [email_address] 01525 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”

More Related Content

Similar to UKUPA Feb 09 Caroline Jarrett Visual Forms

Jordan Kasteler Usability SEO
Jordan Kasteler Usability SEOJordan Kasteler Usability SEO
Jordan Kasteler Usability SEO
Jordan Kasteler
 
Usability Test Overview
Usability Test OverviewUsability Test Overview
Usability Test Overview
Ariadne Rooney
 
Discussion postArchitectural Styles Please respond to the fo.docx
Discussion postArchitectural Styles Please respond to the fo.docxDiscussion postArchitectural Styles Please respond to the fo.docx
Discussion postArchitectural Styles Please respond to the fo.docx
madlynplamondon
 

Similar to UKUPA Feb 09 Caroline Jarrett Visual Forms (20)

Label placement on forms, STC Seattle 2010
Label placement on forms, STC Seattle 2010Label placement on forms, STC Seattle 2010
Label placement on forms, STC Seattle 2010
 
Labels on forms for STC Dallas, 2010
Labels on forms  for STC Dallas, 2010Labels on forms  for STC Dallas, 2010
Labels on forms for STC Dallas, 2010
 
A Comprehensive Guideline for Designing Most Efficient Web Forms: On Structur...
A Comprehensive Guideline for Designing Most Efficient Web Forms: On Structur...A Comprehensive Guideline for Designing Most Efficient Web Forms: On Structur...
A Comprehensive Guideline for Designing Most Efficient Web Forms: On Structur...
 
Jordan Kasteler Usability SEO
Jordan Kasteler Usability SEOJordan Kasteler Usability SEO
Jordan Kasteler Usability SEO
 
Jordan Kasteler Usability SEO
Jordan Kasteler Usability SEOJordan Kasteler Usability SEO
Jordan Kasteler Usability SEO
 
Typeform - Build Conversational Forms And Collect Data
Typeform - Build Conversational Forms And Collect DataTypeform - Build Conversational Forms And Collect Data
Typeform - Build Conversational Forms And Collect Data
 
Designing usable forms
Designing usable formsDesigning usable forms
Designing usable forms
 
How to design forms that deliver a great user experience
How to design forms that deliver a great user experienceHow to design forms that deliver a great user experience
How to design forms that deliver a great user experience
 
Usability Test Overview
Usability Test OverviewUsability Test Overview
Usability Test Overview
 
Form Design: Best Practices to Improve Conversions
Form Design: Best Practices to Improve ConversionsForm Design: Best Practices to Improve Conversions
Form Design: Best Practices to Improve Conversions
 
Ux tips to design better online forms
Ux tips to design better online formsUx tips to design better online forms
Ux tips to design better online forms
 
Designing Digital Forms
Designing Digital FormsDesigning Digital Forms
Designing Digital Forms
 
Tips and tricks for web form usability
Tips and tricks for web form usabilityTips and tricks for web form usability
Tips and tricks for web form usability
 
Measuring UX
Measuring UXMeasuring UX
Measuring UX
 
Front End Frameworks - are they accessible
Front End Frameworks - are they accessibleFront End Frameworks - are they accessible
Front End Frameworks - are they accessible
 
Creating and Editing Presentation for ES classes
Creating and Editing Presentation for ES classesCreating and Editing Presentation for ES classes
Creating and Editing Presentation for ES classes
 
Assignment 6
Assignment 6Assignment 6
Assignment 6
 
Building and styling forms
Building and styling formsBuilding and styling forms
Building and styling forms
 
Microsoft Access 2010 - a jargon free guide
Microsoft Access 2010 - a jargon free guideMicrosoft Access 2010 - a jargon free guide
Microsoft Access 2010 - a jargon free guide
 
Discussion postArchitectural Styles Please respond to the fo.docx
Discussion postArchitectural Styles Please respond to the fo.docxDiscussion postArchitectural Styles Please respond to the fo.docx
Discussion postArchitectural Styles Please respond to the fo.docx
 

More from UXPA UK

How can we design drones for 7 year olds by Pae Natwilai
How can we design drones for 7 year olds by Pae NatwilaiHow can we design drones for 7 year olds by Pae Natwilai
How can we design drones for 7 year olds by Pae Natwilai
UXPA UK
 
Food Cloud - Fiona Kelly
Food Cloud - Fiona KellyFood Cloud - Fiona Kelly
Food Cloud - Fiona Kelly
UXPA UK
 

More from UXPA UK (20)

Design for menaing
Design for menaingDesign for menaing
Design for menaing
 
Having a halibut good time with service deisgn
Having a halibut good time with service deisgnHaving a halibut good time with service deisgn
Having a halibut good time with service deisgn
 
The Ethics of Design
The Ethics of DesignThe Ethics of Design
The Ethics of Design
 
When Cambridge Analytica Met Facebook: A story of dark UX and shitty business...
When Cambridge Analytica Met Facebook: A story of dark UX and shitty business...When Cambridge Analytica Met Facebook: A story of dark UX and shitty business...
When Cambridge Analytica Met Facebook: A story of dark UX and shitty business...
 
Designing for Persuasion, Emotion, and Trust
Designing for Persuasion, Emotion, and TrustDesigning for Persuasion, Emotion, and Trust
Designing for Persuasion, Emotion, and Trust
 
Going End to End with Lovehoney
Going End to End with LovehoneyGoing End to End with Lovehoney
Going End to End with Lovehoney
 
Design, death and sex (workers)
Design, death and sex (workers)Design, death and sex (workers)
Design, death and sex (workers)
 
The role of UX design in AI by Tom Woodel
The role of UX design in AI by Tom WoodelThe role of UX design in AI by Tom Woodel
The role of UX design in AI by Tom Woodel
 
How can we design drones for 7 year olds by Pae Natwilai
How can we design drones for 7 year olds by Pae NatwilaiHow can we design drones for 7 year olds by Pae Natwilai
How can we design drones for 7 year olds by Pae Natwilai
 
What AI means for UX by James Clemoes
What AI means for UX by James ClemoesWhat AI means for UX by James Clemoes
What AI means for UX by James Clemoes
 
"Making Accessibility Accessible" by Kirtika Bhuva
"Making Accessibility Accessible" by Kirtika Bhuva"Making Accessibility Accessible" by Kirtika Bhuva
"Making Accessibility Accessible" by Kirtika Bhuva
 
"Designing a Product with Mental Health in Mind" by Zander Brade
"Designing a Product with Mental Health in Mind" by Zander Brade"Designing a Product with Mental Health in Mind" by Zander Brade
"Designing a Product with Mental Health in Mind" by Zander Brade
 
"Real Life Accessibility" by Gavin Evans
"Real Life Accessibility" by Gavin Evans"Real Life Accessibility" by Gavin Evans
"Real Life Accessibility" by Gavin Evans
 
"How to tie your customer design work into the enabling organisation" - by Jo...
"How to tie your customer design work into the enabling organisation" - by Jo..."How to tie your customer design work into the enabling organisation" - by Jo...
"How to tie your customer design work into the enabling organisation" - by Jo...
 
'Mainstream' UX and Games UX - Alistair Greo, Player Research
'Mainstream' UX and Games UX - Alistair Greo, Player Research'Mainstream' UX and Games UX - Alistair Greo, Player Research
'Mainstream' UX and Games UX - Alistair Greo, Player Research
 
Food Cloud - Fiona Kelly
Food Cloud - Fiona KellyFood Cloud - Fiona Kelly
Food Cloud - Fiona Kelly
 
Conservation & The Knowledge Chain - Paul-Jervis Heath, Modern Human
Conservation & The Knowledge Chain - Paul-Jervis Heath, Modern HumanConservation & The Knowledge Chain - Paul-Jervis Heath, Modern Human
Conservation & The Knowledge Chain - Paul-Jervis Heath, Modern Human
 
Finding Kakuma - Mike Gatman, Thoughtworks
Finding Kakuma - Mike Gatman, ThoughtworksFinding Kakuma - Mike Gatman, Thoughtworks
Finding Kakuma - Mike Gatman, Thoughtworks
 
Smart UX - Giles Colborne, cxpartners
Smart UX - Giles Colborne, cxpartners Smart UX - Giles Colborne, cxpartners
Smart UX - Giles Colborne, cxpartners
 
Fjord Trends 2016 - Seema Jain and Celia Romaniuk, Fjord
Fjord Trends 2016 - Seema Jain and Celia Romaniuk, Fjord Fjord Trends 2016 - Seema Jain and Celia Romaniuk, Fjord
Fjord Trends 2016 - Seema Jain and Celia Romaniuk, Fjord
 

Recently uploaded

如何办理(UCL毕业证书)伦敦大学学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCL毕业证书)伦敦大学学院毕业证成绩单本科硕士学位证留信学历认证如何办理(UCL毕业证书)伦敦大学学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCL毕业证书)伦敦大学学院毕业证成绩单本科硕士学位证留信学历认证
ugzga
 
如何办理(UCI毕业证书)加利福尼亚大学尔湾分校毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCI毕业证书)加利福尼亚大学尔湾分校毕业证成绩单本科硕士学位证留信学历认证如何办理(UCI毕业证书)加利福尼亚大学尔湾分校毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCI毕业证书)加利福尼亚大学尔湾分校毕业证成绩单本科硕士学位证留信学历认证
ugzga
 
如何办理(UMN毕业证书)明尼苏达大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UMN毕业证书)明尼苏达大学毕业证成绩单本科硕士学位证留信学历认证如何办理(UMN毕业证书)明尼苏达大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UMN毕业证书)明尼苏达大学毕业证成绩单本科硕士学位证留信学历认证
ugzga
 
如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证
ugzga
 
Abortion Clinic in Springs +27791653574 Springs WhatsApp Abortion Clinic Serv...
Abortion Clinic in Springs +27791653574 Springs WhatsApp Abortion Clinic Serv...Abortion Clinic in Springs +27791653574 Springs WhatsApp Abortion Clinic Serv...
Abortion Clinic in Springs +27791653574 Springs WhatsApp Abortion Clinic Serv...
mikehavy0
 
如何办理(Columbia College毕业证书)纽约市哥伦比亚大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Columbia College毕业证书)纽约市哥伦比亚大学毕业证成绩单本科硕士学位证留信学历认证如何办理(Columbia College毕业证书)纽约市哥伦比亚大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Columbia College毕业证书)纽约市哥伦比亚大学毕业证成绩单本科硕士学位证留信学历认证
ugzga
 
如何办理(UoB毕业证书)伯明翰大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UoB毕业证书)伯明翰大学毕业证成绩单本科硕士学位证留信学历认证如何办理(UoB毕业证书)伯明翰大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UoB毕业证书)伯明翰大学毕业证成绩单本科硕士学位证留信学历认证
ugzga
 
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
yhavx
 
挂科办理天主教大学毕业证成绩单一模一样品质
挂科办理天主教大学毕业证成绩单一模一样品质挂科办理天主教大学毕业证成绩单一模一样品质
挂科办理天主教大学毕业证成绩单一模一样品质
yzeoq
 
一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理
一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理
一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理
thubko
 
如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证
ugzga
 
Design-System - FinTech - Isadora Agency
Design-System - FinTech - Isadora AgencyDesign-System - FinTech - Isadora Agency
Design-System - FinTech - Isadora Agency
Isadora Agency
 
如何办理(Birmingham毕业证书)伯明翰大学学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(Birmingham毕业证书)伯明翰大学学院毕业证成绩单本科硕士学位证留信学历认证如何办理(Birmingham毕业证书)伯明翰大学学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(Birmingham毕业证书)伯明翰大学学院毕业证成绩单本科硕士学位证留信学历认证
ugzga
 

Recently uploaded (20)

如何办理(UCL毕业证书)伦敦大学学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCL毕业证书)伦敦大学学院毕业证成绩单本科硕士学位证留信学历认证如何办理(UCL毕业证书)伦敦大学学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCL毕业证书)伦敦大学学院毕业证成绩单本科硕士学位证留信学历认证
 
如何办理(UCI毕业证书)加利福尼亚大学尔湾分校毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCI毕业证书)加利福尼亚大学尔湾分校毕业证成绩单本科硕士学位证留信学历认证如何办理(UCI毕业证书)加利福尼亚大学尔湾分校毕业证成绩单本科硕士学位证留信学历认证
如何办理(UCI毕业证书)加利福尼亚大学尔湾分校毕业证成绩单本科硕士学位证留信学历认证
 
Solutions For Social Media App Development (1).pptx
Solutions For Social Media App Development (1).pptxSolutions For Social Media App Development (1).pptx
Solutions For Social Media App Development (1).pptx
 
如何办理(UMN毕业证书)明尼苏达大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UMN毕业证书)明尼苏达大学毕业证成绩单本科硕士学位证留信学历认证如何办理(UMN毕业证书)明尼苏达大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UMN毕业证书)明尼苏达大学毕业证成绩单本科硕士学位证留信学历认证
 
如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证
 
Abortion Clinic in Springs +27791653574 Springs WhatsApp Abortion Clinic Serv...
Abortion Clinic in Springs +27791653574 Springs WhatsApp Abortion Clinic Serv...Abortion Clinic in Springs +27791653574 Springs WhatsApp Abortion Clinic Serv...
Abortion Clinic in Springs +27791653574 Springs WhatsApp Abortion Clinic Serv...
 
如何办理(Columbia College毕业证书)纽约市哥伦比亚大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Columbia College毕业证书)纽约市哥伦比亚大学毕业证成绩单本科硕士学位证留信学历认证如何办理(Columbia College毕业证书)纽约市哥伦比亚大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Columbia College毕业证书)纽约市哥伦比亚大学毕业证成绩单本科硕士学位证留信学历认证
 
如何办理(UoB毕业证书)伯明翰大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UoB毕业证书)伯明翰大学毕业证成绩单本科硕士学位证留信学历认证如何办理(UoB毕业证书)伯明翰大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(UoB毕业证书)伯明翰大学毕业证成绩单本科硕士学位证留信学历认证
 
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
 
Edward Boginsky's Trailblazing Contributions to Printing
Edward Boginsky's Trailblazing Contributions to PrintingEdward Boginsky's Trailblazing Contributions to Printing
Edward Boginsky's Trailblazing Contributions to Printing
 
挂科办理天主教大学毕业证成绩单一模一样品质
挂科办理天主教大学毕业证成绩单一模一样品质挂科办理天主教大学毕业证成绩单一模一样品质
挂科办理天主教大学毕业证成绩单一模一样品质
 
一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理
一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理
一模一样英国德比大学毕业证(derby毕业证书)本科学历-国外大学文凭办理
 
如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(ArtEZ毕业证书)ArtEZ艺术学院毕业证成绩单本科硕士学位证留信学历认证
 
Spring Summer 26 Colors Trend Book Peclers Paris
Spring Summer 26 Colors Trend Book Peclers ParisSpring Summer 26 Colors Trend Book Peclers Paris
Spring Summer 26 Colors Trend Book Peclers Paris
 
Academic Portfolio (2017-2021) .pdf
Academic Portfolio (2017-2021)      .pdfAcademic Portfolio (2017-2021)      .pdf
Academic Portfolio (2017-2021) .pdf
 
Design-System - FinTech - Isadora Agency
Design-System - FinTech - Isadora AgencyDesign-System - FinTech - Isadora Agency
Design-System - FinTech - Isadora Agency
 
GBU INDOOR STADIUM CASE STUDY DESCRIBING ITS STRUCTURE
GBU INDOOR STADIUM CASE STUDY DESCRIBING ITS STRUCTUREGBU INDOOR STADIUM CASE STUDY DESCRIBING ITS STRUCTURE
GBU INDOOR STADIUM CASE STUDY DESCRIBING ITS STRUCTURE
 
Spring Summer 2026 Inspirations trend book Peclers Paris
Spring Summer 2026 Inspirations trend book Peclers ParisSpring Summer 2026 Inspirations trend book Peclers Paris
Spring Summer 2026 Inspirations trend book Peclers Paris
 
如何办理(Birmingham毕业证书)伯明翰大学学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(Birmingham毕业证书)伯明翰大学学院毕业证成绩单本科硕士学位证留信学历认证如何办理(Birmingham毕业证书)伯明翰大学学院毕业证成绩单本科硕士学位证留信学历认证
如何办理(Birmingham毕业证书)伯明翰大学学院毕业证成绩单本科硕士学位证留信学历认证
 
TRose UXPA Experience Design Concord .pptx
TRose UXPA Experience Design Concord .pptxTRose UXPA Experience Design Concord .pptx
TRose UXPA Experience Design Concord .pptx
 

UKUPA Feb 09 Caroline Jarrett Visual Forms

  • 1. Label placement in forms Caroline Jarrett and other time-consuming forms controversies FORMS CONTENT
  • 2.
  • 3.
  • 4.
  • 5. Where people look on forms Reading forms is different from using them The ‘narrow focus’ effect – and what it means for placing labels
  • 6. Reading forms is different from using them
  • 7.
  • 8.
  • 9.
  • 10.
  • 11. The ‘narrow focus’ means big jumps for the users’ eyes.
  • 12.
  • 13.
  • 14.
  • 15. A section of a form where I think left-aligned labels really are necessary
  • 17. Decide on where to put your labels according to your users, their goals, and the questions Your users and their goals .... Your questions ... Put the labels ... Willing to reveal the answers; filling in the form helps them to achieve a goal Simple, only a few of them Above Simple but lots of them Right-justified Complex Left-justified Unwilling to reveal answers or reluctant to fill in the form Simple or complex Left-justified (you’ll need more explanation)
  • 18. Let’s stress about details Colons at the end of labels? Sentence or title case? Required field indicator?
  • 19.
  • 20.
  • 21.
  • 22. An example of required field indicators at the wrong end of the field
  • 23. An example of required field indicators using colour alone
  • 24. Two ways to trip up your users 1. It’s not OK and I don’t want to Cancel 2. ‘False ends’
  • 25. Buttons really do matter to users.
  • 26.
  • 27. ‘ False ends’: if it feels like the end of the conversation, users will stop
  • 28. ‘ False ends’: if it feels like the end of the conversation, users will stop
  • 29.
  • 30. Question time Caroline Jarrett [email_address] 01525 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”