Animation – Die 14 Varianten und ihre Bedeutung für Deine Website

Animation ist einer der Top Webdesign Trends 2024 und es wundert nicht, dass gerade die besten Webseiten Animationen gezielt für sich einsetzen.

Sie bringen Bewegung, Dynamik und Leben auf eine Website und mit Motion auch Emotionen. Hierdurch entsteht eine stärkere Verbindung zwischen Deinen Website-Besuchern, Deinem Webdesign und Inhalten sowie Deiner Marke und Dir.

Animationen bieten Dir die Möglichkeit komplexe Ideen bildlich und verständlich darzustellen. Denken wir z.B. an die vielschichtigen Möglichkeiten des visuellen Storytellings und Motion Designs. Beide sind moderne und wichtige Marketing- und Designinstrumente, die zu den Animationen zählen.

Die Benutzererlebnisse, die durch Animationen entstehen können, sind beeindruckend. Nutzerfreundlich und gut gestaltet tragen Animationen in hohem Maße zur Aufwertung Deiner Webseiten bei.

Wenn Du also nach Wegen suchst, Deine Besucher zu überzeugen, beeindrucken und zu bewegen und selbst im Web erfolgreicher zu sein, dann ist dieser Artikel für Dich.

Web Animation – welche Arten gibt es?

Es gibt die unterschiedlichsten Animationsarten. Je nachdem welches Ziel Du mit ihnen verfolgst, eignen sich einige besser für den Einsatz auf Deinen Websites und in Deinen Web Apps.

In diesem Artikel stellen wir Dir daher 14 bedeutsame Animationsarten vor. Dabei gehen wir auf Ihre Relevanz für Deine Website und Deinen Erfolg im Web ein und geben Dir Tipps für die Realisierung.

Preloader, Progressbars und Ladeanimationen

Ein Preloader – auch Loader genannt – ist im Kern das, was zu sehen ist, während die eigentlichen Inhalte einer Webseite noch geladen werden. In der Regel handelt es sich hierbei um Animationen wie Progress Bars, die anzeigen, dass die Seite lädt und Deine Website Besucher unterhalten, bis die Inhalte schließlich präsentiert werden können.

Warum sind Preloader wichtig?

Wartezeiten können frustrierend sein. Erst recht, wenn Du wie ich ein ungeduldiger Mensch bist, der schnell an gewünschte Informationen kommen möchte und jetzt auf eine Website warten soll.

Neueren Studien zufolge steigt mit zunehmender Ladezeit nicht nur die Frustration Deiner Website-Besucher, sondern auch die Absprungrate. So erhöht sich die Absprungrate auf 32% bei einer Zunahme der Ladezeit von 1 auf 3 Sekunden. Müssen Deine Besucher 5 Sekunden auf Deine Website warten springen sogar 90% ab und verlassen Deine Seite noch bevor sie etwas sehen.

Potenzielle Kunden besuchen bevorzugt Deine Konkurrenz, Dein Ranking und Deine Auffindbarkeit im Web wird entsprechend negativ beeinflusst.

Doch warum ist die Ladezeit Deiner Website überhaupt langsam?

Es gibt verschiedene Einflussfaktoren, die die Ladezeit – Deinen Page Speed – beeinflussen.

Zum einen können höhere Ladezeiten gerade bei sehr hochwertigen Inhalten nicht verhindert werden. Beispielsweise bei hochauflösenden Videos mit hohen Framerates. Auch sehr komplexe Websites, die Tabellen, Karten oder umfangreiche Galerien enthalten können grundsätzlich höhere Ladezeiten mit sich bringen als simple Websites.

Aber nicht nur das. Es gibt also noch viele weitere Gründe, die zu längeren Wartezeiten führen können. Denken wir an eine langsame Internetverbindung (gerade in Deutschland nicht selten), aufwändige Datenoperationen, nicht optimierter Quellcode oder einfach zu viele Daten.

Verringerung und Ausgestaltung der Wartezeit

Während Deine Besucher also auf Deine Website warten, ist es alles andere als klar, was gerade passiert. Ob Deine Seite tatsächlich geladen wird oder es z.B. ein Serverproblem gibt.

Sorge daher zum einen dafür, dass Deine Besucher nicht zu lange warten müssen. Optimiere Deinen Page Speed – gerade auch für mobile Geräte – als einen der TOP 9 Faktoren der Website Analyse und Optimierung.

Kümmere Dich auf der anderen Seite darum, dass Deine Besucher wissen was gerade abläuft und versüß ihnen die Wartezeit. Wie? Mit einem Preloader! Die kleinen oder größeren Animationen helfen Dir eine exzellente Nutzererfahrung (User Experience) zu gewährleisten und Deine herausragende Inhalte ohne größere Streuverluste zu veröffentlichen.

Letztlich ist das Prinzip einfach. Die Ladezeit wirkt dank eines ansprechenden visuellen Eindrucks für Deine Besucher subjektiv kürzer und du verschaffst ihnen Transparenz. Es geht darum Vertrauen und Verbundenheit des Betrachters mit deiner Website oder Web App herstellen und aufrecht zu erhalten. Der erste Eindruck zählt, wie so oft im Leben.

Was macht einen guten Preloader aus?

Natürlich gibt es die verschiedensten Arten von Ladeanimationen. Wir alle kennen Animationen, die springen, sich drehen, sich ausdehnen. Denkbar und nicht selten zu finden sind aber auch sehr aufwändige Animationen von 3D Objekten, tanzenden Paaren oder auch süßen Tieren.

Doch oft ist hier weniger mehr. Oder anders ausgedrückt: Achtung vor Übertreibung.

