Your SlideShare is downloading. ×
BEST PRACTICES FOR
FORM DESIGN
LUKE WROBLEWSKI
IA SUMMIT 2007




                     1
Luke Wroblewski
      Yahoo! Inc.
         • Senior Principal Designer
      LukeW Interface Designs
         • Principal ...
WHY DOES FORM
DESIGN MATTER?




                 3
SHOPPING




           http://www.flickr.com/photos/stitch/187139723/




                                               ...
SHOPPING
ONLINE




           5
ACCESS




         Images from Flickr users katielips, pealco, and *nathan




                                          ...
ACCESS
ONLINE




         7
DATA INPUT




             8
DATA INPUT
ONLINE




             9
Why Forms Matter
• How customers “talk” to companies online
• Commerce ($)
  • User: Enable purchasing
  • Business: Maxim...
Design Principles
• Minimize the pain
  • No one likes filing in forms
  • Smart defaults, inline validation, forgiving in...
Analyzing Performance

    •   Usability Testing
            Errors, issues, assists, completion rates, time spent per
   ...
Design Patterns

                      Visual Communication
        Information   Affordances


            +
            ...
INFORMATION




              14
Information
• Layout
  • Label positioning
  • Content groupings
• Input Affordances
  • Formats, required fields
• Action...
Top Aligned Labels
• When data being
  collected is familiar
• Minimize time to
  completion
• Require more vertical
  spa...
Top-aligned Labels




                     17
Right Aligned Labels
• Clear association
  between label and
  field
• Requires less vertical
  space
• More difficult to ...
Right-aligned labels




                       19
Left Aligned Labels
• When data required is
  unfamiliar
• Enables label
  scanning
• Less clear association
  between lab...
Left-aligned labels




                      21
Eye-tracking Data
• July 2006 study by Matteo
  Penzo
• Left-aligned labels
   • Easily associated labels with
     the pr...
• For reduced
                  completion times &
                  familiar data input: top
                  aligned
BE...
Required Form Fields
• Indication of required fields is
  most useful when
   • There are lots of fields
   • But very few...
All fields required




                      25
All fields required




                      26
Most fields required




                       27
Few fields optional




                      28
29
30
• Try to avoid optional
                  fields
                • If most fields are
                  required: indicate...
Field Lengths


• Field lengths can
  provide valuable
  affordances
• Appropriate field
  lengths provide enough
  space ...
33
34
35
• When possible, use
                  field length as an
                  affordance
BEST PRACTICE
                • Oth...
Content Grouping


• Content relationships
  provide a structured
  way to organize a form
• Groupings provide
  • A way t...
Lots of content grouping




                           38
Excessive visual noise




                         39
Minimum amount necessary




                           40
41
Minimum amount necessary




                           42
43
• Use relevant content
                  groupings to organize
                  forms
BEST PRACTICE
                • Use...
Actions




• Not all form actions are equal
  • Reset, Cancel, & Go Back are secondary actions: rarely
    need to be use...
46
47
• Avoid secondary
                  actions if possible
BEST PRACTICE   • Otherwise, ensure a
                  clear visu...
Help & Tips
• Help & Tips are useful when:
      Asking for unfamiliar data
  •
      Users may question why data is being...
Help Text




            50
Lots of Help/Tips




                    51
52
Automatic inline exposure




                            53
Automatic inline exposure




                            54
User-activated inline exposure




                                 55
User-activated inline exposure




                                 56
User-activated section exposure




                                  57
• Minimize the amount of
                  help & tips required to
                  fill out a form
                • Hel...
INTERACTION




              59
Interaction
•   Path to Completion
•   “Tabbing”
•   Progressive Disclosure
•   Exposing dependencies




                ...
Path to Completion
• Primary goal for every form is
  completion
• Every input requires consideration &
  action
  • Remov...
Remove Unnecessary
Inputs




                     62
Flexible Data Input
                      (555) 123-4444
                      555-123-4444
                      555 123 ...
Smart Defaults




                 64
Path to Completion




                     65
Clear Path to Completion




                           66
