Upload
serhiy-baryshniev
View
625
Download
1
Embed Size (px)
DESCRIPTION
My recent presentation on web forms that is generally based on Caroline Jarrett's book
Citation preview
U sability of w eb form s Practical guidelines that you can easily follow
November 2012
First Name
Suffix
Last Name
Patient ID Patient Alias
Mr.
Harry
Bradley
535 677 323 632 harry.bradley
Marital Status
Race
Single
White race
Religion
Primary Language
Orthodoxal
Spanish
Middle Name (optional)
Ethnic Group
Mexican
Minneapolis, MN
Generation (optional)
Bill
Junior
Save changes
What is a form?
— Why forms matter
— What this talk is about
— Three layers of the form
— Processes
Introduction
Why forms matter
— Forms are everywhere
Why forms matter
— Forms are everywhere
— Checkout, registration, data entry
Why forms matter
— For ms are everywhere — Checkout, registration, data entry
— Bad forms can have serious consequences
Why forms matter
— For ms are everywhere — Checkout, registration, data entry — Bad forms can have serious consequences
— Good forms create good experiences
What this talk is about
— How to design good forms
— How to avoid design mistakes
Three layers of the form
— Relationtship
— Conversation
— Appearance
Three layers of the form
Three layers of the form
The relationship of a form is the relationship between the organization that is asking the questions and the person who is answering
Three layers of the form
The conversation of a form comes from the questions that it asks, any other instructions, and the way the form is arranged into topics
Three layers of the form
The appearance of a form is the way that it looks: the arrangement of text, input areas, graphics, and the use of color
Processes
— A messy but typical process
Pull together something logical
for topic order
Write and rewrite questions
First draft appears from somewhere
Try to persuade stakeholders to change
what they want
Jiggle layout
to make the form look tidy
Launch it – no time for testing
Processes
Processes
— A m essy but typical process
— Methodical process that actually works
Relationship AppearanceConversation
Persuading people
to answer
Making questions easy
to answer
Choosing forms controls
Making the form
flow easily
Writing useful instructions
Taking care of the details
Asking for the right
information
Making the form look easy
Testing
Relationship
— Persuading people to answer
— Asking for the right information
Part #1
— If you understand people, you design better forms
Persuading people to answer
— Readers
— Rushers
— Refusers
How people react to forms:
Persuading people to answer
— Establish trust
— Reduce social costs
— Increase rewards
Three rules that influence response rates:
Persuading people to answer
How long can a form be?
Persuading people to answer
Rewards Effort
Trust
Persuading people to answer
— Asking for information that you don’t need is bad
Asking for the right information
— Ask ing for information that you don’t need is bad
— Find out why you need the information
Asking for the right information
— Check with stakeholders
— Check with people who work with the information
Asking for the right information
— Users will assume that you will actually use the information you request, so make sure you do use it in a sensible way
Asking for the right information
— Find out what your competitors and similar organizations are doing
Asking for the right information
Conversation
— Making questions easy to answer
— Writing instructions
— Choosing controls
— Making the form flow easily
Part #2
Making questions easy to answer
How does a user answering a question on a form?
Making questions easy to answer
— Understand the question
Making questions easy to answer
— Understand the question
— Find the answer
Making questions easy to answer
— Understand the question — Find the answer
— Judge the answer
Making questions easy to answer
— Understand the question — Find the answer — Judge the answer
— Put the answer on the form
Making questions easy to answer
How to make these steps as easy as possible?
Making questions easy to answer
— Ask about concepts that the users are familiar with, using words that they understand
Making questions easy to answer
— Ask one question at a time
Making questions easy to answer
— Ask one question at a time
— Turn negative questions into positive ones
Making questions easy to answer
— Ask one question at a time — Turn negative questions into positive ones
— Clarify meaning by careful grouping
Making questions easy to answer
— Ask one question at a time — Turn negative questions into positive ones — Clarify meaning by careful grouping
— Get rid of decision points
Making questions easy to answer
— Thi nk about how users find the answer
Making questions easy to answer
— Think about how users find the answer
— Should you offer help about where an answer could come from?
Making questions easy to answer
— Thi nk about whether users will want to answer
Making questions easy to answer
— Thi nk about whether users will want to answer
— Is this the right moment in the relationship to ask this question?
Making questions easy to answer
— And think about forcing users into your options
Making questions easy to answer
— And think about forcing users into your options
— Could you offer an “other” option to cater for the unexpected?
Writing instructions
Any text that is not a question is an instruction
Writing instructions
Where to begin?
Writing instructions
— A g ood title that says what the form is for
Writing instructions
— A g ood title that says what the form is for
— A list of anything that users might have to gather to answer the questions
Writing instructions
— Som ething that tells users how to get help
Writing instructions
— Som ething that tells users how to get help
— A thank-you message at the end that says what will happen next
Writing instructions
— Write them in plain language
For better instructions:
Writing instructions
— Wri te them in plain language
— Place them to where they are needed
For better instructions:
Writing instructions
— Write them in plain language — Place them to where they are needed
— Cut the ones that aren’t needed
For better instructions:
Choosing controls
How to choose appropriate controls?
Choosing controls
— Is it more natural to type rather than select?
Choosing controls
— Is it more natural to type rather than select?
— Are the answers easily mistyped?
Choosing controls
— Is it more natural to type rather than select? — Are the answers easily mistyped?
— How many options are there?
Choosing controls
— Is it more natural to type rather than select? — Are the answers easily mistyped? — How many options are there?
— Is the user allowed to select more than one option?
Choosing controls
— Are the options visually distinctive?
Choosing controls
— Are the options visually distinctive?
— Does the user need to see the options to understand the question?
Choosing controls
Consider specialist controls — cautiously
Making the form flow easily
Break up long forms by topic
Making the form flow easily
“Information consists of differences that make a difference”
Making the form flow easily
Provide a clear scan line from start to finish
Break up long forms by topic
Making the form flow easily
Break up long forms by topic
Making the form flow easily
Break up long forms by topic
— Crush the fields onto as few pages as possible
— Split across multiple pages by dividing the form into topics
Making the form flow easily
— Keep to one topic at a time
Making the form flow easily
— Keep to one topic at a time
— Ask anticipated questions before surprising ones, and less intrusive before more intrusive
Making the form flow easily
Use progress indicators
Making the form flow easily
Use progress indicators
— Form is a defined series of steps
Making the form flow easily
Use progress indicators
— Form is a defined series of steps
— There is a real progress from one step to another
Making the form flow easily
Use progress indicators
— Form is a defined series of steps — There is a real progress from one step to another
— Form can be easily completed in one session
Making the form flow easily
Use summary menus
Making the form flow easily
Use summary menus
— Form don’t really progress
Making the form flow easily
Use summary menus
— Form don’t really progress
— User is allowed to complete the steps in any order
Making the form flow easily
Use summary menus
— Form don’t really progress — User is allowed to complete the steps in any order
— User is allowed to store the form and come back to it later
Making the form flow easily
— Avoid tabs
Making the form flow easily
— Avoid tabs
— Avoid pages that change without warning
Making the form flow easily
— Avoid tabs — Avoid pages that change without warning
— It’s OK to change pages on user command
Making the form flow easily
Be gentle with errors
Making the form flow easily
Be gentle with errors
— Use validation
Making the form flow easily
Be gentle with errors
— Use validation
— Be polite
Making the form flow easily
Finish the conversation smoothly
Making the form flow easily
— Provide a “thank you”
Finish the conversation smoothly
Making the form flow easily
— Provide a “thank you”
— Let the user know what will happen next
Finish the conversation smoothly
Making the form flow easily
— Provide a “thank you” — Let the user know what will happen next
— Offer a suitable next landing point within your website
Finish the conversation smoothly
Appearance
— Taking care of the details
— Making a form look easy
Part #3
Taking care of the details
Don’t stress over the details
Taking care of the details
Don’t stress over the details
— Decide on one way to deal with each detail and then stick to it
Taking care of the details
Don’t stress over the details
— Decide on one way to deal with each detail and then stick to it
— Create a mini-style guide for your team or organization
Taking care of the details
Don’t stress over the details
— Decide on one way to deal with each detail and then stick to it — Create a mini-style guide for your team or organization
— Be flexible
Taking care of the details
Labels
— Stick the label to its field
— Don’t use colons
— Use sentence case
— Labels in bold are harder to read
Taking care of the details
Top-aligned labels
— The best way in terms of speed
— Long questions
— Consumes screen real estate
Taking care of the details
Right-aligned labels
— Not so many questions
— Short questions
— Easy answers
Taking care of the details
Left-aligned labels
— The slowest option
— Lots of questions
— Long questions
— Complex answers
Taking care of the details
Labels within fields
— Extreme space constraints
— Ensure the right interaction
Taking care of the details
Fields
— Different field lenghts provide meaningful affordances
— When there’s clearly more than one way to format an answer, consider flexible field
Taking care of the details
Indicating required fields
— Use * for required
— Use (optional) for nonrequired
— Include explanation of the indicator you choose
Taking care of the details
Buttons
— Avoid secondary actions on forms whenever possible
— Otherwise ensure that there is a clear visual distinction
Making a form look easy
“Attractive things works better”
Making a form look easy
— Make sure users know who you are: logos and branding
Making a form look easy
— Make sure users know who you are: logos and branding
— Check your colors for legibility
Making a form look easy
— Make sure users know who you are: logos and branding — Check your colors for legibility
— Use grids
Making a form look easy
— Make sure users know who you are: logos and branding — Check your colors for legibility — Use grids
— Use grouping
Making a form look easy
— Make sure users know who you are: logos and branding — Check your colors for legibility — Use grids — Use grouping
— Avoid two-column forms
Testing
— Usa bility testing is easy and gets quick results
Part #4
Testing
— “He y you” test
— If the client can’t afford or is not interested in performing a user test, use personas
Testing
— Test with more users (five is usually enough)
— Try to get “real” users
Thank you.