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.