Über das Warten im Web

loading_pattern.png

Warum wir manchmal warten müssen, warum Ladeindikatoren dabei nicht immer hilfreich sind und wie Atelier Disko das Problem löst.

Im Land der Sites und Apps sind Ladeindikatoren etwas alltägliches. Wann es OK ist, sie einzusetzen und wie wir bei Atelier Disko entscheiden, versuche ich in dieser Note zu klären.

Auf Ladeindikatoren treffen wir, sobald Computer etwas Zeit für sich brauchen – wir als Menschen müssen dann warten. Und das Problem ist: niemand wartet gerne. Oder besser: niemand wartet gerne lange. Noch viel genauer kann man dies bei Jakob Nielsen in Response Times: The 3 Important Limits von 1993 (!) nachlesen.

Alles was bis zu 0,1 Sekunden dauert, fühlt sich für uns unmittelbar an. Zwischen 0,1 und 1 Sekunde, bemerken wir die Verzögerung, fühlen uns aber in unserem Gedankenfluss nicht unterbrochen. Jedoch verlieren wir das Gefühl direkt mit den Daten zu interagieren. Zwischen 1 Sekunde und 10 Sekunden verlieren wir den Fokus, alles was noch länger dauert wird dazu führen, dass wir anfangen andere Sachen zu machen.

Aus unserer Erfahrung sind in der Praxis diese Grenzen eher noch niedriger. Unsere (digitale) Welt ist einfach wahnsinnig schnell geworden, denn seit 1993 hat sich viel verändert. Wir haben unsere Aufmerksamkeitsspannen verkürzt, um eine größere Bandbreite an Informationen in derselben Zeit verarbeiten zu können.

Unsere digitalen Arbeiten fühlen sich immer unmittelbar an. Bei Atelier Disko sieht ein Besucher die Website nach spätestens 0,5 Sekunden. Alles was wahrnehmbar über 1,5 Sekunden dauert, ist für uns ein Problem. Das ist übrigens auch für Google so, langsame Websites erzielen nicht so hohe Ränge in den Suchergebnissen, wie schnelle Seiten.

Keine Lösung ist, einfach einen Ladebalken anzuzeigen, wenn es mal länger dauert. Gerade zu den Zeiten von Flash waren ja viele verknallt in die Dinger. Es gilt das grundlegende Problem anzugehen. Ladeindikatoren bringen nämlich ihre ganz eigenen Probleme mit sich. Meist sind sie schön animiert und weil alles was sich bewegt den Fokus auf sich zieht, werden wir vom Wesentlichen abgelenkt, wie in UI Anti Pattern: Website Loading Bars beschrieben.

So the user is now focusing his attention on the loading bar. If he has not seen yet such a loading bar, the user will ask himself what that element should indicate. Remember: he lost the context [...], that is why he needs to start orientating himself nearly from scratch.

Aus den drei Bereichen Frontend, Backend, Infrastruktur hier nun einige Beispiele, sowie Lösungvorschläge.

Preloading, JavaScript for Layout; Bevor uns die Website angezeigt wird, erscheint ein Ladeindikator. Hier meint man es sehr gut mit uns...  man möchte uns die unfertige Website ohne z.B. Bilder nicht zeigen. Viele verwenden auch JavaScript zum Layouting. Alle diesen Sachen müssen natürlich erstmal geladen werden. Die Lösung ist, auf JavaScript für das Layouting zu verzichten und CSS seinen Job machen zu lassen. Das mag manchmal schwierig sein, diese Anforderung ist aber absolut essentiell. Denn man vertraut am besten auf die Webtechnologien selbst. Hält man sich an grundlegende Regeln zum Aufbau von Websites, dann optimieren Browser das Laden von Assets und Layout bereits ganz alleine für uns.

Infinite Scroll, Lazy Loading, Ajax; Auf einer Seite mit Posts können wir weitere Posts mit einem Klick auf »mehr Laden« nachladen. Wenn es hier etwas dauert, dann ist meistens das Backend schuld. Lösung hierfür ist meist das serverseitige Caching (wir nutzen hier memcached). Auch Anfragen an die Datenbank kann man optimieren. Also sozusagen die Klassiker.

Media Placeholders; Während Medien auf einer Website geladen werden, wird ein animierter »Laden...« Platzhalter angezeigt. Hier sollte die Größe der Medien angepasst werden. Nicht jedes Gerät benötigt gleich die Ultra-HD Auflösung eines Bildes. Was immer noch gut funktioniert sind progressiv geladene JPEGs. Auch den Webserver kann man für die Auslieferung statischer Inhalte aufbohren. Wir nutzen korrekte Caching-Header und einen performanten Webserver (nginx).

Es gilt: Wenn etwas dauert, dann das Grundproblem lösen. Für sehr kurze Ladezeiten immer auf einen Ladeindikator verzichten.

—David

#pattern #performance #ux
David Persson
30. April 2016
via Notes