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?

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. Spaß
Aktion
Reaktion
http://www.flickr.com/photos/navalsurfaceforces/7048785911
Ganze Männer hämmern gern

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
Unmittelbar
Nahtlos
Aufmerksam
Keine
Verzögerung
spürbar
Arbeitsfluss wird
nicht gestört
Aufmerksamkeit
schwindet
(= 0,1s)
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
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
Für andere/ältere Browser siehe https://github.com/ftlabs/fastclick
Für ein Demo siehe http://mobile-ux.appspot.com/#55

7. +
Noch schlimmer als Warten:
Ungewissheit
Sieht gut aus.
Nehme ich!
Hallo?
Einziger
Hinweis im
Chrome*
Übersicht
Übersicht
Übersicht
Zur
Kasse
Zur
Kasse
Zur
Kasse
15s bis die
Checkout-Seite
erscheint
*Chrome = Die Bedienungselemente des Browsers

8. +
10 Sekunden meiner Lebenszeit?
Bin schon weg!
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.

9. +
Technische Performance contra
Nutzerwahrnehmung
Technische Metriken
n
Server Response Time
n
Nutzersicht
DOM Ready Event
Seite vollständig geladen
n
Seite vollständig dargestellt
n
Zeit bis zur Nutzung
Page Load Event
n
Zeit bis zum ersten (visuellen)
Feedback auf Nutzeraktion
n
n
n
...
n
n
Gefühl der Nutzung
n
n
z.B. Laden der Startseite:
Wann kann ich die Suche/
Navigation benutzen?
...
Ruckeln?

10. http://www.flickr.com/photos/79578508@N08/8543779135
Testen!

11. +
Antwortverhalten aus Nutzersicht
messen
Real
User
Monitoring
Manuell
Kamera
Web Tracking
Nutzerrelevante
Antwortzeiten
manuell stoppen
Videos des
Ladeverhaltens
manuell oder
automatisiert
prüfen
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
trickle (Unix)
iPhone/iPad/MacOS:
Network Link Conditioner
Windows/MacOS/Linux:
Proxy als Bandbreitendrossel

15. +
Real User Monitoring
Wann können (echte) Anwender die Empfehlung sehen?
Logo
Logo
Logo
Schöne Vase
Schöne Vase
Schöne Vase
39,99 €
39,99 €
39,99 €
Bestellen
Kunden kauften auch:
Tracking Event:
Orientierung sichtbar
Bestellen
Kunden kauften auch:
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. +
Die größten Herausforderungen
Digitale Völlerei
http://www.flickr.com/photos/malingering/7277979920/
Langsame Verbindung
Rechenkapazität
http://www.flickr.com/photos/imjustwalkin/6997780752/
http://www.flickr.com/photos/aloony89/7616916888/

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

18. +
Gutes Design nimmt
die Herausforderungen an.
Reduzierung Seitenkomplexität
1.
a.
b.
Nur relevante Inhalte
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
n
instantantes Feedback aller UI-Metaphern
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