Viele E-Commerce-Websites verwenden das gleiche generische Website-Format mit einer Landing Page, Produktseiten, Katalog, Kategorieseiten und einigen anderen Zusatzseiten, wie einer About Page, einer FAQ-Seite, Blog-Posts und einer Kontaktseite. Im Großen und Ganzen funktioniert diese Formel gut, um die Besucher mit allen notwendigen Informationen zu versorgen, aber sie kann repetitiv und eintönig sein. Eine Möglichkeit, einen E-Commerce-Shop interessanter zu gestalten, sind strategisch platzierte Animationen. Eine Vielzahl von Animationen kann in eine Website integriert werden, um Besucher zu fesseln und zu unterhalten und gleichzeitig die wichtigsten Bereiche der Website hervorzuheben.
E-Commerce-Websites, die Animationen effektiv einbinden, halten die Besucher länger auf ihrer Website und verwandeln mehr Besucher in zahlende Kunden. Nachfolgend erfährst du mehr über die fünf häufigsten Arten von Animationen und wie Animationen mit Hilfe von Webtechnologien und Frameworks eingebaut werden können.
Was ist eine Animation?
In der Welt der Webentwicklung sind Animationen Seitenelemente, die sich verändern oder bewegen. Animationen können durch eine Vielzahl von Technologien hinzugefügt werden, darunter CSS, JavaScript, Lottie, SVG, Canvas und WebGL/WebGPU. Webseitenanimationen hauchen einer ansonsten statischen Website Leben ein und helfen dabei, eine langweilige 2D-Erfahrung in eine aufregende Erlebniswelt voller Bewegung und Dimension zu verwandeln. Heutzutage sind Animationen überall auf Webseiten im Internet zu finden, obwohl viele Animationen unbemerkt bleiben, weil sie subtil und unauffällig sind. Aber selbst die subtilsten Animationen können das Nutzererlebnis verbessern.
Arten von Animationen
Es gibt fünf primäre Animationstypen, die dazu beitragen, das Engagement und das Interesse zu steigern. In diesem Leitfaden werden die fünf Animationstypen in der Reihenfolge ihres erhöhten Effekts und Schwierigkeitsgrads vorgestellt:
1. Hover/Mouseover
Hover- oder Mouseover-Animationen sind eine wunderbare Möglichkeit, eine Webseite aufzupeppen und gleichzeitig die Aufmerksamkeit auf ein bestimmtes Seitenelement zu lenken. Mit der zunehmenden Komplexität von E-Commerce-Shops steigt auch die Anzahl der Elemente auf einer Seite. Manchmal kann es für Besucher schwierig sein, zu erkennen, wo sich ihr Cursor innerhalb eines Menüs oder einer Reihe von Elementen befindet. Mit Hover-Animationen können Websites dem Benutzer bei Bedarf mehr Informationen zur Verfügung stellen, ohne wertvollen Platz auf der Seite zu verschwenden. Die meisten ausgefeilten und professionellen E-Commerce-Websites nutzen Mouseover-/Hover-Übergänge in großem Umfang, da sie die Benutzerfreundlichkeit erheblich verbessern.
Im folgenden Beispiel ist eine deutliche Verbesserung der Präsentation und Hervorhebung zwischen der normalen Produktkarte und der Produktkarte beim hovern mit der Maus zu sehen.
Hover-Animationen sind mit CSS (Cascading Style Sheets) sehr einfach zu implementieren. Es gibt Dutzende von verschiedenen Hover-Effekten, die einer E-Commerce-Website hinzugefügt werden können, um sie visuell interessanter zu machen, einschließlich Änderungen von Schatten, Radius, Farbe, Transparenz, Skalierung und vielem mehr. Leider funktionieren Hover-Effekte auf Touch-Geräten, die oft einen großen Teil des Internetverkehrs ausmachen, nicht wie vorgesehen.
2. Bewegte Elemente
Bewegte Elemente haben eine starke Anziehungskraft auf das Auge und eignen sich daher hervorragend, um wichtige Elemente hervorzuheben. Die Nutzer werden durch bewegliche Elemente stärker angesprochen als durch statische, aber es ist wichtig, ein Gleichgewicht zwischen statischen und beweglichen Seitenelementen zu finden. Zu viele bewegliche Elemente können ablenkend oder überwältigend sein, aber einige wenige, strategisch platzierte bewegliche Elemente können die Art und Weise, wie eine Seite aufgenommen und betrachtet wird, verändern. Diese Art von Animationen kann ein positives Gesamterlebnis beim Besuch einer E-Commerce-Website schaffen, so dass die Wahrscheinlichkeit eines erneuten Besuchs größer ist, selbst wenn beim ersten Mal kein Kauf getätigt wird.
Diese Elemente können sich als Reaktion auf eine Aktion oder einen Klick bewegen, sich kontinuierlich bewegen, während der Besucher auf der Seite ist, oder beim Laden der Seite auftreten. Hier sind zwei Beispiele für sich bewegende Elemente, das erste ist eine einfache Implementierung eines Einkaufswagen-Modals und das zweite ist eine komplexere Hero-Animation:
3. Skelette und Ladeindikatoren
Skelette und Ladeindikatoren sind wesentliche Elemente jeder E-Commerce-Website, die ihre Nutzer halten will. Beim Surfen im Internet haben die Nutzer eine sehr geringe Toleranz für Wartezeiten. Viele Daten verlängern manchmal die Ladezeit, daher ist es wichtig, das Interesse des Besuchers so lange wie möglich aufrechtzuerhalten. Skelett-Bildschirme erwecken den Eindruck, dass die Ladezeit einer Seite viel kürzer ist als sie tatsächlich ist. Ein Skeleton-Bildschirm lenkt die Benutzer ab, während die Seite geladen wird, weil ihr Auge auf der Seite umherwandert und erwartet, dass sich der Webinhalt füllt, anstatt nur auf eine leere Seite zu starren. Skelettbildschirme mit Bewegung sind am effektivsten, weil sie die wahrgenommene Ladezeit weiter verringern.
Ladeindikatoren sind eine weitere Methode zur Information über den Status der Website. Jede Website-Funktion, die länger zum Laden braucht als der Rest der Website, sollte Ladeanzeigen verwenden. Ladeindikatoren werden in der Regel in Form eines sich unendlich drehenden Kreises (Rotationsbewegung) oder eines Fortschrittsbalkens (lineare Bewegung) dargestellt. Kreative Ladeindikatoren, die einen neuen Ansatz verfolgen, können die Aufmerksamkeit des Kunden jedoch viel länger aufrechterhalten. Die Besucher werden sich von der Animation angezogen fühlen und etwas länger warten wollen, um die volle Auflösung zu sehen.
4. Bildsequenz scroll
Eine der coolsten Animationsarten, die man in einen E-Commerce-Shop einbauen kann, sind Bildsequenz-Animationen beim Scrollen. Wenn Nutzer auf einer Seite mit dieser Funktion landen, bewegen und verändern sich die Bilder beim Scrollen. Dies ist eine absolut fesselnde und visuell attraktive Art, Informationen zu präsentieren. Es macht den Nutzern Spaß, die Bilder durch Hoch- und Runterscrollen zu manipulieren. Die Einbindung von Bildsequenzen ist ein viel aufwändigerer Prozess als andere Animationsarten, aber die Ergebnisse sind fesselnd und ermöglichen es einem E-Commerce-Shop, die Merkmale eines Produkts auf spannende Weise zu erklären.
Bildsequenzen müssen im Voraus entworfen werden, aber wenn geeignete Bildgrößen verwendet und intelligent geladen werden, werden sie die Ladezeiten der Seite nicht zu sehr verlangsamen. Apple setzt Bildsequenzen auf brillante Weisen ein, um ihre Produktseiten spannend zu gestalten, wie z.B hier auf der Mac Studio Seite. Wenn der Benutzer scrollt, ändern sich die Bilder auf der Seite:
5. 3D Szene
Bist du es leid, dass sich die gleichen langweiligen Heldenabschnitte auf E-Commerce-Websites immer und immer wieder wiederholen? Bilder und Illustrationen sind nur begrenzt spannend. Aber neuere Optionen wie 3D-Szenen helfen dabei, einen Hero-Abschnitt im Handumdrehen aufzupeppen. 3D-Szenen werden verwendet, um eine interaktive und fesselnde Geschichte rund um ein Produkt zu erzählen. Diese Szenen können Schlüsselinformationen wie die Produktspezifikationen, das Problem, das ein Produkt löst, und die Gründe, warum ein Kunde dieses Produkt braucht, aufzeigen.
Der Haken an der Sache ist, dass 3D-Szenen eine Menge Arbeit bedeuten. Ein UX- und 3D-Designer wird höchstwahrscheinlich benötigt, um den Fluss der 3D-Welt zu entwerfen und die 3D-Objekte zu erstellen. Obwohl es sich hierbei um eine neue Animationstechnologie handelt, ist zu erwarten, dass sie in den nächsten Jahren massiv zunehmen wird, da immer mehr Geräte in der Lage sind, 3D-Szenen auszuführen. JMES zum Beispiel hat eine außergewöhnliche 3D-Story, die sich entfaltet, wenn der Benutzer durch die Szene blättert und mit ihr interagiert.
Technologien
Unterschiedliche Animationen erfordern unterschiedliche Technologien zur Umsetzung. Einfache Animationen können CSS verwenden, während fortgeschrittene 3D-Animationen möglicherweise mit WebGL/WebGPU erstellt werden müssen. Dieser Leitfaden behandelt die 6 am häufigsten verwendeten Animationstechnologien in der Reihenfolge ihres Schwierigkeitsgrades:
1. CSS
Cascading Style Sheets (CSS) ist das Rückgrat des Designs einer jeden Website. Während HTML die Struktur einer Webseite umreißt, diktiert CSS die visuellen Aspekte. Ohne CSS würde eine E-Commerce-Website aussehen, als käme sie direkt aus den frühen 2000er Jahren. CSS ist eine leistungsstarke Technologie, die auch von Anfängern leicht erlernt werden kann, für die es aber eine sehr hohe Kompetenzgrenze gibt. Talentierte Entwickler können schöne und komplexe Animationen nur mit CSS erstellen. Für die meisten E-Commerce-Websites können einfache Hover-Animationen ganz einfach mit CSS hinzugefügt werden.
2. SVG
SVGs sind skalierbare Vektorgrafikdateien, die Animationen und Interaktivität unterstützen. SVGs bestehen nicht aus Pixeln wie herkömmliche Bilddateien, d. h. sie können ohne Qualitätsverlust auf eine beliebige Auflösung skaliert werden. SVGs sind eine hervorragende Animationstechnologie, da sie mit CSS gestaltet und animiert werden können. Die gleichen Animationen, die für CSS verwendet werden, wie Keyframes, Dauer, Easing und Verzögerung, können auch auf SVGs angewendet werden.
3. Lottie (JSON Dateien)
Lottie ist eine JSON-basierte Animationsdatei, die erstmals 2015 entwickelt wurde und einer GIF-Datei ähnelt. Lottie-Dateien sind klein, können aber skaliert werden, ohne dass es zu Problemen mit Verpixelung kommt, und lassen sich daher leicht für verschiedene Bildschirmgrößen verwenden. Ein Designer kann eine Animation ganz einfach in einem Animationsprogramm wie After Effects erstellen und sie dann als Lottie-Datei für das Web exportieren. Lottie-Dateien sind weit verbreitet und haben die Verwendung von GIFs überholt.
4. JavaScript
JavaScript macht aus einer schönen Website, die mit HTML und CSS erstellt wurde, eine interaktive Website! Während HTML und CSS statische Seiten erzeugen, ermöglicht JavaScript die Implementierung komplexer Funktionen, einschließlich 2D/3D-Animationen und Scroll-Animationen. Es ist eine sehr mächtige Sprache, so mächtig, dass sie von 97,6 % aller Websites verwendet wird. Zum Glück sind die Grundlagen leicht zu erlernen, und es gibt Dutzende von Frameworks und Bibliotheken, die den Entwicklungsprozess beschleunigen.
5. Canvas
Canvas ist eine großartige Technologie zur Erstellung von benutzerdefinierten Animationen, wie Bildlaufanimationen oder Bildsequenzen. Canvas ist ein HTML-Element, das einen leeren Bereich zum Zeichnen von Formen, Linien und anderen Grafiken mithilfe der Canvas-API erstellt. Es verwendet JavaScript für Animationen, so dass ein Entwickler, der JavaScript beherrscht, leicht mit der Erstellung von Animationen mit Canvas beginnen kann.
6. WebGL/WebGPU
WebGPU ist der Nachfolger von WebGL, das wiederum der Nachfolger von OpenGL ist. Sie alle ermöglichen die Erstellung von komplexen 3D-Szenen. Mit der Entwicklung dieser Technologien wurden sie immer ausgefeilter und leistungsfähiger. WebGL-Animationen werden innerhalb eines Canvas-HTML-Elements erstellt. Für die Arbeit mit WebGL ist ein umfassendes Verständnis von JavaScript erforderlich. WebGPU ist noch leistungsfähiger und effizienter, befindet sich aber noch im Entwicklungsstadium.
Frameworks
Glücklicherweise haben talentierte Entwickler Frameworks und Bibliotheken entwickelt, die die Implementierung von Animationen in eine E-Commerce-Website wesentlich vereinfachen. Frameworks sind eine Unterstützungsstruktur mit vorgefertigten Komponenten, die den Bedarf an benutzerdefinierter Programmierung drastisch reduzieren. Frameworks tragen auch dazu bei, die Entwicklungszeiten zu verkürzen, indem sie Entwicklern eine schnelle Möglichkeit bieten, Funktionen wie Hover-Animationen, Ladeanzeigen, 3D-Szenen und andere wichtige Webseiten-Komponenten hinzuzufügen.
JavaScript ist die am häufigsten verwendete Programmiersprache für das Hinzufügen von Interaktivität zu HTML und CSS, um eine vollständig ausgearbeitete E-Commerce-Website zu erstellen, daher sind viele der unten aufgeführten Beispiele JavaScript-Frameworks/Bibliotheken:
Fazit
Der E-Commerce ist eine wettbewerbsintensive Welt mit Millionen von Geschäften, die um Kunden konkurrieren. Eine E-Commerce-Website sollte immer das Erlebnis des Nutzers berücksichtigen, um sich von der Masse abzuheben. Besucher wollen nicht auf einer langweiligen Website ohne visuelles Interesse surfen. Deshalb ist das Hinzufügen von Animationen zu einer E-Commerce-Website von unschätzbarem Wert für die Steigerung der Conversionrate.
Durch die Einbindung verschiedener Animationstypen, wie z. B. Hover-Animationen, Ladeanimationen, Bildsequenzen und 3D-Szenen, wird eine interaktive und ansprechende Website für die Besucher geschaffen. Diese können mit verschiedenen Technologien erstellt werden, von CSS für einfache Animationen bis zu WebGPU für die fortschrittlichsten 3D-Animationen, die heute verfügbar sind. Aber Entwickler müssen nicht bei Null anfangen, denn es wurden zahlreiche Frameworks und Bibliotheken entwickelt, um die Zugänglichkeit dieser Technologien zu verbessern und die Entwicklungszeiten zu verkürzen.
Wenn du auf der Such nach Unterstützung für die Umsetzung eines E-Commerce Shops mit eindrucksvollen Animationen bist kontaktiere uns bei Excyted und bespreche dein Projek mit uns.