Ihr Loading Spinner ist ein UX-Killer! Hier ist eine Alternative

Wir wissen, dass Sie es hassen zu warten. Jeder tut es.

In einer Studie aus dem Jahr 2017 fand Google Folgendes heraus:

• Ladezeiten von 1-3 Sekunden erhöhten die Absprungrate um 32 %.
• Ladezeiten von 1-5 Sekunden erhöhten die Absprungrate um 90 %.
• Ladezeiten von 1–6 Sekunden erhöhten die Absprungrate um 106 %.

Die Leute warten nicht gerne, es sei denn, es gibt einen guten Grund dafür, und je länger das Warten ist, desto geringer ist dieser Grund. Aus diesem Grund ist die Sichtbarkeit des Systemstatus eine von Nielsens 10 Usability-Heuristiken für das UI-Design. Sichtbarkeit des Systemstatus bedeutet:

„Das Design sollte die Benutzer durch angemessenes Feedback innerhalb einer angemessenen Zeitspanne immer über das Geschehen auf dem Laufenden halten.“

Und hier kommen die Ladeindikatoren ins Spiel. Ein guter Ladeindikator:

1. Teilt Benutzern mit, dass die Anwendung funktioniert.
2. Macht das Warten erträglich.
3. Gibt Benutzern etwas zum Ansehen.

Der häufigste Ladeindikator im UI-Design ist – Sie haben es erraten – der Lade-Spinner.

Aber manchmal muss man die gängige Praxis in Frage stellen, um Grenzen zu überschreiten und innovative Lösungen zu entdecken. In diesem Fall hat der Ladespinner Mängel, die Designer viel zu lange übersehen haben.

Spinner-Design: Warum das Laden von Spinnern scheiße ist

In Bezug auf Ladeanimationen ist der Ladespinner eine unglückliche Wahl, insbesondere bei Wartezeiten von mehr als 10 Sekunden. Wieso den?

Beginnen wir mit einer Kurzgeschichte.

Meine erste Erinnerung an einen Ladespinner liegt über ein Jahrzehnt zurück, lange bevor ich etwas über Benutzererfahrung gelernt habe. Im Computerraum der Schule begegnete ich dem schicksalhaften, gefürchteten Ding, das meine Freunde und ich das Spinnrad des Todes nennen lernten. Es stellt sich heraus, dass dies kein ungewöhnlicher Name für den macOS-Wartecursor ist.

Bild des macOS-Wartecursors von How-To Geek.

Ähnlich wie beim Spinning Wheel of Death geben Ladespinner kein Feedback – kein Zeichen des Fortschritts. Sie wirbeln unendlich herum und sagen uns nichts über den Fortschritt, den eine Anwendung gemacht hat oder nicht. Es ist frustrierend für Benutzer und regelrecht ärgerlich, wenn Sie es eilig haben.

Sie stellen sich Fragen wie:

• Wann wird es fertig geladen?
• Ist es fast fertig?
• Ist es kaputt?

Aber deine Fragen bleiben unbeantwortet, also gibst du auf.

Schlimmer noch, die Verlangsamungszeit der Spinner.

Warst du jemals mitten in einem Training und wolltest unbedingt, dass ein Timer endet? Oder ungeduldig, dem Unterricht zu entkommen? In diesen Fällen lässt das Beobachten der Uhr und das ziellose Warten die Zeit kriechen. Spinner tun dasselbe, abzüglich des Vorteils eines Countdowns. Sie sind wie das Warten auf Essen in einem Restaurant mit knurrendem Magen; nur wissen Sie nicht, ob der Koch Ihre Bestellung erhalten hat.

Sicher, Ladeanimationen kontrollieren nicht wirklich die Zeit, aber unsere Freude an einer Aufgabe beeinflusst unsere Wahrnehmung davon. Wenn wir eine gute Zeit haben, läuft die Uhr schneller. Wenn wir das Warten hassen, verlangsamt es sich.

Und wieder einmal ermutigt der Spinner die Benutzer zum Aufgeben.

Darüber hinaus möchten Sie, dass Ihre Inhalte für die Benutzer wertvoll sind – um ihre Erwartungen zu erfüllen, wenn nicht sogar zu übertreffen. Wenn die Seite zufällig nicht das ist, was sie sich erhofft haben, trägt die zusätzliche Frustration, zu lange auf einen Spinner gestarrt zu haben, den Schaden noch weiter.

Zur Überprüfung ein Ladespinner:

1. Gibt keine Anzeichen von Fortschritt.
2. Beantwortet die Fragen eines Benutzers nicht.
3. Das Warten fühlt sich länger an als es ist.
4. Bereitet keine Benutzererwartungen vor.

Ihre Ladeanimationsoptionen

Der beste Weg, die Frustration eines Benutzers mit einem Ladespinner zu beheben, besteht darin, diese Frustration von Anfang an zu beseitigen. Das bedeutet, die Wartezeit zu verkürzen, bis sie nicht mehr vorhanden ist, oder eine alternative Fortschrittsanzeige zu verwenden.

Wieder eine gute Lade- oder Fortschrittsanzeige:

