+

Wie der Hammer fällt

Mobile Web Performance aus Nutzersicht

Hans-Joachim Belz (Anstrengungslos.de)
UXBN bei Data in T...
Spaß

Aktion

Reaktion
http://www.flickr.com/photos/navalsurfaceforces/7048785911

Ganze Männer hämmern gern
+

Warten ist kognitiver Stress:
Arbeit im Flow
n 

sfdsf

Icons: http://www.doublejdesign.co.uk/
+

Nielsens Heuristik
Wahrnehmung von Antwortzeiten

> 100ms

> 1s

> 10s

Unmittelbar

Nahtlos

Aufmerksam

Keine
Verzöge...
+

100ms? – Für Videospiele?
Glaubhafte Metaphern brauchen flüssige Animationen

Swipe Bühnen

Komplexe Menüs

Expansionen...
+

Verzögerung bis zum Erkennen
einer Tap-Geste: ca. 300 ms
n 

Bisher schon für nicht
zoombare Seiten auf
Chrome for And...
+

Noch schlimmer als Warten:
Ungewissheit
Sieht gut aus.

Nehme ich!

Hallo?
Einziger
Hinweis im
Chrome*

Übersicht

Über...
+

10 Sekunden meiner Lebenszeit?
Bin schon weg!
n 

Abhängig vom jeweiligen Nutzungskontext und Alternativen
werden Nutz...
+

Technische Performance contra
Nutzerwahrnehmung
Technische Metriken
n 

Server Response Time

n 

Nutzersicht

DOM Re...
http://www.flickr.com/photos/79578508@N08/8543779135

Testen!
+

Antwortverhalten aus Nutzersicht
messen
Real
User
Monitoring
Manuell

Kamera

Web Tracking

Nutzerrelevante
Antwortzeit...
+

Amazon und Ikea „on the edge“
Wann kann ich auf der Startseite bei einer Edge-Verbindung suchen?

VIDEOVORFÜHRUNG
+

Amazon und Ikea „on the edge“
Messpunkt aus Nutzersicht: Ab wann kann ich die Suche nutzen?

3G
Edge
Amazon
< 2s
10s
Ik...
+

Langsame Verbindungen simulieren
Nutzung von Tools zum Network/Bandwidth Shaping

trickle (Unix)

iPhone/iPad/MacOS:
Ne...
+

Real User Monitoring
Wann können (echte) Anwender die Empfehlung sehen?

Logo

Logo

Logo

Schöne Vase

Schöne Vase

Sc...
+

Die größten Herausforderungen

Digitale Völlerei

http://www.flickr.com/photos/malingering/7277979920/

Langsame Verbin...
+

Shit's lightweight and loads fast.

motherfuckingwebsite.com

J
Maßnahme zum Eingrenzen der „digitalen Völlerei“:

Ver...
+

Gutes Design nimmt
die Herausforderungen an.
Reduzierung Seitenkomplexität

1. 
a. 
b. 

Nur relevante Inhalte
Keine De...
+

Design für die Wahrnehmung
Gemeinsame Aufgabe von Business, Design und Technik

n 

Reduzierung der gelieferten Inhalt...
+

Zum Vertiefen
Geplante Artikelserie auf anstrengungslos.de

http://www.anstrengungslos.de/blogpress/
mobile-web-perform...
+

War das

?

Fragen / Anmerkungen:
hans-joachim.belz@anstrengungslos.de
@minutefforts
Download dieser Präsentation:

htt...
+

Lust auf mehr?

Neue UX/Usability Community in Bonn
Jeden letzten Donnerstag im Monat um 19:00 Uhr
Data in Transit, Ado...
Nächste SlideShare
Wird geladen in …5
×

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

379 Aufrufe

Veröffentlicht am

Vortrag von Hans-Joachim Belz von Anstrengungslos zum Thema Mobile Web Performance

Veröffentlicht in: Technologie
0 Kommentare
4 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
379
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
2
Aktionen
Geteilt
0
Downloads
5
Kommentare
0
Gefällt mir
4
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

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

  1. 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. 2. Spaß Aktion Reaktion http://www.flickr.com/photos/navalsurfaceforces/7048785911 Ganze Männer hämmern gern
  3. 3. + Warten ist kognitiver Stress: Arbeit im Flow n  sfdsf Icons: http://www.doublejdesign.co.uk/
  4. 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. 5. + 100ms? – Für Videospiele? Glaubhafte Metaphern brauchen flüssige Animationen Swipe Bühnen Komplexe Menüs Expansionen & DropDowns
  6. 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. 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. 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. 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. 10. http://www.flickr.com/photos/79578508@N08/8543779135 Testen!
  11. 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. 12. + Amazon und Ikea „on the edge“ Wann kann ich auf der Startseite bei einer Edge-Verbindung suchen? VIDEOVORFÜHRUNG
  13. 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. 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. 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. 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. 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. 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. 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. 20. + Zum Vertiefen Geplante Artikelserie auf anstrengungslos.de http://www.anstrengungslos.de/blogpress/ mobile-web-performance-teil-1/
  21. 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. 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

×