RESPONSIBLE DESIGN
und
warum Teddybären
Menschenrechte verletzen
Julian Mengel,Twitter: @vitamin_j
•  Julian Mengel, UX-Designer
•  Micromata GmbH in Kassel
•  Micromata erstellt Individualsoftware für Konzerne
•  Ca. 120...
Responsible Responsive Design
Scott Jehl, Filament Group
Responsible
Responsive Design
•  Usability
•  Accessability
•  Su...
Verantwortung
Usability & UX
Privatsphäre Nachhaltigkeit
NACHHALTIGKEIT
Im „echten“ Leben spielt Nachhaltigkeit eine zunehmende Rolle...
NACHHALTIGKEIT
Wäre das Internet ein Land...
•  Wäre es das 6. größte im Bezug auf seinen Stromverbrauch 1
•  Der „CO2 Fuß...
NACHHALTIGKEIT
332 Mio Tonnen CO2 entsprechen...
•  Dem CO2 das ca. 320 Mio. Bäume binden
•  Der CO2 – Jahresemission der ...
NACHHALTIGKEIT
Was können wir tun?
NACHHALTIGKEIT
Wo ist der Business Case?CO2-arme Webseiten?
NACHHALTIGKEIT
Wo ist der Business Case?Wo ist der Business Case?
NACHHALTIGKEIT
Neue	Nutzer	
gewinnen	
Verbesserte	
User	Experience	
Geld	sparen	&	
Umsätze	steigern	
Umwelt	
entlasten
NACHHALTIGKEIT
Neue	Nutzer	
gewinnen	
Verbesserte	
Usability	
Geld	sparen	&	
Umsätze	steigern	
Umwelt	
entlasten	
1.  Quel...
NACHHALTIGKEIT
Quelle: https://www.cnet.com/news/web-sites-are-getting-faster-but-not-enough/
NACHHALTIGKEIT
Amazon hat errechnet, das wenn der
Seitenaufruf sich um eine Sekunde
verlangsamt die Umsätze jährlich um 1,...
NACHHALTIGKEIT
40 % Prozent online Käufer verlassen eine
Seite, die mehr als 3 Sekunden Ladezeit
benötigt.
Quelle: http://...
NACHHALTIGKEIT
79% of online shoppers will not
return to a website after a
disappointing experience due to
poor Performanc...
NACHHALTIGKEIT
Performance = User Experience
Ein Beispiel – Sweet spots
Quelle: Smashingmagazine.com
Beispiel – Redesign Spiegel Online
Beispiel – Redesign Spiegel Online
Dateigröße: 23kb
Beispiel – Redesign Spiegel Online
Optimierte Dateigröße: 11,5kb (50%)
ImageOptim
Beispiel – Redesign Spiegel Online
17,65 Mio. Unique Page Visitors p.M.1
11,5 kb x 17,65 Mio
= 202,975 GB
Entspricht 2.626...
Beispiel – Redesign Spiegel Online
Wie ging es weiter?
Beispiel – Redesign Spiegel Online
Alt: 25kb Optimiert: 12,5kb Neu: 29kb
Version1	 Version2	
Beispiel 2 – Ein Webservice
Ein Beispiel – Sweet spots
Quelle: smashingmagazine.com
Nachhaltigkeit: Taskrunner
Gulpjs.comGruntjs.com
Nachhaltigkeit: Taskrunner
Automatisierung:
-  Verlustfreie Kompression aller Grafiken
-  Überflüssiges CSS entfernen
-  A...
Version1	 Version2	
Beispiel 2 – Ein Webservice
Quelle: https://www.webpagetest.org/
Quelle: https://developers.google.com/speed/pagespeed/insights/
https://github.com/micromata/bootstrap-kickstart
NACHHALTIGKEIT
Neue	Nutzer	
gewinnen	
Verbesserte	
User	Experience	
Geld	sparen	&	
Umsätze	steigern	
Umwelt	
entlasten
Was kann ich privat tun?
NACHHALTIGKEIT + Performance
Verantwortung
Usability & UX
Privatsphäre Nachhaltigkeit
Was wäre wenn...
Jemand an Ihrer Tür klingelt und fragt:
„Guten Tag! Ich würde gerne eine Wanze in
Ihrem Telefon und eine ...
ALLGEMEINE ERKLÄRUNG DER MENSCHENRECHTE
Artikel 12 - (Freiheitssphäre des Einzelnen)
Niemand darf willkürlichen Eingriffen...
Grundgesetz für die BRD
Artikel 13
(1) Die Wohnung ist unverletzlich.
(4) Zur Abwehr dringender Gefahren für die öffentlic...
Privacy
Das nest Thermostat (Google) weiß
Wann wir zuhause sind,
wann wir ins Bett gehen
wie warm wir es mögen.
Nach einer...
Privacy
nest camera (Google)
Für den Einsatz im Wohnzimmer
filmt Menschen beim betreten des Raums.
Privacy
Amazon Echo
Always on...
10 % Prozent der Amerikaner
nutzen bereits Amazon Echo.
PrivacyPrivacy
Google Home
Sprachanalyse auf
Google Servern
Privacy
Amazon Echo
Always on...
10 % Prozent der Amerikaner
nutzen bereits Amazon Echo.
Privacy
Microsoft xBox (kinect)
Gesichtserkennung.
Wer und wie viele Personen
sitzen im Raum?
„Und was hat das
mit Teddybären
zu tun“?
Privacy
„Ein Kind, das heute geboren wird, wird keine Idee
davon haben, was Privatsphäre überhaupt ist. Diese
Kinder werden gar ni...
The Privacy Game
1.  Meinen Vor- und Nachnamen
2.  Mein Geburtsdatum
3.  Meine aktuelle Adresse
4.  Meine Bankverbindungsd...
The Privacy Game
1.  Meinen Vor- und Nachnamen
2.  Mein Geburtsdatum
3.  Meine aktuelle Adresse
4.  Meine Bankverbindungsd...
q	
Quelle:	hCp://www.privacylab.at/wp-content/uploads/2016/09/Christl-Networks__K_o.pdf:		
170 X „Gefällt mir“ gedrückt.
Takeaways
1.  Kostenlose Bildkompressions Tools nutzen (z.B. imageOptim)
2.  Performance Budget (z.B. 3 sek. bei mobiler N...
Fragen...? Ihr findet mich hier?
TwiCer:	@vitamin_j
Wud 2016 Hamburg
Wud 2016 Hamburg
Wud 2016 Hamburg
Wud 2016 Hamburg
Wud 2016 Hamburg
Wud 2016 Hamburg
Wud 2016 Hamburg
Nächste SlideShare
Wird geladen in …5
×

Wud 2016 Hamburg

506 Aufrufe

Veröffentlicht am

Responsible Deign und warum Teddybären Menschenrechte verletzen.

Veröffentlicht in: Umweltschutz
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Wud 2016 Hamburg

  1. 1. RESPONSIBLE DESIGN und warum Teddybären Menschenrechte verletzen Julian Mengel,Twitter: @vitamin_j
  2. 2. •  Julian Mengel, UX-Designer •  Micromata GmbH in Kassel •  Micromata erstellt Individualsoftware für Konzerne •  Ca. 120 Mitarbeiter •  Seit 5 Jahren ein eigenes UX Team; heute 12 Mitarbeiter
  3. 3. Responsible Responsive Design Scott Jehl, Filament Group Responsible Responsive Design •  Usability •  Accessability •  Sustainability •  Performance
  4. 4. Verantwortung Usability & UX Privatsphäre Nachhaltigkeit
  5. 5. NACHHALTIGKEIT Im „echten“ Leben spielt Nachhaltigkeit eine zunehmende Rolle...
  6. 6. NACHHALTIGKEIT Wäre das Internet ein Land... •  Wäre es das 6. größte im Bezug auf seinen Stromverbrauch 1 •  Der „CO2 Fußabdruck“ des Internet beträgt jährlich 680 Mio. Tonnen •  332 Mio. Tonnen fallen unter die Verantwortung der Menschen die „das Web machen“ 2 1.  Quelle: Tim Frick, 2016, Designing for Sustainability, O‘Reilly Media 2.  http://alistapart.com/article/sustainable-web-design
  7. 7. NACHHALTIGKEIT 332 Mio Tonnen CO2 entsprechen... •  Dem CO2 das ca. 320 Mio. Bäume binden •  Der CO2 – Jahresemission der weltweiten Flugindustrie 1 •  Dem C02 – Jahresausstoß von ca. 142 Mio. Kleinwagen 2 1.  Quelle: Tim Frick, 2016, Designing for Sustainability, O‘Reilly Media 2.  http://www.co2-emissionen-vergleichen.de/
  8. 8. NACHHALTIGKEIT Was können wir tun?
  9. 9. NACHHALTIGKEIT Wo ist der Business Case?CO2-arme Webseiten?
  10. 10. NACHHALTIGKEIT Wo ist der Business Case?Wo ist der Business Case?
  11. 11. NACHHALTIGKEIT Neue Nutzer gewinnen Verbesserte User Experience Geld sparen & Umsätze steigern Umwelt entlasten
  12. 12. NACHHALTIGKEIT Neue Nutzer gewinnen Verbesserte Usability Geld sparen & Umsätze steigern Umwelt entlasten 1.  Quelle: https://www.soasta.com/blog/page-bloat-average-web-page-2-mb/
  13. 13. NACHHALTIGKEIT Quelle: https://www.cnet.com/news/web-sites-are-getting-faster-but-not-enough/
  14. 14. NACHHALTIGKEIT Amazon hat errechnet, das wenn der Seitenaufruf sich um eine Sekunde verlangsamt die Umsätze jährlich um 1,6 Milliarden sinken würden. Quelle: https://www.fastcompany.com/1825005/how-one-second-could-cost-amazon-16-billion-sales
  15. 15. NACHHALTIGKEIT 40 % Prozent online Käufer verlassen eine Seite, die mehr als 3 Sekunden Ladezeit benötigt. Quelle: http://www.webperformancetoday.com/2010/06/15/everything-you-wanted-to-know-about-web-performance/
  16. 16. NACHHALTIGKEIT 79% of online shoppers will not return to a website after a disappointing experience due to poor Performance. Quelle: http://www.webperformancetoday.com/2010/06/15/everything-you-wanted-to-know-about-web-performance/
  17. 17. NACHHALTIGKEIT Performance = User Experience
  18. 18. Ein Beispiel – Sweet spots Quelle: Smashingmagazine.com
  19. 19. Beispiel – Redesign Spiegel Online
  20. 20. Beispiel – Redesign Spiegel Online Dateigröße: 23kb
  21. 21. Beispiel – Redesign Spiegel Online Optimierte Dateigröße: 11,5kb (50%) ImageOptim
  22. 22. Beispiel – Redesign Spiegel Online 17,65 Mio. Unique Page Visitors p.M.1 11,5 kb x 17,65 Mio = 202,975 GB Entspricht 2.626 kWh (Jahresverbrauch 2 Personenhaushalt) 2 Entspricht 1,58 Tonnen CO2 (bei nicht mobiler Nutzung) oder 7,81 CO2 Tonnen bei mobiler Nutzung 1.  Quelle: http://www.spiegel-qc.de/medien/online/spiegel-online/leistungswerte 2.  http://evanmills.lbl.gov/commentary/docs/carbonemissions.pdf
  23. 23. Beispiel – Redesign Spiegel Online Wie ging es weiter?
  24. 24. Beispiel – Redesign Spiegel Online Alt: 25kb Optimiert: 12,5kb Neu: 29kb
  25. 25. Version1 Version2 Beispiel 2 – Ein Webservice
  26. 26. Ein Beispiel – Sweet spots Quelle: smashingmagazine.com
  27. 27. Nachhaltigkeit: Taskrunner Gulpjs.comGruntjs.com
  28. 28. Nachhaltigkeit: Taskrunner Automatisierung: -  Verlustfreie Kompression aller Grafiken -  Überflüssiges CSS entfernen -  Alle CSS Dateien zusammenfassen -  Javascript Dateien zusammenfassen und komprimieren Dauer ca. 10 sekunden
  29. 29. Version1 Version2 Beispiel 2 – Ein Webservice
  30. 30. Quelle: https://www.webpagetest.org/
  31. 31. Quelle: https://developers.google.com/speed/pagespeed/insights/
  32. 32. https://github.com/micromata/bootstrap-kickstart
  33. 33. NACHHALTIGKEIT Neue Nutzer gewinnen Verbesserte User Experience Geld sparen & Umsätze steigern Umwelt entlasten
  34. 34. Was kann ich privat tun?
  35. 35. NACHHALTIGKEIT + Performance
  36. 36. Verantwortung Usability & UX Privatsphäre Nachhaltigkeit
  37. 37. Was wäre wenn... Jemand an Ihrer Tür klingelt und fragt: „Guten Tag! Ich würde gerne eine Wanze in Ihrem Telefon und eine Kamera in Ihrem Wohnzimmer installieren. Würden Sie mich bitte reinlassen?“
  38. 38. ALLGEMEINE ERKLÄRUNG DER MENSCHENRECHTE Artikel 12 - (Freiheitssphäre des Einzelnen) Niemand darf willkürlichen Eingriffen in sein Privatleben, seine Familie, seine Wohnung und seinen Schriftverkehr oder Beeinträchtigungen seiner Ehre und seines Rufes ausgesetzt werden. Jeder hat Anspruch auf rechtlichen Schutz gegen solche Eingriffe oder Beeinträchtigungen.
  39. 39. Grundgesetz für die BRD Artikel 13 (1) Die Wohnung ist unverletzlich. (4) Zur Abwehr dringender Gefahren für die öffentliche Sicherheit, ... dürfen technische Mittel zur Überwachung von Wohnungen nur auf Grund richterlicher Anordnung eingesetzt werden ...
  40. 40. Privacy Das nest Thermostat (Google) weiß Wann wir zuhause sind, wann wir ins Bett gehen wie warm wir es mögen. Nach einer Woche kennt es den Benutzer so gut, dass es autark handelt.
  41. 41. Privacy nest camera (Google) Für den Einsatz im Wohnzimmer filmt Menschen beim betreten des Raums.
  42. 42. Privacy Amazon Echo Always on... 10 % Prozent der Amerikaner nutzen bereits Amazon Echo.
  43. 43. PrivacyPrivacy Google Home Sprachanalyse auf Google Servern
  44. 44. Privacy Amazon Echo Always on... 10 % Prozent der Amerikaner nutzen bereits Amazon Echo.
  45. 45. Privacy Microsoft xBox (kinect) Gesichtserkennung. Wer und wie viele Personen sitzen im Raum?
  46. 46. „Und was hat das mit Teddybären zu tun“?
  47. 47. Privacy
  48. 48. „Ein Kind, das heute geboren wird, wird keine Idee davon haben, was Privatsphäre überhaupt ist. Diese Kinder werden gar nicht wissen, wie es ist, wenn man einen privaten Moment für sich hat – einen nicht aufgezeichneten, von niemandem analysierten Gedanken” Edward Snowden Privacy
  49. 49. The Privacy Game 1.  Meinen Vor- und Nachnamen 2.  Mein Geburtsdatum 3.  Meine aktuelle Adresse 4.  Meine Bankverbindungsdaten 5.  Alle meine online Suchanfragen 6.  Alle Webseiten die ich jemals besucht habe und besuchen werde 7.  Die Namen aller meiner gespeicherten Kontakte 8.  Namen, Telefonnummern und Photos von jedem meiner gespeicherten Kontakte 9.  Wo ich bin und wo immer ich gewesen bin 10.  Meine sexuellen Präferenzen
  50. 50. The Privacy Game 1.  Meinen Vor- und Nachnamen 2.  Mein Geburtsdatum 3.  Meine aktuelle Adresse 4.  Meine Bankverbindungsdaten 5.  Alle meine online Suchanfragen 6.  Alle Webseiten die ich jemals besucht habe und besuchen werde 7.  Die Namen aller meiner gespeicherten Kontakte 8.  Namen, Telefonnummern und Photos von jedem meiner gespeicherten Kontakte 9.  Wo ich bin und wo immer ich gewesen bin 10.  Meine sexuellen Präferenzen
  51. 51. q Quelle: hCp://www.privacylab.at/wp-content/uploads/2016/09/Christl-Networks__K_o.pdf: 170 X „Gefällt mir“ gedrückt.
  52. 52. Takeaways 1.  Kostenlose Bildkompressions Tools nutzen (z.B. imageOptim) 2.  Performance Budget (z.B. 3 sek. bei mobiler Nutzung) 3.  Performance ist User Experience 4.  Automatisierung nutzen 5.  Privacy ist Teil des Designprozesses 6.  Die wichtigste Designentscheidung ist oft ein einfaches „NEIN“
  53. 53. Fragen...? Ihr findet mich hier? TwiCer: @vitamin_j

×