Die Ankündigung sollte ansprechend und klar sein, jedoch nicht imposanter als das geladene Ergebnis, damit Deine Besucher nachher nicht enttäuscht sind. Zudem leben wir in Zeiten der visuellen Reizüberflutung. Die Aufmerksamkeitsspanne ist kurz und der Preloader sollte nicht die gesamte Energie des Betrachters ziehen.

Deshalb sehe ich bei Animationen, die zur Überbrückung von Wartezeiten dienen einen großen Vorteil von minimalistischem und klarem Webdesign. Eine interessante und gute Alternative sind hier auch typographische Animationen mit hochzählenden Prozentzahlen auf Deiner Website, die dem Ladefortschritt entsprechen und sich sehr gut als JavaScript Animation umsetzen lassen.

Auch Preloader die Dein Logo eleganten Ein- und Ausblenden können einen doppelten positiven Effekt haben: Sie stärken Dein Branding und zeigen Deinen Besuchern an, dass sie auf der richtigen Seite sind. Hierbei kann der Fortschritt z.B. anhand der Transparenz wahrgenommen werden.

Bsp. Preloader Branding: Embert Raumkonzept

Willkommen – Animationen für den perfekten ersten Eindruck

Hierbei geht es um Animationen innerhalb der Startsequenz Deiner Website. Sie sind dafür da, bei Deinen Besuchern von Anfang an einen imposanten, interessanten oder emotionalen Eindruck zu erwecken, der überzeugt.

Warum sind Startanimationen bedeutsam?

Der erste Eindruck entsteht in weniger als 3 Sekunden über Deine Website. Das was in dieser Zeit wahrgenommen wird, ist vor allem Deine Startsequenz mit Ihren Webdesign-Elementen. Eine Animation zum Start kann in kürzester Zeit eine starke Wirkung entfalten, Deine Besucher visuell abholen und einladen mehr über Dich zu erfahren.

Prominentes Beispiel für eine Animation zum Start

Ein sehr bekanntes Beispiel sind die Google Doodles, bei denen häufig kleine Bewegungen eingebaut werden, die das Logo verändern, um zum Beispiel berühmte Künstler zu ehren oder auf Feiertage hinweisen.

Bsp. Google Doodle / Credit: Google

Es ist eine der wenigen Anlässe für die Google die berühmte sehr minimalistische Landingpage ändert und von dem einfachen Suchschlitz abweicht.

Tipps für Deine Startanimation

Überleg Dir zunächst gut welches Ziel Du mit Deiner Animation erreichen willst. So kannst Du Dir die Startanimation zu Nutze machen, um die Aufmerksamkeit Deiner Besucher zu erhöhen. Doch nicht nur das. Die Animation kann so gestaltet werden, dass Deine Besucher motiviert werden, eine bestimmte Aktion auszuführen, in dem sie durch die Animation ermöglicht oder besonders betont wird.

Zunehmend beliebter werden auch sogenannte Letteranimationen. Hierbei werden einzelne Buchstaben animiert. Wir finden diese Effekte immer häufiger zum Start von Websites. Sie signalisieren Hochwertigkeit und Modernität von Websites. Ein Beispiel für eine an einen Preloader geknüpfte Startanimation findest Du in unserem Website Showcase Werte.

Hierbei reichen oft sehr kleine und subtile Animationen aus, um das optimale Ergebnis zu erreichen. Denken wir z.B. an animierte Call-to-Action-Buttons, Formularfelder, Navigationen oder eine schnelle und eindeutige Rückmeldung.

Animationen von Zahlen, Daten und Fakten

Bei der Animation von Daten geht es entweder um eine Aufwertung der inhaltlichen Darstellung oder einer Ankündigung im Sinne eines Countdowns. Dabei können im Rahmen der Animation eine einzelne Zahl hervorgehoben, riesige Datenmengen präsentiert, oder Fakten visuelle präsentiert werden.

Skimming und die Animationen von Fakten

Wenn Du oft länger oder komplexe Inhalte im Web präsentierst, hast Du vielleicht schon mal vom veränderten Leseverhalten im Internet gehört. Deine Besucher überfliegen zu einem überwältigend großen Anteil Deine Webseiten nur noch. SEO-Experten sprechen hier auch vom Skimming oder dem etwas tiefergehendem Scanning der Website.

Erst wenn der Gesamteindruck stimmt, der durch das Skimming oder Scanning gewonnen wird, wird der Inhalt genauer bzw. überhaupt gelesen. Deine Besucher bleiben auf Deiner Seite und sind motiviert sich zu informieren, zu shoppen oder Dich in der Folge zu kontaktieren.

Da beim Überfliegen allen voran visuelle Anreize wahrgenommen werden, spielen neben hervorgehobenen Wörtern und Überschriften insbesondere Bilder, Videos und Animationen eine große Rolle.

Das Ziel der Animationen ist herbei das Skimming zu unterbrechen, die Aufmerksamkeit Deiner Besucher tatsächlich zu erhalten und einen positiven Eindruck zu erwecken.

Warum sind Animationen von Daten für die User Experience wichtig?

Website-Besucher wollen sich heute nicht mehr nur im Internet informieren, sie wollen Spaß dabei haben.

Das Benutzererlebnis ist heute zu 89% ausschlaggebend für Deine Besucher, ob sie sich für Dich oder Deine Konkurrenz entscheiden. Es lohnt sich daher Deine Website so zu optimieren, dass Deine Besucher ein bemerkenswert schönes Erlebnis mit ihr – und damit mit Dir – verbinden.

Animationen sind hierfür eine sehr gute Möglichkeit aus selbst sehr nüchternen Fakten und Zahlen ein visuelles Highlight Deiner Seite zu machen. Hochwertig erstellt und gezielt eingesetzt, werten die Animationen Deine Website qualitativ auf und erzählen die spannende Geschichte hinter den Zahlen.

Sie bieten die Möglichkeit sich auf einen Sachverhalt einzulassen, sich darauf zu fokussieren und intensiver zuzuwenden.

