Steigern Sie Ihre E-Commerce-Reise mit animierten UX-Mikrointeraktionen

Veröffentlicht: 2022-08-18

Wenn sie in E-Commerce-Erlebnissen angewendet werden, kommunizieren animierte Mikrointeraktionen den Systemfortschritt, verbessern die Benutzerzufriedenheit und erhöhen die Konversionsraten. Diese subtilen Bewegungseffekte bieten ein schnelles visuelles Feedback, wenn ein Benutzer mit einer UI-Komponente wie einem Menü oder einer Schaltfläche interagiert, und sollen die Auffindbarkeit verbessern und Benutzer beim Navigieren zwischen E-Commerce-Seiten führen. Sie helfen Benutzern nicht nur dabei, Produkte zu finden und zu kaufen, sondern können auch Gewohnheitsschleifen fördern, die zu Stammkunden führen.

Trotz ihrer Bedeutung im E-Commerce-Trichter müssen animierte Mikrointeraktionen nicht besonders ausgefallen sein. Laut UX-Designer Alexandre Brito, Mitglied des Toptal-Netzwerks seit 2016, können sogar einfache animierte Effekte – wie die Bildlaufleiste, Ziehen zum Aktualisieren und Wischen – dazu beitragen, intuitive digitale Einkaufserlebnisse zu schaffen.

Animierte UX-Mikrointeraktionen im E-Commerce Sales Funnel

Der E-Commerce-Verkaufstrichter besteht aus vier gemeinsamen Schritten – Startseite, Kategorieseite, Produktseite und Kasse – die Benutzer vom anfänglichen Wertversprechen eines Unternehmens zum Kauf führen. Bei jedem Schritt werden mehr Informationen enthüllt. Animierte Mikrointeraktionen helfen bei dieser Entdeckungsreise. Beispielsweise könnte das Suchfeld auf einer E-Commerce-Homepage Interaktivität signalisieren, indem es erweitert wird, wenn ein Benutzer darauf zeigt oder darauf tippt. dann werden möglicherweise animierte automatische Vorschläge angezeigt, wenn Benutzer Suchanfragen eingeben.

„Viele E-Commerce-UI-Elemente verfügen über Funktionen, die von Mikrointeraktionen profitieren können, um den Kunden anzusprechen und wichtige Informationen bereitzustellen“, sagt Rashni Parichha, Produktdesigner und Mitglied des Toptal-Netzwerks. „Wenn der Benutzer beispielsweise einen Artikel in seinen Einkaufswagen legt, sorgen Mikrointeraktionen zum Herunterskalieren und Drop-in-Warenkorb dafür, dass sich diese Aktion realistischer anfühlt, als ob der Benutzer in einem stationären Geschäft einkaufen würde“, sagt sie. „Je realistischer das Erlebnis, desto tiefer die Verbindung zwischen dem Benutzer und dem Produkt und desto wahrscheinlicher ist ein wiederholter Besuch der Website.“

Die E-Commerce-Homepage

Digitale Käufer haben eine schwindende Aufmerksamkeitsspanne und wenig Geduld mit komplexen Benutzeroberflächen. Homepage-Designentscheidungen, wie z. B. die Navigation, müssen strategisch sein, um die Aufmerksamkeit eines Benutzers zu erregen. Animationen können Dropdown-Menüs ansprechender gestalten und die Produktkategorisierung verstärken, wodurch es für Benutzer einfacher wird, Artikel zu finden, und die Drop-off-Raten gesenkt werden.

Rashni erklärt, dass Animationen, die große Informationsmengen organisieren, zu einem intuitiveren Design beitragen, was wiederum dazu beiträgt, die Aufmerksamkeit des Benutzers zu fesseln.

Parallax-Scrolling ist eine leistungsstarke Animationstechnik zum Aufbau der visuellen Hierarchie von Homepage-Inhalten wie Produktfotos, Beschreibungen und Kategorien. Wenn ein Benutzer auf der Homepage nach unten scrollt, erscheinen Inhalte in Intervallen und unterschiedlichen Geschwindigkeiten, die eine reale Parallaxe nachahmen und als eine Form der progressiven Offenlegung fungieren, die es dem Benutzer erleichtert, Informationen auf dem Bildschirm zu scannen und zu verarbeiten.

