Web forms usability
-
Upload
serhiy-baryshniev -
Category
Documents
-
view
625 -
download
1
description
Transcript of Web forms usability
![Page 1: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/1.jpg)
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
![Page 2: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/2.jpg)
What is a form?
— Why forms matter
— What this talk is about
— Three layers of the form
— Processes
Introduction
![Page 3: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/3.jpg)
Why forms matter
— Forms are everywhere
![Page 4: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/4.jpg)
Why forms matter
— Forms are everywhere
— Checkout, registration, data entry
![Page 5: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/5.jpg)
![Page 6: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/6.jpg)
![Page 7: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/7.jpg)
![Page 8: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/8.jpg)
Why forms matter
— For ms are everywhere — Checkout, registration, data entry
— Bad forms can have serious consequences
![Page 9: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/9.jpg)
![Page 10: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/10.jpg)
Why forms matter
— For ms are everywhere — Checkout, registration, data entry — Bad forms can have serious consequences
— Good forms create good experiences
![Page 11: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/11.jpg)
![Page 12: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/12.jpg)
![Page 13: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/13.jpg)
What this talk is about
— How to design good forms
— How to avoid design mistakes
![Page 14: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/14.jpg)
Three layers of the form
— Relationtship
— Conversation
— Appearance
Three layers of the form
![Page 15: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/15.jpg)
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
![Page 16: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/16.jpg)
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
![Page 17: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/17.jpg)
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
![Page 18: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/18.jpg)
Processes
— A messy but typical process
![Page 19: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/19.jpg)
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
![Page 20: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/20.jpg)
Processes
— A m essy but typical process
— Methodical process that actually works
![Page 21: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/21.jpg)
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
![Page 22: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/22.jpg)
Relationship
— Persuading people to answer
— Asking for the right information
Part #1
![Page 23: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/23.jpg)
— If you understand people, you design better forms
Persuading people to answer
![Page 24: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/24.jpg)
— Readers
— Rushers
— Refusers
How people react to forms:
Persuading people to answer
![Page 25: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/25.jpg)
— Establish trust
— Reduce social costs
— Increase rewards
Three rules that influence response rates:
Persuading people to answer
![Page 26: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/26.jpg)
How long can a form be?
Persuading people to answer
![Page 27: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/27.jpg)
Rewards Effort
Trust
Persuading people to answer
![Page 28: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/28.jpg)
— Asking for information that you don’t need is bad
Asking for the right information
![Page 29: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/29.jpg)
— Ask ing for information that you don’t need is bad
— Find out why you need the information
Asking for the right information
![Page 30: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/30.jpg)
— Check with stakeholders
— Check with people who work with the information
Asking for the right information
![Page 31: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/31.jpg)
— 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
![Page 32: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/32.jpg)
— Find out what your competitors and similar organizations are doing
Asking for the right information
![Page 33: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/33.jpg)
Conversation
— Making questions easy to answer
— Writing instructions
— Choosing controls
— Making the form flow easily
Part #2
![Page 34: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/34.jpg)
Making questions easy to answer
How does a user answering a question on a form?
![Page 35: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/35.jpg)
Making questions easy to answer
— Understand the question
![Page 36: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/36.jpg)
Making questions easy to answer
— Understand the question
— Find the answer
![Page 37: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/37.jpg)
Making questions easy to answer
— Understand the question — Find the answer
— Judge the answer
![Page 38: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/38.jpg)
Making questions easy to answer
— Understand the question — Find the answer — Judge the answer
— Put the answer on the form
![Page 39: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/39.jpg)
Making questions easy to answer
How to make these steps as easy as possible?
![Page 40: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/40.jpg)
Making questions easy to answer
— Ask about concepts that the users are familiar with, using words that they understand
![Page 41: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/41.jpg)
Making questions easy to answer
— Ask one question at a time
![Page 42: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/42.jpg)
Making questions easy to answer
— Ask one question at a time
— Turn negative questions into positive ones
![Page 43: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/43.jpg)
Making questions easy to answer
— Ask one question at a time — Turn negative questions into positive ones
— Clarify meaning by careful grouping
![Page 44: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/44.jpg)
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
![Page 45: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/45.jpg)
Making questions easy to answer
— Thi nk about how users find the answer
![Page 46: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/46.jpg)
Making questions easy to answer
— Think about how users find the answer
— Should you offer help about where an answer could come from?
![Page 47: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/47.jpg)
Making questions easy to answer
— Thi nk about whether users will want to answer
![Page 48: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/48.jpg)
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?
![Page 49: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/49.jpg)
Making questions easy to answer
— And think about forcing users into your options
![Page 50: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/50.jpg)
Making questions easy to answer
— And think about forcing users into your options
— Could you offer an “other” option to cater for the unexpected?
![Page 51: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/51.jpg)
Writing instructions
Any text that is not a question is an instruction
![Page 52: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/52.jpg)
Writing instructions
Where to begin?
![Page 53: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/53.jpg)
Writing instructions
— A g ood title that says what the form is for
![Page 54: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/54.jpg)
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
![Page 55: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/55.jpg)
Writing instructions
— Som ething that tells users how to get help
![Page 56: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/56.jpg)
Writing instructions
— Som ething that tells users how to get help
— A thank-you message at the end that says what will happen next
![Page 57: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/57.jpg)
Writing instructions
— Write them in plain language
For better instructions:
![Page 58: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/58.jpg)
Writing instructions
— Wri te them in plain language
— Place them to where they are needed
For better instructions:
![Page 59: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/59.jpg)
Writing instructions
— Write them in plain language — Place them to where they are needed
— Cut the ones that aren’t needed
For better instructions:
![Page 60: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/60.jpg)
Choosing controls
How to choose appropriate controls?
![Page 61: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/61.jpg)
Choosing controls
— Is it more natural to type rather than select?
![Page 62: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/62.jpg)
Choosing controls
— Is it more natural to type rather than select?
— Are the answers easily mistyped?
![Page 63: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/63.jpg)
Choosing controls
— Is it more natural to type rather than select? — Are the answers easily mistyped?
— How many options are there?
![Page 64: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/64.jpg)
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?
![Page 65: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/65.jpg)
Choosing controls
— Are the options visually distinctive?
![Page 66: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/66.jpg)
Choosing controls
— Are the options visually distinctive?
— Does the user need to see the options to understand the question?
![Page 67: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/67.jpg)
Choosing controls
Consider specialist controls — cautiously
![Page 68: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/68.jpg)
Making the form flow easily
Break up long forms by topic
Making the form flow easily
“Information consists of differences that make a difference”
![Page 69: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/69.jpg)
Making the form flow easily
Provide a clear scan line from start to finish
![Page 70: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/70.jpg)
Break up long forms by topic
![Page 71: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/71.jpg)
Making the form flow easily
Break up long forms by topic
![Page 72: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/72.jpg)
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
![Page 73: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/73.jpg)
Making the form flow easily
— Keep to one topic at a time
![Page 74: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/74.jpg)
Making the form flow easily
— Keep to one topic at a time
— Ask anticipated questions before surprising ones, and less intrusive before more intrusive
![Page 75: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/75.jpg)
Making the form flow easily
Use progress indicators
![Page 76: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/76.jpg)
![Page 77: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/77.jpg)
Making the form flow easily
Use progress indicators
— Form is a defined series of steps
![Page 78: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/78.jpg)
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
![Page 79: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/79.jpg)
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
![Page 80: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/80.jpg)
Making the form flow easily
Use summary menus
![Page 81: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/81.jpg)
![Page 82: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/82.jpg)
Making the form flow easily
Use summary menus
— Form don’t really progress
![Page 83: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/83.jpg)
Making the form flow easily
Use summary menus
— Form don’t really progress
— User is allowed to complete the steps in any order
![Page 84: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/84.jpg)
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
![Page 85: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/85.jpg)
Making the form flow easily
— Avoid tabs
![Page 86: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/86.jpg)
Making the form flow easily
— Avoid tabs
— Avoid pages that change without warning
![Page 87: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/87.jpg)
Making the form flow easily
— Avoid tabs — Avoid pages that change without warning
— It’s OK to change pages on user command
![Page 88: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/88.jpg)
Making the form flow easily
Be gentle with errors
![Page 89: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/89.jpg)
Making the form flow easily
Be gentle with errors
— Use validation
![Page 90: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/90.jpg)
Making the form flow easily
Be gentle with errors
— Use validation
— Be polite
![Page 91: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/91.jpg)
Making the form flow easily
Finish the conversation smoothly
![Page 92: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/92.jpg)
Making the form flow easily
— Provide a “thank you”
Finish the conversation smoothly
![Page 93: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/93.jpg)
Making the form flow easily
— Provide a “thank you”
— Let the user know what will happen next
Finish the conversation smoothly
![Page 94: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/94.jpg)
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
![Page 95: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/95.jpg)
Appearance
— Taking care of the details
— Making a form look easy
Part #3
![Page 96: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/96.jpg)
Taking care of the details
Don’t stress over the details
![Page 97: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/97.jpg)
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
![Page 98: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/98.jpg)
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
![Page 99: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/99.jpg)
![Page 100: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/100.jpg)
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
![Page 101: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/101.jpg)
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
![Page 102: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/102.jpg)
Taking care of the details
Top-aligned labels
— The best way in terms of speed
— Long questions
— Consumes screen real estate
![Page 103: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/103.jpg)
Taking care of the details
Right-aligned labels
— Not so many questions
— Short questions
— Easy answers
![Page 104: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/104.jpg)
Taking care of the details
Left-aligned labels
— The slowest option
— Lots of questions
— Long questions
— Complex answers
![Page 105: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/105.jpg)
Taking care of the details
Labels within fields
— Extreme space constraints
— Ensure the right interaction
![Page 106: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/106.jpg)
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
![Page 107: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/107.jpg)
Taking care of the details
Indicating required fields
— Use * for required
— Use (optional) for nonrequired
— Include explanation of the indicator you choose
![Page 108: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/108.jpg)
Taking care of the details
Buttons
— Avoid secondary actions on forms whenever possible
— Otherwise ensure that there is a clear visual distinction
![Page 109: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/109.jpg)
Making a form look easy
“Attractive things works better”
![Page 110: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/110.jpg)
Making a form look easy
— Make sure users know who you are: logos and branding
![Page 111: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/111.jpg)
Making a form look easy
— Make sure users know who you are: logos and branding
— Check your colors for legibility
![Page 112: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/112.jpg)
Making a form look easy
— Make sure users know who you are: logos and branding — Check your colors for legibility
— Use grids
![Page 113: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/113.jpg)
Making a form look easy
— Make sure users know who you are: logos and branding — Check your colors for legibility — Use grids
— Use grouping
![Page 114: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/114.jpg)
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
![Page 115: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/115.jpg)
Testing
— Usa bility testing is easy and gets quick results
Part #4
![Page 116: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/116.jpg)
Testing
— “He y you” test
— If the client can’t afford or is not interested in performing a user test, use personas
![Page 117: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/117.jpg)
Testing
— Test with more users (five is usually enough)
— Try to get “real” users
![Page 118: Web forms usability](https://reader034.fdocuments.in/reader034/viewer/2022051817/548f778db479598e6a8b4e4d/html5/thumbnails/118.jpg)
Thank you.