Your SlideShare is downloading. ×
0
BEST PRACTICES FOR
FORM DESIGN
LUKE WROBLEWSKI
AUTHOR, WEB FORM DESIGN 2008




                               1
Luke Wroblewski
      Yahoo! Inc.
         •• Senior Director, Product Ideation & Design
      LukeW Interface Designs
   ...
Web Form Design

             • Web Form Design: Filling in
               the Blanks
             • Rosenfeld Media, 2008...
WHY DOES FORM
DESIGN MATTER?




                 4
SHOPPING




           http://www.flickr.com/photos/radiofree/150535853/
           http://www.flickr.com/photos/stitch/1...
SHOPPING
ONLINE




           6
ACCESS




         Images from Flickr users katielips, pealco, and *nathan




                                          ...
ACCESS
ONLINE




         8
DATA INPUT




             9
DATA INPUT
ONLINE




             10
Why Forms Matter

• How customers “talk” to companies online
• Commerce ($)
  •• User: Enable purchasing
  •• Business: Ma...
65,000 videos per day –July 2006




                                   12
Design Principles
• Minimize the pain
   •• No one likes filing in forms
   •• Smart defaults, inline validation, forgivin...
• Repeatable design solutions
                    to common problems
                  • Work “positively” for
DESIGN PATT...
• If your goals are… , try
                 solution…
“IT DEPENDS”
               • If your constraints are…,
            ...
Data Sources
     • Usability Testing
          ••   Errors, issues, assists, completion rates, time spent
               ...
• Isolate individual best
                  practices
ONE AT A TIME
                • Look at simple examples
            ...
INFORMATION




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




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




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




                      25
Eye-tracking Data
• July 2006 study by Matteo
  Penzo
• Left-aligned labels
   •• Easily associated labels with the
      ...
• 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 f...
All fields required




                      29
All fields required




                      30
Most fields required




                       31
Few fields optional




                      32
33
34
• 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 ...
37
38
39
• When possible, use
                  field length as an
BEST PRACTICE     affordance
                • Otherwise conside...
Content Grouping


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




                           42
Excessive visual noise




                         43
Minimum amount necessary




                           44
45
Minimum amount necessary




                           46
47
• Use relevant content
                  groupings to organize
BEST PRACTICE     forms
                • Use the minimum
 ...
Actions




• Not all form actions are equal
  •• Reset, Cancel, & Go Back are secondary actions: rarely
     need to be u...
50
51
52
53
54
55
• 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




            58
Lots of Help/Tips




                    59
60
Automatic inline exposure




                            61
Automatic inline exposure




                            62
User-activated inline exposure




                                 63
User-activated inline exposure




                                 64
User-activated dialog exposure




                                 65
User-activated section exposure




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




              68
Interaction

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




               ...
Path to Completion

• Primary goal for every form is
  completion
• Every input requires consideration &
  action
  •• Rem...
Remove Unnecessary
Inputs




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




                 73
Path to Completion




                     74
Clear Path to Completion




                           75
Path to completion




                     76
• Remove all unnecessary
                  data requests
                • Enable smart defaults
BEST PRACTICE   • Employ ...
Tabbing

• Many users interact with a form by
  “tabbing” between fields
• Proper HTML markup can ensure
  tabbing works a...
79
• Remember to account
                  for tabbing behavior
BEST PRACTICE   • Use the tabindex
                  attribut...
Progressive Disclosure

• Not all users require all available
  options all the time
• Progressive disclosure provides
  a...
Exposing Options




                   82
Exposing Options




                   83
Dialog




         84
Progressive Disclosure




                         85
Gradual Engagement




                     86
87
88
89
• Map progressive
                  disclosure to prioritized
BEST PRACTICE     user needs
                • Most effectiv...
Selection Dependent Inputs

• Sometimes an initial data input requires
  or enables additional inputs
  •• More options be...
Selection Dependent Inputs




                             92
Page Level




             93
Section Tabs




               94
Section Finger Tabs




                      95
Section Selectors




                    96
Expose Below




               97
Expose Within




                98
Inactive Until Selected




                          99
Exposed & Grouped




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




           105
Feedback

• Inline validation
  •• Assistance
• Errors
  •• Indication & Resolution
• Progress
  •• Indication
• Success
 ...
Inline Validation

• Provide direct feedback as data is
  entered
  •• Validate inputs
  •• Suggest valid inputs
  •• Help...
Password Validation




                      108
Unique User Name Validation




                              109
Valid Input Suggestions




                          110
Maximum Character Count




                          111
• Use inline validation for
                  inputs that have
BEST PRACTICE     potentially high error
                  ...
Errors

• Errors are used to ensure all required
  data is provided and valid
  •• Clear labels, affordances, help/tips &
...
Error Messaging




                  114
Short Forms: too much?




                         115
Short Forms




              116
Short Forms




              117
118
• Clearly communicate
                  an error has occurred:
                  top placement, visual
                  c...
Progress

• Sometimes actions require some time to
  process
  •• Form submission
  •• Data calculations
  •• Uploads
• Pr...
Disable Submit Button




                        121
• 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
• Pr...
124
125
Animated Indication




                      126