Path to completion




                     67
• Remove all
                  unnecessary data
                  requests
                • Enable smart defaults
BEST PR...
Tabbing
• Many users interact with a form by
  “tabbing” between fields
• Proper HTML markup can ensure
  tabbing works as...
70
• Remember to account
                  for tabbing behavior
                • Use the tabindex
BEST PRACTICE     attribut...
Progressive Disclosure
• Not all users require all available
  options all the time
• Progressive disclosure provides
  ad...
Exposing Options




                   73
Exposing Options




                   74
Dialog




         75
Progressive Disclosure




                         76
Gradual Engagement




                     77
78
• Map progressive
                  disclosure to
                  prioritized user needs
BEST PRACTICE
                •...
Selection Dependent Inputs
• Sometimes an initial data input requires
  or enables additional inputs
  • More options beco...
Selection Dependent Inputs




                             81
Section Selectors
Page Level




Section Tabs          Expose Below




                      Expose Within
Section Finger...
Inactive Until Selected   Exposed & Grouped




                                              83
Exposing Dependent Inputs
•   Page Level
     • Requires additional step
•   Section Tabs
     • Often go unnoticed
     •...
• Maintain clear
                  relationship between
                  initial selection options
BEST PRACTICE
        ...
FEEDBACK




           86
Feedback
• Inline validation
  • Assistance
• Errors
  • Indication & Resolution
• Progress
  • Indication
• Success
  • V...
Inline Validation
• Provide direct feedback as data is
  entered
  • Validate inputs
  • Suggest valid inputs
  • Help use...
Password Validation




                      89
Unique User Name Validation




                              90
Valid Input Suggestions




                          91
Maximum Character Count




                          92
• Use inline validation for
                  inputs that have
                  potentially high error
BEST PRACTICE     ...
Errors
• Errors are used to ensure all required
  data is provided and valid
  • Clear labels, affordances, help/tips &
  ...
Error Messaging




                  95
Short Forms: too much?




                         96
Short Forms




              97
Short Forms




              98
99
• Clearly communicate
                  an error has occurred:
                  top placement, visual
                  c...
Progress
• Sometimes actions require some time to
  process
  • Form submission
  • Data calculations
  • Uploads
• Provid...
Disable Submit Button




                        102
• Provide indication of
                  tasks in progress
BEST PRACTICE   • Disable “submit”
                  button af...
Success
• After successful form completion
  confirm data input in context
  • On updated page
  • On revised form
• Provi...
105
106
Animated Indication




                      107
• Clearly communicate a
                  data submission has
                  been successful
BEST PRACTICE
            ...
Additional Tips
• Avoid changing inputs provided by
  users
  • With later inputs
  • After an error has occurred
• Let us...
Accessibility & Mark-up
• Use <label> tags to associate labels with inputs
   • Properly read by screen readers
   • Most ...
Web Form Creation Tools



              • Wufoo
                 • http://www.wufoo.com
              • Form Assembly
   ...
For more information…

            • Functioning Form
              • www.lukew.com/ff/
            • Site-Seeing: A Visua...
Upcoming SlideShare
Loading in...5
×

Best Practices for Form Design

17,879

Published on

In my Best Practices For Web Form Design talk at IA Summit 2007 I walked thorugh the importance of Web forms and a series of design best practices culled from live to site analytics, usability testing, eye-tracking studies, and best practice surveys.

Some of the topics I discuss and provide patterns for are: label alignment, required form filed, input field sizes, content grouping, primary & secondary actions, help text & tips, dyanmic help systems, inline validation, error messages, progress indicators, success messaging, progressive disclosure, gradual engagement, tabbing, flexible data inputs, smart defaults, paths to completion, selection dependent inputs, and more...

Published in: Technology, Business
1 Comment
27 Likes
Statistics
Notes
  • Awesome!!!!
    I have never seen a better documentation of usability best practices than this.
    Luke rocks !!!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
17,879
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
0
Comments
1
Likes
27
Embeds 0
No embeds

No notes for slide

