Eine von vielen Aspekten des Webdesigns ist die Animation einer Webseite. Von kleinen, einzelnen Elementen bis hin zu einer Animation der gesamten Ansicht ist im Grunde alles möglich. Wir beschäftigen uns heute mit den besten Praxistipps und richten dabei einen gezielten Blick auf die User Experience.
Animation der Webseite für mehr Klicks
Animationen auf einer Webseite zielen darauf ab, diese für Besuchende interaktiv und insgesamt ansehnlicher zu gestalten. Reine Optik ist dabei selten das einzige Ziel. Animationen bringen noch weitere nützliche Aspekte mit:
- Animationen schaffen eine moderne Optik
- bei gezielter Setzung erleichtern sie den Besuchenden die Navigation auf der Webseite
- sie erhöhen bei richtiger Platzierung die Verweildauer
- sofern Besuchende mit Animationen interagieren können, steigen die Klickraten
- Animationen können Wartezeiten überbrücken — was sich positiv auf die User Experience auswirkt
Zu viel des Guten schadet
Soweit zu den Vorteilen von Webseiten-Animationen. Doch wie fast überall gilt auch hier: Übertreibung schadet, anstatt zu helfen. Dann sind all die Vorteile für die Katz und Besuchende verschwinden schneller, als man gucken kann. Wann es nicht ratsam ist, die Webseite mit zusätzlichen Animationen zu versehen:
- Der gezielte Einsatz ist entscheidend. Werden Animationen beliebig und zu breit verstreut, stiftet das eher Verwirrung als einen positiven Effekt.
- Jede Animation sollte einen gewissen Sinn haben. Orientier dich dafür an den oben aufgelisteten Faktoren — zum Beispiel eine Animation für die Navigation durch Menüpunkte.
- Eine Animation, die zu schnell vorüber ist, ist ebenso unbrauchbar. Denk bei der Wahl der Länge daran, dass sie sicht- und erkennbar bleiben soll.
- Bei der Länge gilt aber auch das Gegenteil — ist die Animation zu lang, nervt das die Besuchenden eher, als sie zu Klicks zu motivieren.
- Kein responsives Design der Animation? Schlecht. Animierte Elemente müssen sowohl auf dem Desktop als auch auf mobilen Geräten funktionieren.
Beispiele für die Animation auf Webseiten
Navigation
Eine klassische und sehr oft verwendete Animation ist die zur Navigation. Fährt jemand mit dem Mauszeiger über ein bestimmtes Element, erscheint eine entsprechende Animation. Im Grunde sind hier der Fantasie keine Grenzen gesetzt. Paradebeispiel: die Veränderung der Schriftfarbe oder -Art. Das signalisiert, dass per Klick mit dem Element interagiert werden kann.
Animationen im Bestellvorgang
Ein weiteres beliebtes Element ist die Animation innerhalb von Webshops. Bewegte Bilder sorgen für einen verständlicheren und angenehmeren Kaufprozess. Nach der Auswahl eines Artikels „fliegt“ das gewählte Produkt sozusagen in den Einkaufswagen, anstatt einfach bloss aus der Liste zu verschwinden. Das ist zugleich die Bestätigung, dass die Auswahl funktioniert hat.
In Webshops spielen Animationen ohnehin eine weit grössere Rolle. Sie lassen sich nicht nur für die Navigation oder den Kauf einbinden, sondern auch zur Präsentation der angebotenen Waren. Fährt jemand mit dem Mauszeiger über ein Produkt, lässt sich dieses mit ein wenig Animation zum Leben erwecken.
Sonderaktionen, Neuigkeiten und Co.
Ist etwas ganz neu auf deiner Webseite? Lass deine Besuchenden das wissen, indem du eine entsprechende Animation integrierst. Marketer und Betreibende setzen auf Animationen, um zeitlich begrenzte Sonderangebote direkt auf der Landing-Page kenntlich zu machen. Dasselbe gilt für Events, für die sich Besuchende anmelden sollen — am besten so schnell wie möglich. In Webshops wäre ein animiertes Symbol denkbar, das zeigt, welcher Artikel neu im Sortiment ist.
Dataloft berät Sie für die Animation Ihrer Webseite!
Auch wir setzen bei unserem Webauftritt auf Animationen. Die genutzten Elemente sollen weder zu aufdringlich noch zu überladen sein. Wir achten jederzeit auf die bestmögliche User Experience, denn wir möchten, dass sich unsere Kunden bei uns wohlfühlen — sowohl im Web als auch vor Ort. Nebenbei boosten wir dabei auch das Ranking und den Traffic auf deiner Webseite.
Willst auch du deine Webseite mit ein wenig Animation aufpolieren? Oder bist du vielleicht noch auf der Suche nach einer Corporate Identity, die sich optimal in deinem Webauftritt spiegelt? Kontaktier uns — wir beraten dich gerne.