Best Practices für die Bereitstellung animierter Fortschrittsindikatoren zu Ihrem Vorteil

Wenn Sie schon einmal einen PC verwendet haben, ist Ihnen vielleicht auch das animierte Windows-Symbol bekannt, das beim Hochfahren des Systems angezeigt wird. Es bedurfte einer Weiterentwicklung von Design und Animation, um sich zu dem zu entwickeln, was wir heute sehen, aber damals, in Windows 1995, bewegte sich das Bild überhaupt nicht. Einige von Ihnen denken vielleicht, warum überhaupt diese animierten Indikatoren verwenden?

Aber denken Sie daran, möchten Sie lieber warten und einen leeren Bildschirm beobachten, um zu sehen, wie Ihre Aktion abgeschlossen ist? Oder sich mit etwas Bedeutungsvollem unterhalten, bis der Bildschirm wieder erscheint?

Zu den wichtigsten Merkmalen des Benutzeroberflächendesigns gehört die Fähigkeit, den Fortschritt als Systemstatus anzuzeigen. Der Benutzer muss wissen, ob das System sich seiner Aktion bewusst ist und entsprechend darauf reagiert. Animierte Fortschrittsanzeigen sind in der Lage, ohne umfangreiche Text- oder Videofunktionen zu nahezu jedem Zeitpunkt den aktuellen Kontext des Einsatzes anzuzeigen. Dies macht sie ideal, um den Systemstatus bereitzustellen, während der Fortschritt im Hintergrund abgeschlossen wird.

Warum ist die Interaktion mit dem Benutzer während des Systemfortschritts wichtig?

Wer liebt nicht die schnelle Antwort von einer App oder Website? Obwohl es dem Benutzer viel bedeutet, ist es nicht möglich, es in unerschütterlicher Konsistenz auszuführen. Bestimmte Faktoren werden immer in die Gleichung aufgenommen, die die Geschwindigkeit Ihrer Anwendung beeinträchtigen können. Zu diesen Faktoren gehören meist eine schlechte Internetverbindung, langsame Leistung aufgrund hoher Last und sogar Programmfehler. Unter solchen Umständen wäre es am besten, die Anspannung der Benutzer zu minimieren und die Gewissheit zu geben, dass die App funktioniert und Fortschritte erzielt werden. Dazu müssen Sie dem Benutzer Feedback geben, damit die Zeit die Geduld des Benutzers nicht strapaziert.

Halten Sie die Benutzer mit Feedback süchtig

Die Wartezeit beginnt fast sofort, wenn eine Aktion durch den Benutzer durchgeführt wird. Aber was es noch schlimmer macht, ist das Fehlen eines geeigneten Indikators zur Darstellung des Fortschritts des Systems. Der Benutzer geht natürlich davon aus, dass die App nicht reagiert hat, wenn sie keine Benachrichtigung anzeigt, dass das System Zeit braucht. Die Ergebnisse können von zügellosem Klicken bis hin zum Verlassen des Benutzers reichen, nur weil die App nicht rechtzeitig Feedback gegeben hat.

Aktionen, die darauf abzielen, den Fortschritt neu zu starten oder das System zu aktualisieren, werden häufig ausgeführt, wenn das Laden länger dauert als erwartet. Auch hier kann das Fehlen von Rückmeldungen die Antwort auf die Anfrage nicht darstellen, obwohl sie im Hintergrund erfolgt. Aus diesem Grund muss eine animierte Anzeige eingeführt werden, um den Systemfortschritt der App jederzeit anzuzeigen.

Wie verwendet man eine Fortschrittsanzeige für jede Aktion, die länger als eine Sekunde dauert?

Wenn eine App normalerweise weniger als 1 Sekunde zum Laden benötigt, scheint der Fortschritt fast ungehindert zu sein und der Benutzer verliert nicht die Konzentration. Wenn die Ladezeit jedoch 1 Sekunde überschreitet, müssen Maßnahmen ergriffen werden, um den Benutzer bei der Stange zu halten. Die kurze Verzögerung macht sich bemerkbar und der Benutzer beginnt, über die Effektivität der in der Anwendung ausgeführten Aufgabe nachzudenken.

