• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Forms Suck
 

Forms Suck

on

  • 11,993 views

Forms suck - form design for developers and designers

Forms suck - form design for developers and designers

Statistics

Views

Total Views
11,993
Views on SlideShare
11,903
Embed Views
90

Actions

Likes
61
Downloads
0
Comments
3

7 Embeds 90

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
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

13 of 3 previous next Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • i want to download this, am willing to fill out a form :-)
    Are you sure you want to
    Your message goes here
    Processing…
  • Nice slide.

    Here is a useful article that documents 10 form design tips...

    http://www.flysoftware.com/support/top_10_form_design_tips.asp

    I hope you find it useful.
    Are you sure you want to
    Your message goes here
    Processing…
  • is great !!
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Forms Suck Forms Suck Presentation Transcript

    • 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