SlideShare ist ein Scribd-Unternehmen logo
1 von 60
Downloaden Sie, um offline zu lesen
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 Design
Scott 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 Media
2.  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 Media
2.  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
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.  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/leistungswerte
2.  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
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 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 gehen
wie warm wir es mögen.
Nach einer Woche kennt es
den Benutzer so gut, dass es
autark handelt.
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 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 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
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
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 Experience
4.  Automatisierung nutzen
5.  Privacy ist Teil des Designprozesses
6.  Die wichtigste Designentscheidung ist oft ein einfaches „NEIN“
Fragen...? Ihr findet mich hier?
TwiCer:	@vitamin_j

Weitere ähnliche Inhalte

Ähnlich wie Wud 2016 Hamburg

Webinale 2011 - Das mobile Internet im Jahr 2021
Webinale 2011 - Das mobile Internet im Jahr 2021Webinale 2011 - Das mobile Internet im Jahr 2021
Webinale 2011 - Das mobile Internet im Jahr 2021
Matthias C. Schroeder
 
ICS UserGroup - 2015 - Improve Communication and Collaboration
ICS UserGroup - 2015 - Improve Communication and CollaborationICS UserGroup - 2015 - Improve Communication and Collaboration
ICS UserGroup - 2015 - Improve Communication and Collaboration
Christoph Adler
 

Ähnlich wie Wud 2016 Hamburg (20)

Vortrag stART09
Vortrag stART09Vortrag stART09
Vortrag stART09
 
Vortrag stARTconference
Vortrag stARTconferenceVortrag stARTconference
Vortrag stARTconference
 
design
designdesign
design
 
Web Design Trends 2011
Web Design Trends 2011Web Design Trends 2011
Web Design Trends 2011
 
Multiscreen Experience (Mai 2012, IA Konferenz, Essen)
Multiscreen Experience (Mai 2012, IA Konferenz, Essen)Multiscreen Experience (Mai 2012, IA Konferenz, Essen)
Multiscreen Experience (Mai 2012, IA Konferenz, Essen)
 
Die Zukunft des Web
Die Zukunft des WebDie Zukunft des Web
Die Zukunft des Web
 
Was ist e-Learning 2.0? (2008)
Was ist e-Learning 2.0? (2008)Was ist e-Learning 2.0? (2008)
Was ist e-Learning 2.0? (2008)
 
Webinale 2011 - Das mobile Internet im Jahr 2021
Webinale 2011 - Das mobile Internet im Jahr 2021Webinale 2011 - Das mobile Internet im Jahr 2021
Webinale 2011 - Das mobile Internet im Jahr 2021
 
Zukunft des Konsumverhaltens
Zukunft des KonsumverhaltensZukunft des Konsumverhaltens
Zukunft des Konsumverhaltens
 
Der mobile Wissenarbeit
Der mobile WissenarbeitDer mobile Wissenarbeit
Der mobile Wissenarbeit
 
AdminCamp 2015 - Improve Communication and Collaboration
AdminCamp 2015 - Improve Communication and CollaborationAdminCamp 2015 - Improve Communication and Collaboration
AdminCamp 2015 - Improve Communication and Collaboration
 
Multimediales Arbeiten
Multimediales ArbeitenMultimediales Arbeiten
Multimediales Arbeiten
 
Netzpolitik13: Das Internet der Dinge: Rechte, Regulierung & Spannungsfelder
Netzpolitik13: Das Internet der Dinge: Rechte, Regulierung & SpannungsfelderNetzpolitik13: Das Internet der Dinge: Rechte, Regulierung & Spannungsfelder
Netzpolitik13: Das Internet der Dinge: Rechte, Regulierung & Spannungsfelder
 
Die Welt Ein Computer
Die Welt Ein ComputerDie Welt Ein Computer
Die Welt Ein Computer
 
Wie Gamedesign die Welt verbessert - Vortrag von Prof. Tim Bruysten und Prof....
Wie Gamedesign die Welt verbessert - Vortrag von Prof. Tim Bruysten und Prof....Wie Gamedesign die Welt verbessert - Vortrag von Prof. Tim Bruysten und Prof....
Wie Gamedesign die Welt verbessert - Vortrag von Prof. Tim Bruysten und Prof....
 
Prof Bruysten - Vortrag bei Pioneer Investments im Steigenberger in Frankfurt...
Prof Bruysten - Vortrag bei Pioneer Investments im Steigenberger in Frankfurt...Prof Bruysten - Vortrag bei Pioneer Investments im Steigenberger in Frankfurt...
Prof Bruysten - Vortrag bei Pioneer Investments im Steigenberger in Frankfurt...
 
Zukunft des Konsums
Zukunft des KonsumsZukunft des Konsums
Zukunft des Konsums
 
ICS UserGroup - 2015 - Improve Communication and Collaboration
ICS UserGroup - 2015 - Improve Communication and CollaborationICS UserGroup - 2015 - Improve Communication and Collaboration
ICS UserGroup - 2015 - Improve Communication and Collaboration
 
Internet of Things: Bestandsaufnahme & Spannungsfelder (Uni Dresden, 18. Okt ...
Internet of Things: Bestandsaufnahme & Spannungsfelder (Uni Dresden, 18. Okt ...Internet of Things: Bestandsaufnahme & Spannungsfelder (Uni Dresden, 18. Okt ...
Internet of Things: Bestandsaufnahme & Spannungsfelder (Uni Dresden, 18. Okt ...
 
Multiscreen Experience Design (September 2012, MuC UP12)
Multiscreen Experience Design (September 2012, MuC UP12)Multiscreen Experience Design (September 2012, MuC UP12)
Multiscreen Experience Design (September 2012, MuC UP12)
 

Wud 2016 Hamburg