Designing Deliberately

Transcript

1. Designing
   Deliberately
   An Event Apart Chicago @yeseniaa
   

   View Slide

2. What do you dislike
   most when browsing
   Web on mobile?
   

   View Slide

3. Waiting for slow pages to load
   What do you dislike most when browsing Web on mobile?
   Being shown interstitials
   Unplayable videos
   Getting redirected to the homepage
   Other
   https:/
   /webmasters.googleblog.com/2015/04/mobilemadness-campaign-to-help-you-go.html
   

   View Slide

4. Your audience
   wants content fast.
   

   View Slide

5. Online shoppers expected pages to load 

   in 2 seconds — and at 3 seconds, 

   a large share abandon the site.
   “For Impatient Web Users, an Eye Blink Is Just Too Long to Wait,” New York Times, February 29, 2012
   http:/
   /www.nytimes.com/2012/03/01/technology/impatient-web-users-flee-slow-loading-sites.html?pagewanted=all&_r=0
   

   View Slide

6. People will visit a Web site less often
   if it is slower than a close competitor
   by more than 250 milliseconds.
   “For Impatient Web Users, an Eye Blink Is Just Too Long to Wait,” New York Times, February 29, 2012
   http:/
   /www.nytimes.com/2012/03/01/technology/impatient-web-users-flee-slow-loading-sites.html?pagewanted=all&_r=0
   

   View Slide

7. Your audiences
   want

   Global network speeds vary greatly.
   http:/
   /www.ericsson.com/res/docs/2015/ericsson-mobility-report-june-2015.pdf
   

   View Slide

8. …but sites keeps
   getting larger.
   

   View Slide

9. 2.28 MB
   Average size of webpages
   

   View Slide

10. 2011-2016
    

    View Slide

11. Images
    Custom web fonts
    Interactions
    Stylesheets
    Third-party scripts
    

    View Slide

12. Fast
    Functional
    Light-weight
    Beautiful
    Memorable
    On-brand
    vs
    

    View Slide

13. Beauty Function
    vs
    

    View Slide

14. What will be the 

    best user
    experience 

    overall?
    

    View Slide

15. Fast sites
    build trust.
    

    View Slide

16. Fast sites are
    memorable.
    

    View Slide

17. Performance is a
    design feature.
    Not just a technical concern.
    

    View Slide

18. “Fast sites
    are boring.”
    Myth #1
    

    View Slide

19. “Design is
    decoration.”
    Myth #2
    

    View Slide

20. Beauty Function
    vs
    

    View Slide

21. View Slide

22. “
    –Stefan Sagmeister
    The real fight is not between
    something simple and something
    ornamental, the real fight is between
    design with a lot of love and design
    without care.
    https:/
    /www.youtube.com/watch?
    v=fXaF0bIthB0
    

    View Slide

23. Design with
    love
    Design
    without care
    vs
    

    View Slide

24. “
    –Don Norman
    Good design means
    that beauty & usability
    are in balance.
    http://www.jnd.org/dn.mss/emotion_design_at.html
    

    View Slide

25. Affordable Functional Pleasurable
    

    View Slide

26. Fast,
    accessible,
    affordable
    Deliver core
    content quickly
    

    View Slide

27. Functional
    Helps users
    accomplish
    what they need
    

    View Slide

28. Pleasurable
    Communicates brand
    message, emotion &
    personality
    

    View Slide

29. Designing for
    performance means
    designing with care.
    

    View Slide

30. Designing with care
    means being deliberate
    with WHAT we load and
    HOW we load
    

    View Slide

31. Ads
    Streaming video
    Social plug-ins
    

    View Slide

32. Hand-done
    Weathered
    Layered Textures
    

    View Slide

33. View Slide

34. View Slide

35. View Slide

36. 3 Video feeds
    2 Social feeds
    3 ads
    1 video clip carousel
    Parallax background
    Map
    

    View Slide

37. 3 Video feeds
    2 Social feeds
    3 ads
    1 video clip carousel
    Parallax background
    Map
    1 mil images
    Schedule
    Top fan list
    User profile info
    Navigation
    

    View Slide

38. 1. Video views
    2. Social engagement
    3. Ad revenue
    

    View Slide

