SlideShare a Scribd company logo
Label placement in forms Caroline Jarrett and other time-consuming forms controversies FORMS CONTENT
A bit about me: Caroline Jarrett My paid-for work: Consultancy:  www.effortmark.co.uk Training:  www.usabilitythatworks.com My free stuff: Forms advice: www.formsthatwork.com Editing tips:  www.editingthatworks.com Columns:  www.usabilitynews.com “Caroline’s Corner”
And now, a word from our sponsor Redish (2007) “ Letting go of the words: writing web content that works” Morgan Kaufmann Jarrett and Gaffney (2009) “ Forms that work: Designing web forms for usability” Morgan Kaufmann
Sneak preview: next UX magazine is on forms Caroline and Gerry have co-edited the next issue of  UPA’s User Experience Magazine Planned articles include: Where users look for help on forms Case study of a complex government form Case study of making a form accessible A forms manager’s perspective on forms and a whole lot more Free to UPA members: www.upassoc.org

Recommended for you

Jordan Kasteler Usability SEO
Jordan Kasteler Usability SEOJordan Kasteler Usability SEO
Jordan Kasteler Usability SEO

This document provides guidance on improving the usability of web forms through proper labeling, field placement, error messaging, and more. It discusses grouping related fields, using descriptive labels, placing labels above fields, clearly indicating required fields, using clear and constructive error messages, and testing forms with users. The document also notes that improving form usability can help with search engine optimization by creating more engaging content that keeps users on site.

Jordan Kasteler Usability SEO
Jordan Kasteler Usability SEOJordan Kasteler Usability SEO
Jordan Kasteler Usability SEO

This document provides guidance on improving the usability of web forms through proper labeling, field placement, error messaging, and more. It discusses grouping related fields, using clear headings and labels, placing labels above fields, highlighting required fields, and providing specific error messages. It also lists many additional resources on form usability best practices.

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

◾Typeform is an online form builder which helps to collect and share data. Typeform differs from other form builders by collecting data in a conversational form with its unique design. http://www.softorwebapp.com/2018/05/typeform-build-conversational-forms.html

typeformonline form builderbuild forms
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 Examples thanks to permission from Ian Roddis, Head of Online Services, The Open University
Ordering a prospectus User has  chosen a prospectus Postcode lookup for the address

Recommended for you

Designing usable forms
Designing usable formsDesigning usable forms
Designing usable forms

When it comes to the usability of forms there is a lot of research and a lot of factors to consider. This presentation reviews a large body of research on various aspects of form usability and user experience. It covers three broad categories: 1. Accessibility, 2. Context & 3. Design

uxusabilityaccessibility
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

Everyone can agree: filling out forms can be painful, boring and long! However, forms allow brands and sites to collect vital information and are often a first or key interaction in a service's interface. With this in mind, it's essential to carefully design forms to make sure you are delivering the best possible user experience! We've compiled a list of a few best practices that can make forms intuitive and playful, creating a more positive relationship between consumers and brands.

uxuiui design
Usability Test Overview
Usability Test OverviewUsability Test Overview
Usability Test Overview

This document provides guidance on completing an assignment to write a white paper comparing two digital tools or apps. It outlines the following steps: 1. Choose two similar tools or apps to compare and identify tasks to complete with each, such as signing up and posting. 2. Test each tool by completing the tasks while taking detailed notes on what works well and any problems. 3. Write a 1000-word white paper for potential users following a specific format. This includes an introduction describing the tools and users, a methods section detailing the test, a results section presenting findings and any issues encountered, and a recommendations section. The document provides examples of tool categories and formatting tips for each white paper section to clearly

One person’s  heat map Small green dots show narrow focus  on labels and left end of fields Red crosses show clicks
An aggregate Narrow focus on the easy questions  at the top Gets messy further down: harder questions, more answers to consider
The ‘narrow focus’ means big jumps for the users’ eyes.
Mario Penzo’s recommendation: “Place labels above or right-align them” Your address Your city Company you work for Number of colleagues Penzo, M (2006) Label Placement in Forms http://www.uxmatters.com/MT/archives/000107.php Your address Your city Company you work for n o  of colleagues Name Surname Age City

