Responsible Deign und warum Teddybären Menschenrechte verletzen.

1. RESPONSIBLE DESIGN
und
warum Teddybären
Menschenrechte verletzen
Julian Mengel,Twitter: @vitamin_j

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. Responsible Responsive Design
Scott Jehl, Filament Group
Responsible
Responsive Design
• Usability
• Accessability
• Sustainability
• Performance

4. Verantwortung
Usability & UX
Privatsphäre Nachhaltigkeit

5. NACHHALTIGKEIT
Im „echten“ Leben spielt Nachhaltigkeit eine zunehmende Rolle...

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. 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. NACHHALTIGKEIT
Was können wir tun?

9. NACHHALTIGKEIT
Wo ist der Business Case?CO2-arme Webseiten?

10. NACHHALTIGKEIT
Wo ist der Business Case?Wo ist der Business Case?

11. NACHHALTIGKEIT
Neue Nutzer
gewinnen
Verbesserte
User Experience
Geld sparen &
Umsätze steigern
Umwelt
entlasten

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. NACHHALTIGKEIT
Quelle: https://www.cnet.com/news/web-sites-are-getting-faster-but-not-enough/

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. 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. 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. NACHHALTIGKEIT
Performance = User Experience

18. Ein Beispiel – Sweet spots
Quelle: Smashingmagazine.com

19. Beispiel – Redesign Spiegel Online

20. Beispiel – Redesign Spiegel Online
Dateigröße: 23kb

21. Beispiel – Redesign Spiegel Online
Optimierte Dateigröße: 11,5kb (50%)
ImageOptim

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. Beispiel – Redesign Spiegel Online
Wie ging es weiter?

24. Beispiel – Redesign Spiegel Online
Alt: 25kb Optimiert: 12,5kb Neu: 29kb

25. Version1 Version2
Beispiel 2 – Ein Webservice

27. Ein Beispiel – Sweet spots
Quelle: smashingmagazine.com

28. Nachhaltigkeit: Taskrunner
Gulpjs.comGruntjs.com

29. Nachhaltigkeit: Taskrunner
Automatisierung:
- Verlustfreie Kompression aller Grafiken
- Überflüssiges CSS entfernen
- Alle CSS Dateien zusammenfassen
- Javascript Dateien zusammenfassen
und komprimieren
Dauer ca. 10 sekunden

30. Version1 Version2
Beispiel 2 – Ein Webservice

32. Quelle: https://www.webpagetest.org/

33. Quelle: https://developers.google.com/speed/pagespeed/insights/

34. https://github.com/micromata/bootstrap-kickstart

35. NACHHALTIGKEIT
Neue Nutzer
gewinnen
Verbesserte
User Experience
Geld sparen &
Umsätze steigern
Umwelt
entlasten

36. Was kann ich privat tun?

37. NACHHALTIGKEIT + Performance

38. Verantwortung
Usability & UX
Privatsphäre Nachhaltigkeit

39. 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?“

40. 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.

41. 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 ...

42. 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.

43. Privacy
nest camera (Google)
Für den Einsatz im Wohnzimmer
filmt Menschen beim betreten des Raums.

44. Privacy
Amazon Echo
Always on...
10 % Prozent der Amerikaner
nutzen bereits Amazon Echo.

45. PrivacyPrivacy
Google Home
Sprachanalyse auf
Google Servern

46. Privacy
Amazon Echo
Always on...
10 % Prozent der Amerikaner
nutzen bereits Amazon Echo.

47. Privacy
Microsoft xBox (kinect)
Gesichtserkennung.
Wer und wie viele Personen
sitzen im Raum?

48. „Und was hat das
mit Teddybären
zu tun“?

49. Privacy

53. „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

56. 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

57. 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

58. q
Quelle: hCp://www.privacylab.at/wp-content/uploads/2016/09/Christl-Networks__K_o.pdf:
170 X „Gefällt mir“ gedrückt.

59. 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“

60. Fragen...? Ihr findet mich hier?
TwiCer: @vitamin_j