Datenanimationen mit GIFs

Bereits seit Jahren werden in erfolgreichen Blogs animierte GIFs eingesetzt, die den „Überfliegern“ einen Grund geben die Geschwindigkeit zu reduzieren. Und auch wenn animierte GIFs technologisch Ihren Zenit überschritten haben und zunehmend durch Videos ersetzt werden, werden sie nach wie gerne genutzt.

Manchmal nimmt diese Bemühung eigenwillige und wenig sinnvolle Züge an. Es gibt ganze Bibliotheken von lustigen GIFs, die man sich herunterladen und in seine Inhalte laden kann. Dieses sehe ich aus zweierlei Hinsicht etwas kritisch. Erstens handelt es sich nicht um einzigartigen Content und zweitens haben solche Animationen häufig gar nichts mit den Inhalten zu tun.

Beides führt dazu, dass sich kontraproduktive Effekte einstellen können. Wenn Deine Webseite eigentlich gerade die Ergebnisse einer statistischen Studie darlegt und du dieses mit einem animierten Katzen-GIF aufwertest, irritiert das nicht nur die Suchmaschine, sondern letztlich auch die Besucher.

Animation von Daten, Zahlen und Fakten mit HTML5, CSS und JavaScript

Um im Beispiel Statistik und Studie zu bleiben, wären hier dynamisch animierte Charts eine perfekte Wahl. Dank HTML5, CSS und JavaScript können sie sehr modern, qualitativ hochwertig und interaktiv gestaltet werden und Deine Website entsprechend aufwerten.

Für die Erstellung werden häufig animierte Google Charts genutzt, die aufgrund der Datenschutzbestimmungen jedoch mit etwas Vorsicht verwendet werden sollten.

Dank Chart.js gibt es auf modernen Websites eine weitere großartige Möglichkeit das Skimmen zu verlangsamen und Deine wichtigen Daten auf eine visuelle und klare Weise erlebbarer zu machen. Und das auch noch datenschutzkonform und seit Version 2.0 vollständig animierbar.

Hier ein kleines Beispiel was mit Chart.js so möglich ist.

Diese Art der Zahlen- und Datenanimation ist eine Technik, die wir auf hochwertigen Websites immer häufiger erleben. Nicht zuletzt bei Aktienkursen, Umsatzentwicklungen aber auch in Corona Dashboards.

Mouse Cursor Animationen

Bei der Cursor Animation geht es nicht darum den Mausanzeiger als Maus, Finger, Fußball oder Geburtstagstorte anzuzeigen. Stattdessen geht es darum den Cursor so mit Animationen zu kombinieren, dass die Bewegung des Mausanzeigers die gewünschte Animation auslöst.

Relevanz von Cursor Animationen

Die zunehmende Nutzung des Internet via Mobilgeräte sorgt dafür, dass immer mehr Websites mit dem „mobile-first“-Ansatz gestaltet werden. Auch für das Ranking hat Google klargestellt, dass seit dem März Update 2021 nur noch Inhalte einbezogen werden, die auch mobil sichtbar sind. Eine mobile Optimierung Deiner Website ist daher unumgänglich.

Dennoch stellt der Traffic über Desktops und Laptops gerade für viele Business Websites nach wie vor die wichtigste Besucherquelle dar. Das wird sich vermutlich auch nicht so schnell ändern. Nicht zuletzt auch, weil für Personen, die im Büro arbeiten, berufliche Recherchen und Einkäufe am Desktop ganz natürlich sind.

Doch wir machen uns nichts vor. Der Technologie Stack von vielen Business Websites in Deutschland ist eher langweilig. Um dem entgegenzuwirken bieten Cursor Animationen eine ausgezeichnete Möglichkeit sich von der Masse abzusetzen und das Benutzererlebnis zu verbessern.

Mouse Cursor Animationen und User Experience

Da es sich bei der Cursor Animation um eine interaktive Animation handelt, entsteht eine besondere Verbindung von Deinem Besucher zu Deiner Website, zu Dir.

Dein Website Besucher avanciert hierbei zum Steuermann der Animation. Durch die ausgelöste Animation erlebt er einen interessanten Effekt als besondere Belohnung für die Interaktion mit Deiner Website. Ein schönes Benutzererlebnis und eine Motivation weiter mit Deiner Website und mit Dir zu interagieren.

Hier ein kleines Beispiel aus dem Bereich Typografie.

Bsp. Cursor Animation: Graphit Type

Cursor Animationen und Ihre Realisierung

Technologisch lassen sich Cursor Animationen hochauflösend und mit sehr geringen Ladezeiten realisieren. Z.B. in dem Du SVG Filter verwendest, die mittlerweile eine sehr gute Browserunterstützung haben.

Das ist deshalb besonders interessant, weil sie sich dadurch in besonderem Maße für den Einsatz auf Deiner Business Websites eignen. Die schnelle Ladezeit bei verbesserter User Experience ist für Deine Besucher, aber auch für Dein Ranking in den Suchergebnissen von Google und Co relevant.

Mit diesen Animationen lassen sich auf eine einfache und spielerische Weise Interaktionen in der UI anzeigen bzw. ankündigen. Ein Beispiel findest Du auf der Startseite für Cursor Animationen findest Du auch auf unserem Webdesign Showcase Edeldark.

Hover Animationen

Wir bleiben noch kurz im Land der Desktops und Laptops. Hover Animationen beschreiben Animationen, die vollzogen werden, wenn Du Deinen Mauszeiger über ein Element bewegst. Sie sind eine eher alte Disziplin im Bereich der Website-Animation, aber keineswegs zu unterschätzen.

Es geht in den allermeisten Fällen darum, Deinen Besuchern in verstärkter Form anzuzeigen, dass ein gewissen Objekt oder Element „klickbar“ ist und zu einer Interkation einlädt. Die Navigation wird so vereinfacht wodurch sich die User Experience grundsätzlich verbessert.

Varianten von Hover Animationen

Die Beispiele für Hover Animationen sind vielfältig und werden Jahr für Jahr mit den Browsern weiterentwickelt. Sie reichen von der einfachen Unterstreichung eines Links bis zur formverändernden JavaScript getriebenen SVG Animation. So werden aus kreisförmigen Buttons Rechtecke, flüssig verlaufende Linien werden gezogen oder eine starke Signalfarbe im Zeitverlauf erzeugt.

Realisierung von Hover Animationen

In der überwiegenden Mehrzahl aller Fälle sind solche Animation bereits mit CSS umzusetzen. Auch deshalb erfreuen Sie sich einer sehr weiten Verbreitung und  großer Beliebtheit und finden sich in primitiveren Formen selbst bei Websites, die mit Baukästen erstellt werden.

Nachtteile von Hover Animationen

Der Nachtteil von Hover-Animationen liegt auf der Hand: sie funktionieren auf mobilen Geräten nicht. Glücklicherweise erzeugt die sogenannte Elevaton Animation auf mobilen Geräten denselben Effekt per Klick.

Videos als animierbare Texturen

Bei dieser Animation geht es darum, dass Videos mittels WebGL als zweidimensionale Texturen geladen, auf einem 3D-Modell gemappt und animiert werden können.

Die Bedeutung von animierbaren Video Texturen

Der Einsatz von Bewegtbildern und echten Texturen ist ein wichtiger Webdesign Trend. Während sich Vollbildvideos eigentlich aufgrund der Performance und der Qualität nie für eine breite Masse der Websites angeboten haben, gehen moderne hochwertige Websites bereits einen Schritt weiter.

Videos werden via WebGL als Texturen geladen und können mittels Transitionen durch den Benutzer effektvoll und butterweich getauscht werden. Der Benutzer aktiviert hierbei aktiv die Animation und löst damit die Transition aus.

Aus dem reinen Abspielen der Videos wird so ein Interaktiven Highlight für Deine Besucher geschaffen. Das folgende Video zeigt eine Liveaufnahme hiervon.

Animierbare Texturen als Raritäten

Aktuell sehen wir diese Technologien noch nicht so häufig. Das hat seine Gründe.

Zum einen in dem eher schlechten Mobilfunknetz und letztlich immer noch in der Fähigkeit der Endgeräte. Die steigende Nutzung von Videos über das Internet steigert jedoch auch die Anforderungen der Verbraucher an die Geräte. So wundert es nicht, dass die Forecast Studie von Cisco hier eine positive Entwicklung für die nächsten Jahren sieht.

Zum anderen – und das ist vielleicht noch wichtiger – gibt es sehr wenige Webentwickler, die sich mit den erforderlichen Technologien wirklich auskennen. Hierfür ist es erforderlich, dass sogenannte Shader programmiert werden, die eine eigene Grafikkartennahe Programmiersprache GLSL voraussetzen.

WebGL und animierte Texturen als Zukunftstrend

Die genannten Aspekte machen diese wunderschönen Websites eher rar. Doch die Entwicklung geht weiter und so findet man die Technologien immer wieder unter den besten und preisgekrönten Websites.

Und da sich alle genannten Einschränkungen früher oder später abmildern werden, können wir mit Freude, Fug und Recht von einer weiteren Verbreitung dieser Königsklasse der Webanimation ausgehen.

3D Animationen

3D Animationen zeichnen sich durch den virtuellen entstehenden dreidimensionalen Raum und die Bewegung dreidimensionaler Elemente im Raum aus. Selbst wenn der „Raum“ ohne die 3D Elemente nicht räumlich wirken würde.

Die Bedeutung von 3D Animationen

3D Animationen gehören nicht nur zu den Trends im Webdesign, auch 3D an sich ist im Design und Webdesign ist immer wieder eine spannende Komponente. Sie erinnert uns an unseren gewohnten Lebensraum und suggeriert Deinen Besuchern eine gewisse Vertrautheit. Auch andere Welten und Sichtweisen erscheinen uns so realer und nachvollziehbarer.

Nicht zuletzt waren deshalb bei Firmen wie Apple lange Zeit Stilrichtungen wie der Skeuomorphismus führend, bevor sich aus Kosten und Produktivitätsgründen eher das Flat-Design durchgesetzt hat. Heute nutzt Apple gerne 3D zur Produktpräsentation, für Display Hintergrundbilder oder im Rahmen des eigenen Branding wie dem Apple Cube.

3D Animationen – Relevante Varianten

Heute gibt es zwei 3D Animationen, die auf modernen Websites zu finden sind.

• 3D Animationen, die live von der Website im Rahmen der WebGL API ausgeführt werden und
• 3D Animationen in Form von 3D Motion Design Videos.

Beide Arten von Animationen haben hier ihre Vorteile und Nachteile.

Live 3D Animationen mit WebGL

Der Hauptvorteile von 3D Animationen, die sich WebGL bedienen? Ganz klar die Interaktivität im Browser! So können Deine Website-Besucher beispielsweise die Kamera oder Gegenstände einer Szene bewegen, verschiedene Perspektiven einnehmen und mit der Animation interagieren.

Auf diese Weise können ganze Welten entdeckt und Geschichten lebendig werden. Unter den besten Websites finden sich mit Nomadic Tribe und Orano zwei unterschiedliche, herausragende Beispiele.

Der Nachteil ergibt sich noch in der gewissermaßen künstlerischen Qualität, den technischen Möglichkeiten, dem Knowhow und Aufwand solch virtueller interaktiver Welten.

3D Motion Design Videos