Aus diesem Grund muss die App durch eine Fortschrittsanzeige reagieren, um einen glaubwürdigen Grund für das Warten zu bieten und die Unsicherheit des Benutzers zu verringern, bevor es außer Kontrolle gerät. Es muss beachtet werden, dass Aktionen, deren Laden weniger als eine Sekunde dauert, nicht unbedingt einen Animationsindikator erfordern, aber das Bild kann dies tun. Dies wird empfohlen, da eine Animation, die bei jeder Aktion auf dem Bildschirm blinkt, den Benutzer verwirren kann. Animierte Fortschrittsanzeigen werden am besten verwendet, um die Auswirkungen längeren Wartens zu neutralisieren und den Benutzer mit der App oder Website zu beschäftigen.

Arten von Fortschrittsindikatoren

1. Unbestimmt: Animierte Warteindikatoren sollen mit dem Benutzer kommunizieren und ihn über seine letzte Benutzeraktion auf dem Laufenden halten. Die gebräuchlichste und ziemlich einfachste Art von Warteindikatoren ist „Unbestimmt“. Solche Arten von Indikatoren weisen die Benutzer darauf hin, dass sie auf den Abschluss der Aktion warten sollen, während sie nicht wissen, wie lange es dauern könnte, bis der Fortschritt abgeschlossen ist. Es ist fast verständlich, dass der Fortschrittsindikator „Unbestimmt“ ist sollte für schnelle Aktionen vorzugsweise innerhalb von 2-10 Sekunden verwendet werden. Jede längere Zeit kann die Geduld des Benutzers beeinträchtigen. Dies kann die Absprungrate für eine Website und die Abbrüche für Anwendungen erhöhen.
2. Bestimmen: Bei der Fortschrittsanzeige „Bestimmen“ wird die Zeit innerhalb der Animation ziemlich überspannt. Diese Art von Indikatoren informiert den Benutzer über die ungefähre oder genaue Zeit, die erforderlich ist, um den Fortschritt abzuschließen. Sie sind eher die beliebtere Art von Warteindikatoren, da sie den Fortschritt von Anfang an anzeigen, wie viel erreicht wurde und wie viel mehr es braucht, um das Warten zu beenden. Dies hilft dem Benutzer, sich über den erzielten und durch die Animation angezeigten Fortschritt sicher zu sein, und erhöht gleichzeitig seine Bereitschaft, sich weiterhin mit der Website oder Anwendung zu beschäftigen.

Endlosschleifen-Animationsanzeige und Prozentsatz-Erledigt-Anzeige

• Schleifenanimation: Der Indikator für die Schleifenanimation soll den Fortschritt darstellen, ohne die ungefähre oder genaue Ladezeit anzuzeigen, die erforderlich ist. Aus diesem Grund sind mehrheitlich geloopte animierte Fortschrittsanzeigen unbestimmt. Beispielsweise wurde die Fortschrittsanzeige von Windows 7 so konzipiert, dass sie dieselbe Animationswiederholung ohne Rückmeldung der genauen Zeit anzeigt, die möglicherweise zum Abschließen des Fortschritts benötigt wird. Außerdem umfasste es alles von Bootfunktionen über das Einrichten des Schnittstellenbetriebs bis hin zu anderen Formen des Datenladens. Aus diesen beiden Gründen ziehen es Benutzer nicht vor, eine Schleifenwarteanzeige zu sehen, um die Ladezeit der Website oder Anwendung darzustellen.

