Making the Web Easy

Making the Web Easy

Your website's users want to get stuff done, and you probably aren't making it easy for them. When users encounter forms with unnecessary steps, content that requires too many clicks to access, or things that just don't make sense, they often give up. In this talk, you’ll see some practical examples of sites that do a good job of making interactions and content easy to follow and understand, and you'll learn how to help your users get to where they want to be without annoying them on the way there.

Presented in 2016 at ConFoo.

Aca8eb0a7adcd5bb914b01fc2f3c713d?s=128

Clarissa Peterson

February 24, 2016
Tweet

Transcript

  1. Photo credit: Jeremy Brooks via Creative Commons Making the Web

    @clarissa
  2. None
  3. Photo credit: The Adventures of Kristin & Adam via Creative

    Commons
  4. Photo credit: Simone Bosotti via Creative Commons

  5. Photo credit: Jeff Turner via Creative Commons

  6. Photo credit: Paul Swansen via Creative Commons

  7. Photo credit: Aaron Fulkerson via Creative Commons

  8. Photo credit: Thomas Link via Creative Commons

  9. https://twitter.com/halvorson/status/686569663761891328

  10. What Is This Website?

  11. None
  12. None
  13. None
  14. None
  15. None
  16. None
  17. None
  18. None
  19. The One Piece of Information

  20. None
  21. None
  22. None
  23. None
  24. None
  25. Don't Hide Things

  26. None
  27. None
  28. None
  29. None
  30. Splash Screens? Almost Never

  31. No

  32. None
  33. None
  34. None
  35. Start Here

  36. None
  37. None
  38. None
  39. None
  40. None
  41. Form Fields

  42. <input'type="text"'name="username"> Text

  43. <input'type="date"'name="birthday"> Date

  44. <input'type="time"'name="start5time"> Time

  45. <input'type="email"'name="email5address"> Email

  46. <input'type="url"'name="website"> URL

  47. <input'type="number"'name="amount"> Number

  48. <input'type="tel"'name="phone5number"> Telephone

  49. Define What's Needed

  50. None
  51. None
  52. None
  53. None
  54. None
  55. Show Password

  56. None
  57. None
  58. Avoid Drop-downs For Short Lists

  59. None
  60. None
  61. None
  62. Ask For Less

  63. None
  64. None
  65. None
  66. None
  67. Show Which Fields Are Required

  68. None
  69. None
  70. <label> First'Name'<span>(required)</span> <input'type="email"' name="email5address"'required' aria5required="true"> </label>

  71. input[required]'{border:'1px' dashed'#f00;}' or input:required'{border:'1px' dashed'#f00;}

  72. Validate Immediately

  73. None
  74. None
  75. Use Placeholders

  76. None
  77. <label> Email'Address <input'type="email"'name="email5 address"'placeholder=' "name@domain.com"> </label>

  78. Line Height (Leading)

  79. None
  80. p'{'line5height:'1;'}

  81. p'{'line5height:'2;'}

  82. p'{'line5height:'1.4;'}

  83. p'{'line5height:'1.3'} @media'only'screen'and'(min5 width:'30em)'{ ''''p'{'line5height:'1.4'} } @media'only'screen'and'(min5 width:'60em)'{ ''''p'{'line5height:'1.5'} }

  84. Vertical Margins

  85. p'{ ''''line5height:'1.5; ''''margin5top:'1.5em; ''''margin5bottom:'1.5em; }

  86. Line Length (Measure)

  87. None
  88. None
  89. None
  90. 45-75 Characters

  91. 65 58 65 73 68 67 66 74 72 69

    69
  92. <p>These'stories'are'true.'Although'I'have' left'<span'class="testing">the'strict'line of'historical</span>'truth'in'many'places,' the'animals'in'this'book'were'all'real' characters.</p> .testing'{'color:'red;'}

  93. <p>These'stories'are'true.'Although'I'have' left'<span'class="testing">the'strict'line of'historical</span>'truth'in'many'places,' the'animals'in'this'book'were'all'real' characters.</p> .testing'{'color:'red;'}

  94. http://codepen.io/chriscoyier/pen/atebf

  95. Plain Language

  96. Source: Canadian Literacy and Learning Network 42% of Canadian adults

    between 16-65 have low literacy skills.
  97. If you can't explain it simply, you don't understand it

    well enough. - possibly Albert Einstein
  98. Before: When the process of freeing a vehicle that has

    been stuck results in ruts or holes, the operator will fill the rut or hole created by such activity before removing the vehicle from the immediate area. After: If you make a hole while freeing a stuck vehicle, you must fill the hole before you drive away.
  99. Page Structure

  100. Get rid of half the words on each page, then

    get rid of half of what’s left. - Steve Krug
  101. Top Level Heading Second Level Heading Third Level Heading

  102. None
  103. Credit: Rosenfeld Media via Creative Commons

  104. None
  105. Search Results

  106. None
  107. None
  108. None
  109. None
  110. None
  111. None
  112. None
  113. None
  114. None
  115. None
  116. None
  117. Colour Blindness

  118. Normal Deuteranope Protanope Tritanope

  119. None
  120. None
  121. Credit: thecrazyfilmgirl https://flic.kr/p/5X3ixX

  122. None
  123. None
  124. None
  125. Credit: Rosenfeld Media via Creative Commons

  126. Print It

  127. 7/7/2015 Traybaked Keralan fish curry | Jamie Oliver | Food

    | Jamie Oliver (UK) Toogle menu Right Menu Home Recipes > Shop Restaurants Videos Discover > -- Features -- Galleries -- News Foundation Careers Help & More Advertise With Us < Back Recipes home Chicken Beef Pasta Seafood Rice Fish Lamb Pork Game Duck Vegetables Chocolate Bread Cheese Eggs Fruit Turkey < Back Recipes Videos
  128. <link'rel="stylesheet"'href="styles.css"> <link'rel="stylesheet"'href="printstyles.css"' media="print">

  129. Make It Responsive

  130. None
  131. None
  132. None
  133. None
  134. Links

  135. None
  136. None
  137. <a' href="mailto:test@example.com"> test@example.com</a>

  138. None
  139. None
  140. None
  141. <a'href="tel:15877522555266"> 15877'CALL'BMO'(22555266)</a>

  142. Tap Targets

  143. Photo credit: Toshiyuki IMAI via Creative Commons

  144. Photo credit: Japanexperterna via Creative Commons

  145. Testing

  146. Photo credit: Robert S. Donovan via Creative Commons

  147. Performance

  148. Photo: Bortzmeyer via Creative Commons

  149. Source: CNN

  150. <script'type="text/javascript"'defer> ''''... </script> <script'async'src="example.js"> ''''... </script>

  151. Photo credit: Kaz K via Creative Commons

  152. https://developers.google.com/speed/pagespeed/

  153. http://yslow.org/

  154. Not Everything Should Be Easy

  155. None
  156. None
  157. None
  158. None
  159. None
  160. None
  161. Photo credit: GotCredit.com via Creative Commons

  162. Clarissa Peterson clarissapeterson.com @clarissa