forms suck
that was the subtitle to his presentation
By Jeffrey Wegesin (jeff@xero.com, www.jwegesin.com)

Luke
Wro-*
The next hour (good lord!):
❧ Why forms suck
❧ Brains are fortune tellers
❧ Fun-filled form design
❧ Why shorter is better
?
❧ Frickin’ form tone
❧ Errors suck too
This was the agenda for the presentation. The content is largely based on work by Luke
Wroblewski (www.lukew.com) and Matteo Penzo (www.uxmatters.com)

forms really suck
Label one
Label two
? Label three
$
sign up
Forms suck because they stand between you and your customer

remember life?
photo from gniliep on flickr
When you to go to a store to buy something, you don’t need to fill out a form to complete the
sale. It’s easy to buy something

it can be dangerous
photo from davitydave on flickr
But sometimes the food wants to eat you instead! So some people prefer to buy online, where
it’s safer

internet
you are my life!
Buying something online is a different experience and requires different skills (like filling out
a form, or using a computer)

this already sucks
it doesn’t need your help to suck
Label one
Label two
? Label three
$
sign up
So forms suck because they are a barrier between you and what you want. Sometimes they
start simple, but everyone wants to make them suck

Stop
shoving Email address
• design Choose a password
Confirm password
sign up
The design department makes the form simple and short

Name
Stop
shoving Phone number
• design Email address
• sales
Choose a password
Confirm password
sign up
But the sales department wants the name and phone number to follow up

Name Gender
Stop Male Female
shoving Phone number Date of birth
• design Email address Postal address
• sales
• marketing Choose a password
Confirm password
sign up
Marketing wants demographic information, and their address to solicit customers

Name Gender
Male Female
Stop Phone number Date of birth
shoving
Email address Postal address
• design
• sales Choose a password
• marketing
• legal Confirm password
I have read and accept the Terms of Use
sign up
The legal department wants to prevent liability

First name Gender
Male Female
Stop Last name Date of birth
shoving Phone number Postal address line 1
• design
Email address Postal address line 2
• sales
• marketing Choose a password Postal address line 3
• legal
• development Confirm password Postal address line 4
I have read and accept the Terms of Use
sign up
When the form gets to development it needs to fit the data model, so even more fields are
added

this sucks
Email address
Choose a password
Confirm password
sign up
So even when a form is small, it sucks

but this really sucks
First name Gender
Male Female
Last name Date of birth
Phone number Postal address line 1
Email address Postal address line 2
Choose a password Postal address line 3
Confirm password Postal address line 4
I have read and accept the Terms of Use
But when it gets larger, it sucks even more

! suck-age
utterform, the more it sucks
the bigger the
Email address First name Address line 1
Choose a password Last name Address line 2
Confirm password Phone number Address line 3 $
sign up
The longer the form, the more hurdles your customer needs to jump. Think of the distance!

what to do!
make forms short
make them friendly
make forms easy
but before we do,
do you know Gestalt?
So forms should be short, friendly and easy. Before we make them short, let’s review Gestalt
psychology

Gestalt
Gestalt says when your brain sees the dots, it thinks “Here’s a system, and this group of dots
break the system”

Gestalt
Gestalt says when your brain sees the dots, it thinks “Here’s a system, and this group of dots
break the system”

Gestalt
Gestalt says when your brain sees the dots, it thinks “Here’s a system, and this group of dots
break the system”

woof
Your brain constantly tries to build relationships to identify what it sees. This picture is just a
group of black smudges, your brain will eventually see the dog

you fool!
this is a good example
gestalt can be
applied towards
form design...
Magritte painted this picture in 1928 and it says “this isn’t a pipe.” Although your brain
identifies it as a pipe, it’s not. It’s just a painting

So how does Gestalt effect the way we group form elements? When looking at the Japanese
form from the Nintendo website, what does your brain do?

Name
Email address
what’s
best?
what’s easiest
for your brain?
• right-aligned?
What’s the best way to group labels and fields? What’s the easiest to understand?

Name
Email address
what’s
best? Name
what’s easiest Email address
for your brain?
• right-aligned
• left-aligned?

Name
Email address
what’s
best? Name
what’s easiest Email address
for your brain?
• right-aligned Name
• left-aligned Email address
• far-right?

Name
Email address
what’s
best? Name
what’s easiest Email address
for your brain?
• right-aligned Name
• left-aligned Email address
• far-right
• top? Name
Email address

