+

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

Ganze Männer hämmern gern

Aktion

Reaktion

Spaß

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

+Warten ist kognitiver Stress: Arbeit im Flow

n  sfdsf

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

+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/

+100ms? – Für Videospiele?

Glaubhafte Metaphern brauchen flüssige Animationen

Swipe Bühnen Komplexe Menüs Expansionen & DropDowns

+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

+

Ü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

+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!

+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

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

Testen!

+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

+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 Ikea 14s 2min 6s

Test mit simulierter Edge-Verbindung (240 Kbps) und realer 3G-Verbindung

+Langsame Verbindungen simulieren

Nutzung von Tools zum Network/Bandwidth Shaping

iPhone/iPad/MacOS: Network Link Conditioner

Windows/MacOS/Linux: Proxy als Bandbreitendrossel

trickle (Unix)

+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

+

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

+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“:

+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.)

+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!)

+Zum Vertiefen

Geplante Artikelserie auf anstrengungslos.de

http://www.anstrengungslos.de/blogpress/mobile-web-performance-teil-1/

+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

+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