39. 3 Video feeds
    2 Social feeds
    3 ads
    1 video clip carousel
    Parallax background
    Map
    1 mil images
    Schedule
    Top fan list
    User profile info
    Navigation
    

    View Slide

40. Development
    Design
    Research
    Biz dev
    Launch
    

    View Slide

41. Development
    Design
    Research
    Biz dev
    Launch
    

    View Slide

42. Development
    Design
    Research
    Biz dev
    Launch
    

    View Slide

43. Slow, heavy sites
    are a result of…
    

    View Slide

44. Poor 

    planning
    

    View Slide

45. Poor
    communication
    

    View Slide

46. Poor 

    awareness
    

    View Slide

47. Fast
    Boring
    

    View Slide

48. Speed index:
    1828
    Load time:
    2.5s
    

    View Slide

49. Speed index:
    2514
    Load time:
    3.4s
    

    View Slide

50. Speed index:
    2350
    Start render:
    1s
    Fully loaded:
    4s
    

    View Slide

51. Speed index:
    2350
    

    View Slide

52. https:/
    /speakerdeck.com/andyhume/anatomy-of-a-responsive-page-load-whiskyweb-2013
    

    View Slide

53. Core content
    Essential HTML and CSS, usable non-
    JavaScript-enhanced experience
    Enhancement
    JavaScript, geolocation, touch support,
    enhanced CSS, web fonts, images, widgets
    Leftovers
    Analytics, advertising, third-party content
    

    View Slide

54. View Slide

55. Prioritize performance
    from the beginning
    1
    

    View Slide

56. Set a performance
    budget
    2
    

    View Slide

57. Be deliberate
    3
    

    View Slide

58. Prioritize
    Performace
    1
    

    View Slide

59. Development
    Design
    Research
    Biz dev
    Think about
    performance?
    Development
    Design
    Research
    Biz dev
    

    View Slide

60. “
    –Tim Kadlec
    deciding a page can’t exceed 500kB when a
    mock-up containing three carousels and a
    full-screen high-resolution background
    image has already been approved isn’t going
    to do you much good
    https:/
    /timkadlec.com/2013/01/setting-a-
    performance-budget/
    

    View Slide

61. Development
    Design
    Research
    Biz dev
    Think about
    performance!
    

    View Slide

62. Share Case
    Studies
    

    View Slide

63. View Slide

64. A page load slowdown
    of just one second
    could cost it $1.6 billion
    in sales each year.
    https://www.fastcompany.com/1825005/how-one-second-could-cost-amazon-16-billion-sales
    

    View Slide

65. View Slide

66. By slowing its search
    results by just four
    tenths of a second they
    could lose 8 million
    searches per day
    https://www.fastcompany.com/1825005/how-one-second-could-cost-amazon-16-billion-sales
    

    View Slide

67. View Slide

68. For every 1 second that
    page load time decreased,
    Walmart saw up to a 2%
    increase in conversions.
    http://www.webperformancetoday.com/2012/02/28/4-awesome-slides-showing-how-page-speed-correlates-to-business-metrics-at-walmart-com/
    

    View Slide

69. View Slide

70. Reduced page
    load time 80%.
    http://digiday.com/publishers/gq-com-cut-page-load-time-80-percent/
    

    View Slide

71. Saw an 80%
    increase in monthly
    unique visitors.
    http://digiday.com/publishers/gq-com-cut-page-load-time-80-percent/
    

    View Slide

72. Performance is
    good for users.
    

    View Slide

73. Performance is
    good for business.
    

    View Slide

74. View Slide

75. Customer 

    Experience
    

    View Slide

76. “We need to give our
    customers a quality
    experience.”
    

    View Slide

77. “Quality is stability,
    performance &
    reliability.”
    

    View Slide

78. Business 

    Goals
    

    View Slide

79. Higher Customer Check/order
    Increased Online Ordering
    Decreased Call Center Volume
    Competitive Advantage
    

    View Slide

80. Performance 

    Mission
    

    View Slide

81. “The goal of this project is
    to create a beautiful,
    flexible, lightning-fast
    experience…”
    

    View Slide

82. Performance budget:

    600kb per page
    

    View Slide

83. Set a Performance
    Budget
    2
    

    View Slide

84. A tangible way to talk
    about performance.
    

    View Slide

