SlideShare ist ein Scribd-Unternehmen logo
1 von 77
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

Weitere ähnliche Inhalte

Kürzlich hochgeladen

Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 

Kürzlich hochgeladen (20)

Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 

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 fill 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 filling 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 fit the data model, so even more fields 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 identifies 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 fields? 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 field, 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 first 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 field 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 field 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 fields long
  • 39. 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
  • 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 first, 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
  • 53. personality+ how does the form sound? Uh... I want to buy this.
  • 54. personality+ how does the form sound? Uh... I want Fine, fill to buy this. this out
  • 55. personality+ how does the form sound? Name Uh... I want Fine, fill to buy this. Number this out Address ok
  • 56. personality+ how does the form sound? Name Number Address ok
  • 57. personality+ how does the form sound? Name One-eyed monster Number Address ok
  • 58. personality+ how does the form sound? Name One-eyed monster Excuse me? Number Address ok
  • 59. personality+ how does the form sound? Name One-eyed monster Excuse me? Number What? Address ok
  • 60. personality+ how does the form sound? Name One-eyed monster Number Address ok
  • 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 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
  • 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 fields try to be flexible. 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
  • 72. validate as you go Name George Occupation President Age Please enter your real occupation. sign up
  • 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
  • 75. http://dnevnikeklektika.com/uni-form/ An interesting example of form design can be found here. The way it handles errors is quite good
  • 76. http://pownce.com/signup/ Also Pownce has a pretty good sign up form, if you’re looking for inspiration
  • 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