WhatsApp 9892124323 âCall Girls In Kalyan ( Mumbai ) secure service
Â
Forms Suck
1. forms suck
that was the subtitle to his presentation
By Jeffrey Wegesin (jeff@xero.com, www.jwegesin.com)
2. 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)
3. forms really suck
Label one
Label two
? Label three
$
sign up
Forms suck because they stand between you and your customer
4. remember life?
photo from gniliep on flickr
When you to go to a store to buy something, you donât need to ďŹll out a form to complete the
sale. Itâs easy to buy something
5. 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
6. internet
you are my life!
Buying something online is a different experience and requires different skills (like ďŹlling out
a form, or using a computer)
7. 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
8. Stop
shoving Email address
⢠design Choose a password
Confirm password
sign up
The design department makes the form simple and short
9. 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
10. 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
11. 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
12. 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 ďŹt the data model, so even more ďŹelds are
added
13. this sucks
Email address
Choose a password
Confirm password
sign up
So even when a form is small, it sucks
14. 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
15. ! 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!
16. 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
17. Gestalt
Gestalt says when your brain sees the dots, it thinks âHereâs a system, and this group of dots
break the systemâ
18. Gestalt
Gestalt says when your brain sees the dots, it thinks âHereâs a system, and this group of dots
break the systemâ
19. Gestalt
Gestalt says when your brain sees the dots, it thinks âHereâs a system, and this group of dots
break the systemâ
20. 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
21. 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
identiďŹes it as a pipe, itâs not. Itâs just a painting
22. 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?
23. Name
Email address
whatâs
best?
whatâs easiest
for your brain?
⢠right-aligned?
Whatâs the best way to group labels and ďŹelds? Whatâs the easiest to understand?
24. Name
Email address
whatâs
best? Name
whatâs easiest Email address
for your brain?
⢠right-aligned
⢠left-aligned?
25. Name
Email address
whatâs
best? Name
whatâs easiest Email address
for your brain?
⢠right-aligned Name
⢠left-aligned Email address
⢠far-right?
26. 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
27. 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
28. 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 ďŹeld, because they are so
close together
29. 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 ďŹrst group the objects?
30. 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 ďŹeld as a row, but the
relationship is not immediate
31. 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
32. 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)
33. 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
34. 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
35. 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
36. 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 ďŹeld with top aligned forms
37. 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
38. 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 ďŹelds long
39. reduce!
Geni is a good example of this. They could have you ďŹll out more information (birthday,
location, nationality) but they donât, because they donât need that information at this point
40. buttons!
Donât depend on words
Visually reinforce the
primary action
Besides labels and inputs button placement is important
41. If you looked at this, can you tell me which button is the primary action? Which one would
you click?
42. If you looked at this form you might be inclined to click the right button, because it is visually
distinct from the other link
43. buttons
⢠no clue!
So when buttons are the same, a user needs to depend on the words so that they know what
to do
44. buttons
⢠color helps!
If you change the color, it helps the user decide which button they should click
45. buttons
⢠if only one
button
If you change the shape, it helps them even more
46. buttons
⢠and position!
And if you place the primary action ďŹrst, it helps them even more
47. 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
48. 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
49. personality+
how does the form sound to the user?
An example conversation
50. personality+
how does the form sound to the user?
Hello?
An example conversation
51. personality+
how does the form sound to the user?
Hello? What?
An example conversation
61. personality+
how does the form sound?
Name
One-eyed monster
Why do you
want my Number
name?
Address
ok
62. personality+
how does the form sound?
Name
One-eyed monster
Why do you
want my Number Cuzâ
name?
Address
ok
63. personality+
how does the form sound?
Name
One-eyed monster
... Number ...
Address
ok
64. personality+
how does the form sound?
Name
One-eyed monster
You suck. Number No you suck.
Address
ok
65. 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)
66. MMM !
Use labels! Birthday: MMM DD YYYY
Use real words!
Birthday
Month Day Year
January
YYYY
Try to use labels for all of your ďŹelds, 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
67. 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
68. 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
69. less chance for errors
Obviously if you have shorter forms, thereâs less chance for error
70. be flexible!
Phone number
the answer could be...
(123) 456-7890
123-456-7890
123 456 7890
123.456.7890
1234567890
But for most ďŹelds try to be ďŹexible. People will enter in the phone numbers differently, so
allow them to
71. validate as
you go
Name
George
Occupation
President
Age
sign up
Validate as you go with AJAX
73. 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
74. 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
77. 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