Ladeanimationen versüßen Wartezeiten

WEBDESIGN

WEBDESIGN

Ladeanimationen – trotz langen Wartens bestens unterhalten

Der folgende Artikel handelt von Vor- und Nachteilen von Ladeanimationen, ihren Einsatzorten und davon, wie sie sich auf die Markenbindung zu deinem Unternehmen auswirken.

Themenübersicht

Die Psychologie des Wartens

In einer Welt, die sich immer schneller zu drehen scheint, wollen wir alles am liebsten sofort. Dass wir Konsumenten ungeduldig sind und selten Lust aufs Warten haben, scheint erst einmal logisch und der normale Lauf der Dinge zu sein.

Wartezeit steht grundsätzlich zwischen dem Nutzer und einem Ergebnis und wird somit als lästig empfunden. Wenn wir allerdings die Zeit, die uns von einem Ergebnis trennt, genießen können oder uns zumindest nicht auf das Warten selbst konzentrieren, empfinden wir die Wartezeit nahezu automatisch als nur halb so lang und weniger störend.

Bei der Messung von Zeit spricht man von der realen Zeit und der gefühlten Zeit. Die reale Zeit ist objektiv und besser nachvollziehbar. Sie beschreibt die Sekunden, die auf der Uhr vergehen, bis ein Vorgang abgeschlossen ist. Die gefühlte Zeit hingegen geht vom individuellen Nutzer aus, ist somit rein subjektiv und bemisst sich einzig und allein an der persönlichen Einschätzung.

Wie sich Verkaufszahlen zu Wartezeiten verhalten

Um auf dem freien Markt zu bestehen und den wirtschaftlichen Erfolg zu gewährleisten, sollten Unternehmen stets die Nutzererfahrungen optimieren. Und lange, langweilige Wartezeiten gehören definitiv zu den einschlägigsten Nutzererfahrungen – im Restaurant, in der Autowerkstatt oder am Flughafen.

Wartezeiten spiegeln indirekt die Qualität eines Produktes wider und sollten daher gut durchdacht sein. Mit einem Geduldsfaden wie dem meines damaligen Fahrlehrers sind schließlich die wenigsten ausgerüstet.

Die wohl höchste Absprungrate gibt es beim Surfen durchs World Wide Web. Wenn wir eine Website öffnen, die überdurchschnittlich viel Zeit benötigt, um vollständig zu laden, zweifeln wir die ersten drei Sekunden an der Power des eigenen WLANs. Ab der vierten Sekunde ist uns auch das egal, und wir schließen die Seite wieder.

Illustration eines Feedback-Barometers im Insight über Ladeanimationen in der Webentwicklung.

Probier’s mit Feedback!

Ein einfaches Feedback kann da bereits helfen und der Wartezeit einen Kontext geben. „Einen Augenblick, bitte! Deine Zahlung wird bearbeitet“, gepaart mit einem Ladebalken, der sich nach und nach aufbaut, sind häufig bereits Feedback genug für deinen User.

Und es gibt eine simple Lösung, um die Wartezeit zu versüßen und mit dem User zu kommunizieren:

Ladeanimationen!

Illustration eines Screens im Insight über Ladeanimationen in der Webentwicklung.

Was sind Ladeanimationen?

Ladeanimationen sind kleine Fortschrittsanzeigen, die dem Nutzer ein grafisches Feedback über den zeitlichen Rahmen seiner Aktion geben. Das Laden deiner Website wird somit visualisiert, und dein User weiß, dass er seinem Ziel näher kommt.

Wenn man unterschiedliche Ladeanimationen in ihrer Wirkung miteinander vergleicht, stellt man fest, dass die resultierende gefühlte Wartezeit bei Nutzern stark variiert. Mit einer langen Fortschrittsleiste scheint die Zeit am schnellsten zu vergehen. Eine Uhr hingegen wirkt häufig noch langsamer auf Menschen als die tatsächliche, reale Wartezeit.

Branding von Ladeanimationen

Ladeanimationen bieten diverse Vorteile, solange man ein paar Dinge beachtet. Es gibt sie in unterschiedlichsten Formen, Farben und Variationen. Die gesamtheitliche Nutzererfahrung verbindet man am besten mit der Marke, wenn die Animation auch zu ihr passt.

Das Laden einer Website ist nicht selten der erste Kontakt mit einem Unternehmen und gleichzeitig der Moment, in dem man in die Welt der Marke eintaucht. Tendenziell sollte man eine Ladeanimation immer dann branden, wenn der User genügend Zeit hat, den Absender wahrzunehmen.

Vorbereitung einer Ladeanimation

Die Klärung bestimmter Parameter zu Beginn eines Animationsprojektes helfen bei der Wahl einer passenden Ladeanimation für die verschiedenen Anwendungen.

  • Wer ist die Zielgruppe?
  • Wie sehen die Schritte vor und nach der Animation aus?
  • Soll das Unternehmenslogo in die Animation eingebaut werden?
  • Wie lange läuft die Animation im Best Case sowie im Worst Case?

Klassiker der Ladeanimationen

SIMPLE

SIMPLE

Loading-Beispiele: Die beiden Klassiker

Loading Spinner

Die wohl einfachste und dadurch auch bekannteste Version einer Ladeanimation ist der ‚Loading Spinner‘, ein einfacher, sich drehender Kreis. Nachteil des Loading Spinners ist, dass er weder angibt, wie viel Zeit bereits vergangen ist, noch mit wie viel Zeit der User weiterhin zu rechnen hat, bis das Ziel erreicht ist.

Ladebalken

Ladebalken hingegen lassen sich so animieren, dass sie Usern eine begrenzte/endende Wartezeit angeben und visualisieren, wie viel Zeit bereits vergangen ist – ein informatives Feedback, das dem Nutzer mehr Sicherheit gibt. Tatsächlich verkürzt sich mit dieser Art der Animation auch nachgewiesenermaßen die gefühlte Wartezeit beim Nutzer.

GIF-Illustration eines Ladebalkens im Insight über Ladeanimationen in der Webentwicklung.
Ladeanimationen, bei denen man gerne wartetEntdecke die Möglichkeiten!

Ein paar kreative Beispiele für die unterschiedlichsten Ladeanimationen haben wir in einem separaten Insight für dich zusammengestellt.

Ladeanimationen bieten Entertainment

Ladeanimationen sind eine gute Möglichkeit, Menschen das Warten im Netz unterhaltsamer zu machen. Im Zentrum solch einer Animation sollte der Nutzer und dessen Erfahrung mit deiner Website und gleichzeitig mit deinem Unternehmen stehen.

Dabei muss es keineswegs immer der gute alte Ladebalken oder Loading Spinner sein, die den Besuchern deiner Website die Wartezeit verkürzen. Schau dir unserem anderen Insight ein paar tolle Beispiele für kreative Ladeanimationen an.

Melde dich bei uns!

Wenn wir dir bei der Kreation einer geeigneten Ladeanimation für deine Website, App oder Software behilflich sein können, lass es uns gerne wissen.

Noch keine Ladeanimation?

So erreichst du uns:
Tel. +49 30 40045775

Hier findest du themenverwandte Artikel:

insights

insights