Recommended for you

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

Slide presentation for the South Florida User Experience Meetup on Forms. Looks as login forms, form alignment, and best practices.

conversionbestpractices
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

The pleasurable UX behind a form lies in understanding the needs and giving attention to the minute details. Our aim should be to create an effortless interface with clear labels and the most appropriate input field to reduce the effort and cognitive load of the user. Implementing design heuristics like Visibility of status, user’s freedom, consistency; will help you to build a brilliant design and make you understand the reasons behind the form’s UX.

ui ux design agencyui ux design companyproduct development and design
Designing Digital Forms
Designing Digital FormsDesigning Digital Forms
Designing Digital Forms

Overview of the visual principles for designing better digital forms, as well as practical dos and don'ts from real-(web)-life examples. Presented at the front-end meetup in Skopje @ Hacklab KIKA on 09.02.2016.

designuxui
Easy questions and hard questions prompt different patterns of reading Users glance at populated answers Users look mostly at  the left end of the answer space for  easy questions Users read complex instructions quite carefully... ... provided they are on the way to their goal
Update:  Labels above the fields may be no faster  than right aligned labels Das, McEwan and Douglas investigated label placement Using eye-tracking to evaluate label alignment in online forms , October 2008 NordiCHI '08: Proceedings of the 5th Nordic conference on Human-computer interaction: building bridges  Chose a simple form with simple questions Found no difference between labels above the fields and right-aligned labels
A section of a form where I think left-aligned labels really are necessary
Users can survive a lot

Recommended for you

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

The document provides tips for improving the usability of web forms. It discusses the six key components of forms: labels, input fields, actions, help text, messages, and validation. It then gives guidance on each component, such as using sentence case for labels, clearly distinguishing mandatory and optional fields, and providing error messages prominently. The goal is to make forms as easy as possible for users to complete while collecting necessary information.

Measuring UX
Measuring UXMeasuring UX
Measuring UX

The document discusses various methods for measuring user experience (UX), including observing how users interact with an application, listening to their feedback, and analyzing usage data. It recommends conducting task-based observations of users thinking out loud and recording their screens. Surveys can gather general feedback, while specialized questions should avoid bias. Eye tracking and usage logs provide objective data on what users look at and do. Heuristic evaluation involves rating an app against usability best practices. Together, these methods support continuous UX improvement.

uxmeasuring
Front End Frameworks - are they accessible
Front End Frameworks - are they accessibleFront End Frameworks - are they accessible
Front End Frameworks - are they accessible

Frameworks like Bootstrap provide accessibility benefits but also risks if not implemented correctly. Common issues include non-semantic elements styled as buttons or headings, confusing screen reader users. Frameworks also may not fully explain interactive elements like dropdowns and modals. Developers must understand fundamentals of accessibility and not rely solely on frameworks being accessible "out of the box".

a11yaccessibilitybootstrap
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  Pick one style. Stick with it. It’s not worth arguing about. 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). This is sentence case This is Title Case This Is Capitalisation Of Each Initial Letter ISO-9241 part 17 says "Initial upper-case (capital) letter for field labels: To facilitate readability, the text field labels begin with an upper-case letter. The rest of the label should contain lower case (small) letters except for cases where the label is a logo, an acronym or language convention that requires each word in the label to begin with a capital letter.“ Sentence case is slightly more legible due to familiarity It’s not worth changing a big suite of forms to fix this http://www.usabilitynews.com/news/article2594.asp

Recommended for you

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

This document provides guidance and questions for students on formatting and editing documents. It discusses formatting elements like fonts, colors, bullets, and lists and their importance. Students are asked questions to help them understand when and how to appropriately apply different formatting options in documents like reports, articles, and emails. They are also tasked with practicing formatting skills in Word and reviewing their abilities in a checklist.

Assignment 6
Assignment 6Assignment 6
Assignment 6

