AEAChicago2007 – “Best Practices for Form Design” by Luke Wroblewski

Back to main AEAChicago2007 post

Luke Wroblewski’s post about his presentation

designs web applications - eleven years of designing a lot of forms
online shopping experience is browsing until you find what you want,
	then a form
so forms stand between you having money and the company getting
	it from you
i.e. MacBook Pro takes your picture for your account - very personal
try to sign up for, say, Vox, all about community and blogging -> form
forms for managing financial data, for voting, etc.
forms are how customers talk to companies online.
they make money. they enable participation. they permit engagement.
YouTube's upload form has been redesigned seven or eight times already
Jared Spool fixed a design problem in a two-field form and made a
	company $300,000 a month
gave talk at Society for Technical Communicators - one person liked
	filling out forms
so minimize the pain of filling in forms, have clear path to completion
forms are conversations: "give me your name. what's your birthday.
	what's your secret password."
lots of different departments may want different information that all
	goes into one form
most forms are artifacts of the data structures behind them -
	database structure
data sources: usability testing, eye tracking, customer support, best
	practices, site tracking
design patterns: information + interaction + feedback
slides have a *lot* of information
label alignment depends on information familiarity, ability to extend
	vertically, etc.
when eBay redesigned its input form, it had to restate its earnings
	upwards
indicate which fields are required/optional when only a few get the
	designation
when B&N redesigned its account form, they kept *s on every field
	but dropped explanation
Walmart does this correctly - the one optional field is marked
required asterisk on label is much better than on input field
try to avoid things that are optional
the number one thing you can do to increase completion rates is to
	get rid of fields
text labels for required/optional are best, but asterisk is pretty good
text saying "use five digits" for zip code is less good than making
	the field that big
use field length as an affordance, or else use consistent lengths to
	reduce visual noise
group things with least visible differences
Luke has said not all form actions are equal - make primary action
	more visually dominant
eBay Sell Your Item: Add Subtitle - "What the hell? How can you
	mess up a one-field form?"
in eye tracking survey, fewer fixations and less time when buttons
	were same
when people talked about what they saw, they liked the difference
people said "It slowed me down", "It prevented me from making an error"
might become quicker over time
worst performance was continue/submit on far right, go back/cancel on
	far left
three successful variations of Submit | Cancel
with top labels, people followed very clear path to completion, submit
	button left bottom
if possible, get rid of secondary actions - nobody uses reset
help and tips can create visual clutter: automatic or activated help for
	current element best
eBay Sell Your Item: Choose a Selling Format has too much help
three radio buttons, >10 help items on the page
many different ways of displaying contextual help exactly as needed
primary goal for every form is completion
have smart inputs so you don't have to require a particular phone
	number format
have smart defaults to reduce choices people have to make
alignment helps define path to completion - let eye scan straight down
for long forms, let people see their progress and save
make sure tab order is correct - use tabindex attribute
use progressive disclosure: show people features when they need them
use gradual engagement: let people use the site and then register
example: jumpcut.com and geni.com
Fidelity myPlan uses sliders. it dynamically shows you information
	without form submissions.
there are many ways to expose dependent inputs - think about all
	your options
slides explain lots of the possibilities
use inline validation for error-prone fields - validate inputs, suggest
	valid inputs, etc.
i.e. people really like "how secure is your password" progress bars
i.e. when picking a username, show whether is available
prominently indicate an error, show what the error is, say how to fix it
by the field, use red and bold (doubled visual language, not just red
	because of colorblindness)
again, say how to fix
disable Submit button after it's clicked so people know something's
	happening
provide in-progress indicator
communicate that submission has been successful
avoid changing inputs that have already been provided
tell people before they start filling out a form if they need anything
	hard to get (VIN, etc.)
<label>, tabindex, accesskey, <formset>
wufoo.com, formassembly.com, icebrrg.com will create forms for you
Pownce signup is good - but don't need to ask for birthday, gender
checking availability of username could be automatic

About Jennifer Berk

I'm an analytics and data leader with a marketing and product mindset. I like online newspapers, science fiction and fantasy, and ugly fish.
This entry was posted in Conference, Design. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *