Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Designing Deliberately

Designing Deliberately

Designers today have to juggle many tasks: making sites that are beautiful, engaging, and delivered quickly across often unreliable networks. It’s not surprising that the current web landscape is full of heavy websites serving dozens of web fonts, images, and complex interactions—or super-minimal sites that lack personality. In this presentation, we’ll find the balance between these extremes. Yesenia will discuss how to make smarter decisions about typography and other UI elements, and how to design deliberately. She’ll also talk about how to sell designs to clients and stakeholders, and to shift from judging design solely on aesthetic merits, and instead focus on creating the best user experience.

91cefdf141106fa10674aae74ce05890?s=128

Yesenia Perez-Cruz

August 29, 2016
Tweet

Transcript

  1. Designing Deliberately An Event Apart Chicago @yeseniaa

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

  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
  4. Your audience wants content fast.

  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
  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
  7. Your audiences want
 Global network speeds vary greatly. http:/ /www.ericsson.com/res/docs/2015/ericsson-mobility-report-june-2015.pdf

  8. …but sites keeps getting larger.

  9. 2.28 MB Average size of webpages

  10. 2011-2016

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

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

  13. Beauty Function vs

  14. What will be the 
 best user experience 
 overall?

  15. Fast sites build trust.

  16. Fast sites are memorable.

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

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

  19. “Design is decoration.” Myth #2

  20. Beauty Function vs

  21. None
  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
  23. Design with love Design without care vs

  24. “ –Don Norman Good design means that beauty & usability

    are in balance. http://www.jnd.org/dn.mss/emotion_design_at.html
  25. Affordable Functional Pleasurable

  26. Fast, accessible, affordable Deliver core content quickly

  27. Functional Helps users accomplish what they need

  28. Pleasurable Communicates brand message, emotion & personality

  29. Designing for performance means designing with care.

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

    and HOW we load
  31. Ads Streaming video Social plug-ins

  32. Hand-done Weathered Layered Textures

  33. None
  34. None
  35. None
  36. 3 Video feeds 2 Social feeds 3 ads 1 video

    clip carousel Parallax background Map
  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
  38. 1. Video views 2. Social engagement 3. Ad revenue

  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
  40. Development Design Research Biz dev Launch

  41. Development Design Research Biz dev Launch

  42. Development Design Research Biz dev Launch

  43. Slow, heavy sites are a result of…

  44. Poor 
 planning

  45. Poor communication

  46. Poor 
 awareness

  47. Fast Boring

  48. Speed index: 1828 Load time: 2.5s

  49. Speed index: 2514 Load time: 3.4s

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

  51. Speed index: 2350

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

  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
  54. None
  55. Prioritize performance from the beginning 1

  56. Set a performance budget 2

  57. Be deliberate 3

  58. Prioritize Performace 1

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

    Research Biz dev
  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/
  61. Development Design Research Biz dev Think about performance!

  62. Share Case Studies

  63. None
  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
  65. None
  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
  67. None
  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/
  69. None
  70. Reduced page load time 80%. http://digiday.com/publishers/gq-com-cut-page-load-time-80-percent/

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

  72. Performance is good for users.

  73. Performance is good for business.

  74. None
  75. Customer 
 Experience

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

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

  78. Business 
 Goals

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

    Competitive Advantage
  80. Performance 
 Mission

  81. “The goal of this project is to create a beautiful,

    flexible, lightning-fast experience…”
  82. Performance budget:
 600kb per page

  83. Set a Performance Budget 2

  84. A tangible way to talk about performance.

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

  86. Our pages should take no more than 6 seconds to

    load over a sub-3G connection. User experience-based
  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
  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
  89. Setting Your Budget

  90. 1.Look to your pages. 2.Look to your competitors. 3.Set a

    target goal. (ie: 20% faster than competitor)
  91. webpagetest.org

  92. webpagetest.org

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

    Speed Index
  94. WebPagetest - Visual Comparison

  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

  96. What is a performance budget? Why is it important? What

    is our performance budget? At Project Start
  97. Are we sticking to the budget? Throughout Project

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

  99. Help us prioritize Performance budgets

  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/
  101. 98% higher conversion rates with images

  102. Secondary carousel Static hero image 1 2 Images JS 1

    2 600kb Budget Video
  103. “We NEED a carousel 
 at the top.”

  104. Secondary carousel 1 2 Images JS 1 2 600kb Budget

    Video Top carousel (4 slides): 700kb
  105. 700kb 
 in images and JS This carousel alone will

    cost…
  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/
  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
  108. Guide design decisions Performance budgets

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

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

  112. + Option A is 3 weights of Whitney 
 for

    body copy 1 weight of Knockout 
 for headings
  113. Option B is 3 weights of Knockout 
 for headings

    System 
 fonts
 for body copy +
  114. Which is a better translation of your brand?

  115. Be deliberate 3

  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
  117. None
  118. Webfonts are amazing, but overused.

  119. Font requests have tripled in the 
 last couple years.

  120. Use web fonts wisely.

  121. None
  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
  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
  124. None
  125. None
  126. https:/ /playbook.cio.gov/designstandards/

  127. legible, communicates trust, open source

  128. None
  129. None
  130. None
  131. None
  132. Emotion Content File Size

  133. Bold Modern Authoritative Slightly edgy Emotion

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

    Content
  136. None
  137. None
  138. 100-200kb File Size

  139. Type A Type B

  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
  141. None
  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
  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
  144. Type A Type B •Better match for content & mood

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

    •Over budget by 150kb •Lighter by 150kb
  146. Can you simplify your type system?

  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
  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
  149. Can you use a lighter font that looks similar ?

  150. None
  151. Athelas 212k Freight Text Pro 111k

  152. Futura 268k Brandon Grotesque 133k

  153. Do you need 
 web fonts on small screens?

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

  155. Consistent Identical

  156. None
  157. None
  158. “ The goal was much more than consistency of look

    and feel. http:/ /www-03.ibm.com/ibm/history/ ibm100/us/en/icons/gooddesign/
  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/
  160. Noyes’ Steps to Good Design ✦ Fulfills its Function ✦

    Respects its Materials ✦ Is Suited to Method of Production ✦ Combines these in Imaginative Expression
  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/
  162. • Screen sizes & form factors • Interactions, inputs •

    Bandwidth & network speeds Broadest Context
  163. Brand guidelines can be too rigid

  164. “That looks off-brand.”

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

  166. Design consistency 
 is purpose. –PATTY TOLAND “

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

  169. v

  170. None
  171. None
  172. None
  173. None
  174. 1. Clear, fast, mobile-first experience 2. Add brand details Website

    Strategy
  175. Just enough design.

  176. None
  177. None
  178. Safari Firefox

  179. None
  180. Design Modularly 4

  181. None
  182. Designing Modularly 1. Helps us be deliberate with our designs

    2. Helps us move into code sooner 3. Precursor to a style guide
  183. Full Page Comps vs Modules

  184. None
  185. Identify 
 re-usable patterns

  186. None
  187. Use only what you need.

  188. Alpha Alpha with ‘live’ flag Alpha sponsored

  189. Get designs into 
 code earlier

  190. Filament Group

  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
  192. None
  193. None
  194. Adaptive Responsive

  195. Edit constantly

  196. None
  197. cssstats.com

  198. cssstats.com

  199. dark-gray medium-gray light-gray

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

  201. Document Your Decisions in a Style Guide

  202. Create a 
 Style Guide Yelp Style Guide

  203. Create a 
 Style Guide Trulia Style Guide

  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/
  205. Be deliberate. 1

  206. Ensure access to core content, quickly. 2

  207. Test on real devices. 3

  208. Beauty Function vs

  209. Beautiful user experiences

  210. Thank you! @yeseniaa