Animierte Website — Pro & Contra

Was zu viel ist ist zu viel oder doch nicht?

Moderne Websites sind schon lange nicht mehr einfach nur statische Textwüsten mit Infografiken. Auch wenn die animierten Gif’s als Designelement ausgedient haben sind animierte Elemente dank CSS3 und JavaScript Bibliotheken wie Animate.css, jQuery und Velocity.js überall im Web anzutreffen. Nicht immer ist dies sinnvoll da es den User nicht zum gewünschten Ziel führt. Wann sollte man es einsetzten und wann nicht?

Hallo erstmals

Als ich das erste mal native Animationen im Web sah,war ich von denen bis heute begeistert. Zusätzlich möchte ich im vornherein sagen, dass ich kein Designer und kein Frontend-Entwickler bin aber als Web-Programmierer mich schon einiges mit UX (User Experience) auseinandersetzte habe. Das soll keine Schrift auf das Abschwören von Animationen im Webdesign sein, sondern aufrufen und helfen diese sinnvoll und gezielt einzusetzen.

Für diesen Text sollte man ein wenig Ahnung von HTML und CSS haben, damit man den Beispielen folgen kann.

Animationen sind cool

Als Entwickler möchte man gerne sein Können den Leuten präsentieren doch dies kann schnell zu einer chaotischen Ansammlung von allen möglichen Techniken seines Könnens anhäufen. Dann ist dies meist sehr unübersichtlich und meistens verwirrend für den User. Nur weil ein Effekt wie z.B. Parallax-Scrolling auf einer Seite gut aussieht muss dies nicht unbedingt auf der Seite des Kunden genau so sein. Wichtig ist, dass das Storytelling aus einem Fluss kommt aber noch wichtiger ist, dass der User schnell zu seinen gewünschten Informationen gelangt. Eine Sammlung gelungene animierten Websites hat das t3n.de Magazin in einem Artikel zusammengetragen. Abgesehen ist das Arbeiten mit Animationen immer mit einem großen Mehraufwand verbunden. Der Programmierer muss abgesehen von der Webapplikationen auch noch um den gesteuerten Ablauf der Animationen kümmern.

Nein, doch, oh!

Jetzt könnte man sagen: »Dann lasse ich Animationen im Webdesign ganz weg und habe keine Scherereien und dazu erst noch weniger Aufwand.« Das sehe ich nicht so, denn dann würde man sich die Möglichkeiten den User elegant durch die Webseite zu führen verweigern. Da ist es wichtig mit dem Kunden und/oder Designer die richtige Balance zu finden, doch wie findet man diese? Dazu müssen wir erst mal definieren was eine Animation ist und wie eine solche Simple erzeugt wird.

Animationen sind nichts anderes als Abfolgen von Veränderungen der Form und Lage die zeitlich getaktet sind. Dies lässt sich im Web auf vielfältige weise realisieren, meistens verwendet man dazu CSS oder JavaScript oder beides zusammen in Kombination. Wir wollen hier nur kurz die CSS3 Animation ansehen, dazu nehmen wir das Beispiel von animierten Himmel. Mit einem Klick auf HTML oder CSS ist der entsprechender Code sichtbar.

Animationen in CSS definieren

In der Erklärung schreibe ich nur den allgemeinen CSS Code und gehe nicht auf die einzelnen Browser-Spezifikationen ein.

Die Klasse sky wird definiert und die weiter unten definierte Animation sky_background mit der Ablaufgeschwindigkeit 50s aufgerufen. Zusätzlich soll die Animation dem Verlauf easy-out und sich ständig wiederholen.

.sky { … animation: sky_background 50s ease-out infinite; … }

Das selbe für die Klasse moon und der Animation moon nur mit dem Verlauf *linear, *genau das selbe gilt für die Wolken.

.moon { … animation: moon 50s linear infinite; … }

Nun werden die Animationen definiert mit dem Schlüsselwort @keyframes und in Prozent-Absätze unterteilt in denen der gewünschte Zustand beschrieben wird. Die Zwischenschritte werden vom Browser berechnet und somit wirkt die Animation flüssig. Hier sehen wir die definierten @keyframes vom Himmel-Hintergrund.

@keyframes sky_background {
0% { background:#007fd5; color:#007fd5 }
50% { background:#000; color:#a3d9ff }
100% { background:#007fd5; color:#007fd5 }
}

Natürlich müssen auch noch die anderen Animationen definiert werden.

Da nur einzelne Abschnitte definiert werden und der Browser den Rest berechnet, kann da unter Umständen viel Last aufkommen. Wenn noch große Bilder oder Videos dazukommen kann es sein, dass ein schwächerer Rechner Probleme bekommt. Bei Smartphones oder Tablets sieht es genau so aus, doch da kommt noch erschwerend hinzu, dass es praktisch keinen Hover-Effekt auf dem Touchscreen gibt. Das heißt, dass der Hover-Effekt nur auf dem Desktop eine Animation auslösen soll. So kann es sein, dass die Animationen so wie Effekte auf die entsprechenden Endgeräte abgestimmt werden müssen.

Einmal gut und einmal nützlich

Das unten aufgeführte Beispiel ist schön anzusehen und als Demo auch absolut cool, doch sollte man es auf einer seriösen Website einsetzten? Ich wüsste jetzt nicht ein Beispiel wo dies sinnvoll wäre und tendiere dadurch mehr Richtung nein.

Hier wird demonstriert was man mittels HTML, CSS und der JavaScript Bibliothek jQuery alles machen kann aber einen Mehrwert hat es nicht. Denn der User findet die Links zu den Social-Medias dadurch nicht schneller und wird wahrscheinlich dadurch einem auf denen nicht folgen. Mit anderen Worten, schön anzusehen aber im Alltag nicht praktisch einsetzbar und dadurch am Ziel vorbeigeschossen.

Am besten führt man den User mittels der Animation durch die Seite. Das kann durch animierte Menüs, Lade-Symbole oder Warnungen geschehen oder eine Sucheingabe die beim anklicken sich erweitert. Mit anderen Worten sollte eine Animation kein Selbstzweck sein sondern eine Ergänzung zur visueller Wahrnehmung und dadurch den User sanft durch die Seite führen. Sichtbar wird dies am folgenden animierten Navigation Beispiel. Da macht das Navigieren durch Webseiten gleich sehr viel mehr Spaß und sieht super aus.

Animationen auf Webseiten verhalten sich wie damals in der Steinzeit des Worl-Wide-Web die Ani-Gif’s: Wenn zu viel auf der Seite ist, dann stören sie. Der User kann sich nicht mehr auf den Inhalt konzentrieren und fühlt sich überfordert, dann verlässt er die Seite. Der User sollte aber die Seite als angenehm empfinden und sich nicht vom Unwichtigem stören lassen müssen. Darum ist auch da zu achten, dass nur wo es nötig ist Animationen auftauchen und auch nur dann wenn es der User als Information benötigt.

Fazit

Grundsätzlich gibt es die zehn folgende Faustregeln, wann und wo Animationen in der Website einzusetzen sind.

Ich hoffe dieser Artikel konnte ein paar Fragen zu der Gestaltung der zukünftigen Website beantworten oder aufwerfen und somit Impulse für zukünftige Projekte geben.