INPUT: MOVING
BEYOND STATIC FORMS
LUKE WROBLEWSKI
BAYCHI/IXDA, FEBRUARY 2010




                             1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Forms Suck.




              18
MOVING BEYOND STATIC FORMS

1.  Rich Interactions to enhance standard forms
2.  Commonly used tools for input
3.  Web serv...
MOVING BEYOND STATIC FORMS

1.  Rich Interactions to enhance standard forms
2.  Commonly used tools for input
3.  Web serv...
Rich Interactions

Inline Validation
•    Real time feedback to validate inputs, suggest valid
     answers, & help people...
Unique User Name Validation




                              22
Inline Validation on Yahoo! Registration




                                           23
Validating Before Input




                          24
Inline Validation




                    25
Preventing Errors




                    26
Inline Validation Testing



VS. a page submit/refresh model
•    22% increase in completions
•    31% increase in satisfa...
Where to Show Inline Validation




                                   30% noticed inline validation
                     ...
Where to Show Inline Validation




                                   80-100% noticed inline
                            ...
When to Show Inline Validation


                                  Highest success rates,
                                ...
When to Show Inline Validation




etre usability testing,
March 2009                        31
How to Show Inline Validation




                                 Most people are “hunt and peck” typists

              ...
Real Time Feedback




                     33
Real Time Feedback




                     34
Real Time Feedback




                     35
Valid Input Suggestions




                          36
37
Inline Validation & Additional Inputs




                                        38
•  Use inline validation for
                   inputs that have potentially
                   high error rates
         ...
Password Masks




                 “Usability suffers when users
                 type in passwords and the only
        ...
Password Masks




                 41
HTML Input Types




Images from Dive Into HTML5 by Mark Pilgrim
                                              42
HTML Input Types




Images from Dive Into HTML5 by Mark Pilgrim
                                              43
HTML Input Types




Images from Dive Into HTML5 by Mark Pilgrim
                                              44
HTML Input Types




Images from Dive Into HTML5 by Mark Pilgrim
                                              45
Required Formats




                   46
Input Masks


              Surface formatting right up
              front




              Do not gradually reveal
    ...
MOVING BEYOND STATIC FORMS

1.  Rich Interactions to enhance standard forms
2.  Commonly used tools for input
3.  Web serv...
Commonly Used Tools

Communication Tools
•    Email: 247 billion emails/day (worldwide)
•    Text Messaging: 4.1 billion t...
Using Email for Input




                        50
Using Email for Input




                        51
Using Email for Input




                        52
Using Email for Input




                        53
Using Email for Input




                        54
Using Email for Input




                        55
Using Email for Input




                        56
Using SMS Text for Input




                           57
Using the Web Browser for Input




                                  58
Using the Web Browser for Input




                                  59
Using the Web Browser for Input




                                  60
Using the Web Browser for Input




                                  61
Using the Web Browser for Input




                                  62
Using the Web Browser for Input




                              Enables anyone who knows
                              H...
Supporting Multiple Tools

                            Email




                            Twitter




                 ...
MOVING BEYOND STATIC FORMS

1.  Rich Interactions to enhance standard forms
2.  Commonly used tools for input
3.  Web serv...
Web Services

Remove barriers to account creation
•    Over 60 million people use Facebook Connect on
     external sites ...
Typical Account Creation




                           67
Typical Account Creation




                           68
Re-create your identity & friends list




                                         69
Simplified Account Creation




                              70
Web Services for Account Creation




                                    71
Web Services for Account Creation




                                    72
Instant-on Start Experience




                              73
Single Sign-on Solutions




                           74
Instant-on Start Experience




                              75
Instant-on Start Experience




                              76
MOVING BEYOND STATIC FORMS

1.  Rich Interactions to enhance standard forms
2.  Commonly used tools for input
3.  Web serv...
Why Care About Mobile?
Mobile Web growth has outpaced desktop Web growth 8x
Smartphone sales will pass PC sales in 2011


...
Text Input on Mobile is Hard




                               “The rule of thumb is to limit
                           ...
Mobile Device Capabilities




       Form Fields
       Audio
       Location
       Gestures
       Images



          ...
Field Zoom on the iPhone




                           81
Field Zoom on the iPhone




                           82
Left Aligned Labels on Android




                                 83
Top Aligned Labels

•  When data being
   collected is familiar
