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.

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