Die Vorteile dieser 3D Animationsart liegen zum einen darin, dass Designern hiermit die Bewegung und Raumtiefe als zusätzliche gestalterische Elemente zur Verfügung stehen. Ohne Programmierkenntnisse zu benötigen.

3D Motion Design Videos ermöglichen so visuelles Storytelling der neusten Art, suggerieren Modernität und bieten eine gigantische Fülle an Möglichkeiten des künstlerischen Ausdrucks und der Produktpräsentation.

Der Nachteil ist dabei aber die fehlende Interaktivität. So können sich Deine Besucher das Video anschauen, aber nicht Aktionen auslösen.

Obwohl der Bereich für mich noch Neuland ist, teile ich hier mal mutig gerne mein Erstlingswerk aus diesem Bereich aus dem Jahr 2020.

Page Transitions – Animation der sanften Übergänge

Page Transition Animationen sind animierte Übergänge zwischen zwei Seiten einer Website. Statt des typischen harten Absprungs von einer Seite zur nächsten bewirkt die Animation hier einen fließenden, sanften Seitenwechsel. Gleichzeitig werden Ladezeiten der Zielseite überbrückt.

Das Ergebnis: Ein schöneres Benutzererlebnis mit App-Feeling. Die Page Transition Animation gibt Deiner Website das gewisse Etwas, durch dass sie als hochwertiger und lebendiger wahrgenommen wird.

Website oder App?

Es ist kein Geheimnis, dass die Grenzen zwischen Web-App und Website immer mehr zerfließen. Gerade jüngere Zielgruppen sind häufig an die Vorteile nativer Apps auf ihren mobilen Geräten gewöhnt und wünschen sich ein entsprechendes Benutzererlebnis auch von Websites.

Doch Websites und Apps sind nicht einfach gleichzusetzen und haben beide Ihre Vor- und Nachteile.

Ein Vorteil von Apps sind die geringen Wartezeiten und die flüssigen Übergänge, wenn sich Inhalte durch Interkationen verändern. Es wird auf den Seitenabsprung bzw. dem Hin- und Herspringen zwischen URLs verzichtet.

Im Bereich der Websites wird dies auch von sogenannte SPAs (Single Page Applications) aufgegriffen. Da hierbei jedoch gleichzeitig die Auffindbarkeit in Suchmaschinen verschlechtert wird, haben sich SPAs nie richtig bzw. flächendeckend durchgesetzt.

Dennoch ist die Nutzerfreundlichkeit solcher Applikationen unbestritten.

Bedeutung von Page Transition Animationen

Durch Page Transition Animationen wird versucht das Beste aus Web-App und Website zu vereinen. Wie bei einer App bewirkt die Page Transition Animation weiche Übergänge nach Interaktionen – nur dass hierbei auch der für Websites typische Seitenwechsel erfolgt.

Der Umbruch und die damit verbundene Wartezeit, die ein Klick auf interne Links auslöst, wird durch sogenannte Page Transitions überbrückt und verschönert. So dass ein friktionsfreies und ununterbrochenes Erlebnis entsteht.

Inwieweit solche Transitionen immer noch die Auffindbarkeit in Suchmaschinen beeinträchtigen ist unter Experten strittig. Stand heute wäre ich eher vorsichtig, wenn wir darauf achten, dass selbst Technologieriesen wie Amazon auf derartige Technologien verzichten.

Sinnvoller Einsatz von Page Transitions

Inzwischen gibt es jedoch genügend Anwendungsfälle und Beispiele, wo Page Transition Animationen erhebliche Mehrwerte und großartige UX offerieren. Insbesondere dann, wenn SEO eben nicht der kritische Erfolgsfaktor einer Website ist.

Ein Beispiel für Webdesign mit Page Transitions findest Du auf den Shopseiten der Luxusmarke Rino & Pelle. Wenn man einen Link der Navigation benutzt, erfolgt eine weiche JavaScript-Animation in der das Logo der Marke kurz gezeigt wird.

Die Animation verbessert hier nicht nur das Benutzererlebnis, sondern stärkt auch das Branding.

Im Sinn nach ist die ganze Idee sehr ähnlich mit den Ideen der Preloader oder Ladeanimationen, wenn gleich sie technologisch viel komplexer ist, da sie gewisse Grundmechanismen des guten alten Webs (Hypertext) bei den Links aushebelt.

Realisierung und Arten von Page Transitions

Fließende Seitenübergänge gehören zu den Top Themen moderner Websites. Da sie bisher wenig verbreitet sind und für viele ein Buch mit sieben Siegeln, zeigen wir Dir in Smooth Page Transitions welche Arten es alles gibt und wie sie Realität werden können, um Deine Website aufzuwerten.

Parallax Scrolling – Bewegung beim Scrollen

Die Animation wird beim Parallax-Effekt durch das Hoch- und Runterscrollen des Website-Besuchers ausgelöst. Einzelne Elemente einer Website bewegen sich beim Scrollen unterschiedlich schnell, so dass neben der Bewegung räumliche Tiefe entsteht.

Bewegungseffekt als Basis für den Parallax-Effekt

Der Begriff Parallaxe kommt aus dem altgriechischen und bezeichnet ein Phänomen der Wahrnehmungspsychologie. Einerseits erscheinen hierbei Gegenstände, die sich schneller bewegen näher als Objekte, die sich langsamer bewegen. Anderseits verändert die eigene Bewegung und die damit veränderte eigene Position die Wahrnehmung der anderen Objekte.

Aus dem echten Leben ist dem ein oder anderen dieses Phänomen vielleicht von anfahrenden Zügen bekannt. Im ersten Moment fällt vielen die Entscheidung schwer, ob der eigene Zug, in dem man sitzt gerade abfährt oder ob in Wirklichkeit die Bahn auf dem Gleis gegenüber losfährt.

Relevanz der Parallax Scrolling Animation