GIF mit der Bezeichnung „Parallax, Trigger: Scroll“. Ein Bildschirm unter dem Etikett zeigt Inhalte, die mit dem Parallax-Scrolling-Effekt dargestellt werden.
Beim Parallax-Scrolling bewegt sich der Hintergrund einer Website langsamer als der Vordergrund, wenn der Benutzer scrollt, wodurch ein 3D-ähnlicher Effekt entsteht.

Die E-Commerce-Kategorieseite

Direct-to-Consumer-Websites verwenden Kategorieseiten, um mehrere Variationen eines einzelnen Produkts zu präsentieren (z. B. eine Langhantel auf der Website dieses Fitnessgeräteherstellers), während E-Commerce-Marktplätze Kategorieseiten verwenden, um zahlreiche Marken zu präsentieren, die ähnliche Produkte verkaufen (z. B. die „Hemden“-Seite von ASOS , die Kleidung verschiedener Einzelhandelsmarken enthält).

Erfolgreiche Kategorieseiten ermöglichen es Benutzern, ihre Optionen schnell zu durchsuchen, bevor sie nach weiteren Details suchen. Um den Produktfindungsprozess zu beschleunigen (und Speicherplatz auf Mobilgeräten zu sparen), verwenden viele E-Commerce-Websites Bildkarussells auf ihren Kategorieseiten. Die „Quick View“-Funktion von Ikea ermöglicht eine schnelle Navigation durch die beliebtesten Kategorien der Website – und spart den Benutzern Zeit und Klicks.

Bilderkarussell mit vier Produktkategorien auf der Ikea-Website.
Das Bildkarussell „Quick View“ von Ikea ermöglicht Besuchern eine Vorschau der beliebtesten Produktkategorien auf derselben Seite.

Studien zeigen, dass automatische Karussells für Benutzer frustrierend sind, weil schnelle Bewegungen ablenkend sein können. Im Gegensatz dazu ermöglichen manuelle Karussells (wie das von Ikea) Benutzern, durch Bilder zu klicken oder zu wischen, und animierte Mikrointeraktionen, die den Benutzern die Kontrolle über ihre Benutzeroberflächen geben, haben nachweislich die Zeit auf der Seite und die Conversions erhöht.

GIF mit der Bezeichnung „Karussell, Auslöser: Klicken/Wischen“. Ein mobiler App-Bildschirm unter dem Etikett zeigt eine Reihe von Bildern in einem Karussell.
Bildkarussells ermöglichen es Benutzern, in kurzer Zeit eine Vorschau mehrerer Produkte anzuzeigen, ohne die Kategorieseite zu verlassen.

Für das beste Bildkarussell-Erlebnis empfiehlt Rashni, sich auf fließende Übergänge und intuitive Navigation zu konzentrieren:

  1. Reibungslose, kontinuierliche Mikrointeraktionen auf der Folie tragen dazu bei, die Illusion einer natürlichen Interaktion mit physischen Objekten zu erzeugen. Die Vorfreude am Anfang der Folienanimation und das Durchhalten am Ende tragen dazu bei, sicherzustellen, dass Ihre Übergänge nahtlos sind. Antizipation ist die Bewegung vor der Hauptaktionssequenz (die linke/rechte Slide-Animation im Bilderkarussell). Diese kurze Bewegung in die entgegengesetzte Richtung der Hauptaktion trägt dazu bei, Schwung und Spannung aufzubauen. In ähnlicher Weise ist Follow Through die subtile Bewegung, die der Bewegungssequenz folgt, wodurch die Animation realistischer erscheint.

  2. Die Navigation sollte leicht erkennbar sein. Punkt- oder Pfeilsteuerungen helfen Benutzern dabei, zu erkennen, wie sie sich innerhalb von Bildkarussells bewegen. Pfeile sollten Richtung zeigen. Punkte sollten standardmäßig hohl und gefüllt sein, um das aktuelle Bild hervorzuheben.

Die E-Commerce-Produktseite

Auf Produktseiten geht es darum, Benutzern dabei zu helfen, Aktionen im Zusammenhang mit der Conversion durchzuführen, z. B. das Auswählen von Artikelstilen und -mengen, das Hinzufügen von Produkten zum Warenkorb oder das Markieren von Lieblingsartikeln. Jede dieser Aktionen muss durch Feedback validiert werden.