Transcript of "Best Practices for Form Design"

  1. 1. BEST PRACTICES FOR FORM DESIGN LUKE WROBLEWSKI IA SUMMIT 2007 1
  2. 2. Luke Wroblewski Yahoo! Inc. • Senior Principal Designer LukeW Interface Designs • Principal & Founder • Product design & strategy services Author • Site-Seeing: A Visual Approach to Web Usability (Wiley & Sons) • Functioning Form: Web applications, product strategy, & interface design articles Previously • eBay Inc., Lead Designer • University of Illinois, Instructor • NCSA, Senior Designer http://www.lukew.com 2
  3. 3. WHY DOES FORM DESIGN MATTER? 3
  4. 4. SHOPPING http://www.flickr.com/photos/stitch/187139723/ 4
  5. 5. SHOPPING ONLINE 5
  6. 6. ACCESS Images from Flickr users katielips, pealco, and *nathan 6
  7. 7. ACCESS ONLINE 7
  8. 8. DATA INPUT 8
  9. 9. DATA INPUT ONLINE 9
  10. 10. Why Forms Matter • How customers “talk” to companies online • Commerce ($) • User: Enable purchasing • Business: Maximize sales • Access (membership) • User: Enable participation • Business: Increase customers & grow communities • Engagement • User: Enable information entry & manipulation • Business: Accumulate content & data 10
  11. 11. Design Principles • Minimize the pain • No one likes filing in forms • Smart defaults, inline validation, forgiving inputs • Illuminate a path to completion • Consider the context • Familiar vs. foreign • Frequently used vs. rarely used • Ensure consistent communication • Errors, Help, Success • Single voice despite many stakeholders 11
  12. 12. Analyzing Performance • Usability Testing Errors, issues, assists, completion rates, time spent per • task, satisfaction scores • Eye Tracking Completion times, fixations, saccades • • Customer Support Top problems, number of incidents • • Best Practices Common solutions, unique approaches • • Site Tracking Completion rates, entry points, exit points, elements • utilized, data entered 12
  13. 13. Design Patterns Visual Communication Information Affordances + Engagement Interaction Disclosure + Response Feedback Verification 13
  14. 14. INFORMATION 14
  15. 15. Information • Layout • Label positioning • Content groupings • Input Affordances • Formats, required fields • Actions • Primary & secondary • Help & Tips • Visual Hierarchy 15
  16. 16. Top Aligned Labels • When data being collected is familiar • Minimize time to completion • Require more vertical space • Spacing or contrast is vital to enable efficient scanning • Flexibility for localization and complex inputs 16
  17. 17. Top-aligned Labels 17
  18. 18. Right Aligned Labels • Clear association between label and field • Requires less vertical space • More difficult to just scan labels due to left rag • Fast completion times 18
  19. 19. Right-aligned labels 19
  20. 20. Left Aligned Labels • When data required is unfamiliar • Enables label scanning • Less clear association between label and field • Requires less vertical space • Changing label length may impair layout 20
  21. 21. Left-aligned labels 21
  22. 22. Eye-tracking Data • July 2006 study by Matteo Penzo • Left-aligned labels • Easily associated labels with the proper input fields • Excessive distances between labels inputs forced users to take more time • Right-aligned labels • Reduced overall number of fixations by nearly half • Form completion times were cut nearly in half • Top-aligned labels • Permitted users to capture both labels & inputs with a single eye movement’ • Fastest completion times 22
  23. 23. • For reduced completion times & familiar data input: top aligned BEST PRACTICE • When vertical screen space is a constraint: right aligned • For unfamiliar, or advanced data entry: left aligned 23
  24. 24. Required Form Fields • Indication of required fields is most useful when • There are lots of fields • But very few are required • Enables users to scan form to see what needs to be filled in • Indication of optional fields is most useful when • Very few fields are optional • Neither is realy useful when • All fields are required 24
  25. 25. All fields required 25
  26. 26. All fields required 26
  27. 27. Most fields required 27
  28. 28. Few fields optional 28
  29. 29. 29
  30. 30. 30
  31. 31. • Try to avoid optional fields • If most fields are required: indicate optional fields BEST PRACTICE • If most fields are optional: indicate required fields • Text is best, but * often works for required fields • Associate indicators with labels 31
  32. 32. Field Lengths • Field lengths can provide valuable affordances • Appropriate field lengths provide enough space for inputs • Random field lengths may add visual noise to a form 32
  33. 33. 33
  34. 34. 34
  35. 35. 35
  36. 36. • When possible, use field length as an affordance BEST PRACTICE • Otherwise consider a consistent length that provides enough room for inputs 36
  37. 37. Content Grouping • Content relationships provide a structured way to organize a form • Groupings provide • A way to scan information required at a high level • A sense of how information within a form is related 37
  38. 38. Lots of content grouping 38
  39. 39. Excessive visual noise 39
  40. 40. Minimum amount necessary 40
  41. 41. 41
  42. 42. Minimum amount necessary 42
  43. 43. 43
  44. 44. • Use relevant content groupings to organize forms BEST PRACTICE • Use the minimum amount of visual elements necessary to communicate useful relationships 44
  45. 45. Actions • Not all form actions are equal • Reset, Cancel, & Go Back are secondary actions: rarely need to be used (if at all) • Save, Continue, & Submit are primary actions: directly responsible for form completion • The visual presentation of actions should match their importance 45
  46. 46. 46
  47. 47. 47
  48. 48. • Avoid secondary actions if possible BEST PRACTICE • Otherwise, ensure a clear visual distinction between primary & secondary actions 48
  49. 49. Help & Tips • Help & Tips are useful when: Asking for unfamiliar data • Users may question why data is being requested • There are recommended ways of providing data • Certain data requests are optional • • However, Help & Tips can quickly overwhelm a form if overused • In these cases, you may want to consider a dynamic solution • Automatic inline exposure • User activated inline exposure • User activated section exposure 49
  50. 50. Help Text 50
  51. 51. Lots of Help/Tips 51
  52. 52. 52
  53. 53. Automatic inline exposure 53
  54. 54. Automatic inline exposure 54
  55. 55. User-activated inline exposure 55
  56. 56. User-activated inline exposure 56
  57. 57. User-activated section exposure 57
  58. 58. • Minimize the amount of help & tips required to fill out a form • Help visible and adjacent to a data BEST PRACTICE request is most useful • When lots of unfamiliar data is being requested, consider using a dynamic help system 58
  59. 59. INTERACTION 59
  60. 60. Interaction • Path to Completion • “Tabbing” • Progressive Disclosure • Exposing dependencies 60
  61. 61. Path to Completion • Primary goal for every form is completion • Every input requires consideration & action • Remove all unnecessary data requests • Enable flexible data input • Provide a clear path • Enable smart defaults 61
  62. 62. Remove Unnecessary Inputs 62
  63. 63. Flexible Data Input (555) 123-4444 555-123-4444 555 123 4444 555.123.4444 5551234444 63
  64. 64. Smart Defaults 64
  65. 65. Path to Completion 65
  66. 66. Clear Path to Completion 66
  67. 67. Path to completion 67
  68. 68. • Remove all unnecessary data requests • Enable smart defaults BEST PRACTICE • Employ flexible data entry • Illuminate a clear path to completion • For long forms, show progress & save 68
  69. 69. Tabbing • Many users interact with a form by “tabbing” between fields • Proper HTML markup can ensure tabbing works as expected • Multi-column form layouts may conflict with expected tabbing behavior 69
  70. 70. 70
  71. 71. • Remember to account for tabbing behavior • Use the tabindex BEST PRACTICE attribute to control tabbing order • Consider tabbing expectations when laying out forms 71
  72. 72. Progressive Disclosure • Not all users require all available options all the time • Progressive disclosure provides additional options when appropriate • Advanced options • Gradual engagement 72
  73. 73. Exposing Options 73
  74. 74. Exposing Options 74
  75. 75. Dialog 75
  76. 76. Progressive Disclosure 76
  77. 77. Gradual Engagement 77
  78. 78. 78
  79. 79. • Map progressive disclosure to prioritized user needs BEST PRACTICE • Most effective when user-initiated • Maintain a consistent approach 79
  80. 80. Selection Dependent Inputs • Sometimes an initial data input requires or enables additional inputs • More options become available because of an initial input • Further clarification required due to initial input 80
  81. 81. Selection Dependent Inputs 81
  82. 82. Section Selectors Page Level Section Tabs Expose Below Expose Within Section Finger Tabs 82
  83. 83. Inactive Until Selected Exposed & Grouped 83
  84. 84. Exposing Dependent Inputs • Page Level • Requires additional step • Section Tabs • Often go unnoticed • Require smart defaults • Finger Section Tabs • Follow path to completion scan line • Section Selectors • Effectively Group information • Hide some options • Expose Below & Expose Within • Potential for confusion • Inactive Until Selected & Exposed within Groups • Association between primary selection is impaired 84
  85. 85. • Maintain clear relationship between initial selection options BEST PRACTICE • Clearly associate additional inputs with their trigger • Avoid “jumping” that disassociates initial selection options 85
  86. 86. FEEDBACK 86
  87. 87. Feedback • Inline validation • Assistance • Errors • Indication & Resolution • Progress • Indication • Success • Verification 87
  88. 88. Inline Validation • Provide direct feedback as data is entered • Validate inputs • Suggest valid inputs • Help users stay within limits 88
  89. 89. Password Validation 89
  90. 90. Unique User Name Validation 90
  91. 91. Valid Input Suggestions 91
  92. 92. Maximum Character Count 92
  93. 93. • Use inline validation for inputs that have potentially high error BEST PRACTICE rates • Use suggested inputs to disambiguate • Communicate limits 93
  94. 94. Errors • Errors are used to ensure all required data is provided and valid • Clear labels, affordances, help/tips & validation can help reduce errors • But some errors may still occur • Provide clear resolution in as few steps as possible 94
  95. 95. Error Messaging 95
  96. 96. Short Forms: too much? 96
  97. 97. Short Forms 97
  98. 98. Short Forms 98
  99. 99. 99
  100. 100. • Clearly communicate an error has occurred: top placement, visual contrast • Provide actionable BEST PRACTICE remedies to correct errors • Associate responsible fields with primary error message • “Double” the visual language where errors have occurred 100
  101. 101. Progress • Sometimes actions require some time to process • Form submission • Data calculations • Uploads • Provide feedback when an action is in progress 101
  102. 102. Disable Submit Button 102
  103. 103. • Provide indication of tasks in progress BEST PRACTICE • Disable “submit” button after user clicks it to avoid duplicate submissions 103
  104. 104. Success • After successful form completion confirm data input in context • On updated page • On revised form • Provide feedback via • Message (removable) • Animated Indicator 104
  105. 105. 105
  106. 106. 106
  107. 107. Animated Indication 107
  108. 108. • Clearly communicate a data submission has been successful BEST PRACTICE • Provide feedback in context of data submitted 108
  109. 109. Additional Tips • Avoid changing inputs provided by users • With later inputs • After an error has occurred • Let users know if difficult to obtain information is required prior to sending them to a form 109
  110. 110. Accessibility & Mark-up • Use <label> tags to associate labels with inputs • Properly read by screen readers • Most browsers treat text with <label> tags as clickable: larger actions • Use the tabindex attribute to provide a “tabbing” path • Provides control over tabbing order • Enables forms to be navigated by keyboard • Consider the accesskey attribute for additional keyboard support • Direct access to associated input fields • Consider <fieldset> to group related form fields 110
  111. 111. Web Form Creation Tools • Wufoo • http://www.wufoo.com • Form Assembly • http://www.formassembly.com • icebrrg • http://www.icebrrg.com 111
  112. 112. For more information… • Functioning Form • www.lukew.com/ff/ • Site-Seeing: A Visual Approach to Web Usability • Wiley & Sons • Drop me a note • luke@lukew.com 112

×