Im Vergleich zu Büchern haben Websites ganz klar den Vorteil, dass Sie so lang werde können, wie man will. Alle Inhalte sind dank Scrollen ohne Seitenwechsel lesbar. Soweit nichts Neues.

Diese Möglichkeit wird nicht nur im Rahmen des responsiven Webdesigns genutzt, um je nach Displaygröße das bestmögliche Ergebnis zu erzielen. Auch Trends der letzten Jahre wie die sogenannten Onepager und Blogbeiträge, die Themen ganzheitlich darstellen, nutzen die Länge von Websites aus.

Das Parallax Scrolling bietet hier eine schöne Möglichkeit über die gesamte Länge der Webseite die Interaktion Deiner Besucher mit Deiner Website zu erhöhen. Der Animationseffekt wertet Deine Website auf und erhöht die User Experience.

Parallaxe – von Videospielen zu Websites

Die Parallax-Effekte kommen traditionell aus dem klassischen Bereich der Videospiele. Seit Mitte des letzten Jahrzehnts wurden sie zu einem Trend im Webdesign. Zunächst noch eher selten, aber mit der verbesserten Grafikleistung der Endgeräte, finden sie mehr und mehr Einzug auf Websites.

Realisierung von Parallax-Effekten

Auf Websites realisiert man diesen Animationseffekt, in dem man verschiedene Elemente im Vordergrund sowie im Hintergrund unterschiedliche Scrollgeschwindigkeiten zuweist, während die Seite horizontal oder vertikal bewegt wird. So entsteht ein Eindruck von Tiefe und es lassen sich sehr interessante Website-Erlebnisse erzeugen.

Die Idee beflügelte in den letzten Jahren vielfach die Fantasie von Entwicklern und Designern und es gibt wirklich sehr erstaunliche Ergebnisse.

Animierte Slideshows

Slider gehören seit Jahren zu den bekanntesten und beliebtesten Webdesign Elementen. Sie ermöglichen es nacheinander verschiedene Bilder, Videos und andere Inhalte erlebbar zu machen, ohne den Fluss der Interaktion mit der Website zu unterbrechen.

Besucher wird dabei die Wahl gelassen sich die Inhalte im Slider anzuschauen oder nach weiteren Inhalten auf der Website Ausschau zu halten.

Die verschiedenen Slider-Animationen

Es gibt die unterschiedlichsten Slider. So gibt es Slider, die Inhalte im Rahmen eines Autoslides, automatisch animieren und präsentieren. Und Slider, bei denen die Animation durch die Interaktion des Nutzers ausgelöst werden.

Auch die Art der Animationseffekte ist sehr unterschiedlich ausgeprägt. So arbeitet der sogenannte Ken-Burns Effekt mit Transitionseffekten im Sinne von Dreh- und Zoom-Effekten. Bei Fade-Effekten steht dagegen das Spiel mit der Opacity (Durchsichtigkeit) im Vordergrund, so dass einzelne Inhalte weich überblendet werden. Horizontale Bewegungen sind quasi der Standard, vertikale Fullpage Slides keine Seltenheit.

Slider mit Zukunftsmusik

Die technologisch komplexesten und wie ich finde schönsten Transitionen können mit Shadern und WebGL erzeugt werden. Der Fantasie sind hier keine Grenzen gesetzt. Diese liegen weitestgehend in der Mathematik und den Fähigkeiten des Programmierers. Moderne Geräte und gute Internetverbindung vorausgesetzt.

Hier als kleines Praxisbeispiel uns Fullscreen Video WebGL Slider

Tipps für Slider Animationen

Die Wirkung eines Sliders hängt immer auch von der Einstellung der Geschwindigkeit ab. Unabhängig von der dahinterliegenden Technik und der Animationseffekte.

Natürlich gibt es hier kein Patentrezept, da Geschwindigkeit subjektiv unterschiedlich bewertet wird. Dennoch lohnt es sich auf eine gleichmäßige und für den präsentierten Inhalt, der Animation und Deiner Zielgruppe angemessene Geschwindigkeit zu achten. Zu schnelles oder zu langsames Autosliden kann Besucher nerven oder überanstrengen.

Animation von Galerien

Dank der unterschiedlichsten Galerien und Metro Layouts gibt es viele Möglichkeiten Dein Portfolio, Dein Team, Deine Tochterunternehmen oder auch Deine News schön darzustellen.

Doch Animationen machen Galerien oft erst zu einem richtigen und interaktiven Highlight Deiner Website. Sie erhöhen die Wertigkeit Deiner Applikation und das Surferlebnis Deiner Besucher.

Möglichkeiten von Galerie Animationen

Sowohl mit JavaScript, CSS als auch mit WebGL können schöne Effekte erzielt werden. So können Fotografien optisch einander angepasst werden und mittels Hover-Animation erleuchten. Bildern und Videos können mit fließender Bewegung animiert werden und die ganze Galerie mit eleganten Animationen gefiltert und sortiert werden.

Diese Techniken setzen wird bei exovia bereits seit einigen Jahren erfolgreich auf Galerieseiten unserer Kunden ein. Allen voran im Architekturbereich wie zum Beispiel auf der Startseite der PFP Architekten aus Hamburg.

Ein unter Experten geschätztes Beispiel ist auch Lafolia – eine unserer interaktive Portfolio-Galerie. Beim Filtern der Bildgalerie kommen verschiedene Animationstechniken zum Einsatz. Das gesamte Layout reagiert direkt auf die Nutzerinteraktion.

Animieren von Navigationselementen

Navigationselemente geben Deinen Besuchern Orientierung und weisen Ihnen den Weg ans Ziel zu gelangen. Sie gehören zu den wichtigsten und unverzichtbaren Elementen einer Website und sind mit ausschlaggebend für das Besuchererlebnis.