This document provides guidance on completing Assignment 6 which involves individually testing and comparing two digital tools or apps. It outlines the steps to complete a usability test of the tools, including choosing two similar tools, performing tasks with each tool while taking notes, and writing a white paper summarizing the findings. The white paper should follow a specific format, including an introduction describing what was tested and why, a methods section detailing the tasks performed, a results section presenting the test findings and any issues encountered, and a recommendation section advising potential users on the tools. Examples of tool categories and specific tools that could be tested are also provided.

Building and styling forms
Building and styling formsBuilding and styling forms
Building and styling forms

A basic tutorial on how to build and style a form using HTML5 and CSS. Done as part of an assignment for CIT.

Required field indicator? Miriam Frost Jungwirth: “ I was once charged with testing that. Seriously. $10,000 of manhours testing asterisk placement. There was no difference in user performance. At all.“ I’m a little more interested in this discussion: Indicators placed to the right of the field are likely to be invisible Put the text describing the indicator at the  top  of the  fields (that is, not at the end of the form and not in the instructions) Use the same indicator in both places (text and next to required field) Use the alt-text ‘required’ (not ‘asterisk’) Always indicate required; don’t switch to indicating optional If you feel the urge to indicate optional, use the full word ‘optional’ Do not use colour on its own as an indicator 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’

Recommended for you

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

This document provides a brief overview and introduction to key features of Microsoft Access 2010 in simple, non-technical terms. It explains what MS Access is used for, how to plan and create a database, as well as how to generate tables, forms, queries and reports. It also highlights some new features in MS Access 2010 and promotes jargon-free training resources available on the provided website.

ms accessms officemicrosoft office
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

Discussion post "Architectural Styles" Please respond to the following: · Analyze two architectural styles of your choosing and, for each, give an example of a real-world application whose software design would benefit by incorporating your chosen style. Justify your response. · Evaluate the driving factors or conditions that affect the selection of an architectural style for a given open-source software application. Provide two examples of these conditions and how they help determine an application’s architectural style. JR’s post states the following:Top of Form Data centric style- a data store will be in the center of the architecture and accessed by other components that update, add, delete or modify the data present within the store (2008). I think this type of design would work best with organizations like Walmart and Amazon. This style is flexible and promotes integrability.  Layered style- divided style is divided into various horizontal layers and each layer has some specific function.  It’s a beneficial style because different individuals/teams can work on different layers that they’re knowledgeable about and most efficient. I think this style would best for bank applications.   I think the budget and the client/users would affect the selected style.  Depending on what type of budget is in place affects where the money is allocated to therefore selecting the most cost-effective options. The user/client affects the style because developers would have to select an option that would be most effective for the client and the end goal.  Reference  https://www.cisco.com/c/en/us/td/docs/solutions/Enterprise/Data_Center/DC_Infra2_5/DCInfra_1.htm NM’s post states the following:Top of Form Architectural Styles" Please respond to the following: Analyze two architectural styles of your choosing and, for each, give an example of a real-world application whose software design would benefit by incorporating your chosen style. Justify your response. The architectural style is a particular pattern that focuses on the large-scale of a system. And it is about selecting, adapting, and integrating several architectural styles in ways that best produce the desired result (Pfleefer & Atlee, 2010). Two architectural styles: Component-based and pipe-and-filter. Component-base is a method of software development whereby systems are created by assembling preexisting components (Graca, 2017). Meaning it reduced design complexity in each part solves smaller problems. Component reuse—reuse algorithm and environment model in a web application. And unit testing—where it eliminates retesting for durable components and reduces the cost of verification. A web developer uses component-based to the created web application to be more composable and performant. And the server API is more application. Pipe-and-filter—system functionality is achieved by passing input data through a sequence of data-transforming components called filters to produce output data (Graca, 201 ...

Design for menaing
Design for menaingDesign for menaing
Design for menaing

This document discusses the concepts of meaning, function, ritual, and myth as they relate to product design. It defines each concept and provides examples of how the meaning of products can change over time, context, gender, age, and culture. The document also describes a study where users and designers evaluated products and assessed whether their meaning was primarily functional, ritual-based, or myth-driven. The study found some differences in perspective between users and designers. Finally, the document presents a framework for designing for meaning that involves understanding pre-existing meanings, creating new meanings through metaphor, and aligning product characteristics to communicate the intended meaning.