85. Our pages should weigh
    no more than 300KB.
    Browser-based
    

    View Slide

86. Our pages should take no
    more than 6 seconds to load
    over a sub-3G connection.
    User experience-based
    

    View Slide

87. “
    –Mark Perkins
    Suddenly discussions about what could or could not
    go in the design felt like conversations, rather than
    just the developer constantly saying “no!” You want a
    huge header image at the top of the page? Sure. But
    that’s 100k of your budget used up, so you’ll have to
    lose a weight or two of web font to bring things back
    under the limit....
    http:/
    /clearleft.com/thinks/98
    

    View Slide

88. “
    –Mark Perkins
    The important point is to look at 

    every decision, right through the
    design/build process, as something
    that has consequence…
    http:/
    /clearleft.com/thinks/98
    

    View Slide

89. Setting Your
    Budget
    

    View Slide

90. 1.Look to your pages.
    2.Look to your competitors.
    3.Set a target goal. (ie: 20% faster than competitor)
    

    View Slide

91. webpagetest.org
    

    View Slide

92. webpagetest.org
    

    View Slide

93. • Page weight
    • Start Render
    • Fully Loaded
    • Speed Index
    

    View Slide

94. WebPagetest - Visual Comparison
    

    View Slide

95. “Make the page usable within 10
    seconds.”
    https:/
    /speakerdeck.com/tmaslen/moving-swiftly-the-story-of-how-bbc-news-fell-in-love-with-responsive-web-design#63
    

    View Slide

96. What is a performance budget?
    Why is it important?
    What is our performance budget?
    At Project Start
    

    View Slide

97. Are we sticking to the budget?
    Throughout Project
    

    View Slide

98. Brad Frost: http:/
    /bradfrost.com/blog/post/performance-budget-builder/
    

    View Slide

99. Help us
    prioritize
    Performance budgets
    

    View Slide

100. “
     –Tim Kadlec
     With anything added to a page, you
     need to be able to answer the question
     of “What value does this provide?”
     and in turn be able to determine if the
     value outweighs the pain.
     https:/
     /timkadlec.com/2014/01/fast-
     enough/
     

     View Slide

101. 98% higher
     conversion rates
     with images
     

     View Slide

102. Secondary carousel
     Static hero image
     1
     2
     Images
     JS
     1
     2
     600kb
     Budget
     Video
     

     View Slide

103. “We NEED a carousel 

     at the top.”
     

     View Slide

104. Secondary carousel
     1
     2
     Images
     JS
     1
     2
     600kb
     Budget
     Video
     Top carousel (4 slides):
     700kb
     

     View Slide

105. 700kb
     

     in images and JS
     This carousel alone will cost…
     

     View Slide

106. 1.Optimize an existing feature or
     asset on the page.
     2.Remove an existing feature or
     asset from the page.
     3.Don’t add the new feature or asset.
     https:/
     /timkadlec.com/2013/01/setting-a-performance-budget/
     

     View Slide

107. 1. Don’t add the carousel.
     2. Lazy load images that are not in
     the viewport on page load.
     3. Remove the video
     Some options are
     

     View Slide

108. Guide design
     decisions
     Performance budgets
     

     View Slide

109. View Slide

110. My font budget*
     100kb
     600kb
     Fonts
     *desktop
     

     View Slide

111. You have 100kb
     to “spend” on
     web fonts.
     

     View Slide

112. +
     Option A is
     3 weights of
     Whitney 

     for body copy
     1 weight of
     Knockout 

     for headings
     

     View Slide

113. Option B is
     3 weights of
     Knockout 

     for headings
     System 

     fonts

     for body copy
     +
     

     View Slide

114. Which is a better
     translation of your brand?
     

     View Slide

115. Be deliberate
     3
     

     View Slide

116. Arial
     Arial Italic
     Arial Bold
     Arial Bold Italic
     Arial Black
     Comic Sans MS
     Comic Sans MS Bold
     Georgia
     Georgia Italic
     Georgia Bold
     Times New Roman
     Times New Roman Italic
     Times New Bold
     Times New Bold Italic
     Trebuchet MS
     Trebuchet MS Italic
     Trebuchet MS Bold
     Verdana
     Verdana Italic
     Verdana Bold
     Verdana Bold Italic
     

     View Slide

