You're Still Doing It Wrong

5,350 views
5,231 views

Published on

In this extension to "It's the Little Things" from 2009, this presentation will focus on the most widely used interactive sets of elements and most frustrating user experience of the web: forms. By looking at the necessity of collecting data from web site visitors, we'll look at worst and best practices, managing user assumptions, new ideas and future considerations, and how we can help our visitors finish painful forms without frustrating them to the point of giving up and bouncing from your site.

Published in: Design
1 Comment
7 Likes
Statistics
Notes
No Downloads
Views
Total views
5,350
On SlideShare
0
From Embeds
0
Number of Embeds
1,637
Actions
Shares
0
Downloads
0
Comments
1
Likes
7
Embeds 0
No embeds

No notes for slide

  • Frontend Designer & Developer
    Work to simplify user interaction through IA, Design, etc
    Slideshow up on Slideshare and my site later today











  • At this point of our progression with developing and using the Web, it's nearly impossible to imagine where we'd be if we didn't have a method of getting information directly from web site visitors and into usable formats.

    Forms were originally included in the first versions of HTML in 1990 by Sir Tim Berners-Lee.
  • Since then, the specifications for them have barely changed. Today, we use them for almost everything. From searching to social networking like Facebook and Twitter to doing our taxes to searching for new web sites.
  • Since then, the specifications for them have barely changed. Today, we use them for almost everything. From searching to social networking like Facebook and Twitter to doing our taxes to searching for new web sites.
  • Except for some dramatic (and awesome) additions in HTML5, that is. But today we’ll concentrate on the design of forms, not how awesome the specs are for them.
  • But in all the years that we've had forms and we've tried getting information from our visitors, have we really progressed far enough in our design and use of them? Yes, but no. Because you're still doing it wrong.
  • Goal for Presentation: Make you realize that you're doing something wrong and motivate you to do it better. I say better, because there often is no absolute "right way" to do something on the web, but there is almost always a "better way".
  • Too Long; Didn’t Read
  • Steve Krug’s “Don’t Make Me Think!”: We don’t read pages; we scan them. We’re in a hurry, we know we don’t need to read everything, we’re good at it.

  • Please precede your number with a "+" and your country code (leaving off the leading 0 of your number if applicable). Examples: +447781488126 or +12125551212. Need help?
  • Please precede your number with a "+" and your country code (leaving off the leading 0 of your number if applicable). Examples: +447781488126 or +12125551212. Need help?
  • Please precede your number with a "+" and your country code (leaving off the leading 0 of your number if applicable). Examples: +447781488126 or +12125551212. Need help?



  • *Logical* Sections
  • Getting information is like having a conversation with your site visitor. Imagine having a conversation with someone you just met: the first thing you find out is their name, maybe some general information about where they’re from. Then you get the details. Lastly, you find out how you can contact them later if there’s ever a problem.

    Forms should be structured the same way.
  • Getting information is like having a conversation with your site visitor. Imagine having a conversation with someone you just met: the first thing you find out is their name, maybe some general information about where they’re from. Then you get the details. Lastly, you find out how you can contact them later if there’s ever a problem.

    Forms should be structured the same way.
  • Getting information is like having a conversation with your site visitor. Imagine having a conversation with someone you just met: the first thing you find out is their name, maybe some general information about where they’re from. Then you get the details. Lastly, you find out how you can contact them later if there’s ever a problem.

    Forms should be structured the same way.







  • UCD: Give the interface extensive attention at each step of the process
    TF: Focus on a single task at a time
    Using a single Call-To-Action minimizes lost conversions
    Remove all unnecessary surrounding content
  • UCD: Give the interface extensive attention at each step of the process
    TF: Focus on a single task at a time
    Using a single Call-To-Action minimizes lost conversions
    Remove all unnecessary surrounding content
  • UCD: Give the interface extensive attention at each step of the process
    TF: Focus on a single task at a time
    Using a single Call-To-Action minimizes lost conversions
    Remove all unnecessary surrounding content
  • UCD: Give the interface extensive attention at each step of the process
    TF: Focus on a single task at a time
    Using a single Call-To-Action minimizes lost conversions
    Remove all unnecessary surrounding content










  • “Numbers only–no dashes or spaces”
  • Offenders include:
    Constant Contact, Best Buy, Costco,
    AT&T, California DMV, Consumer Reports, Geico…
  • Your service just didn’t account for how they normally would right it.


  • Seriously... it’s pretty easy...








  • “I would like to use Huffduffer. I want my username to be ___________ and I want my password to be ___________. My email address is ___________.
    By the way, my name is ___________ and my website is ___________.”
  • “Hello, my name is ___________ ___________ and I’m writing you today to learn more about […] I live at ___________ in the 94114 area and I would like o hear back from you soon and learn more about this vehicle. Please call me at ___________ at your earliest convenience.

  • Confirmed by Vast.com and Kelly Blue Book.

    But will it work for everyone?
  • “I want to make bingo cards! Save them for me under my __________ and I’d like to use this word ___________ as my password.

    Doing it wrong. Found a 22% decrease in conversions.

    But, they did one thing right: tested it.


  • Has a lot of visual interaction. Is quite time consuming to comprehend and interact with.
  • Has a lot of visual interaction. Is quite time consuming to comprehend and interact with.
  • Has a lot of visual interaction. Is quite time consuming to comprehend and interact with.
  • Less visual interaction than left aligned with a more clear association of label to input, but this can still be further optimized.
  • Less visual interaction than left aligned with a more clear association of label to input, but this can still be further optimized.
  • Less visual interaction than left aligned with a more clear association of label to input, but this can still be further optimized.
  • Very clear label to input association with a single visual path flowing down the fields. Fastest completion and comprehension times of all previous formatting choices.

    To find out more, visit http://uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php






  • Your CSS must lay your label over your input.
  • Your CSS must lay your label over your input.
  • Your CSS must lay your label over your input.
  • Your CSS must lay your label over your input.
  • Your CSS must lay your label over your input.
  • Your CSS must lay your label over your input.
  • Your CSS must lay your label over your input.
  • Your CSS must lay your label over your input.
  • Your CSS must lay your label over your input.
  • Label context disappears on input focus. How am I supposed to know what I was going to type in here?
  • Label context disappears on input focus. How am I supposed to know what I was going to type in here?
  • Label context disappears on input focus. How am I supposed to know what I was going to type in here?
  • Label context disappears on input focus. How am I supposed to know what I was going to type in here?
  • Label context disappears on input focus. How am I supposed to know what I was going to type in here?
  • Label context disappears on input focus. How am I supposed to know what I was going to type in here?
  • Label context disappears on input focus. How am I supposed to know what I was going to type in here?
  • Label context disappears on input focus. How am I supposed to know what I was going to type in here?
  • Label context disappears on input focus. How am I supposed to know what I was going to type in here?
  • Label context disappears on input focus. How am I supposed to know what I was going to type in here?
  • Better! Context doesn’t disappear completely.
  • Better! Context doesn’t disappear completely.
  • Better! Context doesn’t disappear completely.
  • Better! Context doesn’t disappear completely.
  • Better! Context doesn’t disappear completely.
  • Better! Context doesn’t disappear completely.
  • Better! Context doesn’t disappear completely.
  • Better! Context doesn’t disappear completely.
  • Better! Context doesn’t disappear completely.
  • Better! Context doesn’t disappear completely.
  • Better! Context doesn’t disappear completely.
  • Hooray! a jQuery plugin to do the work for you!

    But use this sparingly.
















  • Testing the relative effectiveness of multiple versions of the same advertisement, or other content, in referring visitors to a site.













  • You're Still Doing It Wrong

    1. 1. You’re Still Doing It Wrong
    2. 2. @paularmstrong
    3. 3. Forms
    4. 4. turbotax.com
    5. 5. An Internet Without Forms
    6. 6. Social Networks
    7. 7. Social Networks
    8. 8. Where Would We Be?
    9. 9. Good Question
    10. 10. © Cern, Geneva
    11. 11. INTERNET SERIOUS BUSINESS © Cern, Geneva
    12. 12. HTML5
    13. 13. Progression and Lessons Learned
    14. 14. Goal: A Better Way
    15. 15. tl;dr
    16. 16. Instructions Are Ignored
    17. 17. twitter.com/devices (2009)
    18. 18. twitter.com/devices (2009)
    19. 19. twitter.com/devices (2009)
    20. 20. twitter.com/devices (2010)
    21. 21. twitter.com/devices (2010)
    22. 22. twitter.com/devices (2010)
    23. 23. Organize Into Sections
    24. 24. • Name, Age, Location, etc
    25. 25. • Name, Age, Location, etc • Details, Quantity of Order, Relayed Info
    26. 26. • Name, Age, Location, etc • Details, Quantity of Order, Relayed Info • Contact Method, Email, Phone
    27. 27. • Ask for optional information after the required
    28. 28. • Ask for optional information after the required • Consider multi-page forms
    29. 29. • Ask for optional information after the required • Consider multi-page forms • Let them know before they start
    30. 30. • Ask for optional information after the required • Consider multi-page forms • Let them know before they start • Relay progress back to the user
    31. 31. officedepot.com
    32. 32. officedepot.com
    33. 33. officedepot.com
    34. 34. amazon.com
    35. 35. amazon.com
    36. 36. Be Minimalist
    37. 37. Be Minimalist • User-Centered Design
    38. 38. Be Minimalist • User-Centered Design • Task-Focused
    39. 39. Be Minimalist • User-Centered Design • Task-Focused • Single Call-To-Action
    40. 40. Be Minimalist • User-Centered Design • Task-Focused • Single Call-To-Action • Kill the Clutter
    41. 41. digg.com
    42. 42. digg.com
    43. 43. dailymile.com
    44. 44. dailymile.com
    45. 45. godaddy.com
    46. 46. godaddy.com
    47. 47. scribbls.com
    48. 48. scribbls.com
    49. 49. cl.ly
    50. 50. cl.ly
    51. 51. my.cl.ly/register
    52. 52. my.cl.ly/register
    53. 53. my.cl.ly/register
    54. 54. my.cl.ly/login
    55. 55. my.cl.ly/register
    56. 56. Flexible Form Fields
    57. 57. No Dashes or Spaces
    58. 58. unixwiz.net/ndos-shame.html
    59. 59. You User Was Right
    60. 60. Remove All Non-AlphaNumeric Characters
    61. 61. <?php preg_replace( /[W_]/g, '', ‘+1-(650) 328-2345’ ); // returns -> 16503282345 ?>
    62. 62. Reformat with JavaScript
    63. 63. Reformat with JavaScript
    64. 64. Account For Differences
    65. 65. Account For Differences • Phone Numbers
    66. 66. Account For Differences • Phone Numbers • Postal Codes
    67. 67. Account For Differences • Phone Numbers • Postal Codes • Credit Cards
    68. 68. Account For Differences • Phone Numbers • Postal Codes • Credit Cards • Dates
    69. 69. Mad-Libs Style Forms
    70. 70. One day, [noun] [verb, pt.] down to the [noun] and saw a [adjective] [noun].
    71. 71. huffduffer.com/signup
    72. 72. usedcars.kbb.com
    73. 73. lukew.com/ff/entry.asp?1007
    74. 74. 25-40% Increased Conversion Rate
    75. 75. bingocardcreator.com
    76. 76. bingocardcreator.com
    77. 77. Label Position
    78. 78. Left Aligned Right Aligned Above Overlay
    79. 79. First Name Last Name Email Address
    80. 80. First Name Last Name Email Address
    81. 81. First Name Last Name Email Address
    82. 82. First Name Last Name Email Address
    83. 83. First Name Last Name Email Address
    84. 84. First Name Last Name Email Address
    85. 85. Above 30% Left-Aligned 29% Right-Aligned 41% smashingmagazine.com/2008/07/04/web-form-design-patterns-sign-up-forms/
    86. 86. Left Aligned Right Aligned Above Overlay
    87. 87. First Name Last Name Email Address
    88. 88. First Name Last Name Email Address
    89. 89. <input type=“text” value=“Search Here” />
    90. 90. <input type=“text” value=“Search Here” />
    91. 91. <input type=“text” value=“Search Here” onclick=“this.value=‘’” />
    92. 92. <input type=“text” value=“Search Here” onclick=“this.value=‘’” />
    93. 93. Input Value != Label
    94. 94. First Name Last Name Email Address Submit
    95. 95. Label First Name Last Name Email Address Submit
    96. 96. Input First Name Last Name Email Address Submit
    97. 97. First Name Last Name Email Address Submit
    98. 98. Last Name Email Address Submit
    99. 99. Paul Email Address Submit
    100. 100. Paul Armstrong Submit
    101. 101. First Name Last Name Email Address Submit
    102. 102. First Name Last Name Email Address Submit
    103. 103. Paul Name First Last Name Email Address Submit
    104. 104. Paul Name First Last Name Email Address Submit
    105. 105. Paul Name First Last Name Armstrong Email Address Submit
    106. 106. $(‘input’).labelover(); github.com/paularmstrong/labelover
    107. 107. Usability & Accessibility
    108. 108. Don’t Use Helper Values
    109. 109. <input type=“text” value=“First Name” />
    110. 110. Tab Index
    111. 111. Error Messages
    112. 112. Color Hinting Success Error
    113. 113. en.wikipedia.org/wiki/File:Ishihara_9.png
    114. 114. Color Hinting Success Error
    115. 115. Color Hinting Success Error
    116. 116. Iconography Success Error
    117. 117. Iconography Error Success
    118. 118. Iconography Error Success
    119. 119. Error Proximity
    120. 120. my.cl.ly/register
    121. 121. facebook.com
    122. 122. yahoo.com
    123. 123. Test Everything
    124. 124. bingocardcreator.com
    125. 125. A/B Testing
    126. 126. A B kalzumeus.com/2010/02/27/lesson-from-madlibs-signup-fad-do-your-own-tests/
    127. 127. Free and Easy http://google.com/websiteoptimizer
    128. 128. • Always a Better Way
    129. 129. • Always a Better Way • Be Minimal
    130. 130. • Always a Better Way • Be Minimal • Be Flexible
    131. 131. • Always a Better Way • Be Minimal • Be Flexible • Be Open to New Things
    132. 132. • Always a Better Way • Be Minimal • Be Flexible • Be Open to New Things • Test!
    133. 133. @paularmstrong paul@paularmstrongdesigns.com http://paularmstrongdesigns.com

    ×