Der E-Händler Etsy hat beispielsweise ein Herzsymbol, mit dem Benutzer einen Artikel zu ihren Favoriten hinzufügen können. Einmal angeklickt oder angetippt, färbt die resultierende Animation das zuvor farblose Herz rot. Obwohl dies unbedeutend erscheinen mag, verbessern solche Momente der Interaktivität die Benutzerzufriedenheit, indem sie Eingaben bestätigen und die Markenpersönlichkeit vermitteln.

Wenn eine Benutzeroberfläche einen visuellen Hinweis wie einen animierten Effekt verwendet, um Benutzeraktionen zu erkennen, fühlt sich der Benutzer außerdem sicher, mit seiner nächsten Aufgabe fortzufahren.

GIF mit der Bezeichnung "'Love' Icon, Trigger: Click/Tap." Unter dem Etikett ein Bild eines Sneakers und ein Herzsymbol, das von farblos zu blau wechselt. Kleinere blaue Herzen steigen dann auf.
Das auf bestimmten E-Commerce-Plattformen verwendete „Liebes“- oder Herzsymbol ermöglicht es Benutzern, Artikel in ihren Favoriten zu speichern.

Die E-Commerce-Checkout-Seite

Die besten Checkout-Abläufe sind so konzipiert, dass sie reibungslos ablaufen: Amazon-Benutzer können die Zahlung mit einem Klick auf die Schaltfläche „Jetzt kaufen“ beschleunigen. Aber der Checkout ist auch eine Zeit, in der Benutzer zusätzliche Anleitung benötigen, wenn sie persönliche Informationen eingeben, die für den Kauf erforderlich sind.

Progress Stepper unterteilen Kaufinformationen in verdauliche Teile, wie Anmelde-, Liefer- und Rechnungsdetails. Das Hinzufügen von animierten Mikrointeraktionen zu Steppern bietet visuelles Feedback, das die Benutzer anleitet und motiviert, den Bezahlvorgang abzuschließen. Wenn ein Benutzer beispielsweise Daten in ein Zahlungsformularfeld eingibt, zeigt ein animierter Fortschrittsbalken möglicherweise eine Linie an, die von einem Schritt (dargestellt durch einen Kreis) zum nächsten wandert. Ein solcher Effekt gibt den Benutzern ein kontinuierliches Feedback, wenn sie sich ihrem Kaufziel nähern.

GIF mit der Bezeichnung „Progress Stepper, Trigger: Input Data“. Unterhalb des Etiketts ein Fortschrittsanzeiger mit zwei Punkten. Das Formular unter dem Stepper wird ausgefüllt und der zweite Punkt ändert seinen Zustand, um mit dem ersten Punkt übereinzustimmen.
Der Fortschrittsstepper zeigt den Fortschritt durch eine Folge logischer und manchmal nummerierter Schritte an. Jeder Punkt steht für einen Schritt.

Best Practices für die Gestaltung animierter E-Commerce-Mikrointeraktionen

Animierte Mikrointeraktionen bestehen aus vier Teilen: Auslöser, Regeln, Feedback sowie Schleifen und Modi. Neben dem Verständnis ihrer Grundstruktur gibt es mehrere Best Practices, die beim Entwerfen animierter Mikrointeraktionen für E-Commerce-Plattformen zu berücksichtigen sind.

Erstellen Sie eine verlockende Gewohnheitsschleife

Die Gewohnheitsschleife ist ein Rahmen, um reaktionäres Verhalten zu verstehen. Es besteht aus einem Hinweis, einer Routine und einer Belohnung. Da die Menschen zu angenehmen Aktivitäten zurückkehren, bieten viele E-Commerce-Websites Belohnungen an, die zu wiederholten Aktionen anregen, wie z.

Wenn wir auf neue und aufregende Dinge stoßen, setzt unser Gehirn außerdem Dopamin frei, das Belohnungsschleifen erzeugt. Animierte Mikrointeraktionen tragen dazu bei, diese Momente der Entdeckung und Freude zu schaffen, indem sie Gewohnheitsschleifen bilden, die die Interaktion und das kontinuierliche Engagement anregen. Zum Beispiel führt Etsy ein animiertes Benachrichtigungssymbol ein, wenn ein Benutzer einen Artikel zu seinem Einkaufswagen oder seiner Wunschliste hinzufügt (Cue). Wenn der Benutzer auf das Symbol (Routine) klickt, entdeckt er verwandte Angebote und Rabatte (Belohnung).

Ein grauer Kreis. Drei Kästchen entlang des Umfangs sind mit „Cue“, „Routine“ und „Reward“ beschriftet.
Gut gestaltete Mikrointeraktionen können dazu beitragen, Gewohnheitsschleifen zu schaffen, die zu anhaltendem Benutzerengagement führen.

