Wie der Hammer fällt - Mobile Web Performance aus Nutzersicht

Performance ist ein kritischer Aspekt im Mobile Web. Wie erlebt ein Anwender die "Performance" eines mobilen Auftritts? Wie kann man das messen? Was sollte man tun, um das Nutzererlebnis auch unter widrigen Bedingungen zu verbessern?

Transcript

1. + 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
2. Ganze Männer hämmern gern Aktion Reaktion Spaß http://www.flickr.com/photos/navalsurfaceforces/7048785911
3. + Warten ist kognitiver Stress: Arbeit im Flow n  sfdsf Icons: http://www.doublejdesign.co.uk/
4. + 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/
5. + 100ms? – Für Videospiele? Glaubhafte Metaphern brauchen flüssige Animationen Swipe Bühnen Komplexe Menüs Expansionen & DropDowns
6. + 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
7. + Ü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
8. + 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!
9. + 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
10. http://www.flickr.com/photos/79578508@N08/8543779135 Testen!
11. + Antwortverhalten aus Nutzersicht messen Real User Monitoring Manuell Nutzerrelevante Antwortzeiten manuell stoppen Kamera Videos des Ladeverhaltens manuell oder automatisiert prüfen Web Tracking Nutzungsorientiert Messpunkte beim User per Webtracking erfassen Siehe z.B. webpagetest.org für Videos des Seitenaufbaus
12. + Amazon und Ikea „on the edge“ Wann kann ich auf der Startseite bei einer Edge-Verbindung suchen? VIDEOVORFÜHRUNG
13. + 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
14. + Langsame Verbindungen simulieren Nutzung von Tools zum Network/Bandwidth Shaping iPhone/iPad/MacOS: Network Link Conditioner Windows/MacOS/Linux: Proxy als Bandbreitendrossel trickle (Unix)
15. + 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
16. + 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
17. + 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“:
18. + 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.)
19. + 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!)
20. + Zum Vertiefen Geplante Artikelserie auf anstrengungslos.de http://www.anstrengungslos.de/blogpress/ mobile-web-performance-teil-1/
21. + War das ? Fragen / Anmerkungen: hans-joachim.belz@anstrengungslos.de @minutefforts Download dieser Präsentation: https://slideshare.net/hjbelz Mobile Web Commerce Benchmark (Q1/14): http://anstrengungslos.de/mwcb
22. + 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