SlideShare une entreprise Scribd logo
1  sur  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”

Contenu connexe

Similaire à UKUPA Feb 09 Caroline Jarrett Visual Forms

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 2010Caroline Jarrett
 
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, 2010Caroline Jarrett
 
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...Katy Slemon
 
Jordan Kasteler Usability SEO
Jordan Kasteler Usability SEOJordan Kasteler Usability SEO
Jordan Kasteler Usability SEOJordan Kasteler
 
Jordan Kasteler Usability SEO
Jordan Kasteler Usability SEOJordan Kasteler Usability SEO
Jordan Kasteler Usability SEOJordan Kasteler
 
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 DataKaviyarasu Pugaz
 
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 experienceIdean France
 
Usability Test Overview
Usability Test OverviewUsability Test Overview
Usability Test OverviewAriadne Rooney
 
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 ConversionsLauren Martin
 
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 formsFibonalabs
 
Designing Digital Forms
Designing Digital FormsDesigning Digital Forms
Designing Digital FormsNetcetera
 
Front End Frameworks - are they accessible
Front End Frameworks - are they accessibleFront End Frameworks - are they accessible
Front End Frameworks - are they accessibleRuss Weakley
 
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 classesLyndaWillett
 
Building and styling forms
Building and styling formsBuilding and styling forms
Building and styling formsanna-anna
 
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 guidePaul Barnett
 
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.docxmadlynplamondon
 

Similaire à 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
 

Plus de UXPA UK

Design for menaing
Design for menaingDesign for menaing
Design for menaingUXPA UK
 
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 deisgnUXPA UK
 
The Ethics of Design
The Ethics of DesignThe Ethics of Design
The Ethics of DesignUXPA UK
 
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...UXPA UK
 
Designing for Persuasion, Emotion, and Trust
Designing for Persuasion, Emotion, and TrustDesigning for Persuasion, Emotion, and Trust
Designing for Persuasion, Emotion, and TrustUXPA UK
 
Going End to End with Lovehoney
Going End to End with LovehoneyGoing End to End with Lovehoney
Going End to End with LovehoneyUXPA UK
 
Design, death and sex (workers)
Design, death and sex (workers)Design, death and sex (workers)
Design, death and sex (workers)UXPA UK
 
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 WoodelUXPA 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 NatwilaiUXPA UK
 
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 ClemoesUXPA UK
 
"Making Accessibility Accessible" by Kirtika Bhuva
"Making Accessibility Accessible" by Kirtika Bhuva"Making Accessibility Accessible" by Kirtika Bhuva
"Making Accessibility Accessible" by Kirtika BhuvaUXPA UK
 
"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 BradeUXPA UK
 
"Real Life Accessibility" by Gavin Evans
"Real Life Accessibility" by Gavin Evans"Real Life Accessibility" by Gavin Evans
"Real Life Accessibility" by Gavin EvansUXPA UK
 
"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...UXPA UK
 
'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 ResearchUXPA UK
 
Food Cloud - Fiona Kelly
Food Cloud - Fiona KellyFood Cloud - Fiona Kelly
Food Cloud - Fiona KellyUXPA UK
 
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 HumanUXPA UK
 
Finding Kakuma - Mike Gatman, Thoughtworks
Finding Kakuma - Mike Gatman, ThoughtworksFinding Kakuma - Mike Gatman, Thoughtworks
Finding Kakuma - Mike Gatman, ThoughtworksUXPA UK
 
Smart UX - Giles Colborne, cxpartners
Smart UX - Giles Colborne, cxpartners Smart UX - Giles Colborne, cxpartners
Smart UX - Giles Colborne, cxpartners UXPA UK
 
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 UXPA UK
 

Plus de 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
 

Dernier

The spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenologyThe spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenologyChristopher Totten
 
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...Rishabh Aryan
 
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDinGeneral Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDinSamar Hossam ElDin Ahmed
 
NBA power point presentation final copy y
NBA power point presentation final copy yNBA power point presentation final copy y
NBA power point presentation final copy ysrajece
 
Karim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 pppppppppppppppKarim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 pppppppppppppppNadaMohammed714321
 