Halten Sie die Animation funktionsfähig

Funktionale animierte Mikrointeraktionen bieten einfache visuelle Hinweise, die viele Prozesse im Verkaufstrichter beschleunigen. So löscht beispielsweise beim Checkout ein Fade-Effekt beim Mausklick den Platzhaltertext eines Eingabefeldes und signalisiert dem Benutzer, dass er mit dem Schreiben beginnen kann.

GIF mit der Bezeichnung „Platzhaltertext, Auslöser: Klicken/Tippen“. Unter den Beschriftungen ein Benutzername- und Passwortformular mit einer „Anmelden“-Schaltfläche.
Animierte Mikrointeraktionen geben hilfreiche Hinweise, die dem Benutzer beim Ausfüllen von Formularen helfen.

Wenn der Benutzer jedoch aus dem Feld klickt und der Platzhalter nicht zurückkehrt, ist er möglicherweise frustriert, wenn er sich nicht daran erinnern kann, was der Platzhalter gelesen hat. Mikrointeraktionen müssen nicht bemerkt werden, aber sie müssen so implementiert werden, dass sie das Benutzererlebnis nicht beeinträchtigen. Brito betont, dass Animationen „das Benutzererlebnis ergänzen sollten, anstatt ihm den Fokus zu nehmen“.

Produktdesigner Muhammad Junaid, seit 2020 Mitglied des Toptal-Netzwerks, bekräftigt, dass Mikrointeraktionen einen klaren Zweck haben und Nutzer nicht ablenken sollten. „Auf E-Commerce-Websites sollten sie die Konversion vorantreiben und nicht nur einen ästhetischen Wert bieten. Überflüssige Animation führt zu kognitiver Überlastung und Warenkorbabbruch.“

Verwenden Sie eine Mikrointeraktion pro Aktion

UI-Komponenten wie Call-to-Action-Schaltflächen und Einkaufswagensymbole erscheinen wiederholt auf einzelnen E-Commerce-Websites. Die diesen Komponenten zugewiesenen animierten Mikrointeraktionen sollten jedoch eindeutig und konsistent sein. Angenommen, das Wischen nach links oder rechts durch ein Bildkarussell einer Kategorieseite löst das Erscheinen von animierten Produktfotos aus: Dieselbe Interaktionskombination sollte für ein Bildkarussell einer Produktseite verwendet werden (um den mentalen Modellen der Benutzer zu entsprechen), aber nicht für „Artikelmenge erhöhen“. Tasten.

Aus gestalterischer Sicht bringt die Animation von Mikrointeraktionen eine Ebene der Komplexität in die kreative Entscheidungsfindung ein. Bewegung verleiht UI-Komponenten unterschiedliche Charakterzüge, die Bedeutung vermitteln, und es kann schwierig sein, einen zusammenhängenden Animationsstil für eine gesamte E-Commerce-Site zu entwerfen und zu implementieren. Glücklicherweise müssen Sie nicht jeder E-Commerce-Komponente Bewegung hinzufügen: Wir haben eine Infografik erstellt, die wirkungsvolle Mikrointeraktionen visualisiert, um jeden Schritt des E-Commerce-Verkaufstrichters zu animieren.

Eine Reihe von 12 Funktionen und ihren entsprechenden Mikrointeraktionen, die häufig auf E-Commerce-Plattformen verwendet werden, darunter die Suchleiste, das Karussell, die Warenkorbschublade und das Zahlungsformular.

Das Beste aus animierten Mikrointeraktionen für E-Commerce machen

Animierte Mikrointeraktionen sind ein wichtiger Aspekt des E-Commerce-Designs, die das Engagement steigern, UI-Designfunktionen intuitiver und informativer machen und dazu beitragen, Gelegenheitskäufer zu wiederkehrenden Käufern zu machen. Indem Sie auf Best Practices und Experteneinblicke achten, können Sie überflüssige Bewegungseffekte vermeiden und animierte Mikrointeraktionen entwerfen, die konvertieren.

Weiterführende Literatur im Toptal Design Blog

  • Der ultimative Leitfaden für das Design von E-Commerce-Websites
  • Ein umfassender Leitfaden zum Benachrichtigungsdesign
  • Überzeugend und bewegend: Ein Leitfaden zu Motion Design-Prinzipien