First Name:
right Last Name:
aligned Email Address:
Phone Number:
Choose a Password: Must be at least 8
characters long with at
least one number.
Confirm Password:
Business Location: New Zealand
If you have one, enter
Sign Up Code: your sign up code here.
(optional)
I have read and accept the Terms of Use
try a free demo buy now
We’ll look at an example sign up form

First Name:
right Last Name:
aligned Email Address:
Phone Number:
• you’re so
ragged Choose a Password: Must be at least 8
characters long with at
least one number.
• look at how Confirm Password:
your eyes move Business Location: New Zealand
If you have one, enter
Sign Up Code: your sign up code here.
(optional)
I have read and accept the Terms of Use
try a free demo buy now
This is how your eye moves for this form, when labels are right aligned, your eye moves like
it reads a book. There is a clear relationship between label and field, because they are so
close together

First Name:
gestalt Last Name:
Email Address:
Phone Number:
• how are they
grouped? Choose a Password: Must be at least 8
characters long with at
least one number.
Confirm Password:
• how much
thinking is Business Location: New Zealand
required? Sign Up Code:
If you have one, enter
your sign up code here.
(optional)
I have read and accept the Terms of Use
try a free demo buy now
But how does your brain first group the objects?

First Name:
gestalt Last Name:
Email Address:
Phone Number:
• how are they
grouped? Choose a Password: Must be at least 8
characters long with at
least one number.
Confirm Password:
• how much
thinking is Business Location: New Zealand
required? Sign Up Code:
If you have one, enter
your sign up code here.
(optional)
I have read and accept the Terms of Use
try a free demo buy now
It may look for what’s similar. Eventually it will see each label and field as a row, but the
relationship is not immediate

First Name:
left Last Name:
aligned Email Address:
Phone Number:
• mostly slower
Choose a Password: Must be at least 8
characters long with at
least one number.
Confirm Password:
Business Location: New Zealand
If you have one, enter
Sign Up Code: your sign up code here.
(optional)
I have read and accept the Terms of Use
try a free demo buy now
Left aligned labels are better, if you want the user to be able to scan the labels

First Name:
left Last Name:
aligned Email Address:
Phone Number:
• not as slow
• better success Choose a Password: Must be at least 8
characters long with at
least one number.
Confirm Password:
Business Location: New Zealand
If you have one, enter
Sign Up Code: your sign up code here.
(optional)
I have read and accept the Terms of Use
try a free demo buy now
They’re better for this because the labels start at the same position (but the design of this
form was the slowest in Matteo’s studies)

First Name
Last Name:
it’s best Email Address:
on top
Phone Number:
• fastest
• highest success Choose a Password:
• needs vertical
space Confirm Password:
Business Location:
New Zealand
Sign Up Code: (optional)
I have read and accept the Terms of Use
buy now try a free demo
Top aligned labeled forms are completed the fastest, with the highest success rate

First Name
Last Name:
yes! Email Address:
Phone Number:
• woah that’s fast
Choose a Password:
Confirm Password:
Business Location:
New Zealand
Sign Up Code: (optional)
I have read and accept the Terms of Use
buy now try a free demo
Your eyes shoot straight down, because all the elements are in the same line of vision

First Name
Last Name:
gestalt! Email Address:
Phone Number:
my brain!
sometimes, Choose a Password:
I love you!
Confirm Password:
Business Location:
New Zealand
Sign Up Code: (optional)
I have read and accept the Terms of Use
buy now try a free demo
And your brain can clearly see how the elements are grouped

Matteo Penzo
• tested form layouts
with eye tracking
• left aligned labels - 500 ms
• right aligned labels - 210 ms
• top aligned labels - 50 ms
http://uxmatters.com/
The results of his eye tracking experiments show that users are 10x faster at identifying the
label and correlating input field with top aligned forms

reduce
cognitive
load
for fast forms use top
aligned labels
don’t make them use their
head too much
Top aligned labels reduce cognitive load, because the user doesn’t have to think as much

design helps
& hinders
top labels are fast
but what if you have 100
fields to hurdle?
only have fields you need
But having a top aligned form doesn’t matter if your form is 100 fields long

reduce!
Geni is a good example of this. They could have you fill out more information (birthday,
location, nationality) but they don’t, because they don’t need that information at this point

buttons!
Don’t depend on words
Visually reinforce the
primary action
Besides labels and inputs button placement is important

If you looked at this, can you tell me which button is the primary action? Which one would
you click?

If you looked at this form you might be inclined to click the right button, because it is visually
distinct from the other link

