Wud 2016 Hamburg

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 Mitarbeiter

•  Seit 5 Jahren ein eigenes UX Team; heute 12 Mitarbeiter

Responsible Responsive DesignScott Jehl, Filament Group

Responsible Responsive Design

•  Usability •  Accessability•  Sustainability•  Performance

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ß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 Media2.  http://alistapart.com/article/sustainable-web-design

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 Media2.  http://www.co2-emissionen-vergleichen.de/

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

NeueNutzergewinnen

VerbesserteUserExperience

Geldsparen&Umsätzesteigern

Umweltentlasten

NACHHALTIGKEIT

NeueNutzergewinnen

VerbesserteUsability

Geldsparen&Umsätzesteigern

Umweltentlasten

1.  Quelle: https://www.soasta.com/blog/page-bloat-average-web-page-2-mb/

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,6 Milliarden sinken würden.

Quelle: https://www.fastcompany.com/1825005/how-one-second-could-cost-amazon-16-billion-sales

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/

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/

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 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/leistungswerte2.  http://evanmills.lbl.gov/commentary/docs/carbonemissions.pdf

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-  Alle CSS Dateien zusammenfassen-  Javascript Dateien zusammenfassen�

und komprimieren

Dauer ca. 10 sekunden

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

NeueNutzergewinnen

VerbesserteUserExperience

Geldsparen&Umsätzesteigern

Umweltentlasten

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 Kamera in Ihrem Wohnzimmer installieren. Würden Sie mich bitte reinlassen?“

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.

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

Privacy

Das nest Thermostat (Google) weiß

Wann wir zuhause sind,wann wir ins Bett gehenwie warm wir es mögen.

Nach einer Woche kennt es den Benutzer so gut, dass esautark handelt.

Privacy

nest camera (Google)

Für den Einsatz im Wohnzimmerfilmt Menschen beim betreten des Raums.

Privacy

Amazon Echo

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

PrivacyPrivacy

Google HomeSprachanalyse 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 Personensitzen im Raum?

„Und was hat das mit Teddybärenzu tun“?

Privacy

„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

The Privacy Game

1.  Meinen Vor- und Nachnamen2.  Mein Geburtsdatum3.  Meine aktuelle Adresse4.  Meine Bankverbindungsdaten5.  Alle meine online Suchanfragen6.  Alle Webseiten die ich jemals besucht habe und besuchen werde7.  Die Namen aller meiner gespeicherten Kontakte8.  Namen, Telefonnummern und Photos von jedem meiner �

gespeicherten Kontakte9.  Wo ich bin und wo immer ich gewesen bin10.  Meine sexuellen Präferenzen

The Privacy Game

1.  Meinen Vor- und Nachnamen2.  Mein Geburtsdatum3.  Meine aktuelle Adresse4.  Meine Bankverbindungsdaten5.  Alle meine online Suchanfragen6.  Alle Webseiten die ich jemals besucht habe und besuchen werde7.  Die Namen aller meiner gespeicherten Kontakte8.  Namen, Telefonnummern und Photos von jedem meiner �

gespeicherten Kontakte9.  Wo ich bin und wo immer ich gewesen bin10.  Meine sexuellen Präferenzen

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 Nutzung)3.  Performance ist User Experience4.  Automatisierung nutzen5.  Privacy ist Teil des Designprozesses6.  Die wichtigste Designentscheidung ist oft ein einfaches „NEIN“

Fragen...? Ihr findet mich hier?

TwiCer:@vitamin_j