•  Minimize time to
   completion
•  Flexibility for local...
HTML5 Input Types
                    Images from Dive Into HTML5 by Mark Pilgrim




                                    ...
HTML5 Input Types
                    Images from Dive Into HTML5 by Mark Pilgrim




                                    ...
HTML5 Input Types
                    Images from Dive Into HTML5 by Mark Pilgrim




                                    ...
Pop-Up Menus on iPhone




                         88
Pop-Up Menus on iPhone




                         89
Multi-Field Pop-Up Menus on iPhone




                                     90
Multi-Field Pop-Up Menus on Android




                                      91
Input Controls on Mobile Devices

Android               WebOS        iPhone OS




                                       ...
Multiple Orientations




                        93
Location as Input




                    94
Location as Input




                    95
Location as Input




                    96
Location Systems
                     Accuracy                        Positioning Time     Battery Life

 GPS             ...
Location & Orientation as Input




                                  98
Location & Orientation as Input




                                  99
Gestures as Input




                    100
Voice as Input




                 101
102
Images as Input




                  103
Images as Input




                  104
Images as Input




                  105
Images as Input




                  106
Images as Input




                  107
Images as Input




                  108
Images as Input




                  109
Input Capabilities
Form Fields
Audio
Location
Gestures
Images




                     110
MOVING BEYOND STATIC FORMS

1.  Rich Interactions to enhance standard forms
2.  Commonly used tools for input
3.  Web serv...
CAN I USE THIS NOW?
1.  Rich Interactions to enhance standard forms
   IE6 is less than 20% of all browsers
2.  Commonly u...
For more information…


           •  More Information
             •  @lukewdesign
             •  www.lukew.com/ff/


  ...
Upcoming SlideShare
Loading in...5
×

Luke Wroblewski at BayCHI IxD BOF: Input: Moving Beyond Static Forms

2,398

Published on

Luke Wroblewski at BayCHI's Interaction Design BOF, February 17, 2010:

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

