web forms usability

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



The relationship of a form is the relationship between the organization that is asking the questions and the person who is answering


The conversation of a form comes from the questions that it asks, any other instructions, and the way the form is arranged into topics


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:


— Establish trust

— Reduce social costs

— Increase rewards

Three rules that influence response rates:


How long can a form be?


Rewards Effort

Trust


— 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


— Check with stakeholders

— Check with people who work with the information


— Users will assume that you will actually use the information you request, so make sure you do use it in a sensible way


— Find out what your competitors and similar organizations are doing


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?


— Understand the question


— Understand the question

— Find the answer


— Understand the question — Find the answer

— Judge the answer


— Understand the question — Find the answer — Judge the answer

— Put the answer on the form


How to make these steps as easy as possible?


— Ask about concepts that the users are familiar with, using words that they understand


— Ask one question at a time


— Ask one question at a time

— Turn negative questions into positive ones


— Ask one question at a time — Turn negative questions into positive ones

— Clarify meaning by careful grouping


— Ask one question at a time — Turn negative questions into positive ones — Clarify meaning by careful grouping

— Get rid of decision points


— Thi nk about how users find the answer


— Think about how users find the answer

— Should you offer help about where an answer could come from?


— Thi nk about whether users will want to answer


— Thi nk about whether users will want to answer

— Is this the right moment in the relationship to ask this question?


— And think about forcing users into your options


— 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


Where to begin?


— A g ood title that says what the form is for


— 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


— Som ething that tells users how to get help


— Som ething that tells users how to get help

— A thank-you message at the end that says what will happen next


— Write them in plain language

For better instructions:


— Wri te them in plain language

— Place them to where they are needed



— Write them in plain language — Place them to where they are needed

— Cut the ones that aren’t needed


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


“Information consists of differences that make a difference”


Provide a clear scan line from start to finish



— Crush the fields onto as few pages as possible

— Split across multiple pages by dividing the form into topics


— Keep to one topic at a time


— Keep to one topic at a time

— Ask anticipated questions before surprising ones, and less intrusive before more intrusive


Use progress indicators



— Form is a defined series of steps



— Form is a defined series of steps

— There is a real progress from one step to another



— 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


Use summary menus


Use summary menus

— Form don’t really progress


Use summary menus

— Form don’t really progress

— User is allowed to complete the steps in any order


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


— Avoid tabs


— Avoid tabs

— Avoid pages that change without warning


— Avoid tabs — Avoid pages that change without warning

— It’s OK to change pages on user command


Be gentle with errors



— Use validation



— Use validation

— Be polite


Finish the conversation smoothly


— Provide a “thank you”



— Provide a “thank you”

— Let the user know what will happen next



— Provide a “thank you” — Let the user know what will happen next

— Offer a suitable next landing point within your website


Appearance

— Taking care of the details

— Making a form look easy

Part #3


Don’t stress over the details



— Decide on one way to deal with each detail and then stick to it



— Decide on one way to deal with each detail and then stick to it

— Create a mini-style guide for your team or organization



— 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


Labels

— Stick the label to its field

— Don’t use colons

— Use sentence case

— Labels in bold are harder to read


Top-aligned labels

— The best way in terms of speed

— Long questions

— Consumes screen real estate


Right-aligned labels

— Not so many questions

— Short questions

— Easy answers


Left-aligned labels

— The slowest option

— Lots of questions

— Long questions

— Complex answers


Labels within fields

— Extreme space constraints

— Ensure the right interaction


Fields

— Different field lenghts provide meaningful affordances

— When there’s clearly more than one way to format an answer, consider flexible field


Indicating required fields

— Use * for required

— Use (optional) for nonrequired

— Include explanation of the indicator you choose


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”


— Make sure users know who you are: logos and branding


— Make sure users know who you are: logos and branding

— Check your colors for legibility


— Make sure users know who you are: logos and branding — Check your colors for legibility

— Use grids


— Make sure users know who you are: logos and branding — Check your colors for legibility — Use grids

— Use grouping


— 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.

web forms usability

Documents