Das Animieren von Navigationselementen ist gerade bei hochwertig minimalistisch gestalteten Webdesigns ein nicht zu unterschätzendes Thema. Im Fokus stehen hierbei auf dem ersten Blick dezente Menüs und Navigationen, wie z.B. das Hamburger Menü oder die Sidebar in Form eines angedeuteten Pfeils oder Punkten.

Erst durch eine Nutzerinteraktion wird die auf der ein oder anderen Weise versteckte Navigationsleiste sichtbar. Die Animation verschönert diesen Moment auf bemerkenswerter Weise.

Vorteile minimalistischer Menüs

Das Hamburger Menü ist mit seinen drei Strichen in den letzten Jahren schon längst zum Menü Nr. 1 für mobile Websiteansichten aufgestiegen. Und auch für die Desktopansicht von Websites kommt es zunehmend zum Einsatz.

Der Grund ist einfach und ohne weiteres auf andere minimalistische Menüs übertragbar. Designer können hierdurch eine fokussierte Gestaltung erreichen und Websites durch mehr Weißraum klarer und eleganter designen.

Zudem erreichen Deine Besucher mit einem Klick auf ein Icon gewissermaßen die nächste Stufe und bekommt eine Auswahl in Form einer Navigation oder Subnavigation präsentiert. Die Navigation erhält so etwas von einer Belohnung.

Bedeutung von Animationen für Navigationselemente

Gerade beim Aufklappen der Navigation werden häufig Animationen eingesetzt werden. Sie sollen zunächst ein hartes Einblenden vermeiden. Auf der ein oder anderen sehr alten Website oder auf Baukastenseiten kannst Du zwar harte Einblendungen findet, es ist jedoch nicht mehr üblich.

Neben den rein ästhetischen Aspekten minimalistischer Menüs und den damit verbundenen Animationen gibt es viele weitere Vorteile.

• Navigationsanimationen bieten Deinen Besuchern Übersichtlichkeit und Klarheit
• Menü Animationen ermöglichen es Inhalte noch tiefer zu strukturieren. Deinen Nutzer können so je nach Interessenlage immer weiter in die Informationen vordringen, ohne die Orientierung zu verlieren.
• Deine Inhalte werden gerade durch verschiedene Ebenen viel leichter gefunden
• Deine Besucher benötigen weniger Zeit, um die für sie relevanten Daten und Inhalte zu finden.
• Animierte Navigationsleisten zeigen, dass Deine Website professionell gestaltet ist.
• Es macht Deinen Besuchern mehr Spaß mit Deiner Website zu interagieren
• Das Besuchererlebnis wird insgesamt durch die schönere Gestaltung, schnelle Orientierung und damit Handlungsmöglichkeit sowie der ansprechenden Animationen verbessert
• Der Wert Deiner Website wird – fühl- und erlebbar – erhöht
• Mit dem Wert der Website steigt auch die damit verbundene Leistung bzw. der Wert Deiner Produkte und das Ansehen Deines Unternehmens

OK, die Animation der Navigationselemente ist sicher nicht das Einzige, was eine herausragende Website besonders macht. Aber ob Ihr es glaubt oder nicht. Es gibt Webentwickler, die sich ausschließlich auf das Gestalten und Animieren von Navigationsleisten spezialisiert haben, weil dem Thema gerade bei größeren Business Seiten eine so wichtige Rolle zukommt.

Animation von Modalen und visuelles Feedback

Bei der Animation von Modalen geht es um ein angenehmes Ein- und Ausblenden der Popups im Zeitablauf. Im Idealfall wird das Modal als von Deinem Besucher erwünscht wahrgenommen und bietet relevante Zusatzinfos und Interaktionsmöglichkeiten zur richtigen Zeit.

Modale: Kontrovers diskutiert

Modale gehören zu den am kontroversesten diskutierten Elementen einer Website. Sie sind dafür da, die Aufmerksamkeit Deiner Besucher zu ziehen und wurden leider vielfach hierzu missbraucht.

Vielleicht erinnerst Du Dich noch an die relativ hässlichen Popups für Werbung mit denen man in den 90ern immer wieder der Nutzerfluss der Seite unterbrochen wurde. Eine sehr nervende Angelegenheit, weshalb viele Popups grundsätzlich negativ gegenüberstehen.

Das kann ich gut verstehen und bedauere etwas, dass dieser Trend seit 2018 wieder verstärkt Einzug auf die Websites gefunden hat.

Allerdings war früher hier alles ausnahmsweise noch schlimmer. Die neuen Popups werden typischerweise nur gezündet, wenn man die Seite gerade verlassen möchte. Und nicht mit Werbung für Dritte sondern als Eigenwerbung. Mich persönlich nervt es trotzdem. Und es bleibt fraglich, inwieweit so etwas dem Ruf und der Glaubwürdigkeit von Unternehmen schadet.

Trotzdem gibt es Unternehmen, für die sich die neuen Popups im Rahmen der Customer Journey lohnen, wie Ott Nigugulis aufzeigt.

Bedeutung von Modal Animationen

Neben den möglichen Mehrwerten im Rahmen der Customer Journey, gibt es auch Einsatzbereiche, die von Deinen Besuchern als sinnvoll oder erwünscht wahrgenommen werden.

Hierzu zählen zum Beispiel Warnhinweise, sowie Modale, die sich erst aufgrund einer Nutzerinteraktion öffnen. Zum Beispiel Kontaktformulare und Kontaktangaben, die per Klick auf Kontakt im Vordergrund der eigentlichen Seite erscheinen. Hierdurch ist eine schnelle Kontaktaufnahme ermöglichen, was nicht nur aus kaufmännischer Sicht gewünscht ist. Gerade für notfallrelevante Websites kann so etwas extrem wichtig für Besucher sein.

