Contact
Animation_A_to_B
Digital Strategy, UX Design, Ecommerce • 7 Minuten Lesedauer

Mit Animationen lebendige Online Erfahrungen schaffen

Martin Roxlau | 29-01-2020

Online-Shopping kann gerne auch mal zur Nervenzerreißprobe werden. Es fängt an mit zu langsam ladenden Webseiten, dann muss man sich durch unendliche Artikellisten scrollen, seinen Warenkorb zwischendurch auf Richtigkeit prüfen, öfter mal aktualisieren und schließlich - nach Aufgabe der Bestellung - den Bestellstatus überwachen... ganz schön nervig!

Grafik AEin Cartoonähnliches Benutzerinterface beim Pizzabestellvorgang erstellt von Cuberto.

Hier kann die Einbindung von Animationen eine willkommene Unterstützung und Abwechslung sein, die das Online Shoppen deutlich interessanter macht. Voraussetzung: Sie nutzen keine Animationen, die aussehen wie Cartoons aus den 1930er Jahren.

Mit richtig eingesetzten Animationen als Grundlage eines effektiven Interaktionsdesigns können Sie Ihren Kunden großartige Shopping Erlebnisse bieten. Zeitgleich profitiert Ihr Unternehmen von einer höheren Conversion, denn zufriedene Kunden bestellen gerne und kommen häufiger zu Ihrem Shop zurück.  

Wir zeigen im folgenden Blog positive Beispiele strategisch eingesetzter Animationen und wie Sie Ihre Conversion-Rate erhöhen können.

Vorstellung von Bewegung im UI Design

Leben ist Bewegung. Wir gehen, laufen oder fahren Rad, auch die Dinge um uns herum bewegen sich in (oft) vorhersehbarer Weise. Darum ist es nicht verwunderlich, dass wir uns unser tägliches Leben nicht ohne Bewegung vorstellen können. Unsere Augen achten reflexhaft auf sich bewegende Objekte. Und das können wir bei der Erstellung von UI zu unserem Vorteil nutzen, in dem wir Animationen verwenden.

Um das zu erreichen wählen wir einen „Human-Centered-Design“ Ansatz. Dadurch kann der Benutzer direkter mit der UI interagieren und Aktionen und Übergänge natürlicher und intuitiver erleben. Die besten Webseiten haben einen Stil und eine Herangehensweise, die dasselbe Gefühl und dieselbe Wahrnehmung erzeugen wie Interaktionen mit der realen Welt es tun. Sie erzählen Geschichten wie „Schau dir das mal an“ oder „Hurra! Deine Bestellung ist angekommen.“ Richtig gemacht, tragen Animationen nicht nur zur Unterhaltung des Benutzers bei, sondern helfen dabei zu verstehen was gerade passiert und wie eine Seite funktioniert.

Heutzutage sind Benutzerschnittstellen nicht länger eine Abfolge statischer Inhalte, sondern helfen durch das hinzufügen einer zeitlichen Dimension, die Lücke zwischen Software und menschlicher Natur zu schließen.

Animation als Mittel um Prozesse zu visualisieren

Wenn man ein (digitales) Produkt nutzt möchte man zu jeder Zeit wissen was gerade passiert. Muss ein Kunde warten, ohne zu wissen warum, riskiert man ihn zu verlieren. Es reicht nicht aus, den Benutzern mitzuteilen, dass ein Prozess geladen wird denn so erinnern Sie sie nur daran, dass sie gerade warten müssen. Durch eine kleine Animation (Skeleton Animation) kann man das Warten für den Kunden angenehmer gestalten und ihn so „bei der Stange halten“. Durch Mitteilungen über den Fortschritt werden unangenehme Situationen (wie zu Warten) zu einem unterhaltsamen Element.

Grafik BFestlegen von Erwartungen, wie schnell die Aktion verarbeitet wird

BENUTZEN SIE ANIMATIONEN, um zu zeigen, dass eine Aktion abgeschlossen ist

Animationen zeigen nicht nur den Fortschritt eines Prozesses, sondern auch ihren Abschluss. Der Benutzer muss schnell und eindeutig überschauen können, dass das System eine Aktion angenommen und abgeschlossen hat. Das wohl prominenteste Beispiel dafür ist der „Button“: wenn er gedrückt wird – egal wie er aussieht – der Benutzer erwartet das etwas passiert. Die Benutzererfahrung leidet sehr, wenn dieses Feedback nicht gegeben wird. Harrods benutzt eine Animation, um zu zeigen das ein Produkt in den Einkaufskorb gelegt wurde, nachdem der Knopf „Zum Einkaufskorb hinzufügen“ gedrückt wurde. Das Shopping-Bag-Icon erweitert sich zu einem Feld, in dem der Checkout-Button sichtbar wird. Dies erspart dem Benutzer die Frage, ob der Artikel hinzugefügt wurde oder nicht, und ermöglicht es dem Benutzer, zur Kasse zu gehen, ohne zuvor die Warenkorbübersicht zu besuchen.

Grafik D
Visuelles Feedback einer Aktion.

Verwenden Sie eine Animationen, um das Verständnis zu fördern

Wenn wir an Fehlerbenachrichtigungen denken, an die Fenster, die wir zeigen, wenn etwas schief geht, ist es wichtig, dass diese dem Benutzer klar sind. So kann ein Eingabefeld horizontal wackeln, um zu zeigen das eine Eingabe in diesem Feld nicht erlaubt ist. Da wir die horizontale Bewegung des UI mit Kopfschütteln verbinden, braucht der Benutzer weniger Aufwand oder Energie, um das Verhalten zu verstehen.

Grafik E

Visualisieren der Folgen einer Handlung.

VERWENDEN SIE ANIMATION, um GESCHICHTEN ZU VERBESSERN

Viele eCommerce Seiten zeigen ihre Produkte wie auf einer Wand. Dabei wird kein Fokus erzeugt, der Benutzer kann sich in Details verlieren und sich unentschlossen fühlen. Simply Chocolate, ein dänisches Geschäft für Schokoriegel, zeigt – nicht schreibt – die speziellen Eigenschaften des Produkts. Das lebendige Design der Seite gibt jedem Produkt genug Raum zu Glänzen. Wie im richtigen Leben kann man mit einer Bewegung nach rechts den Riegel auspacken, um ihn anzusehen. Die Zutaten des Riegels befinden sich als Animation im Hintergrund. Der Effekt ist sehr präsent und dominant, er funktioniert, weil es wenig Informationen im Hintergrund gibt.

Grafik F

Layout von Simply Chocolat

Abschließende Gedanken

Wie alles das im Interface verwendet wird benötigen Animationen ein paar Vorüberlegungen und einen klaren Zweck. Richtig gemacht helfen Animationen Händlern dabei eine angenehme und frustrationsfreie Erfahrung zu bieten.
Man kann den Benutzer mit Aufgaben, kleinen grafischen Hinweisen und sogar mit Spaß durch das System führen. Die Vorteile der einzusetzenden Animationen müssen dabei die möglichen Nachteile aufwiegen. Schließlich sollen sie wie das Salz in der Suppe sein, nicht wie die sprichwörtliche Fliege darin.

KONTAKT

 

Picture of Martin Roxlau

Martin Roxlau

Director Sales and Business Development

Copyright © 2020 Osudio. All Rights Reserved. Terms of use | Privacy policy