4 Tricks, um Ladezeiten schneller fühlen zu lassen
Egal, wie gut Ihre Benutzeroberfläche gestaltet ist, irgendwann müssen Benutzer darauf warten, dass etwas geladen wird.
Die Ladezeit könnte das Gesamterlebnis beeinträchtigen. Wenn die Nutzer zu lange warten, bis die App geladen wird, können die Nutzer ungeduldig werden. Wenn Nutzer dieses Gefühl haben, verlassen sie Ihre Website und gehen woanders hin. Glücklicherweise gibt es ein paar Dinge, die Sie tun können, um das Zeitgefühl Ihrer Benutzer zu beschleunigen und ihnen das Gefühl zu geben, dass Ihre Inhalte schneller geladen werden als sie.
1. Lassen Sie die Benutzer niemals warten, ohne ihnen Feedback zu geben
Wenn die Verbindung des Benutzers langsam ist, kann es eine Weile dauern, bis eine Website den Inhalt auf dem Bildschirm ausfüllt. Die Wartezeit eines Benutzers beginnt in dem Moment, in dem er eine Aktion einleitet, und der schlimmste Fall ist, wenn er keinen Hinweis darauf hat, dass die Site ihn erhalten hat.
Wenn Ihre Website die Benutzer nicht benachrichtigt, dass sie einige Zeit benötigen, um eine Aktion abzuschließen, denken Benutzer oft, dass sie die Anfrage nicht erhalten haben, und sie versuchen es erneut. Aufgrund mangelnder Rückmeldungen sind viele zusätzliche Hähne entstanden. Um Menschen glücklich zu machen, müssen wir einen Hinweis geben, dass etwas passiert, bieten visuelle Rückmeldung.
2. Vermeiden Sie statische Fortschrittsanzeigen
Statische Fortschrittsanzeigen sind diejenigen, die ein unbewegtes Bild oder einen Text haben, wie "Laden ..." oder "Bitte warten ...", um anzuzeigen, dass die Anfrage empfangen wurde. Während jede Rückmeldung besser ist als keine, sind statische Indikatoren schlechte UX. Benutzer haben keinen Hinweis darauf, dass Inhalte geladen werden, sodass sie nicht sicher sind, ob der Prozess tatsächlich blockiert ist.
3. Verwenden Sie animierte Ladeanzeigen
Psychologische Studien der Wartezeit zeigen, dass sich der Benutzerfokus nach einer Sekunde des Wartens ohne Rückmeldung zu verschieben beginnt. Um die Unsicherheit eines Benutzers zu verringern, verwenden Sie eine Fortschrittsanzeige für alle Aktionen, die länger dauern. (Hinweis: Die Verwendung von Animationen wird für nichts empfohlen, das weniger als eine Sekunde zum Laden benötigt, da die Benutzer möglicherweise Angst davor haben, was gerade auf dem Bildschirm angezeigt wird.)
Infinite Loading Spinner für relativ schnelle Operationen
Die einfachste Form von animierten Indikatoren ist ein Lade-Spinner. Diese Art der visuellen Rückmeldung gibt lediglich an, dass der Benutzer warten muss, aber nicht sagt, wie lange er warten soll. In der Regel sollten Sie diese Art von Fortschrittsanzeige für schnelle Aktionen verwenden (2-10 Sekunden).
Ein Spinner von grauen Linien, die von einem zentralen Punkt ausgehen, ist ein Standardansatz.
Loading-Spinner werden oft zusammen mit Pull-to-Refresh-Gesten verwendet. Es fungiert als Vermittler zwischen zwei Status der Benutzeroberfläche und hilft den Benutzern zu verstehen, was passiert, wenn sich der Bildschirm ändert.
Apple Mail App für iOS
Percent-done-Animation für lang anhaltende Operationen
Loading Spinner sind nicht der richtige Weg, um dauerhafte Belastung anzuzeigen. Es ist viel erträglicher, auf etwas zu warten, wenn wir wissen, wann es passieren wird. Deshalb sollten Sie Ihren Benutzern bei lang andauernden Operationen deutlich zeigen, wie lange sie warten müssen. Als allgemeine Faustregel sollten Sie eine prozentgefüllte Animation für längere Prozesse verwenden, die 10 oder mehr Sekunden dauern.
Bildnachweis: Behance
Alternativ können Sie eine allgemeine Zeitschätzung für die Operation bereitstellen. Versuchen Sie nicht, genau zu sein, ein einfaches "Dies kann eine Minute dauern" kann ausreichen, um den Benutzer zu informieren und ihn zu ermutigen, es abzuwarten.
Softwareupdate unter Mac OS X installieren
4. Die Zeitwahrnehmung des Benutzers anpassen
Wie schnell Ihre Inhalte geladen werden, ist im Kopf des Benutzers. Wenn Sie versuchen, eine schnellere Benutzererfahrung zu erstellen, können Sie die wahrgenommene Zeit und nicht die tatsächliche Zeit verkürzen. Um dies zu tun, können Sie Wartezeiten mit Inhalten, Animationen oder Aktionen füllen, die der Benutzer ausführen kann.
Fortschrittsbalken
Ein Fortschrittsbalken bewirkt, dass Benutzer eine Erwartung dafür entwickeln, wie schnell die Aktion verarbeitet wird. Wie sich die Fortschrittsanzeige bewegt, beeinflusst die Wahrnehmung der Ladezeit. Um einen Fortschrittsbalken für die Benutzer schneller zu machen, können Sie folgende einfache Techniken anwenden:
- Der Fortschrittsbalken sollte niemals anhalten, sonst denken die Benutzer, dass die Site erstarrt ist. Der schlechteste Fall ist, wenn der Fortschrittsbalken sich 99% nähert und plötzlich aufhört. Die meisten Benutzer werden von diesem Verhalten frustriert sein.
- Sie können kleine Verzögerungen in Ihrem Fortschrittsbalken verbergen, indem Sie ihn sofort und gleichmäßig bewegen.
- Verschieben Sie den Fortschrittsbalken am Anfang langsam und beschleunigen Sie ihn zum Ende hin, um den Benutzern ein schnelles Gefühl für die Fertigstellung zu geben.
Bildnachweis: Dribbling
Skeleton Bildschirme
Wartezeit ist eine richtige Zeit für Skeleton-Bildschirme (aka temporäre Informationscontainer). Ein Skeleton-Bildschirm ist im Wesentlichen eine leere Version einer Seite, in die Informationen schrittweise geladen werden. Es bietet eine Alternative zu den traditionellen animierten Indikatoren. Anstatt ein abstraktes Widget zu zeigen, erzeugen Skeleton-Screens Vorwegnahmen, was den Benutzer dazu bringt, sich auf den Fortschritt zu konzentrieren, anstatt auf Wartezeiten.
Skelettbilder werden schnell geladen, da es sich um ein kleines Bild handelt, das häufig aus einfachen Formen besteht. Diese Techniken können in mobilen Apps noch weiter genutzt werden, da die Skelettvorlage lokal zusammen mit den Daten der App gespeichert werden kann. Facebooks App für iOS zeigt Benutzern graue Blöcke und Linien, um Bilder und Text darzustellen, während die App geladen wird. Sobald das Laden beendet ist, erscheinen die Bilder und der Text anstelle der temporären Container. Dies ist nicht schneller als einen Ladebildschirm mit einem Spinner, aber im Sinne des Benutzers fühlt es sich an wie es ist.
Hintergrundoperationen
Ein weiterer Geschwindigkeitstrick, den Sie verwenden können, sind Hintergrundoperationen. Aktionen, die in Hintergrundoperationen gepackt werden, haben zwei Vorteile - sie sind für den Benutzer unsichtbar und passieren, bevor der Benutzer sie tatsächlich anfordert. Geben Sie den Benutzern andere Dinge, auf die sie sich konzentrieren können, während ein Prozess im Hintergrund abläuft. Ein gutes Beispiel dafür ist das Hochladen von Bildern auf Instagram. Sobald der Benutzer ein Bild zum Teilen auswählt, beginnt es mit dem Hochladen. Die App lädt Benutzer ein, Titel und Tags hinzuzufügen, während das Bild im Hintergrund hochgeladen wird. Wenn die Benutzer bereit sind, eine Schaltfläche "Teilen" zu drücken, wird der Upload abgeschlossen und es ist möglich, ihr Bild sofort zu teilen.
Progressives Laden von Bildern
Da moderne Apps und Websites immer mehr Bilder laden, ist es gut, an ihren Ladevorgang zu denken, da dies die Leistung und die Benutzererfahrung beeinträchtigt. Mit einem Unschärfeeffekt können Sie einen progressiven Bildladeeffekt erzeugen.
Ein gutes Beispiel ist Medium, das die Post-Bild-Abdeckung sowie Bilder innerhalb des Post-Inhalts verwischt, bis das Bild vollständig geladen ist. Zuerst lädt es ein kleines verschwommenes Bild (Miniaturansicht) und macht dann einen Übergang zum großen Bild. Die Thumbnails sind sehr klein (nur wenige Kilobyte), was zusammen mit dem verschwommenen Effekt einen besseren Platzhalter als eine Vollfarbe ermöglicht, ohne die Nutzlast zu opfern.
Medium verwendet Unschärfe, um einen progressiven Bildladeeffekt zu erzeugen
Visuelle Ablenkung
Sie sollten immer versuchen, das Warten angenehmer zu machen, wenn Sie die Linie nicht verkürzen können. Um sicherzustellen, dass sich die Leute nicht langweilen, während sie darauf warten, dass etwas passiert, bieten Sie ihnen etwas Ablenkung an. Feine Animationen können Ihre Besucher ablenken und lange Ladezeiten ignorieren.
Animierter Begrüßungsbildschirm Bildnachweis: Ramotion (Dribbel)
Bildnachweis: Vimeo