• Prozent-Fertig-Anzeige: Wie der Name schon sagt, zeigt die Prozent-Fertig-Anzeige den Fortschritt des Ladevorgangs an, indem sie die Animationsspanne, den Kreis oder Balken um 0 % bis 100 % füllt. Da er die Zeit anzeigt, die zum Abschließen des Fortschritts benötigt wird, wird der Prozent-Fertig-Indikator in bestimmte Warteindikatoren eingeteilt. Für diese besondere Qualität ist es am besten, den Prozent-Fertig-Indikator für Aufgaben zu verwenden, die mehr als 10 Sekunden zum Abschließen benötigen.

  Laut einer Studie sind 10 Sekunden die Schwelle für die Geduld eines durchschnittlichen Benutzers. Darüber hinaus wird der Benutzer leichtsinnig und ungeduldig, bis weiteres Feedback gegeben wird. Indem Sie die prozentuale Fortschrittsanzeige für Prozesse anzeigen, deren Laden länger als 10 Sekunden dauert, können Sie den Benutzer an der Website oder Anwendung festhalten, ohne seine Geduld zu beeinträchtigen.

Wie setzt man Fortschrittsindikatoren effektiv ein?

Die effektive Verwendung von Fortschrittsindikatoren in Ihren Anwendungen und Websites kann über Erfolg und Misserfolg entscheiden. Hier sind einige Tipps, um sicherzustellen, dass Ihre Fortschrittsanzeigen die gewünschte Leistung erbringen.

1. Halten Sie den Benutzer über den Grund für die Wartezeit auf dem Laufenden: Es ist ein Anfängerfehler, den Benutzer über den Ladefortschritt, der im Hintergrund stattfindet, nicht zu informieren. Dies erhöht ihre Tendenz, die Geduld zu verlieren und die Anwendung oder Website zu verlassen. Sie können den Benutzer auf dem Laufenden halten, indem Sie eine animierte Fortschrittsanzeige zusammen mit etwas Text zum besseren Verständnis anzeigen. Sie können zeigen, auf welchen Prozess gezielt abgezielt wird. Beispielsweise können Sie den Wartefortschritt eines Videospiels mit einem Ladebalken und Text anzeigen, der anzeigt, welcher Vorgang ausgeführt wird, z. B. „Laden von Grafiken“ oder „Laden von Karten“ usw.
2. Geben Sie eine einfache Zeitschätzung für Aufgaben an, die längere Zeiträume erfordern: Nehmen Sie die Dinge nicht auf Mikroskalen. Sie können den Benutzer bei der Stange halten, indem Sie eine einfache Schätzung abgeben. Herumalbern mit Versprechungen, die Sie nicht halten können, kann die Benutzer irritieren und sie zum Verlassen zwingen.
3. Zeigen Sie die genaue erforderliche Zeitdauer an: Für Vorgänge, die im Allgemeinen mehr Zeit in Anspruch nehmen als das durchschnittliche Wartelimit des Benutzers, ist die Entscheidung für bestimmte Fortschrittsanzeigen der klügere Schritt. Die ideale Wahl wäre die prozentuale Fortschrittsanzeige, da sie die genaue Ladezeit ins Rampenlicht rückt. Bei Operationen, die noch länger zu handhaben sind, sollten Sie die Anzahl der Schritte verwenden, um den erzielten Fortschritt hervorzuheben.
4. Halten Sie den Fortschritt aufrecht: Versuchen Sie, beim Laden von Aufgaben auf Konsistenz in Ihrem Fortschrittsbalken zu zielen. Nach einigen Erfahrungen zwingt der Fortschrittsbalken die Benutzer dazu, eine Erwartung zu entwickeln, wie schnell die Aktion abgeschlossen sein wird. Folglich kann jedes Einfrieren während des Fortschritts die Erwartungen der Benutzer ernsthaft beeinträchtigen. Wenn der Balken beispielsweise 99 % erreicht und über einen längeren Zeitraum so bleibt, sind die meisten Benutzer von diesem Verhalten frustriert und verlassen die Anwendung in dem Glauben, sie sei eingefroren. Um dem entgegenzuwirken, können Sie diese inkonsistenten Verzögerungen im Fortschrittsbalken maskieren, indem Sie anzeigen, dass er sich sofort und stetig bewegt.
5. Zeigen Sie den Fortschritt im Balken schneller als die tatsächliche Geschwindigkeit an: Rohe Geschwindigkeit kann durch eine einfache Wahrnehmung manifestiert werden, die Sie erstellen können, damit sich der Fortschrittsbalken schneller anfühlt. Sie können dies erreichen, indem Sie die Animation so gestalten, dass sie sich zunächst langsam bewegt und das Tempo am Ende anpasst. Dies schafft die Illusion eines schnellen Fortschritts, ohne die Zeit für die Erledigung der Aufgabe zu beeinträchtigen.
6. Bieten Sie Ablenkung: Die Zeitwahrnehmung des Benutzers kann durch die Einführung kreativer Fortschrittsindikatoren erheblich reduziert werden. Wenn die App während des Fortschritts einige interessante Text- oder visuelle Details anzeigt, kann dies den Benutzer von der Zeit ablenken, die zum Abschließen der Aktion benötigt wird. Sie können eine Vielzahl von Dingen anbieten, um die Benutzer zu beschäftigen, z. B. kurze Videos, interessante Fakten, Animationen und sogar triviale Spiele.