117. View Slide

118. Webfonts are
     amazing, but
     overused.
     

     View Slide

119. Font requests have tripled in the 

     last couple years.
     

     View Slide

120. Use web fonts
     wisely.
     

     View Slide

121. View Slide

122. “
     –Brad Birdsall
     We believe the UI should
     come secondary to the
     stories written on Medium…
     https:/
     /medium.com/designing-medium/project-
     tnt-4b9b4ea97cda#.z14ubg3ga
     

     View Slide

123. “
     –Brad Birdsall
     and we are pushing that further 

     by using familiar fonts on each
     operating system.
     https:/
     /medium.com/designing-medium/project-
     tnt-4b9b4ea97cda#.z14ubg3ga
     

     View Slide

124. View Slide

125. View Slide

126. https:/
     /playbook.cio.gov/designstandards/
     

     View Slide

127. legible, communicates trust,
     open source
     

     View Slide

128. View Slide

129. View Slide

130. View Slide

131. View Slide

132. Emotion Content File Size
     

     View Slide

133. Bold
     Modern
     Authoritative
     Slightly edgy
     Emotion
     

     View Slide

134. View Slide

135. Strong headlines
     Clear numbers at
     various sizes
     Legible body copy
     Content
     

     View Slide

136. View Slide

137. View Slide

138. 100-200kb
     File Size
     

     View Slide

139. Type A Type B
     

     View Slide

140. 155 MM
     MONTHLY UNIQUE VIEWS
     155 MM
     MONTHLY UNIQUE VIEWS
     155 MM
     MONTHLY UNIQUE VIEWS
     155 MM
     MONTHLY UNIQUE VIEWS
     Type A Type B
     

     View Slide

141. View Slide

142. Alright Sans Ultra — 14K
     Alright Sans Ultra Italic —
     14K
     Tablet Gothic Condensed
     Regular — 24K
     Tablet Gothic Condensed
     Bold — 24K
     Tablet Gothic Condensed
     Oblique — 29K
     Total — 105KB
     

     View Slide

143. Good Headline Pro
     Condensed Black — 27K
     PT Serif Normal 400—57KB
     PT Serif Italic—58KB
     PT Serif Bold 700—51KB
     Source Sans Pro—56KB
     Total — 249KB
     

     View Slide

144. Type A Type B
     •Better match for
     content & mood
     •Stays within budget
     •Heavier by 150kb
     ✓
     

     View Slide

145. Type A Type B
     •Better match for
     content & mood
     •Over budget by 150kb
     •Lighter by 150kb
     

     View Slide

146. Can you simplify
     your type system?
     

     View Slide

147. Squiggle Theory: The
     ‘80s Design Movement
     Squiggle Theory: The ‘80s Design Movement
     Husband and wife team Mette Aamodt and Andrew Plumb, who met while students at the
     Harvard Graduate School of Design, got their first break in 2007, when a potential client
     asked them to create an ambitious beach house in East Quogue, in the Hamptons. They
     worried that they had "bit off much more than [they] could chew," as Plumb puts it.
     Very few people understand what we do
     and what value it has.
     —Mette Aamodt
     

     View Slide

148. Squiggle Theory: The
     ‘80s Design Movement
     Squiggle Theory: The ‘80s Design Movement
     Husband and wife team Mette Aamodt and Andrew Plumb, who met while students at the
     Harvard Graduate School of Design, got their first break in 2007, when a potential client
     asked them to create an ambitious beach house in East Quogue, in the Hamptons. They
     worried that they had "bit off much more than [they] could chew," as Plumb puts it.
     Very few people understand what we
     do and what value it has.
     —Mette Aamodt
     

     View Slide

149. Can you use a lighter
     font that looks
     similar ?
     

     View Slide

150. View Slide

151. Athelas 212k
     Freight Text Pro 111k
     

     View Slide

152. Futura 268k
     Brandon Grotesque 133k
     

     View Slide

153. Do you need 

     web fonts on
     small screens?
     

     View Slide

154. https:/
     /speakerdeck.com/andyhume/anatomy-of-a-responsive-page-load-whiskyweb-2013
     

     View Slide

155. Consistent
     Identical
     

     View Slide