1. Lässt die Zeitwahrnehmung des Benutzers schneller erscheinen.
2. Gibt den Eindruck, dass die Anwendung Fortschritte macht.

Die zwei Haupttypen von Fortschrittsindikatoren, die im UX-Design verwendet werden, sind unbestimmte Fortschrittsindikatoren und bestimmte Fortschrittsindikatoren. Der entscheidende Faktor ist die Zeit.

Die Idee ist, dass Sie einen typischen Lade-Spinner verwenden, wenn Sie nicht wissen, wie lange das Laden dauern wird, und Sie einen bestimmten Indikator wie einen Fortschrittsbalken verwenden, wenn Sie es wissen. Eine bestimmte Ladeanimation zeigt an, wie lange ein Benutzer noch warten muss, mit Hinweisen wie Prozentsatz abgeschlossen, verbleibende Minuten oder ein Balken, der sich füllt.

Unbestimmte vs. bestimmte Fortschrittsanzeige aus Material Design.

Das Problem bei dieser Strategie ist, dass Sie nie genau wissen, wie lange etwas zum Laden braucht. Sie können eine fundierte Vermutung anstellen, aber das war es auch schon. Aus diesem Grund zählen viele Countdown-Indikatoren wie folgt: Noch 10 Minuten, 9 Minuten, 8 Minuten, 7 Minuten, 10 Minuten, 8 Minuten und so weiter. Es wird das Laden abschließen und schließlich 0 erreichen, aber nicht bevor es den Benutzer auf eine Fahrt mitnimmt.

So machen Sie das Beste aus Ladeanimationen

Wir diskutieren unten eine alternative Lösung für Spinner und Fortschrittsbalken. Wenn Sie jedoch entschlossen sind, einen traditionelleren Weg einzuschlagen, oder UX-Recherchen durchgeführt und festgestellt haben, dass diese die bevorzugte Wahl für Ihr Publikum sind, sollten Sie einige Richtlinien befolgen.

Verwenden Sie zunächst einen Ladespinner nur für Wartezeiten unter 10 Sekunden. Schaffen Sie bei Verzögerungen von mehr als 10 Sekunden die Illusion eines Fortschritts mit bestimmten Indikatoren, um das Interesse der Benutzer länger aufrechtzuerhalten.

Wenn Sie Spinner oder andere Ladeanimationen entwerfen:

1. Seien Sie so kreativ und unterhaltsam wie möglich
2. Machen Sie es markengerecht
3. Geben Sie eine möglichst genaue Fertigstellungsschätzung an
4. Erklären Sie, warum der Benutzer wartet
   – Bitte warten Sie, während wir Ihre Ergebnisse berechnen.
   – Bitte warten Sie, während wir alles für Sie einrichten.
   – Wir sammeln Ihre Daten.
   – 21 von 30 Dateien überprüft.
5. Verwenden Sie keine Animation, wenn die Seite in weniger als einer Sekunde geladen wird.

Beispiele für Ladebildschirm-Gifs von Hacker Noon.

Wir könnten Ihre Ladeanimationen weiter verbessern, aber darum geht es in diesem Artikel nicht. Denn egal wie unterhaltsam Ihre Ladeanimation ist, sie betont die Wartezeit und vermittelt kein klares Fortschrittsgefühl.

Dafür sind Skelettsiebe da.

Progressives Laden mit Skeleton-Bildschirmen

Untersuchungen zum Vergleich von Spinnern und Skelettbildschirmen ergaben, dass Skelettbildschirme als schneller wahrgenommen werden und die Benutzer zufriedener machen. Also, was ist dieser vermeintliche Held?

Wie Sie wissen, belegen Ladespinner einen Bildschirm, bis die Benutzeroberfläche vollständig geladen ist. An diesem Punkt wird alles auf einmal angezeigt.

Skeleton-Bildschirme verwenden eine andere Taktik und enthüllen jeden Teil der Benutzeroberfläche, während der Ladevorgang fortschreitet. Es beginnt mit einem groben Umriss des Designs der Benutzeroberfläche und fährt dann fort, Elemente zu zeigen, während sie vollständig geladen sind. Diese Strategie wird als schrittweiser Fortschritt bezeichnet, und die Details erscheinen normalerweise in der Reihenfolge Skelettumriss (auch als Platzhalter-UI bezeichnet), Text und dann Bilder.

Beispiel eines Facebook-Skelettbildschirms von Facebook Engineering.

Skelettbildschirme werden von namhaften Unternehmen wie LinkedIn, Instagram, Facebook und Google verwendet und bieten ein besseres Ladebildschirmerlebnis, indem sie passives Warten in aktives Warten umwandeln.

Passives Warten ist, wenn Sie einfach nur dasitzen und warten, ohne etwas zu tun zu haben, wie wenn Sie zusehen, wie sich ein Spinner dreht und dreht und dreht. Aktives Warten ist, wenn Sie etwas tun, das sich wie ein Fortschritt anfühlt, während Sie warten. Das Laden von Skeletten fördert das aktive Warten, indem es dem Benutzer bei jeder Bildschirmaktualisierung neue Informationen zum Verarbeiten gibt.