• Clearly communicate a
                  data submission has
BEST PRACTICE     been successful
                • Provide ...
Additional Tips

• Avoid changing inputs provided by
  users
  •• With later inputs
  •• After an error has occurred
• Let...
Accessibility & Mark-up
• Use <label> tags to associate labels with inputs
   •• Properly read by screen readers
   •• Mos...
Web Form Creation Tools



              • Wufoo
                 •• http://www.wufoo.com
              • Form Assembly
  ...
PUTTING IT ALL
TOGETHER…




                 131
132
For more information…

            • Web Form Design: Filling in
              the Blanks
              •   http://www.luk...
Upcoming SlideShare
Loading in...5
×

Usabilidad y diseño para formularios

1,819

Published on

La usabilidad de formularios en aplicaciones es algo básico para que los usuarios se sientan cómodos con tu app

Published in: Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,819
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
33
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Usabilidad y diseño para formularios"

  1. 1. BEST PRACTICES FOR FORM DESIGN LUKE WROBLEWSKI AUTHOR, WEB FORM DESIGN 2008 1
  2. 2. Luke Wroblewski Yahoo! Inc. •• Senior Director, Product Ideation & Design LukeW Interface Designs •• Principal & Founder •• Product design & strategy services Author •• Web Form Design: Filling in the Blanks (Rosenfeld Media) •• Functioning Form: Web applications, product strategy, & interface design articles •• Site-Seeing: A Visual Approach to Web Usability (Wiley & Sons) Previously •• eBay Inc., Lead Designer •• University of Illinois, Instructor •• NCSA, Senior Designer http://www.lukew.com 2
  3. 3. Web Form Design • Web Form Design: Filling in the Blanks • Rosenfeld Media, 2008 • http://www.lukew.com/resources/ web_form_design.asp • 15% OFF with Discount Code • FOLUKE15 • http://rosenfeldmedia.com/ books/webforms/ 3
  4. 4. WHY DOES FORM DESIGN MATTER? 4
  5. 5. SHOPPING http://www.flickr.com/photos/radiofree/150535853/ http://www.flickr.com/photos/stitch/187139723/ 5
  6. 6. SHOPPING ONLINE 6
  7. 7. ACCESS Images from Flickr users katielips, pealco, and *nathan 7
  8. 8. ACCESS ONLINE 8
  9. 9. DATA INPUT 9
  10. 10. DATA INPUT ONLINE 10
  11. 11. 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 • Engagment •• User: Enable information entry & manipulation •• Business: Accumulate content & data 11
  12. 12. 65,000 videos per day –July 2006 12
  13. 13. 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 13
  14. 14. • Repeatable design solutions to common problems • Work “positively” for DESIGN PATTERNS specific problems in specific contexts • Capture best practices that solve real user needs • Between principles & guidelines • A design vocabulary 14
  15. 15. • If your goals are… , try solution… “IT DEPENDS” • If your constraints are…, try solution… 15
  16. 16. Data Sources • Usability Testing •• Errors, issues, assists, completion rates, time spent per task, satisfaction scores • Field Testing •• Sources used, environment, context • Customer Support •• Top problems, number of incidents • Web Conventions Survey •• Common solutions, unique approaches • Site Tracking •• Completion rates, entry points, exit points, elements utilized, data entered • Eye Tracking •• Number of eye fixations, length of fixations, heat maps, scan paths BUSINESS OF DESIGN, EBAY INC. APRIL 2004 16
  17. 17. • Isolate individual best practices ONE AT A TIME • Look at simple examples of each 17
  18. 18. INFORMATION 18
  19. 19. Information • Layout •• Label positioning •• Content groupings • Input Affordances •• Formats, required fields • Actions •• Primary & secondary • Help & Tips • Visual Hierarchy 19
  20. 20. 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 20
  21. 21. Top-aligned Labels 21
  22. 22. 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 22
  23. 23. Right-aligned labels 23
  24. 24. 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 24
  25. 25. Left-aligned labels 25
  26. 26. 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 26
  27. 27. • 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 27
  28. 28. 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 28
  29. 29. All fields required 29
  30. 30. All fields required 30
  31. 31. Most fields required 31
  32. 32. Few fields optional 32
  33. 33. 33
  34. 34. 34
  35. 35. • 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 35
  36. 36. 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 36
  37. 37. 37
  38. 38. 38
  39. 39. 39
  40. 40. • When possible, use field length as an BEST PRACTICE affordance • Otherwise consider a consistent length that provides enough room for inputs 40
  41. 41. 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 41
  42. 42. Lots of content grouping 42
  43. 43. Excessive visual noise 43
  44. 44. Minimum amount necessary 44
  45. 45. 45
  46. 46. Minimum amount necessary 46
  47. 47. 47
  48. 48. • Use relevant content groupings to organize BEST PRACTICE forms • Use the minimum amount of visual elements necessary to communicate useful relationships 48
  49. 49. 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 49
  50. 50. 50
  51. 51. 51
  52. 52. 52
  53. 53. 53
  54. 54. 54
  55. 55. 55
  56. 56. • Avoid secondary actions if possible BEST PRACTICE • Otherwise, ensure a clear visual distinction between primary & secondary actions • Align primary actions with input fields for a clear path to completion 56
  57. 57. 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 57
  58. 58. Help Text 58
  59. 59. Lots of Help/Tips 59
  60. 60. 60
  61. 61. Automatic inline exposure 61
  62. 62. Automatic inline exposure 62
  63. 63. User-activated inline exposure 63
  64. 64. User-activated inline exposure 64
  65. 65. User-activated dialog exposure 65
  66. 66. User-activated section exposure 66
  67. 67. • Minimize the amount of help & tips required to fill out a form • Help visible and BEST PRACTICE adjacent to a data request is most useful • When lots of unfamiliar data is being requested, consider using a dynamic help system 67
  68. 68. INTERACTION 68
  69. 69. Interaction • Path to Completion • “Tabbing” • Progressive Disclosure • Exposing dependencies 69
  70. 70. 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 70
  71. 71. Remove Unnecessary Inputs 71
  72. 72. Flexible Data Input (555) 123-4444 555-123-4444 555 123 4444 555.123.4444 5551234444 72
  73. 73. Smart Defaults 73
  74. 74. Path to Completion 74
  75. 75. Clear Path to Completion 75
  76. 76. Path to completion 76
  77. 77. • 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 77
  78. 78. 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 78
  79. 79. 79
  80. 80. • Remember to account for tabbing behavior BEST PRACTICE • Use the tabindex attribute to control tabbing order • Consider tabbing expectations when laying out forms 80
  81. 81. Progressive Disclosure • Not all users require all available options all the time • Progressive disclosure provides additional options when appropriate •• Advanced options •• Gradual engagement 81
  82. 82. Exposing Options 82
  83. 83. Exposing Options 83
  84. 84. Dialog 84
  85. 85. Progressive Disclosure 85
  86. 86. Gradual Engagement 86
  87. 87. 87
  88. 88. 88
  89. 89. 89
  90. 90. • Map progressive disclosure to prioritized BEST PRACTICE user needs • Most effective when user-initiated • Maintain a consistent approach 90
  91. 91. 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 91
  92. 92. Selection Dependent Inputs 92
  93. 93. Page Level 93
  94. 94. Section Tabs 94
  95. 95. Section Finger Tabs 95
  96. 96. Section Selectors 96
  97. 97. Expose Below 97
  98. 98. Expose Within 98
  99. 99. Inactive Until Selected 99
  100. 100. Exposed & Grouped 100
  101. 101. 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 101
  102. 102. 102
  103. 103. 103
  104. 104. • Maintain clear relationship between BEST PRACTICE initial selection options • Clearly associate additional inputs with their trigger • Avoid “jumping” that disassociates initial selection options 104
  105. 105. FEEDBACK 105
  106. 106. Feedback • Inline validation •• Assistance • Errors •• Indication & Resolution • Progress •• Indication • Success •• Verification 106
  107. 107. Inline Validation • Provide direct feedback as data is entered •• Validate inputs •• Suggest valid inputs •• Help users stay within limits 107
  108. 108. Password Validation 108
  109. 109. Unique User Name Validation 109
  110. 110. Valid Input Suggestions 110
  111. 111. Maximum Character Count 111
  112. 112. • Use inline validation for inputs that have BEST PRACTICE potentially high error rates • Use suggested inputs to disambiguate • Communicate limits 112
  113. 113. 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 113
  114. 114. Error Messaging 114
  115. 115. Short Forms: too much? 115
  116. 116. Short Forms 116
  117. 117. Short Forms 117
  118. 118. 118
  119. 119. • Clearly communicate an error has occurred: top placement, visual contrast BEST PRACTICE • Provide actionable remedies to correct errors • Associate responsible fields with primary error message • “Double” the visual language where errors have occurred 119
  120. 120. Progress • Sometimes actions require some time to process •• Form submission •• Data calculations •• Uploads • Provide feedback when an action is in progress 120
  121. 121. Disable Submit Button 121
  122. 122. • Provide indication of tasks in progress BEST PRACTICE • Disable “submit” button after user clicks it to avoid duplicate submissions 122
  123. 123. Success • After successful form completion confirm data input in context •• On updated page •• On revised form • Provide feedback via •• Message (removable) •• Animated Indicator 123
  124. 124. 124
  125. 125. 125
  126. 126. Animated Indication 126
  127. 127. • Clearly communicate a data submission has BEST PRACTICE been successful • Provide feedback in context of data submitted 127
  128. 128. 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 128
  129. 129. 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 129
  130. 130. Web Form Creation Tools • Wufoo •• http://www.wufoo.com • Form Assembly •• http://www.formassembly.com • icebrrg •• http://www.icebrrg.com 130
  131. 131. PUTTING IT ALL TOGETHER… 131
  132. 132. 132
  133. 133. For more information… • Web Form Design: Filling in the Blanks • http://www.lukew.com/resources/ web_form_design.asp • Functioning Form •• www.lukew.com/ff/ • Site-Seeing: A Visual Approach to Web Usability •• Wiley & Sons • Drop me a note •• luke@lukew.com 133
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×