Alternative – Verwenden Sie Skeletons-Bildschirme, um Fortschrittsindikatoren für Animationen abzugleichen

Obwohl Fortschrittsanimationsindikatoren fast jedes schlechte Gefühl, das beim Warten entsteht, erschüttern können, sind einige Zuschauer diesen Taktiken gegenüber ziemlich widerstandsfähig. Eine der wenigen guten Alternativen, um die Benutzer warten zu lassen, ohne Fortschrittsanzeigen zu verwenden, ist eine Methode namens Skeleton Screen. Diese Techniken, die auch als temporäre Informationscontainer bezeichnet werden, zeigen dem Benutzer den Fortschritt in Echtzeit, anstatt einen Ladebalken zu öffnen. Stellen Sie sich einen leeren Bildschirm vor, der nach und nach mit seinen Komponenten und Elementen gefüllt wird, bis er vollständig bestückt ist. Dadurch entsteht die Illusion, dass die Anwendung mit der Ladezeit handelt und ihr Warten mit dem angezeigten Fortschritt belohnt wird.

Es hält das Publikum nicht nur mit der Website oder Anwendung in Verbindung, sondern hält es auch bereit, seine nächste Aufgabe zu erledigen. Während Fortschrittsanzeigen auch ein hervorragendes Mittel sind, um die Benutzer zufrieden zu stellen, können sie die Energie in den Benutzern nicht aufrechterhalten, die der Skelettbildschirm während ihres Ladevorgangs aufrechterhält.

Abschließende Gedanken

Es spielt keine Rolle, wie schnell unsere App- oder Website-Operationen sind, es besteht immer die Möglichkeit einer ungebetenen Bearbeitungszeit. Die Verwendung von animierten Wartefortschrittsindikatoren wie Prozent-Fertig-Indikatoren und Lade-Spinner hilft den Benutzern dabei, sich über die laufenden Prozesse und den aktuellen Status des Systems zu vergewissern. Infolgedessen steigt die Wahrscheinlichkeit, dass sie auf der Website oder Anwendung bleiben, auf das Laden warten und mit ihren verbleibenden Aufgaben fortfahren. Um die für den Abschluss der Prozesse erforderliche Zeit zu berechnen, müssen Sie die entsprechende Art von Fortschrittsanimationsindikatoren zuweisen.

Eine Schleifenanzeige ist ideal für Vorgänge, die 2-10 Sekunden dauern, während zeitaufwändigere Vorgänge durch eine prozentuale Fertiganzeige unterstützt werden können. Im Falle von Schleifenanimationen und Skeleton-Bildschirmen ist es am besten, sich für Skeleton-Bildschirme zu entscheiden, da sie in der Lage sind, jede Aktion auszuführen, die über ein paar Millisekunden hinausgeht, und es dennoch für die Benutzer kühl zu halten.