Forms Suck

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 ﬁll 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 ﬁlling 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 ﬁt the data model, so even more ﬁelds 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”

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 identiﬁes 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 ﬁelds? 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 ﬁeld, 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 ﬁrst 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 ﬁeld 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 ﬁeld 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 ﬁelds long

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

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 ﬁrst, 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 ﬁ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

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 ﬁelds try to be ﬂexible. 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

http://moodle.apc.edu.ph	32
http://rohun.tumblr.com	29
http://www.slideshare.net	12
http://www.carboniteux.com	9
http://jmcisaac.powweb.com	5
http://aesis.tumblr.com	2
http://wildfire.gigya.com	1

Forms Suck

by jwegesin on Jun 17, 2008

Accessibility

Categories

Tags

Upload Details

Usage Rights

7 Embeds 90

Statistics

Forms Suck — Presentation Transcript