No Downloads
Views
Total Views
2,398
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
31
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Luke Wroblewski at BayCHI IxD BOF: Input: Moving Beyond Static Forms

  1. 1. INPUT: MOVING BEYOND STATIC FORMS LUKE WROBLEWSKI BAYCHI/IXDA, FEBRUARY 2010 1
  2. 2. 2
  3. 3. 3
  4. 4. 4
  5. 5. 5
  6. 6. 6
  7. 7. 7
  8. 8. 8
  9. 9. 9
  10. 10. 10
  11. 11. 11
  12. 12. 12
  13. 13. 13
  14. 14. 14
  15. 15. 15
  16. 16. 16
  17. 17. 17
  18. 18. Forms Suck. 18
  19. 19. MOVING BEYOND STATIC FORMS 1.  Rich Interactions to enhance standard forms 2.  Commonly used tools for input 3.  Web services to bypass registration & set-up 4.  New capabilities on mobile devices 19
  20. 20. MOVING BEYOND STATIC FORMS 1.  Rich Interactions to enhance standard forms 2.  Commonly used tools for input 3.  Web services to bypass registration & set-up 4.  New capabilities on mobile devices 20
  21. 21. Rich Interactions Inline Validation •  Real time feedback to validate inputs, suggest valid answers, & help people stay within limits Input Masks & Types •  Take the burden of formatting answers off people Inline Multi-step Forms •  Utilize rich interactions to maintain context TESTING IN PROGRESS 21
  22. 22. Unique User Name Validation 22
  23. 23. Inline Validation on Yahoo! Registration 23
  24. 24. Validating Before Input 24
  25. 25. Inline Validation 25
  26. 26. Preventing Errors 26
  27. 27. Inline Validation Testing VS. a page submit/refresh model •  22% increase in completions •  31% increase in satisfaction ratings •  42% decrease in completion times •  22% decrease in errors made •  47% decrease in number of eye fixations etre usability testing, March 2009 27
  28. 28. Where to Show Inline Validation 30% noticed inline validation in top part of form: name, email, gender, location “How do you know that’s my correct email address?” etre usability testing, March 2009 28
  29. 29. Where to Show Inline Validation 80-100% noticed inline validation in bottom part of form: user ID & password etre usability testing, March 2009 29
  30. 30. When to Show Inline Validation Highest success rates, lowest number of errors, shortest time to completion, highest satisfaction rates 7-10 seconds slower “It’s frustrating that you don’t get the chance to put anything in [the field] before it’s flashing red at you.” etre usability testing, March 2009 30
  31. 31. When to Show Inline Validation etre usability testing, March 2009 31
  32. 32. How to Show Inline Validation Most people are “hunt and peck” typists Persistent messages support both “check as you go” & “check after complete” done strategies etre usability testing, March 2009 32
  33. 33. Real Time Feedback 33
  34. 34. Real Time Feedback 34
  35. 35. Real Time Feedback 35
  36. 36. Valid Input Suggestions 36
  37. 37. 37
  38. 38. Inline Validation & Additional Inputs 38
  39. 39. •  Use inline validation for inputs that have potentially high error rates •  Validate “open” inputs after BEST PRACTICE people finish •  Keep validation messages persistent •  Use suggested inputs to disambiguate •  Avoiding “jumping” forms around 39
  40. 40. Password Masks “Usability suffers when users type in passwords and the only feedback they get is a row of bullets. Typically, masking passwords doesn't even increase security, but it does cost you business due to login failures.” - Jakob Nielsen, 2009 40
  41. 41. Password Masks 41
  42. 42. HTML Input Types Images from Dive Into HTML5 by Mark Pilgrim 42
  43. 43. HTML Input Types Images from Dive Into HTML5 by Mark Pilgrim 43
  44. 44. HTML Input Types Images from Dive Into HTML5 by Mark Pilgrim 44
  45. 45. HTML Input Types Images from Dive Into HTML5 by Mark Pilgrim 45
  46. 46. Required Formats 46
  47. 47. Input Masks Surface formatting right up front Do not gradually reveal formatting as people enter input 47
  48. 48. MOVING BEYOND STATIC FORMS 1.  Rich Interactions to enhance standard forms 2.  Commonly used tools for input 3.  Web services to bypass registration & set-up 4.  New capabilities on mobile devices 48
  49. 49. Commonly Used Tools Communication Tools •  Email: 247 billion emails/day (worldwide) •  Text Messaging: 4.1 billion text messages/day (US only) •  Instant Messaging, Twitter, etc. Web Browsers •  People spend more time off your site than on it •  Integrate Input options into the Web browser Supporting Multiple Tools •  Input can come from anywhere •  Let people use their existing workflow to provide input 49
  50. 50. Using Email for Input 50
  51. 51. Using Email for Input 51
  52. 52. Using Email for Input 52
  53. 53. Using Email for Input 53
  54. 54. Using Email for Input 54
  55. 55. Using Email for Input 55
  56. 56. Using Email for Input 56
  57. 57. Using SMS Text for Input 57
  58. 58. Using the Web Browser for Input 58
  59. 59. Using the Web Browser for Input 59
  60. 60. Using the Web Browser for Input 60
  61. 61. Using the Web Browser for Input 61
  62. 62. Using the Web Browser for Input 62
  63. 63. Using the Web Browser for Input Enables anyone who knows HTML, CSS, and JavaScript to create powerful Firefox add-ons.  Add browser actions, page actions, and content scripts to the Google Chrome browser using HMTL, CSS and Javascript. 63
  64. 64. Supporting Multiple Tools Email Twitter Calendar Portal/Home Browser 64
  65. 65. MOVING BEYOND STATIC FORMS 1.  Rich Interactions to enhance standard forms 2.  Commonly used tools for input 3.  Web services to bypass registration & set-up 4.  New capabilities on mobile devices 65
  66. 66. Web Services Remove barriers to account creation •  Over 60 million people use Facebook Connect on external sites (80k total) per month Don’t re-create what they’ve already done •  Identity, bio, profile, contact information •  Friends & contact lists Deliver an instant-on start experience 66
  67. 67. Typical Account Creation 67
  68. 68. Typical Account Creation 68
  69. 69. Re-create your identity & friends list 69
  70. 70. Simplified Account Creation 70
  71. 71. Web Services for Account Creation 71
  72. 72. Web Services for Account Creation 72
  73. 73. Instant-on Start Experience 73
  74. 74. Single Sign-on Solutions 74
  75. 75. Instant-on Start Experience 75
  76. 76. Instant-on Start Experience 76
  77. 77. MOVING BEYOND STATIC FORMS 1.  Rich Interactions to enhance standard forms 2.  Commonly used tools for input 3.  Web services to bypass registration & set-up 4.  New capabilities on mobile devices 77
  78. 78. Why Care About Mobile? Mobile Web growth has outpaced desktop Web growth 8x Smartphone sales will pass PC sales in 2011 PC Desktop Internet Mobile Consumer 100M+ 1B+ 10B+ 1990 2000 2010 2020 Note: PC installed base reached 100MM in 1993, cellphone / Internet users reached 1B in 2002 / 2005 respectively;25 78 Source: ITU, Mark Lipacis, Morgan Stanley Research.
  79. 79. Text Input on Mobile is Hard “The rule of thumb is to limit the use of forms in the mobile context” –Mobile Web Design & Development, O’Reilly 2009 79
  80. 80. Mobile Device Capabilities Form Fields Audio Location Gestures Images 80
  81. 81. Field Zoom on the iPhone 81
  82. 82. Field Zoom on the iPhone 82
  83. 83. Left Aligned Labels on Android 83
  84. 84. Top Aligned Labels •  When data being collected is familiar •  Minimize time to completion •  Flexibility for localization and complex inputs •  Easier to code: no floats or tables •  Accessibility: label, field in order •  Better format for mobile screen •  Support help/error messaging column •  Require more vertical space 84
  85. 85. HTML5 Input Types Images from Dive Into HTML5 by Mark Pilgrim 85
  86. 86. HTML5 Input Types Images from Dive Into HTML5 by Mark Pilgrim 86
  87. 87. HTML5 Input Types Images from Dive Into HTML5 by Mark Pilgrim 87
  88. 88. Pop-Up Menus on iPhone 88
  89. 89. Pop-Up Menus on iPhone 89
  90. 90. Multi-Field Pop-Up Menus on iPhone 90
  91. 91. Multi-Field Pop-Up Menus on Android 91
  92. 92. Input Controls on Mobile Devices Android WebOS iPhone OS 92
  93. 93. Multiple Orientations 93
  94. 94. Location as Input 94
  95. 95. Location as Input 95
  96. 96. Location as Input 96
  97. 97. Location Systems Accuracy Positioning Time Battery Life GPS 10m 2-10 minutes (only 5-6 hours on outdoors) most phones WiFi 50m (improves with Almost instant No additional density) (server connect & effect lookup) Cell tower 100-1400m (based on Almost instant Negligible triangulation density) (server connect & lookup) Single Cell 500-2500m (based on Almost instant Negligible Tower density) (server connect & lookup) IP Country: 99% Almost instant Negligible City: 46% US, 53% Intl (server connect & Zip: 0% lookup) Smartphones: hybrid of GPS, Wifi, and cell tower triangulation Laptops/desktops: WiFi, IP, rarely GPS 97
  98. 98. Location & Orientation as Input 98
  99. 99. Location & Orientation as Input 99
  100. 100. Gestures as Input 100
  101. 101. Voice as Input 101
  102. 102. 102
  103. 103. Images as Input 103
  104. 104. Images as Input 104
  105. 105. Images as Input 105
  106. 106. Images as Input 106
  107. 107. Images as Input 107
  108. 108. Images as Input 108
  109. 109. Images as Input 109
  110. 110. Input Capabilities Form Fields Audio Location Gestures Images 110
  111. 111. MOVING BEYOND STATIC FORMS 1.  Rich Interactions to enhance standard forms 2.  Commonly used tools for input 3.  Web services to bypass registration & set-up 4.  New capabilities on mobile devices 111
  112. 112. CAN I USE THIS NOW? 1.  Rich Interactions to enhance standard forms IE6 is less than 20% of all browsers 2.  Commonly used tools for input Email: 247 billion emails/day (worldwide) Text Messaging: 4.1 billion text messages/day (US only) 3.  Web services to bypass registration & set-up Over 60 million people use Facebook Connect per month 80K sites have implemented Facebook Connect 4.  New capabilities on mobile devices RIM, Android, iPhone all use WebKit browser Smartphone sales will pass PC sales next year 112
  113. 113. For more information… •  More Information •  @lukewdesign •  www.lukew.com/ff/ •  Web Form Design •  www.rosenfeldmedia.com/books/ webforms/ •  Discount code: LUKE (25%) 113
  1. A particular slide catching your eye?

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

×