156. View Slide

157. View Slide

158. “
     The goal was much more
     than consistency of look
     and feel.
     http:/
     /www-03.ibm.com/ibm/history/
     ibm100/us/en/icons/gooddesign/
     

     View Slide

159. “
     This would not just be any kind of
     painting, but something specific
     and immediately recognizable,
     yet never uniform or static.
     http:/
     /www-03.ibm.com/ibm/history/
     ibm100/us/en/icons/gooddesign/
     

     View Slide

160. Noyes’ Steps to Good Design
     ✦
     Fulfills its Function
     ✦
     Respects its Materials
     ✦
     Is Suited to Method of Production
     ✦
     Combines these in Imaginative Expression
     

     View Slide

161. “
     –Eliot Noyes
     It does seem to be a part of the role of the
     designer to help identify this character,
     and then express it in terms of the most
     meaningful goals and the highest ideas of
     the company and in the broadest context
     of our society and economy.
     http:/
     /www-03.ibm.com/ibm/history/
     ibm100/us/en/icons/gooddesign/
     

     View Slide

162. • Screen sizes & form factors
     • Interactions, inputs
     • Bandwidth & network speeds
     Broadest Context
     

     View Slide

163. Brand guidelines
     can be too rigid
     

     View Slide

164. “That looks
     off-brand.”
     

     View Slide

165. Design consistency
     isn’t pixels.
     –PATTY TOLAND
     “
     

     View Slide

166. Design consistency 

     is purpose.
     –PATTY TOLAND
     “
     

     View Slide

167. View Slide

168. v
     slate
     #465451
     persimmon
     #FF9856
     red
     #FF604A
     Rude Slab
     Acto
     

     View Slide

169. v
     

     View Slide

170. View Slide

171. View Slide

172. View Slide

173. View Slide

174. 1. Clear, fast, mobile-first experience
     2. Add brand details
     Website Strategy
     

     View Slide

175. Just enough
     design.
     

     View Slide

176. View Slide

177. View Slide

178. Safari Firefox
     

     View Slide

179. View Slide

180. Design
     Modularly
     4
     

     View Slide

181. View Slide

182. Designing Modularly
     1. Helps us be deliberate with our designs
     2. Helps us move into code sooner
     3. Precursor to a style guide
     

     View Slide

183. Full Page Comps
     vs Modules
     

     View Slide

184. View Slide

185. Identify 

     re-usable patterns
     

     View Slide

186. View Slide

187. Use only what
     you need.
     

     View Slide

188. Alpha Alpha with ‘live’ flag Alpha sponsored
     

     View Slide

189. Get designs into 

     code earlier
     

     View Slide

190. Filament Group
     

     View Slide

191. “
     –Scott Jehl
     We can often deliver a usable
     representation of a web page’s content
     very quickly, even if that page is quite large
     and asset-heavy as a whole.
     https:/
     /www.filamentgroup.com/lab/
     weight-wait.html
     

     View Slide

192. View Slide

193. View Slide

194. Adaptive Responsive
     

     View Slide

195. Edit
     constantly
     

     View Slide

196. View Slide

197. cssstats.com
     

     View Slide

198. cssstats.com
     

     View Slide

199. dark-gray
     medium-gray
     light-gray
     

     View Slide

200. Text Color
     Fill Color
     Others Highlight
     Your Highlight
     Active Highlight
     

     View Slide

201. Document Your
     Decisions in a
     Style Guide
     

     View Slide

202. Create a 

     Style Guide
     Yelp Style Guide
     

     View Slide

203. Create a 

     Style Guide
     Trulia Style Guide
     

     View Slide

204. • Their HTML is 48% smaller
     • 21% faster load time
     • 60% faster time to first byte
     • Reduced unused CSS by 135kb
     http://www.stubbornella.org/content/2013/06/05/creating-living-style-guides-to-improve-performance/
     

     View Slide

205. Be deliberate.
     1
     

     View Slide

206. Ensure access to core content,
     quickly.
     2
     

     View Slide

207. Test on real devices.
     3
     

     View Slide

208. Beauty Function
     vs
     

     View Slide

209. Beautiful user
     experiences
     

     View Slide

210. Thank
     you! @yeseniaa
     

     View Slide