Killer form design

Killer Form Design
By: Lauren Martin
@lorielue #SOFLUX

The Conversation
Well, hi there.

Please take out a piece of your own paper, and write the following information:
Your full name (with middle name)
Your mothers maiden name
The city that you live in
Before we get started…

The Conversation
What’s your name?
Hello
Bob
Hi
What is your address … Bob?
What is your address … Bob?
Um ..
Don’t follow me
Why?

“ /
”
A form is a sort of conversation […] without those opportunities to for clarification
-Caroline Jarrett

…If you actually wrote something down, please put it somewhere safe and destroy it later…

Ladies and Gentleman
A demonstration please…

Pop QUIZ! … with prize!!!
What popular flash cards did Stephen Anderson recently create?
Shout Out to Stephen Anderson for letting me borrow his browser demonstration
on twitter @stephenanderson

Ask expected questions before unexpected ones.
Don’t ask question’s beyond your relationship unless you have to, then provide a reason why your asking it.
You can always get extra information later.
Group the conversation into natural breaks.
Is there somewhere else you can get the information?
Consider the context, and the relationship.
People care about what you ask them.
Your form is a conversation

Surgery
Stand back, I’m going in!

A Prototype to Play With:

Okay
Okay
Email should be plenty
Password reset sent to email
Okay, but later…
Most likely required for test, not training materials
Boat info optional, kill it.
Optional, Kill it
Okay

Round 1: The Conversation

But… What about…
Layout, colons, required field indicators and the kitchen sink..

Layout
Left Aligned
Right Aligned
Top Aligned

Wait..
We’re forgetting something.

Where do people look?
Quick Glance
Glance
Longer Glance
Looked longest
Left Aligned
Right Aligned
Top Aligned

Quicker is better, right?
According to a study by Penzo

Is it a short form?
Is the information really easy to fill in?
Do you have to gather answers?
Do you want to fill in the form?
Is the information requested, what you expected?
Is the information sensitive?
Have you filled out this form before?
Speed Racer, slow down!

Layout
Left Aligned
Right Aligned
Top Aligned
Easy scanning.
Make sure inputs are close enough
Good for unfamiliar information
Harder scanning.
Watch out for long and wrapping labels.
Good for repetitive or familiar information
Hard scanning.
Great for short forms
Good for familiar information
Watch out for groupings.

Required Indicator, and Colon Position Don’t really Matter
Best practice is:
Required Indicator Left or Right of label, or Left of input.
Yep, Labels have Colons

Looks Matter
Fact: Pretty things are perceived as being easier to use.

Clowns and Models Both Wear Makeup
Vs.

Use the grid system, line things up.
Use consistent spacing.
Keep advertising and distractions away from the form.
Support scanning and visual hierarchy.
Groupings should be clearly separated.
Primary action should be visually prioritized.
Good contrast, font family, and size for readability.
It’s The Little Things You Do

Round 2: Visual Design

Before and After

Did it help??
How do you know if your changes are making a difference?

Trust but Verify
Gorilla Usability Testing
Metrics and Analytics
Customer Support Call Logs
Analyze Response Data

What about Errors
Please try again.

Slide not found. Error ID234JHDU78CAS.
Please try again after jumping up and down on one foot and calling customer support.
Ok
Cancel
Back

Error Prevention & Error Detection
Try to help the user prevent errors.
Generally, wait until the user tries to submit the form before presenting errors.
Explain why the error occurred, where, and how to fix it.
Be polite, and avoid jargon.
Don’t make color your only cue.
Avoid pop-ups.

Pop QUIZ!
So did you learn anything today?

What does this need?

Forms that Work:
Designing Web Forms for Usability
By: Caroline Jarrett
www.formsthatwork.com/
Recommended Reading

Thanks!
Please submit all questions via the form.
Questions?
Twitter: @lorielue #SOFLUX
Slides: www.slideshare.net/lorielue

http://www.sitemotif.com	249
http://renepilon.com	70
http://www.renepilon.com	18

Killer form design

by Lauren Martin on Sep 28, 2011

Accessibility

Categories

Upload Details

Usage Rights

3 Embeds 337

Statistics

Killer form design Presentation Transcript