buttons
• no clue!
So when buttons are the same, a user needs to depend on the words so that they know what
to do

buttons
• color helps!
If you change the color, it helps the user decide which button they should click

buttons
• if only one
button
If you change the shape, it helps them even more

buttons
• and position!
And if you place the primary action first, it helps them even more

First Name
buttons Last Name:
Email Address:
• most
Phone Number:
importantly!
• alignment Business Location:
matters New Zealand
Sign Up Code: (optional)
I have read and accept the Terms of Use
The primary action should be inline with the form. This establishes a clear relationship
between the form elements and the correct button

watch your
tone, mister!
The tone of the form
matters
Are you shopping at
Farmers or Kirkaldies?
So you have a short form, but how does it sound? Forms should be polite

personality+
how does the form sound to the user?
An example conversation

personality+
how does the form sound to the user?
Hello?
An example conversation

personality+
how does the form sound to the user?
Hello? What?
An example conversation

personality+
how does the form sound?

personality+
how does the form sound?
Uh... I want
to buy this.

personality+
how does the form sound?
Uh... I want Fine, fill
to buy this. this out

personality+
how does the form sound?
Name
Uh... I want Fine, fill
to buy this. Number this out
Address
ok

personality+
how does the form sound?
Name
Number
Address
ok

personality+
how does the form sound?
Name
One-eyed monster
Number
Address
ok

personality+
how does the form sound?
Name
One-eyed monster
Excuse me? Number
Address
ok

personality+
how does the form sound?
Name
One-eyed monster
Excuse me? Number What?
Address
ok

personality+
how does the form sound?
Name
One-eyed monster
Number
Address
ok

personality+
how does the form sound?
Name
One-eyed monster
Why do you
want my Number
name?
Address
ok

personality+
how does the form sound?
Name
One-eyed monster
Why do you
want my Number Cuz’
name?
Address
ok

personality+
how does the form sound?
Name
One-eyed monster
... Number ...
Address
ok

personality+
how does the form sound?
Name
One-eyed monster
You suck. Number No you suck.
Address
ok

Forms should
converse
but politely!
Your brain is kind of stupid
It can’t tell if it’s real or fake
Your brain can’t distinguish between a real conversation and a fake conversation (your mind
knows the difference, but your brain responds the same way between a real conversation and
a fake one)

MMM !
Use labels! Birthday: MMM DD YYYY
Use real words!
Birthday
Month Day Year
January
YYYY
Try to use labels for all of your fields, because if you don’t the user could lose context. Also
try to use real words, “MMM” might be the way to programmatically display the date in the
correct format, but just saying “month” is clearer to everyone

Kathy!
For further reading about
brain stuff
And the blog ‘Creating
Passionate Users’
http://headrush.typepad.com
If you want to learn more about brain stuff and how it helps and hinders web design, read
Kathy Sierra’s blog and book

not me!
How many people in this
room have made errors
on forms?
everyone has a different
answer
People error because not everyone responds to the same question the same way

less chance for errors
Obviously if you have shorter forms, there’s less chance for error

be flexible!
Phone number
the answer could be...
(123) 456-7890
123-456-7890
123 456 7890
123.456.7890
1234567890
But for most fields try to be flexible. People will enter in the phone numbers differently, so
allow them to

validate as
you go
Name
George
Occupation
President
Age
sign up
Validate as you go with AJAX

validate as
you go
Name
George
Occupation
President
Age
Please enter your real occupation.
sign up

suggest
answers
suggestions make sure the To (city or airport code)
Chicago
answers are squeaky clean
Chicago, IL - O’Hare airport (ORD)
Chicago, IL - Midway airport (MDW)
Chicago, IL - Pal-Waukee (PWK)
http://www.kayak.com
And suggest answers because it prevents the user from erring. No one likes seeing a big red
validation message saying they messed up

use
examples
show users what you
expect them to do
Phone number
For example, 123 456 7890
Also you can use examples of how you expect users to answer the question

http://dnevnikeklektika.com/uni-form/
An interesting example of form design can be found here. The way it handles errors is quite
good

http://pownce.com/signup/
Also Pownce has a pretty good sign up form, if you’re looking for inspiration

Today we
learned
❧ Forms suck
❧ Your brain wants order
❧ It’s faster on top
❧ Shorter is better !
❧ Forms need personality
❧ Errors suck too
http://lukew.com
That’s it! If you have any questions you can email me at jeff@xero.com, or you can write to
me on my blog at www.jwegesin.com