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 in practice
Defining and reducing our carbon footprint
James Christie
Experience Design Director @ Mad*Pow
F...
What to expect
Environmental footprint of the internet
Techniques for low-carbon digital design
Building support
Nudge for...
unknownfieldsdivision
Carbon footprint of digital
Hint: it’s big
2 + 2
33 foot sphere = 1 metric ton CO2
http://www.carbonvisuals.com
NY Metro, 1 year CO2
Total Global anthropocentric CO2 emissions (2013)
Equipement Energy source Usage
Internet CO2?
2 ~ 4% all
electricity
8.6 Million
datacenters
worldwide
US Department of Energy in collaboration with researchers from St...
2 kW draw
215,000 US towers
4 Mn world-wide
India: 5B Liters of Diesel
Photo: World Bank
Photo: Al Jazeera
3,200,000,000
70% Online
Every day
Global
web users
4B Hours of Youtube
/ month
= 830 million tons CO2 /year
Equipement
Lots
Energy source
70% fossil
Usage
3.2B
Internet CO2
Centre for Energy-Efficient T...
Photo: Mike Kelly
How much of this
is yours?
Power Data Users
Website CO2 ?
100
0.1
9000 0.05
20.30.1
Cat-to-browser power (kWh / day)
???
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
Growth of Average Web Page Size
Page Size in kB / httparchive
0
750
1500
2250
3000
2007 2009 2011 2013 2016
2533 kB
200 views/day
2.4 MB pages
3.59 tons a year
My
cake
blog
183 million views/day
2.4 MB pages
2,600 tons a day
Data = CO2
Send less data, use less electricity, burn less coal.
Mitigating harm
“For the estimated 2.5
billion people around
the world who are
connected to the
internet, it is
impossible to imagine
life...
Cat-to-browser power (kWh / day)
“With an anticipated threefold
increase in global internet traffic by
2020, the internet’s energy
footprint is expected to r...
“…thankfully we actually are seeing a
significant increase in the
prioritization of renewables among
some of the largest in...
Data hygiene:
SEO
Usability
Code Optimization
Image workflow
Mobile images
1.7MB (5s load) 900kB (2s load)
1.7MB, 5s load
“We’re missing out on 72% image
savings for mobile.”
- Tim Kadlec
http://timkadlec.com/2013/06/why-we-need-responsive-imag...
Designing with less
Photo carousels
Full—page photos
Retina images
Web Fonts
Video
Social media plugins
3rd Party embeds
Dynamic content
Infini...
big photo
~ 400kB
3 more 400kB photos
…that no one will ever see
66m people / month
10s load, 3.2MB size
1.2MB images
1.1MB JavaScript
65 trackers - google ads, double-click,
yahoo, marke...
Reducing by design
Rethink some common design tropes and find the
savings.
Set a page load that suits needs of
audience (e.g. <2 seconds)
Guesstimate a page size in kB and
object count
Trade featur...
Photo carousels
Full—page photos
Retina images
Web Fonts
Video
Social media plugins
3rd Party embeds
Dynamic content
Infini...
1.2MB images
100kB JavaScript
400kB social plugins
200kB web fonts
50kB HTML & CSS
1,950kB total size
Total requests = 121
One hero image
Vectors instead of jpg
Prune font to needed glyphs
No 3rd party libraries
800kB size
Total requests = 20
http://dogr.io/
130kB 70kB wow
350kB75kB
Vector graphics
200 views/day
2.4 MB pages
3.59 tons a year
1.2 MB pages
1.7 tons a year
My
cake
blog
Examples
Low-data design in the wild.
154kB page
<1s load
22 objects
(average:+100)
Photos: 10kB
Selective blur
Web font:
22kB
SVG logo SVG
background
400kB page
<2s load
536kB page
1.6s load
36 objects
5kB page
No font
No JS
No images
Selling low-data design
Not all clients* are going to be swayed by an
environmental argument for low-data design.
*massive...
#1
Low-data = faster = higher performing sites
100ms
1s
2s
3s
5s
Feels instant
Flow state
Expected
Impatience
US average web site loading time
Waiting for the page to lo...
100ms slower load = 1% fall in sales
Amazon
Added 160Kb = +12% bounce rate
Etsy
“Web performance is user experience”
- Lara Hogan, Speed Guru at Etsy
#2
Slow hurts mobile more
#3 Low-data opens markets
YouTube page: 1.2MB
Feather YouTube: 250kB
“...entire populations of
people simply could not
use...
#4
Google hates slow sites
“…today we're including a new signal in our search ranking
algorithms: site speed.”
- Google We...
#5
Green hosting doesn’t cost that much
more
Artiom Dashinsky
@hvost
Dr Dan Lockton
CMYU
http://designwithintent.co.uk/
“…with the right design,
sustainability is nothing
but the rigorous use of
common sense.”
Alejandro Aravena, Urban Archite...
Footprint
guesstimator 1.0
https://goo.gl/EJnkEf
Or see @jc_ux for link
Carbon offset:
$6 — 20 / ton
Mine:
$100 p.a.
Source: Varodrig
Marcel Oosterwijk - Flickr
1 million UX folk (?!)
x 10 tons saving
= 9,182,020 tons a year
My carbon
UX Community carbon
Internet carbon
World CO2 in 2020
20 tons
20M tons
830M tons
55B tons
10 tons (offset)
10 mi...
Thank you!
SustainableUX.com
Want more? Read these: & go to:
Sustainable UX at IA Summit 2017 Vancouver
Sustainable UX at IA Summit 2017 Vancouver
Sustainable UX at IA Summit 2017 Vancouver
Sustainable UX at IA Summit 2017 Vancouver
Sustainable UX at IA Summit 2017 Vancouver
Sustainable UX at IA Summit 2017 Vancouver
Sustainable UX at IA Summit 2017 Vancouver
Sustainable UX at IA Summit 2017 Vancouver
Sustainable UX at IA Summit 2017 Vancouver
Sustainable UX at IA Summit 2017 Vancouver
Sustainable UX at IA Summit 2017 Vancouver
Sustainable UX at IA Summit 2017 Vancouver
Sustainable UX at IA Summit 2017 Vancouver
Sustainable UX at IA Summit 2017 Vancouver
Sustainable UX at IA Summit 2017 Vancouver
Sustainable UX at IA Summit 2017 Vancouver
Sustainable UX at IA Summit 2017 Vancouver
Sustainable UX at IA Summit 2017 Vancouver
Sustainable UX at IA Summit 2017 Vancouver
Sustainable UX at IA Summit 2017 Vancouver
Sustainable UX at IA Summit 2017 Vancouver
Sustainable UX at IA Summit 2017 Vancouver
Sustainable UX at IA Summit 2017 Vancouver
Sustainable UX at IA Summit 2017 Vancouver
Sustainable UX at IA Summit 2017 Vancouver
Sustainable UX at IA Summit 2017 Vancouver
Sustainable UX at IA Summit 2017 Vancouver
Sustainable UX at IA Summit 2017 Vancouver
Sustainable UX at IA Summit 2017 Vancouver
Sustainable UX at IA Summit 2017 Vancouver
Sustainable UX at IA Summit 2017 Vancouver
Sustainable UX at IA Summit 2017 Vancouver
Upcoming SlideShare
Loading in …5
×

Sustainable UX at IA Summit 2017 Vancouver

373 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:

×