• Save
You're Still Doing It Wrong
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

You're Still Doing It Wrong

on

  • 6,411 views

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 ...

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.

Statistics

Views

Total Views
6,411
Views on SlideShare
4,780
Embed Views
1,631

Actions

Likes
7
Downloads
0
Comments
1

9 Embeds 1,631

http://paularmstrongdesigns.com 1569
http://feeds.feedburner.com 38
http://www.slideshare.net 7
http://schoolkillscreative.blogs.sapo.pt 5
http://coderwall.com 5
http://static.slidesharecdn.com 4
http://www.lmodules.com 1
http://translate.googleusercontent.com 1
http://theoldreader.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • <br />
  • Frontend Designer & Developer <br /> Work to simplify user interaction through IA, Design, etc <br /> Slideshow up on Slideshare and my site later today <br /> <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • At this point of our progression with developing and using the Web, it&apos;s nearly impossible to imagine where we&apos;d be if we didn&apos;t have a method of getting information directly from web site visitors and into usable formats. <br /> <br /> Forms were originally included in the first versions of HTML in 1990 by Sir Tim Berners-Lee. <br />
  • 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. <br />
  • 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. <br />
  • Except for some dramatic (and awesome) additions in HTML5, that is. But today we&#x2019;ll concentrate on the design of forms, not how awesome the specs are for them. <br />
  • But in all the years that we&apos;ve had forms and we&apos;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&apos;re still doing it wrong. <br />
  • Goal for Presentation: Make you realize that you&apos;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". <br />
  • Too Long; Didn&#x2019;t Read <br />
  • Steve Krug&#x2019;s &#x201C;Don&#x2019;t Make Me Think!&#x201D;: We don&#x2019;t read pages; we scan them. We&#x2019;re in a hurry, we know we don&#x2019;t need to read everything, we&#x2019;re good at it. <br />
  • <br />
  • 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? <br />
  • 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? <br />
  • 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? <br />
  • <br />
  • <br />
  • <br />
  • *Logical* Sections <br />
  • 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&#x2019;re from. Then you get the details. Lastly, you find out how you can contact them later if there&#x2019;s ever a problem. <br /> <br /> Forms should be structured the same way. <br />
  • 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&#x2019;re from. Then you get the details. Lastly, you find out how you can contact them later if there&#x2019;s ever a problem. <br /> <br /> Forms should be structured the same way. <br />
  • 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&#x2019;re from. Then you get the details. Lastly, you find out how you can contact them later if there&#x2019;s ever a problem. <br /> <br /> Forms should be structured the same way. <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • UCD: Give the interface extensive attention at each step of the process <br /> TF: Focus on a single task at a time <br /> Using a single Call-To-Action minimizes lost conversions <br /> Remove all unnecessary surrounding content <br />
  • UCD: Give the interface extensive attention at each step of the process <br /> TF: Focus on a single task at a time <br /> Using a single Call-To-Action minimizes lost conversions <br /> Remove all unnecessary surrounding content <br />
  • UCD: Give the interface extensive attention at each step of the process <br /> TF: Focus on a single task at a time <br /> Using a single Call-To-Action minimizes lost conversions <br /> Remove all unnecessary surrounding content <br />
  • UCD: Give the interface extensive attention at each step of the process <br /> TF: Focus on a single task at a time <br /> Using a single Call-To-Action minimizes lost conversions <br /> Remove all unnecessary surrounding content <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • &#x201C;Numbers only&#x2013;no dashes or spaces&#x201D; <br />
  • Offenders include: <br /> Constant Contact, Best Buy, Costco, <br /> AT&T, California DMV, Consumer Reports, Geico&#x2026; <br />
  • Your service just didn&#x2019;t account for how they normally would right it. <br /> <br /> <br />
  • Seriously... it&#x2019;s pretty easy... <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • &#x201C;I would like to use Huffduffer. I want my username to be ___________ and I want my password to be ___________. My email address is ___________. <br /> By the way, my name is ___________ and my website is ___________.&#x201D; <br />
  • &#x201C;Hello, my name is ___________ ___________ and I&#x2019;m writing you today to learn more about [&#x2026;] 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. <br />
  • <br />
  • Confirmed by Vast.com and Kelly Blue Book. <br /> <br /> But will it work for everyone? <br />
  • &#x201C;I want to make bingo cards! Save them for me under my __________ and I&#x2019;d like to use this word ___________ as my password. <br /> <br /> Doing it wrong. Found a 22% decrease in conversions. <br /> <br /> But, they did one thing right: tested it. <br />
  • <br />
  • <br />
  • Has a lot of visual interaction. Is quite time consuming to comprehend and interact with. <br />
  • Has a lot of visual interaction. Is quite time consuming to comprehend and interact with. <br />
  • Has a lot of visual interaction. Is quite time consuming to comprehend and interact with. <br />
  • Less visual interaction than left aligned with a more clear association of label to input, but this can still be further optimized. <br />
  • Less visual interaction than left aligned with a more clear association of label to input, but this can still be further optimized. <br />
  • Less visual interaction than left aligned with a more clear association of label to input, but this can still be further optimized. <br />
  • 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. <br /> <br /> To find out more, visit http://uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • Your CSS must lay your label over your input. <br />
  • Your CSS must lay your label over your input. <br />
  • Your CSS must lay your label over your input. <br />
  • Your CSS must lay your label over your input. <br />
  • Your CSS must lay your label over your input. <br />
  • Your CSS must lay your label over your input. <br />
  • Your CSS must lay your label over your input. <br />
  • Your CSS must lay your label over your input. <br />
  • Your CSS must lay your label over your input. <br />
  • Label context disappears on input focus. How am I supposed to know what I was going to type in here? <br />
  • Label context disappears on input focus. How am I supposed to know what I was going to type in here? <br />
  • Label context disappears on input focus. How am I supposed to know what I was going to type in here? <br />
  • Label context disappears on input focus. How am I supposed to know what I was going to type in here? <br />
  • Label context disappears on input focus. How am I supposed to know what I was going to type in here? <br />
  • Label context disappears on input focus. How am I supposed to know what I was going to type in here? <br />
  • Label context disappears on input focus. How am I supposed to know what I was going to type in here? <br />
  • Label context disappears on input focus. How am I supposed to know what I was going to type in here? <br />
  • Label context disappears on input focus. How am I supposed to know what I was going to type in here? <br />
  • Label context disappears on input focus. How am I supposed to know what I was going to type in here? <br />
  • Better! Context doesn&#x2019;t disappear completely. <br />
  • Better! Context doesn&#x2019;t disappear completely. <br />
  • Better! Context doesn&#x2019;t disappear completely. <br />
  • Better! Context doesn&#x2019;t disappear completely. <br />
  • Better! Context doesn&#x2019;t disappear completely. <br />
  • Better! Context doesn&#x2019;t disappear completely. <br />
  • Better! Context doesn&#x2019;t disappear completely. <br />
  • Better! Context doesn&#x2019;t disappear completely. <br />
  • Better! Context doesn&#x2019;t disappear completely. <br />
  • Better! Context doesn&#x2019;t disappear completely. <br />
  • Better! Context doesn&#x2019;t disappear completely. <br />
  • Hooray! a jQuery plugin to do the work for you! <br /> <br /> But use this sparingly. <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • Testing the relative effectiveness of multiple versions of the same advertisement, or other content, in referring visitors to a site. <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />

You're Still Doing It Wrong Presentation Transcript

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