Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Sustainable UX at IA Summit 2017 Vancouver

359 views

Published on

Slides from a presentation on SustainableUX given at IA Summit, Vancouver. Topics include the carbon footprint of the internet, green hosting solutions, low-data design for lower footprint, and the UX Design of products that encourage green behaviors.

Published in: Design
  • Be the first to comment

  • Be the first to like this

Sustainable UX at IA Summit 2017 Vancouver

  1. 1. Sustainable UX in practice Defining and reducing our carbon footprint James Christie Experience Design Director @ Mad*Pow Founder @ SustainableUX Conference Portsmouth, NH @jc_ux
  2. 2. What to expect Environmental footprint of the internet Techniques for low-carbon digital design Building support Nudge for greener user behavior
  3. 3. unknownfieldsdivision
  4. 4. Carbon footprint of digital Hint: it’s big
  5. 5. 2 + 2
  6. 6. 33 foot sphere = 1 metric ton CO2 http://www.carbonvisuals.com
  7. 7. NY Metro, 1 year CO2
  8. 8. Total Global anthropocentric CO2 emissions (2013)
  9. 9. Equipement Energy source Usage Internet CO2?
  10. 10. 2 ~ 4% all electricity 8.6 Million datacenters worldwide US Department of Energy in collaboration with researchers from Stanford University, Northwestern University, and Carnegie Mellon University.
  11. 11. 2 kW draw 215,000 US towers 4 Mn world-wide India: 5B Liters of Diesel
  12. 12. Photo: World Bank
  13. 13. Photo: Al Jazeera
  14. 14. 3,200,000,000 70% Online Every day Global web users 4B Hours of Youtube / month
  15. 15. = 830 million tons CO2 /year Equipement Lots Energy source 70% fossil Usage 3.2B Internet CO2 Centre for Energy-Efficient Telecommunications (CEET) and Bell Labs
  16. 16. Photo: Mike Kelly
  17. 17. How much of this is yours?
  18. 18. Power Data Users Website CO2 ?
  19. 19. 100 0.1 9000 0.05 20.30.1 Cat-to-browser power (kWh / day) ???
  20. 20. US / UK Figures: 5.3kWH per GB; 544g per kWH 34g per MB, IEEE figures  goo.gl/RhVRjR  35 kg3 kg CO2 per GB: wired vs. 3g
  21. 21. Growth of Average Web Page Size Page Size in kB / httparchive 0 750 1500 2250 3000 2007 2009 2011 2013 2016 2533 kB
  22. 22. 200 views/day 2.4 MB pages 3.59 tons a year My cake blog
  23. 23. 183 million views/day 2.4 MB pages 2,600 tons a day
  24. 24. Data = CO2 Send less data, use less electricity, burn less coal.
  25. 25. Mitigating harm
  26. 26. “For the estimated 2.5 billion people around the world who are connected to the internet, it is impossible to imagine life without it.”
  27. 27. Cat-to-browser power (kWh / day)
  28. 28. “With an anticipated threefold increase in global internet traffic by 2020, the internet’s energy footprint is expected to rise further, fueled both by our individual consumption of data…”
  29. 29. “…thankfully we actually are seeing a significant increase in the prioritization of renewables among some of the largest internet companies…”
  30. 30. Data hygiene: SEO Usability Code Optimization Image workflow Mobile images
  31. 31. 1.7MB (5s load) 900kB (2s load) 1.7MB, 5s load
  32. 32. “We’re missing out on 72% image savings for mobile.” - Tim Kadlec http://timkadlec.com/2013/06/why-we-need-responsive-images/
  33. 33. Designing with less
  34. 34. Photo carousels Full—page photos Retina images Web Fonts Video Social media plugins 3rd Party embeds Dynamic content Infinite loading pages Adding page size or complexity or dependencies:
  35. 35. big photo ~ 400kB 3 more 400kB photos …that no one will ever see
  36. 36. 66m people / month 10s load, 3.2MB size 1.2MB images 1.1MB JavaScript 65 trackers - google ads, double-click, yahoo, market research, behavior, marketing automation, X-channel orchestration, Pinpoint marketing Trackers
  37. 37. Reducing by design Rethink some common design tropes and find the savings.
  38. 38. Set a page load that suits needs of audience (e.g. <2 seconds) Guesstimate a page size in kB and object count Trade features and content against the budget until it fits Page budgets 20kB HTML 20kB CSS 20kB JS 60kB images
  39. 39. Photo carousels Full—page photos Retina images Web Fonts Video Social media plugins 3rd Party embeds Dynamic content Infinite loading pages Kill the cruft:
  40. 40. 1.2MB images 100kB JavaScript 400kB social plugins 200kB web fonts 50kB HTML & CSS 1,950kB total size Total requests = 121
  41. 41. One hero image Vectors instead of jpg Prune font to needed glyphs No 3rd party libraries 800kB size Total requests = 20
  42. 42. http://dogr.io/ 130kB 70kB wow
  43. 43. 350kB75kB
  44. 44. Vector graphics
  45. 45. 200 views/day 2.4 MB pages 3.59 tons a year 1.2 MB pages 1.7 tons a year My cake blog
  46. 46. Examples Low-data design in the wild.
  47. 47. 154kB page <1s load 22 objects (average:+100)
  48. 48. Photos: 10kB Selective blur
  49. 49. Web font: 22kB
  50. 50. SVG logo SVG background
  51. 51. 400kB page <2s load
  52. 52. 536kB page 1.6s load 36 objects
  53. 53. 5kB page No font No JS No images
  54. 54. Selling low-data design Not all clients* are going to be swayed by an environmental argument for low-data design. *massive understatement
  55. 55. #1 Low-data = faster = higher performing sites
  56. 56. 100ms 1s 2s 3s 5s Feels instant Flow state Expected Impatience US average web site loading time Waiting for the page to load
  57. 57. 100ms slower load = 1% fall in sales Amazon Added 160Kb = +12% bounce rate Etsy
  58. 58. “Web performance is user experience” - Lara Hogan, Speed Guru at Etsy
  59. 59. #2 Slow hurts mobile more
  60. 60. #3 Low-data opens markets YouTube page: 1.2MB Feather YouTube: 250kB “...entire populations of people simply could not use YouTube because it took too long to see anything…”
  61. 61. #4 Google hates slow sites “…today we're including a new signal in our search ranking algorithms: site speed.” - Google Webmaster Blog, 2010
  62. 62. #5 Green hosting doesn’t cost that much more
  63. 63. Artiom Dashinsky @hvost
  64. 64. Dr Dan Lockton CMYU
  65. 65. http://designwithintent.co.uk/
  66. 66. “…with the right design, sustainability is nothing but the rigorous use of common sense.” Alejandro Aravena, Urban Architect @aravenalejandro TED2014:My architectural philosophy? Bring the community into the process
  67. 67. Footprint guesstimator 1.0 https://goo.gl/EJnkEf Or see @jc_ux for link
  68. 68. Carbon offset: $6 — 20 / ton Mine: $100 p.a. Source: Varodrig
  69. 69. Marcel Oosterwijk - Flickr 1 million UX folk (?!) x 10 tons saving = 9,182,020 tons a year
  70. 70. My carbon UX Community carbon Internet carbon World CO2 in 2020 20 tons 20M tons 830M tons 55B tons 10 tons (offset) 10 million tons ??? ??? Business as usual Responsible approach
  71. 71. Thank you! SustainableUX.com Want more? Read these: & go to:

×