Micro Animationen
…kleine Veränderungen, große Ergebnisse.
Die Herausforderung, Produkte, Dienstleistungen oder eine Marke auf einer Webseite interessant darzustellen, erfordert das Schaffen einer ausgewogenen Mischung aus visuellen Elementen, überzeugenden Texten und intuitiver Benutzerfreundlichkeit. Als Grundlage sollte ein fehlerfreier semantischer Webauftritt dienen mit schnellem Seitenaufbau, responsive auf vielen verschiedenen Geräten nutzbar und barrierearm. Viele Punkte der Auflistung sind mittlerweile Standardanforderungen und entfalten nicht mehr bei allen Nutzern die Stärkung des Vertrauens in das Produkt, die Dienstleistung oder das Unternehmen. Daher die Frage: Wie kann man sich abheben von anderen Webseiten und so die Aufmerksamkeit oder die Neugier eines Webseitenbesuchers erlangen?
Eine Möglichkeit können Micro Animationen darstellen. Das sind kleinere oder größere Animationen von Seitenelementen, die über eine Besucherinteraktion ausgelöst werden. Als Auslöser einer Animation kann zum Beispiel das Scrollen auf der Seite sein, oder das Betätigen eines Buttons.
Ein aufwendiges Beispiel einer Micro Animation:
Wenn jede subtile Animation in der Gestaltung sorgfältig berücksichtigt wird, entfaltet sich das Gesamterlebnis in einer Weise, die weit über das bloße Ergebnis hinausgeht. Diese kleinen animierten Details verleihen der Webseite eine einzigartige Dynamik und Interaktivität, die sich in einer faszinierenden Gesamtwirkung manifestiert, welche die Erwartungen der Betrachter überschreitet. Genauso wie jede Einzelheit in einer Micro Animation wichtig ist, trägt auch das harmonische Zusammenspiel all dieser Elemente maßgeblich zur Gestaltung eines beeindruckenden Online-Auftritts bei.
Scroll-Effekte
Der Vorteil von Scroll-Effekten ist, dass nahezu jeder Besucher einer Webseite scrollen wird, die Animationen werden damit bei einer sehr großen Besucherzahl sichtbar. Die Bandbreite bei Scroll-Animationen kann von Fade-In Effekten über aufwendige Produkt Präsentation (z.B. bei Handy Vorstellungen) oder Storytelling Animationen reichen.
Die hier dargestellten Einblendungseffekte verleihen einer Webseite etwas mehr Dynamik und erfreuen sich großer Beliebtheit. Mit dem richtigen Gespür wo und wie diese genutzt werden, kann die Aufmerksamkeit auf ein besonderes Detail oder ein Call-To-Action gelenkt werden.
Ähnlich wie im Eingangsbeispiel werden die hier genutzten Scroll-Effekte beim erneuten Hoch- und Runterscrollen wieder abgespielt. das bietet den Vorteil, dass Besucherinnen und Besucher der Webseite die Effekte nochmal anschauen können, wenn vielleicht zuerst zu schnell vorbeigescrolled wurde.
Weitere Möglichkeiten
Beispiel "Share Menu"
Animationen, die durch einen Button gestartet werden, bieten auch die Möglichkeit einer positiven Verstärkung der Wahrnehmung. Vielleicht ist jedem schon mal aufgefallen, dass ein “Like” Button in einem Sozialen Netzwerk eine kleine Animation abspielt, die in Erinnerung geblieben ist, oder wie sich ein Menü entfaltet hat, sei es die mobile Navigation oder eine andere Komponente.
Beispiel Such-Schlitz
Vielleicht haben Sie schon auf das Such-Icon am Rand geklickt oder hier drunter auf das Such-Icon haben Sie schon ein oder zwei Beispiele wie eine Funktion sich entfalten kann erlebt. Falls nicht, legen wir ihnen das jetzt nahe um im Such-Schlitz mit niemand geringeren als James Bot zu chatten.
Und noch ein kleiner Tipp: Beide Such-Icons sind einen Klick wert ;).
Die Spannweite ist also groß beim Thema Micro-Animation, angefangen bei einfachen Scroll-getriebenen Fade-In Effekten, über komplexere Scroll-getriebene Geschichtserzählungen hin zu fein orchestrierten Animationen auf User Interaktionen, ein Formular-Button, eine Suchmaske, eine Hamburger-Icon Animation, oder sogar Animationen auf Elementen die gar nicht direkt als Interkationselemente erkennbar sind.
*Die Bilder in diesem Artikel sind von der Midjourney KI interpretiert.
Unverbindlich beraten lassen
Rufen Sie uns an.
Wir beraten Sie gerne!
0221 277 2898 20
Michael Pietz
Geschäftsführer