uxpadesign
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. “ OK” works – if it makes sense to say “OK” at that point “ Reset” probably doesn’t work Reset Button: INPUT TYPE=RESET An INPUT element with `TYPE=RESET' represents an input option, typically a button, that instructs the user agent to reset the form's fields to their initial states. The VALUE attribute, if present, indicates a label for the input (button). When you are finished, you may submit this request: <input type=submit><br> You may clear the form and start over at any time: <input type=reset> 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

Recommended for you

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

Service Design in practice with Snook and Safety Net Technologies. UXPA (UK) June 2018 event #uxpaDesign.

service designux designuxpauk
The Ethics of Design
The Ethics of DesignThe Ethics of Design
The Ethics of Design

Sophie Freiermuth (Baguette UX) on the ethics of UX design at our April 2018 event on Dark UX — uxpaDark.

dark uxuxpadarkdesign ethics
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...

This document discusses issues related to privacy, data collection, and algorithms on social media platforms. It notes the types of personal data Facebook collects from users, including names, photos, locations, interests and messages. It also lists some rights users have over their data under GDPR regulations. The document advocates for more transparency from companies around how user data is collected and used to generate profits through advertising. It calls for options for users to opt into data collection rather than opt out, and for platforms to consider how bad actors could exploit their systems to prevent misuse of data and user harm.

designux designfacebook
Avoid screens in the middle of forms that  have no fields for user entries Option 1:  save a ‘false end’ screen for the true end of  the conversation Option 2:  include a question that guides users around  the ‘false end’ screen
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

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
Caroline 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, 2010
Caroline 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 SEO
Jordan Kasteler
 
Jordan Kasteler Usability SEO
Jordan Kasteler Usability SEOJordan Kasteler Usability SEO
Jordan Kasteler Usability SEO
Jordan 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 Data
Kaviyarasu Pugaz
 
Designing usable forms
Designing usable formsDesigning usable forms
Designing usable forms
Tarik (Rick) Dzekman
 
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
Idean France
 
Usability Test Overview
Usability Test OverviewUsability Test Overview
Usability Test Overview
Ariadne 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 Conversions
Lauren 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 forms
Fibonalabs
 
Designing Digital Forms
Designing Digital FormsDesigning Digital Forms
Designing Digital Forms
Netcetera
 
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
María del Rosario Almaguer Leal
 
Measuring UX
Measuring UXMeasuring UX
Measuring UX
Michael Le
 
Front End Frameworks - are they accessible
Front End Frameworks - are they accessibleFront End Frameworks - are they accessible
Front End Frameworks - are they accessible
Russ 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 classes
LyndaWillett
 
Assignment 6
Assignment 6Assignment 6
Assignment 6
Ariadne Rooney
 
Building and styling forms
Building and styling formsBuilding and styling forms
Building and styling forms
anna-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 guide
Paul 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.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

Design for menaing
Design for menaingDesign for menaing
Design for menaing
UXPA 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 deisgn
UXPA UK
 
The Ethics of Design
The Ethics of DesignThe Ethics of Design
The Ethics of Design
UXPA 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 Trust
UXPA UK
 
Going End to End with Lovehoney
Going End to End with LovehoneyGoing End to End with Lovehoney
Going End to End with Lovehoney
UXPA 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 Woodel
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
 
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
UXPA UK
 
"Making Accessibility Accessible" by Kirtika Bhuva
"Making Accessibility Accessible" by Kirtika Bhuva"Making Accessibility Accessible" by Kirtika Bhuva
"Making Accessibility Accessible" by Kirtika Bhuva
UXPA 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 Brade
UXPA UK
 
"Real Life Accessibility" by Gavin Evans
"Real Life Accessibility" by Gavin Evans"Real Life Accessibility" by Gavin Evans
"Real Life Accessibility" by Gavin Evans
UXPA 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 Research
UXPA UK
 
Food Cloud - Fiona Kelly
Food Cloud - Fiona KellyFood Cloud - Fiona Kelly
Food Cloud - Fiona Kelly
UXPA 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 Human
UXPA UK
 
Finding Kakuma - Mike Gatman, Thoughtworks
Finding Kakuma - Mike Gatman, ThoughtworksFinding Kakuma - Mike Gatman, Thoughtworks
Finding Kakuma - Mike Gatman, Thoughtworks
UXPA 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
 

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

Doc3boq.docx sjnnw wimow womowmmo wekmomopmp
Doc3boq.docx sjnnw wimow womowmmo wekmomopmpDoc3boq.docx sjnnw wimow womowmmo wekmomopmp
Doc3boq.docx sjnnw wimow womowmmo wekmomopmp
Dhio3
 
一比一原版(ual毕业证书)伦敦艺术大学毕业证如何办理
一比一原版(ual毕业证书)伦敦艺术大学毕业证如何办理一比一原版(ual毕业证书)伦敦艺术大学毕业证如何办理
一比一原版(ual毕业证书)伦敦艺术大学毕业证如何办理
ijk38lw
 
2024_summer_my_dream_from_users_gnjp_20240708
2024_summer_my_dream_from_users_gnjp_202407082024_summer_my_dream_from_users_gnjp_20240708
2024_summer_my_dream_from_users_gnjp_20240708
kousato1
 
Vaishali @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Akshra Ojha Top Model Safe
Vaishali @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Akshra Ojha Top Model SafeVaishali @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Akshra Ojha Top Model Safe
Vaishali @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Akshra Ojha Top Model Safe
anany pandey$A17
 
2024_summer_my_dream_from_gnjpuser_20240708
2024_summer_my_dream_from_gnjpuser_202407082024_summer_my_dream_from_gnjpuser_20240708
2024_summer_my_dream_from_gnjpuser_20240708
kousato1
 
Dwarka @ℂall @Girls ꧁❤ 9873777170 ❤꧂Fabulous sonam Mehra Top Model Safe
Dwarka @ℂall @Girls ꧁❤ 9873777170 ❤꧂Fabulous sonam Mehra Top Model SafeDwarka @ℂall @Girls ꧁❤ 9873777170 ❤꧂Fabulous sonam Mehra Top Model Safe
Dwarka @ℂall @Girls ꧁❤ 9873777170 ❤꧂Fabulous sonam Mehra Top Model Safe
Jinni singh$A17
 
de-on-thi-vstep-bac-4.pdf vjknvjknvkjdnvjkdnvj
de-on-thi-vstep-bac-4.pdf vjknvjknvkjdnvjkdnvjde-on-thi-vstep-bac-4.pdf vjknvjknvkjdnvjkdnvj
de-on-thi-vstep-bac-4.pdf vjknvjknvkjdnvjkdnvj
92nqjwr76x
 
With Fear For Our Democracy I Dissent Shirt
With Fear For Our Democracy I Dissent ShirtWith Fear For Our Democracy I Dissent Shirt
With Fear For Our Democracy I Dissent Shirt
TeeFusion
 
Design Impulse: Boost the power of design
Design Impulse: Boost the power of designDesign Impulse: Boost the power of design
Design Impulse: Boost the power of design
Pieter van Langen
 
Vasant Kunj @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Vishakha Singla Top Model Safe
Vasant Kunj @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Vishakha Singla Top Model SafeVasant Kunj @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Vishakha Singla Top Model Safe
Vasant Kunj @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Vishakha Singla Top Model Safe
kumkum tuteja$A17
 
An Introduction to Housing: Core Concepts and Historical Evolution from Prehi...
An Introduction to Housing: Core Concepts and Historical Evolution from Prehi...An Introduction to Housing: Core Concepts and Historical Evolution from Prehi...
An Introduction to Housing: Core Concepts and Historical Evolution from Prehi...
Aditi Sh.
 
Mahipalpur @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Arti Singh Top Model Safe
Mahipalpur @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Arti Singh Top Model SafeMahipalpur @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Arti Singh Top Model Safe
Mahipalpur @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Arti Singh Top Model Safe
tarun sharma$A17
 
Mastering Web Design: Essential Principles and Techniques for Modern Websites
Mastering Web Design: Essential Principles and Techniques for Modern WebsitesMastering Web Design: Essential Principles and Techniques for Modern Websites
Mastering Web Design: Essential Principles and Techniques for Modern Websites
webOdoctor Inc
 
Ghaziabad @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Neha Singla Top Model Safe
Ghaziabad @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Neha Singla Top Model SafeGhaziabad @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Neha Singla Top Model Safe
Ghaziabad @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Neha Singla Top Model Safe
nikhilkumarji0156
 
Preserving-the-Essence-A-Journey-in-Visual-Identity.pdf
Preserving-the-Essence-A-Journey-in-Visual-Identity.pdfPreserving-the-Essence-A-Journey-in-Visual-Identity.pdf
Preserving-the-Essence-A-Journey-in-Visual-Identity.pdf
Mostafa Abd Elrahman
 
Right Choice Landscaping offers exceptional villa landscape maintenance servi...
Right Choice Landscaping offers exceptional villa landscape maintenance servi...Right Choice Landscaping offers exceptional villa landscape maintenance servi...
Right Choice Landscaping offers exceptional villa landscape maintenance servi...
rightchoicelandscapi
 
Surface Analysis Civil 3D using different tools
Surface Analysis Civil 3D using different toolsSurface Analysis Civil 3D using different tools
Surface Analysis Civil 3D using different tools
ManashChatterjee3
 
Greater Kailash @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Vishakha Singla Top Model Safe
Greater Kailash @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Vishakha Singla Top Model SafeGreater Kailash @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Vishakha Singla Top Model Safe
Greater Kailash @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Vishakha Singla Top Model Safe
kumkum tuteja$A17
 
Daryaganj @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Ruhi Singla Top Model Safe
Daryaganj @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Ruhi Singla Top Model SafeDaryaganj @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Ruhi Singla Top Model Safe
Daryaganj @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Ruhi Singla Top Model Safe
jiya khan$A17
 
2024_summer_my_dream_gnjp_20240705_ks.pdf
2024_summer_my_dream_gnjp_20240705_ks.pdf2024_summer_my_dream_gnjp_20240705_ks.pdf
2024_summer_my_dream_gnjp_20240705_ks.pdf
kousato1
 

Recently uploaded (20)

Doc3boq.docx sjnnw wimow womowmmo wekmomopmp
Doc3boq.docx sjnnw wimow womowmmo wekmomopmpDoc3boq.docx sjnnw wimow womowmmo wekmomopmp
Doc3boq.docx sjnnw wimow womowmmo wekmomopmp
 
一比一原版(ual毕业证书)伦敦艺术大学毕业证如何办理
一比一原版(ual毕业证书)伦敦艺术大学毕业证如何办理一比一原版(ual毕业证书)伦敦艺术大学毕业证如何办理
一比一原版(ual毕业证书)伦敦艺术大学毕业证如何办理
 
2024_summer_my_dream_from_users_gnjp_20240708
2024_summer_my_dream_from_users_gnjp_202407082024_summer_my_dream_from_users_gnjp_20240708
2024_summer_my_dream_from_users_gnjp_20240708
 
Vaishali @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Akshra Ojha Top Model Safe
Vaishali @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Akshra Ojha Top Model SafeVaishali @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Akshra Ojha Top Model Safe
Vaishali @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Akshra Ojha Top Model Safe
 
2024_summer_my_dream_from_gnjpuser_20240708
2024_summer_my_dream_from_gnjpuser_202407082024_summer_my_dream_from_gnjpuser_20240708
2024_summer_my_dream_from_gnjpuser_20240708
 
Dwarka @ℂall @Girls ꧁❤ 9873777170 ❤꧂Fabulous sonam Mehra Top Model Safe
Dwarka @ℂall @Girls ꧁❤ 9873777170 ❤꧂Fabulous sonam Mehra Top Model SafeDwarka @ℂall @Girls ꧁❤ 9873777170 ❤꧂Fabulous sonam Mehra Top Model Safe
Dwarka @ℂall @Girls ꧁❤ 9873777170 ❤꧂Fabulous sonam Mehra Top Model Safe
 
de-on-thi-vstep-bac-4.pdf vjknvjknvkjdnvjkdnvj
de-on-thi-vstep-bac-4.pdf vjknvjknvkjdnvjkdnvjde-on-thi-vstep-bac-4.pdf vjknvjknvkjdnvjkdnvj
de-on-thi-vstep-bac-4.pdf vjknvjknvkjdnvjkdnvj
 
With Fear For Our Democracy I Dissent Shirt
With Fear For Our Democracy I Dissent ShirtWith Fear For Our Democracy I Dissent Shirt
With Fear For Our Democracy I Dissent Shirt
 
Design Impulse: Boost the power of design
Design Impulse: Boost the power of designDesign Impulse: Boost the power of design
Design Impulse: Boost the power of design
 
Vasant Kunj @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Vishakha Singla Top Model Safe
Vasant Kunj @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Vishakha Singla Top Model SafeVasant Kunj @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Vishakha Singla Top Model Safe
Vasant Kunj @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Vishakha Singla Top Model Safe
 
An Introduction to Housing: Core Concepts and Historical Evolution from Prehi...
An Introduction to Housing: Core Concepts and Historical Evolution from Prehi...An Introduction to Housing: Core Concepts and Historical Evolution from Prehi...
An Introduction to Housing: Core Concepts and Historical Evolution from Prehi...
 
Mahipalpur @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Arti Singh Top Model Safe
Mahipalpur @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Arti Singh Top Model SafeMahipalpur @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Arti Singh Top Model Safe
Mahipalpur @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Arti Singh Top Model Safe
 
Mastering Web Design: Essential Principles and Techniques for Modern Websites
Mastering Web Design: Essential Principles and Techniques for Modern WebsitesMastering Web Design: Essential Principles and Techniques for Modern Websites
Mastering Web Design: Essential Principles and Techniques for Modern Websites
 
Ghaziabad @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Neha Singla Top Model Safe
Ghaziabad @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Neha Singla Top Model SafeGhaziabad @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Neha Singla Top Model Safe
Ghaziabad @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Neha Singla Top Model Safe
 
Preserving-the-Essence-A-Journey-in-Visual-Identity.pdf
Preserving-the-Essence-A-Journey-in-Visual-Identity.pdfPreserving-the-Essence-A-Journey-in-Visual-Identity.pdf
Preserving-the-Essence-A-Journey-in-Visual-Identity.pdf
 
Right Choice Landscaping offers exceptional villa landscape maintenance servi...
Right Choice Landscaping offers exceptional villa landscape maintenance servi...Right Choice Landscaping offers exceptional villa landscape maintenance servi...
Right Choice Landscaping offers exceptional villa landscape maintenance servi...
 
Surface Analysis Civil 3D using different tools
Surface Analysis Civil 3D using different toolsSurface Analysis Civil 3D using different tools
Surface Analysis Civil 3D using different tools
 
Greater Kailash @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Vishakha Singla Top Model Safe
Greater Kailash @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Vishakha Singla Top Model SafeGreater Kailash @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Vishakha Singla Top Model Safe
Greater Kailash @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Vishakha Singla Top Model Safe
 
Daryaganj @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Ruhi Singla Top Model Safe
Daryaganj @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Ruhi Singla Top Model SafeDaryaganj @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Ruhi Singla Top Model Safe
Daryaganj @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Ruhi Singla Top Model Safe
 
2024_summer_my_dream_gnjp_20240705_ks.pdf
2024_summer_my_dream_gnjp_20240705_ks.pdf2024_summer_my_dream_gnjp_20240705_ks.pdf
2024_summer_my_dream_gnjp_20240705_ks.pdf
 

UKUPA Feb 09 Caroline Jarrett Visual Forms

  • 1. Label placement in forms Caroline Jarrett and other time-consuming forms controversies FORMS CONTENT
  • 2. A bit about me: Caroline Jarrett My paid-for work: Consultancy: www.effortmark.co.uk Training: www.usabilitythatworks.com My free stuff: Forms advice: www.formsthatwork.com Editing tips: www.editingthatworks.com Columns: www.usabilitynews.com “Caroline’s Corner”
  • 3. And now, a word from our sponsor Redish (2007) “ Letting go of the words: writing web content that works” Morgan Kaufmann Jarrett and Gaffney (2009) “ Forms that work: Designing web forms for usability” Morgan Kaufmann
  • 4. Sneak preview: next UX magazine is on forms Caroline and Gerry have co-edited the next issue of UPA’s User Experience Magazine Planned articles include: Where users look for help on forms Case study of a complex government form Case study of making a form accessible A forms manager’s perspective on forms and a whole lot more Free to UPA members: www.upassoc.org
  • 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. Are my observations confirmed by eye-tracking? A look at some heat maps Examples thanks to permission from Ian Roddis, Head of Online Services, The Open University
  • 8. Ordering a prospectus User has chosen a prospectus Postcode lookup for the address
  • 9. One person’s heat map Small green dots show narrow focus on labels and left end of fields Red crosses show clicks
  • 10. An aggregate Narrow focus on the easy questions at the top Gets messy further down: harder questions, more answers to consider
  • 11. The ‘narrow focus’ means big jumps for the users’ eyes.
  • 12. Mario Penzo’s recommendation: “Place labels above or right-align them” Your address Your city Company you work for Number of colleagues Penzo, M (2006) Label Placement in Forms http://www.uxmatters.com/MT/archives/000107.php Your address Your city Company you work for n o of colleagues Name Surname Age City
  • 13. Easy questions and hard questions prompt different patterns of reading Users glance at populated answers Users look mostly at the left end of the answer space for easy questions Users read complex instructions quite carefully... ... provided they are on the way to their goal
  • 14. Update: Labels above the fields may be no faster than right aligned labels Das, McEwan and Douglas investigated label placement Using eye-tracking to evaluate label alignment in online forms , October 2008 NordiCHI '08: Proceedings of the 5th Nordic conference on Human-computer interaction: building bridges Chose a simple form with simple questions Found no difference between labels above the fields and right-aligned labels
  • 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. Colons at the ends of labels are a matter of considerable debate Pick one style. Stick with it. It’s not worth arguing about. http://www.usabilitynews.com/news/article3200.asp and http://www.usabilitynews.com/news/article3112.asp
  • 20. Sentence or title case? Sentence case wins. (But only just). This is sentence case This is Title Case This Is Capitalisation Of Each Initial Letter ISO-9241 part 17 says &quot;Initial upper-case (capital) letter for field labels: To facilitate readability, the text field labels begin with an upper-case letter. The rest of the label should contain lower case (small) letters except for cases where the label is a logo, an acronym or language convention that requires each word in the label to begin with a capital letter.“ Sentence case is slightly more legible due to familiarity It’s not worth changing a big suite of forms to fix this http://www.usabilitynews.com/news/article2594.asp
  • 21. Required field indicator? Miriam Frost Jungwirth: “ I was once charged with testing that. Seriously. $10,000 of manhours testing asterisk placement. There was no difference in user performance. At all.“ I’m a little more interested in this discussion: Indicators placed to the right of the field are likely to be invisible Put the text describing the indicator at the top of the fields (that is, not at the end of the form and not in the instructions) Use the same indicator in both places (text and next to required field) Use the alt-text ‘required’ (not ‘asterisk’) Always indicate required; don’t switch to indicating optional If you feel the urge to indicate optional, use the full word ‘optional’ Do not use colour on its own as an indicator Miriam Frost Jungwirth, posting on CHI-WEB, 19 April 2007 There’s a theme developing here ....
  • 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. 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. “ OK” works – if it makes sense to say “OK” at that point “ Reset” probably doesn’t work Reset Button: INPUT TYPE=RESET An INPUT element with `TYPE=RESET' represents an input option, typically a button, that instructs the user agent to reset the form's fields to their initial states. The VALUE attribute, if present, indicates a label for the input (button). When you are finished, you may submit this request: <input type=submit><br> You may clear the form and start over at any time: <input type=reset> http://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.1.2.8
  • 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. Avoid screens in the middle of forms that have no fields for user entries Option 1: save a ‘false end’ screen for the true end of the conversation Option 2: include a question that guides users around the ‘false end’ screen
  • 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”