Zudem bieten Modale die Möglichkeit Zusatzinfos gestalterisch hervorzuheben. Beispielsweise indem zusätzliche Bilder in einem Slider im Vordergrund zu sehen sind. Deine Besucher können sich so auf die Bilder fokussieren ohne dass sie hierfür eine weitere Seite von Dir aufrufen müssen.

Richtig eingesetzt können Modale und die damit einhergehende Animation ein sehr gutes UI Feature darstellen.

Tipps für Modal-Animationen

Wie bei jeder Form von visuellem Feedback für Statusänderungen gilt es auch hier die harten Schnitte zu vermeiden, da dieses weder zeitgemäß noch wertig wirkt. Wenn sich der Status Deiner Website oder Applikation ändert, sollte das sanft und im Zeitablauf geschehen.

Gerne gebe ich Dir hier abschließend die Empfehlungen von Paul Lewis weiter, die im Rahmen des Google Chrome Developer Summit 2020 veröffentlicht wurden.

• Verwende modale Ansichten sparsam und nur, wenn es einen guten Grund dafür gibt. Benutzer sind frustriert, wenn Du ihr Erlebnis unnötig unterbrichst.
• Das Hinzufügen von Animation, wie Skalierungen kann das Modal auf ansprechende Weise zum Leben erwecken.
• Achte dabei darauf, dass das Einblenden nicht zu abrupt erfolgt. So sind Deine Besucher nicht irritieren und Du kannst zugleich die Hochwertigkeit Deiner Website aufrechthalten.
• Wenn Deine Besucher, die modale Ansicht verlassen wollen, sollten sich Deine Modal schnell schließen lassen.

Visuelles Storytelling mit Animationen

Storytelling nutzt die Vorstellungskraft der Zuhörer, um Informationen mit Bildern und Emotionen zu verbinden, die beim Hören und Lesen von Geschichten entstehen. Dadurch können Informationen interessanter, spannender und verständlicher werden und im Gedächtnis Deiner Zuhörer bzw. Leser bleiben.

Animationen unterstützen das Storytelling auf visuelle Art und machen die Geschichte noch lebendiger. Der gesamte Storytelling-Prozess wird interessanter und halten Deine Besucher für längere Zeit bei der Stange.

Animiertes Storytelling fürs Business

Moderne Nutzer wollen im Internet heute nicht nur informiert, sondern unterhalten werden. Zum Beispiel durch die Vorstellung von Produkten und Dienstleistungen im Storytelling-Format.

Storytelling Animationen helfen dabei Marken und Angebote kreativ vorzustellen und eine emotionale Bindung zwischen Deinen Besuchern und Deinem Unternehmen herzustellen. Wichtig hierbei ist, dass die dahinterliegende Botschaft, die Du vermitteln willst, so klar wie möglich ist.

Varianten von Storytelling Animationen

Oft werden Storytelling Animationseffekte für sehr lange Webseiten verwende, da sie besonders geeignet sind umfassende und fesselnde Geschichten zu erzählen. Den Animationen sind hierbei fast keine Grenzen gesetzt. So können entweder…

• Übergänge
• SVGs
• Hintergründe
• Texte
• oder auch ein Hauptmotiv animiert werden.

Letzteres bietet sich z.B. an, wenn sich die Geschichte um die Verwandlung des Hauptmotivs dreht. Beispielsweise wenn aus einer Knolle eine schöne Blume oder einzelnen Gegenständen ein neues Auto entsteht.

Doch manchmal reicht auch eine kurze Sequenz, um eine Geschichte zu erzählen. Hierzu eignen sich einzelne Storytelling-Animationen wie z.B. Line-Draw-Animationen.

Hinweise für die Animationen

Die Animation soll beim Storytelling die eigentliche Geschichte unterstreichen und aufwerten. Daher gilt es darauf zu achten, dass die Animation auch tatsächlich zur Geschichte passt. Auch der Zeitpunkt der Animation sollte passend zur Geschichte terminiert sein und das Lesen der Geschichte sehr gut möglich sein.

FAZIT Warum solltest Du Animationen auf Deiner Website einsetzen

Animation ist kein vorübergehender Webdesign Trend, sondern einer, der Jahr für Jahr steigt. Und das hat seine Gründe. Hier noch einmal die wichtigsten im Überblick:

• Animationen gewinnen Aufmerksamkeit für Deine Website
• Sie schaffen es, dass Deine Besucher eine emotionale Beziehung zu Deiner Website und Dir aufbauen
• Animationen erhöhen das Lesevergnügen und halten Deine Besucher länger auf Deiner Seite.
• Die längere Time on Page setzt gute Signale und wirkt sich positiv auf Dein SEO aus.
• Mit Animationen lassen sich Informationen zu Deinem Unternehmen, Deinen Stärken und Leistungen verständlicher, spannender und lebendiger erzählen. So kannst Du im Web überzeugen und zugleich Dein Branding stärken.
• Du kannst Dich mit einer Animation gegenüber Deiner Konkurrenz absetzen und Deine Website aufwerten
• Mit Animationen kannst Du die Interaktion Deiner Besucher steigern
• Und das gesamte Erlebnis Deiner Besucher erhöhen

Wichtig hierfür ist der gezielte Einsatz. Deine Animation muss dafür geeignet sein, das von Dir gewünschte Ziel zu erreichen und sich harmonisch ins Gesamtkonzept Deiner Website zu integrieren. Lieber eine richtig gute, hochwertige Animation als viele Animationen, die nicht ganz passen. Die oben aufgeführten Varianten geben Dir eine Richtung, welche Animation wann sinnvoll ist.

Du möchtest gerne so ein einzigartiges Benutzererlebnis erschaffen und suchst einen Partner für die Konzeption und Realisierung von Animationen? Als Webdesigner sind wir gerne für Dich da und unterstützen Dich darin im Web noch erfolgreicher zu werden.