wie der hammer fällt - mobile web performance aus nutzersicht
DESCRIPTION
Vortrag von Hans-Joachim Belz von Anstrengungslos zum Thema Mobile Web PerformanceTRANSCRIPT
![Page 1: Wie der Hammer fällt - Mobile Web Performance aus Nutzersicht](https://reader034.vdokument.com/reader034/viewer/2022052622/558cb249d8b42a5a7a8b4594/html5/thumbnails/1.jpg)
+
Wie der Hammer fällt Mobile Web Performance aus Nutzersicht
Hans-Joachim Belz (Anstrengungslos.de) UXBN bei Data in Transit, 28.11.2013
Anstrengungslos 2013
![Page 2: Wie der Hammer fällt - Mobile Web Performance aus Nutzersicht](https://reader034.vdokument.com/reader034/viewer/2022052622/558cb249d8b42a5a7a8b4594/html5/thumbnails/2.jpg)
Ganze Männer hämmern gern
Aktion
Reaktion
Spaß
http://www.flickr.com/photos/navalsurfaceforces/7048785911
![Page 3: Wie der Hammer fällt - Mobile Web Performance aus Nutzersicht](https://reader034.vdokument.com/reader034/viewer/2022052622/558cb249d8b42a5a7a8b4594/html5/thumbnails/3.jpg)
+Warten ist kognitiver Stress: Arbeit im Flow
n sfdsf
Icons: http://www.doublejdesign.co.uk/
![Page 4: Wie der Hammer fällt - Mobile Web Performance aus Nutzersicht](https://reader034.vdokument.com/reader034/viewer/2022052622/558cb249d8b42a5a7a8b4594/html5/thumbnails/4.jpg)
+Nielsens Heuristik
Wahrnehmung von Antwortzeiten
> 100ms > 1s > 10s (= 0,1s)
Unmittelbar
Keine Verzögerung
spürbar
Nahtlos
Arbeitsfluss wird nicht gestört
Aufmerksam
Aufmerksamkeit schwindet
Referenz: http://www.nngroup.com/articles/website-response-times/
![Page 5: Wie der Hammer fällt - Mobile Web Performance aus Nutzersicht](https://reader034.vdokument.com/reader034/viewer/2022052622/558cb249d8b42a5a7a8b4594/html5/thumbnails/5.jpg)
+100ms? – Für Videospiele?
Glaubhafte Metaphern brauchen flüssige Animationen
Swipe Bühnen Komplexe Menüs Expansionen & DropDowns
![Page 6: Wie der Hammer fällt - Mobile Web Performance aus Nutzersicht](https://reader034.vdokument.com/reader034/viewer/2022052622/558cb249d8b42a5a7a8b4594/html5/thumbnails/6.jpg)
+Verzögerung bis zum Erkennen einer Tap-Geste: ca. 300 ms
Für andere/ältere Browser siehe https://github.com/ftlabs/fastclick
Für ein Demo siehe http://mobile-ux.appspot.com/#55
n Bisher schon für nicht zoombare Seiten auf Chrome for Android und Firefox for Android
n Nachteil: Kein Double Tap to Zoom
Referenz: https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/8evES7o-QTY
![Page 7: Wie der Hammer fällt - Mobile Web Performance aus Nutzersicht](https://reader034.vdokument.com/reader034/viewer/2022052622/558cb249d8b42a5a7a8b4594/html5/thumbnails/7.jpg)
+
Übersicht
Zur Kasse
Übersicht
Zur Kasse
Übersicht
Zur Kasse
Noch schlimmer als Warten: Ungewissheit
Sieht gut aus. Nehme ich! Hallo?
Einziger Hinweis im Chrome*
15s bis die Checkout-Seite
erscheint
*Chrome = Die Bedienungselemente des Browsers
![Page 8: Wie der Hammer fällt - Mobile Web Performance aus Nutzersicht](https://reader034.vdokument.com/reader034/viewer/2022052622/558cb249d8b42a5a7a8b4594/html5/thumbnails/8.jpg)
+10 Sekunden meiner Lebenszeit?
n Abhängig vom jeweiligen Nutzungskontext und Alternativen werden Nutzer deutlich früher die Nutzung abbrechen oder länger warten.
n Schneller ist ein Wettbewerbsvorteil (Nutzungserlebnis).
n Studien legen nahe, dass Wartezeiten bei mobilen Seiten im Gutfall 3-5 Sekunden nicht überschreiten sollten.
Bin schon weg!
![Page 9: Wie der Hammer fällt - Mobile Web Performance aus Nutzersicht](https://reader034.vdokument.com/reader034/viewer/2022052622/558cb249d8b42a5a7a8b4594/html5/thumbnails/9.jpg)
+Technische Performance contra Nutzerwahrnehmung
n Server Response Time
n DOM Ready Event
n Page Load Event
n Seite vollständig geladen
n Seite vollständig dargestellt
n ...
n Zeit bis zum ersten (visuellen) Feedback auf Nutzeraktion
n Zeit bis zur Nutzung
n z.B. Laden der Startseite: Wann kann ich die Suche/Navigation benutzen?
n Gefühl der Nutzung
n Ruckeln?
n ...
Technische Metriken Nutzersicht
![Page 10: Wie der Hammer fällt - Mobile Web Performance aus Nutzersicht](https://reader034.vdokument.com/reader034/viewer/2022052622/558cb249d8b42a5a7a8b4594/html5/thumbnails/10.jpg)
http://www.flickr.com/photos/79578508@N08/8543779135
Testen!
![Page 11: Wie der Hammer fällt - Mobile Web Performance aus Nutzersicht](https://reader034.vdokument.com/reader034/viewer/2022052622/558cb249d8b42a5a7a8b4594/html5/thumbnails/11.jpg)
+Antwortverhalten aus Nutzersicht messen
Real User Monitoring
Manuell
Nutzerrelevante Antwortzeiten
manuell stoppen
Kamera
Videos des Ladeverhaltens manuell oder automatisiert
prüfen
Web Tracking
NutzungsorientiertMesspunkte beim
User per Webtracking
erfassen
Siehe z.B. webpagetest.org für Videos des Seitenaufbaus
![Page 12: Wie der Hammer fällt - Mobile Web Performance aus Nutzersicht](https://reader034.vdokument.com/reader034/viewer/2022052622/558cb249d8b42a5a7a8b4594/html5/thumbnails/12.jpg)
+Amazon und Ikea „on the edge“
Wann kann ich auf der Startseite bei einer Edge-Verbindung suchen?
VIDEOVORFÜHRUNG
![Page 13: Wie der Hammer fällt - Mobile Web Performance aus Nutzersicht](https://reader034.vdokument.com/reader034/viewer/2022052622/558cb249d8b42a5a7a8b4594/html5/thumbnails/13.jpg)
+Amazon und Ikea „on the edge“
Messpunkt aus Nutzersicht: Ab wann kann ich die Suche nutzen?
3G Edge Amazon < 2s 10s Ikea 14s 2min 6s
Test mit simulierter Edge-Verbindung (240 Kbps) und realer 3G-Verbindung
![Page 14: Wie der Hammer fällt - Mobile Web Performance aus Nutzersicht](https://reader034.vdokument.com/reader034/viewer/2022052622/558cb249d8b42a5a7a8b4594/html5/thumbnails/14.jpg)
+Langsame Verbindungen simulieren
Nutzung von Tools zum Network/Bandwidth Shaping
iPhone/iPad/MacOS: Network Link Conditioner
Windows/MacOS/Linux: Proxy als Bandbreitendrossel
trickle (Unix)
![Page 15: Wie der Hammer fällt - Mobile Web Performance aus Nutzersicht](https://reader034.vdokument.com/reader034/viewer/2022052622/558cb249d8b42a5a7a8b4594/html5/thumbnails/15.jpg)
+Real User Monitoring
Wann können (echte) Anwender die Empfehlung sehen?
Bestellen
Logo
39,99 €
Schöne Vase
Kunden kauften auch:
Logo
39,99 €
Schöne Vase
Bestellen
Logo
39,99 €
Schöne Vase
Kunden kauften auch:
Tracking Event: Orientierung sichtbar
Tracking Event: Produkt vollständig
Tracking Event: Empfehlung sichtbar
Siehe zum Beispiel User Timings in Google Analytics: http://analytics.blogspot.de/2012/04/more-ways-to-measure-your-websites.html
![Page 16: Wie der Hammer fällt - Mobile Web Performance aus Nutzersicht](https://reader034.vdokument.com/reader034/viewer/2022052622/558cb249d8b42a5a7a8b4594/html5/thumbnails/16.jpg)
+
http://www.flickr.com/photos/malingering/7277979920/ http://www.flickr.com/photos/imjustwalkin/6997780752/ http://www.flickr.com/photos/aloony89/7616916888/
Die größten Herausforderungen
Digitale Völlerei Langsame Verbindung Rechenkapazität
![Page 17: Wie der Hammer fällt - Mobile Web Performance aus Nutzersicht](https://reader034.vdokument.com/reader034/viewer/2022052622/558cb249d8b42a5a7a8b4594/html5/thumbnails/17.jpg)
+Shit's lightweight and loads fast.
motherfuckingwebsite.com
J Maßnahme zum Eingrenzen der „digitalen Völlerei“:
Vereinbarung von Performance-Budgets z.B. Limits für Ladezeit und Seitengewicht
Maßnahme zum Eingrenzen der „digitalen Völlerei“:
![Page 18: Wie der Hammer fällt - Mobile Web Performance aus Nutzersicht](https://reader034.vdokument.com/reader034/viewer/2022052622/558cb249d8b42a5a7a8b4594/html5/thumbnails/18.jpg)
+Gutes Design nimmt die Herausforderungen an.
1. Reduzierung Seitenkomplexität a. Nur relevante Inhalte
b. Keine Designschnörkel
2. Priorisierung von „Above the fold“ bzw. der relevantesten Interaktionselemente zusammen mit den Entwicklern
3. Hinweis auf (lange) Ladevorgänge, z.B. „Ladesonne“
PLUS technische Optimierungen (Optimierung Critical Path, adaptives Laden von Bildern, etc.)
![Page 19: Wie der Hammer fällt - Mobile Web Performance aus Nutzersicht](https://reader034.vdokument.com/reader034/viewer/2022052622/558cb249d8b42a5a7a8b4594/html5/thumbnails/19.jpg)
+Design für die Wahrnehmung
Gemeinsame Aufgabe von Business, Design und Technik
n Reduzierung der gelieferten Inhalte
n Priorisierung der Lieferung
n Performance-Budgets vereinbaren
n Flüssige Oberfläche n instantantes Feedback aller UI-Metaphern
n ruckelfreies Scrollen und flüssige Animationen
n „Ladesonne“ bei Wartezeiten über 1s
n Wartezeiten, wenn angemessen (Flow beachten!)
![Page 20: Wie der Hammer fällt - Mobile Web Performance aus Nutzersicht](https://reader034.vdokument.com/reader034/viewer/2022052622/558cb249d8b42a5a7a8b4594/html5/thumbnails/20.jpg)
+Zum Vertiefen
Geplante Artikelserie auf anstrengungslos.de
http://www.anstrengungslos.de/blogpress/mobile-web-performance-teil-1/
![Page 21: Wie der Hammer fällt - Mobile Web Performance aus Nutzersicht](https://reader034.vdokument.com/reader034/viewer/2022052622/558cb249d8b42a5a7a8b4594/html5/thumbnails/21.jpg)
+War das ?
Fragen / Anmerkungen: [email protected] @minutefforts
Download dieser Präsentation:
https://slideshare.net/hjbelz
Mobile Web Commerce Benchmark (Q1/14):
http://anstrengungslos.de/mwcb
![Page 22: Wie der Hammer fällt - Mobile Web Performance aus Nutzersicht](https://reader034.vdokument.com/reader034/viewer/2022052622/558cb249d8b42a5a7a8b4594/html5/thumbnails/22.jpg)
+Lust auf mehr?
Neue UX/Usability Community in Bonn Jeden letzten Donnerstag im Monat um 19:00 Uhr Data in Transit, Adolfstr. 34a, Bonn Xing: https://www.xing.com/net/uxbn Twitter: @UXBonn