FW25-26 Knit Cut & Sew Trend Book Peclers Paris
FW25-26 Knit Cut & Sew Trend Book Peclers ParisFW25-26 Knit Cut & Sew Trend Book Peclers Paris
FW25-26 Knit Cut & Sew Trend Book Peclers ParisPeclers Paris
 
Karim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 pppppppppppppppKarim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 pppppppppppppppNadaMohammed714321
 
AI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
AI and Design Vol. 2: Navigating the New Frontier - MorgenboosterAI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
AI and Design Vol. 2: Navigating the New Frontier - Morgenbooster1508 A/S
 
Map of St. Louis Parks
Map of St. Louis Parks                              Map of St. Louis Parks
Map of St. Louis Parks CharlottePulte
 
guest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssssguest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssssNadaMohammed714321
 
Niintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptxNiintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptxKevinYaelJimnezSanti
 
CAPITAL GATE CASE STUDY -regional case study.pdf
CAPITAL GATE CASE STUDY -regional case study.pdfCAPITAL GATE CASE STUDY -regional case study.pdf
CAPITAL GATE CASE STUDY -regional case study.pdfAlasAlthaher
 
guest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssssguest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssssNadaMohammed714321
 
simpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdfsimpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdfLucyBonelli
 
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptx
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptxUnit1_Syllbwbnwnwneneneneneneentation_Sem2.pptx
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptxNitish292041
 
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.pptMaking and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.pptJIT KUMAR GUPTA
 
Interior Design for Office a cura di RMG Project Studio
Interior Design for Office a cura di RMG Project StudioInterior Design for Office a cura di RMG Project Studio
Interior Design for Office a cura di RMG Project StudioRMG Project Studio
 
world health day 2024.pptxgbbvggvbhjjjbbbb
world health day 2024.pptxgbbvggvbhjjjbbbbworld health day 2024.pptxgbbvggvbhjjjbbbb
world health day 2024.pptxgbbvggvbhjjjbbbbpreetirao780
 
10 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 202410 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 2024digital learning point
 
Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Rndexperts
 

Dernier (20)

The spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenologyThe spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenology
 
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
 
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDinGeneral Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
 
NBA power point presentation final copy y
NBA power point presentation final copy yNBA power point presentation final copy y
NBA power point presentation final copy y
 
Karim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 pppppppppppppppKarim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 ppppppppppppppp
 
FW25-26 Knit Cut & Sew Trend Book Peclers Paris
FW25-26 Knit Cut & Sew Trend Book Peclers ParisFW25-26 Knit Cut & Sew Trend Book Peclers Paris
FW25-26 Knit Cut & Sew Trend Book Peclers Paris
 
Karim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 pppppppppppppppKarim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 ppppppppppppppp
 
AI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
AI and Design Vol. 2: Navigating the New Frontier - MorgenboosterAI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
AI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
 
Map of St. Louis Parks
Map of St. Louis Parks                              Map of St. Louis Parks
Map of St. Louis Parks
 
guest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssssguest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssss
 
Niintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptxNiintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptx
 
CAPITAL GATE CASE STUDY -regional case study.pdf
CAPITAL GATE CASE STUDY -regional case study.pdfCAPITAL GATE CASE STUDY -regional case study.pdf
CAPITAL GATE CASE STUDY -regional case study.pdf
 
guest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssssguest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssss
 
simpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdfsimpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdf
 
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptx
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptxUnit1_Syllbwbnwnwneneneneneneentation_Sem2.pptx
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptx
 
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.pptMaking and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
 
Interior Design for Office a cura di RMG Project Studio
Interior Design for Office a cura di RMG Project StudioInterior Design for Office a cura di RMG Project Studio
Interior Design for Office a cura di RMG Project Studio
 
world health day 2024.pptxgbbvggvbhjjjbbbb
world health day 2024.pptxgbbvggvbhjjjbbbbworld health day 2024.pptxgbbvggvbhjjjbbbb
world health day 2024.pptxgbbvggvbhjjjbbbb
 
10 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 202410 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 2024
 
Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025
 

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”