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.

Transcript

1. Photo credit: Jeremy Brooks via Creative Commons Making the Web @clarissa
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?
19. The One Piece of Information
25. Don't Hide Things
30. Splash Screens? Almost Never
31. No
35. Start Here
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
55. Show Password
58. Avoid Drop-downs For Short Lists
62. Ask For Less
67. Show Which Fields Are Required
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
75. Use Placeholders
77. <label> Email'Address <input'type="email"'name="email5 address"'placeholder=' "name@domain.com"> </label>
78. Line Height (Leading)
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)
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
103. Credit: Rosenfeld Media via Creative Commons
105. Search Results
117. Colour Blindness
118. Normal Deuteranope Protanope Tritanope
121. Credit: thecrazyfilmgirl https://flic.kr/p/5X3ixX
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
134. Links
137. <a' href="mailto:test@example.com"> test@example.com</a>
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
161. Photo credit: GotCredit.com via Creative Commons
162. Clarissa Peterson clarissapeterson.com @clarissa