Auf diese Weise lenkt der Skeleton-Bildschirm den Fokus von der Zeit, die Sie warten, und legt ihn auf den tatsächlichen Nachweis des Fortschritts, der vor Ihnen stattfindet, wodurch sich der Ladevorgang schneller anfühlt. Und da es zeigt, was geladen wurde und was übrig ist, ermöglicht es dem Benutzer, genaue Erwartungen an die Benutzeroberfläche zu stellen.

Das progressive Laden von Instagram in Aktion.

Stellen Sie beim Implementieren eines Skelettbildschirms sicher, dass Ihre Platzhalter-Benutzeroberfläche eine genaue Darstellung dessen ist, wie die endgültige Benutzeroberfläche aussehen wird. Sonst schaffst du eine Lücke zwischen Anspruch und Wirklichkeit.

Einige Tools und Websites, wie Medium und Google Images, verwenden progressives Laden von Bildern, um einen weiteren Schritt in der Progression hinzuzufügen. Progressives Laden von Bildern ist, wenn Sie die vorherrschende Farbe oder unscharfe Version eines Bildes anzeigen, bevor es vollständig geladen wird.

Sie können auch Ladeanimationen innerhalb von Skelettbildschirmen entwerfen, um das Laden anzuzeigen. Facebook zum Beispiel lässt die ausgegrauten Textleisten auf seinem Skelettbildschirm beim Laden der Seite ihre eigene Ladebewegung ausführen.

Benutzer nehmen Bildschirme mit Ladebewegungen von links nach rechts und langsamen und stetigen Ladebewegungen als schneller wahr.

Skeleton Screen Bedenken

Es gibt wie immer Kritik – die größte Sorge ist, dass graue Blöcke eine langweilige und unattraktive Lösung für Benutzer sind, die großartige Inhalte erwarten.

Bis zu einem gewissen Grad verfehlt diese Sorge den Sinn des Skelettbildschirms: auf die großartigen Inhalte hinzuweisen, die schnell unterwegs sind. Kein Benutzer erwartet oder will überhaupt einen Ladebildschirm, aber Skelettbildschirme bieten den Komfort zu wissen, dass eine Schnittstelle funktioniert und in Sekundenschnelle verfügbar sein wird.

Natürlich werden graue Blöcke irritierend, wenn zwischen den einzelnen Fortschrittsphasen zu lange Wartezeiten liegen. Je länger die Wartezeit, desto schlimmer wird es. Dies ist bei allen Ladeindikatoren der Fall, denn wie wir eingangs festgestellt haben, wartet niemand gerne lange.

Bei Skelettbildschirmen hilft es, mehrere Fortschrittsphasen zu implementieren, um den Fokus des Benutzers zu aktivieren. Es gibt schlecht gestaltete Skelettbildschirme, die von der grauen Platzhalter-Benutzeroberfläche zu allem auf einmal wechseln, was den Zweck verfehlt. Effektives progressives Laden zeigt Inhalte, sobald sie bereit sind, um die Benutzer informiert, interessiert und hoffnungsvoll zu halten.

Wenn die Wartezeit etwas länger als ideal ist, können Sie ein paar Sekunden lang einen Spinner verwenden, bevor Sie die Platzhalter-Benutzeroberfläche anzeigen und Ihre Inhalte laden. Dies kann Ihnen ein wenig Zeit verschaffen, solange die Platzhalter-Benutzeroberfläche angezeigt wird, um einen erheblichen Fortschritt anzuzeigen.

Wenn Ihre Ladezeit zu lang ist, ist die Reduzierung Ihrer Wartezeit immer die beste Option und sollte Ihre Priorität sein. Es gibt viele Gründe, warum Ihre Website langsam sein könnte.

Testen Sie es: Gute UX beginnt beim Benutzer

Die Benutzererfahrung beginnt beim Benutzer, und keine Antwort ist für jeden richtig, selbst wenn sie es für die meisten ist. Aus diesem Grund beginnt die Bereitstellung einer guten Benutzererfahrung mit dem Testen Ihrer Ideen, um festzustellen, was für Ihr Publikum am besten funktioniert.

Früher war das Beste, was man tun konnte, das beste Spinner-Design anzubieten.

Nun ist gut gestaltetes progressives Laden eine Alternative, die es wert ist, in Betracht gezogen zu werden. Es beschleunigt wahrgenommene Wartezeiten, vermittelt ein Gefühl des Fortschritts, impliziert, was noch geladen werden muss, und gibt den Benutzern Auskunft über die Erwartungen.

Aber das bedeutet nicht, dass es an der Zeit ist, Best Practices in Frage zu stellen. Die Tage der Verwendung langer, wenig informativer Ladeanimationen mögen hinter uns liegen, aber eines Tages wird etwas die Einschränkungen von Skelettbildschirmen überwinden, so wie sie es beim Laden von Spinnern getan haben.

Wenn Sie bis dahin mehr darüber erfahren möchten, wie Sie Ihre UX verbessern können, wenden Sie sich an uns. Wir reden gerne über Strategie.