Webanimation in der Post-Flash-Ära

In diesem hart umkämpften Umfeld suchen Unternehmen fieberhaft nach Möglichkeiten, die Aufmerksamkeit der Menschen auf sich zu ziehen und zu halten. Während wir unserem täglichen Leben nachgehen, erzeugt der endlose Strom visueller Stimulation, der uns aus animierten Anzeigen auf der Straße, Videos auf unseren Handys und unseren Social-Media-Feeds entgegenströmt, ein Gefühl ständiger Bewegung, das um unsere Aufmerksamkeit wetteifert.

Die sekundenschnelle Reaktion auf Bewegung in unserer Umwelt wurde aus dem Überlebensbedürfnis heraus entwickelt und durch als potenziell bedrohlich oder schädlich empfundene Umweltreize ausgelöst; Menschen achten besonders auf Dinge, die sich bewegen. Wenn wir aus dem Augenwinkel etwas sehen, das sich schnell bewegt, alarmiert uns das Gehirn in Sekundenbruchteilen, weil unser Unterbewusstsein bereits auf die Gefahr reagiert hat, bevor unser Bewusstsein Zeit hatte, die Informationen zu verarbeiten.

Werbetreibende wissen das, und deshalb haben wir animierte Straßenwerbung an Bushaltestellen und auf U-Bahn-Plattformen, Videoanzeigen, die in Social-Media-Streams auftauchen, und elektronische Werbetafeln mit Full-Motion-Video. Die Technik ist ein Doppelschlag-Effekt, der entwickelt wurde, um Marketingbotschaften zu übermitteln. Erstens, indem wir unsere Aufmerksamkeit erregen, und zweitens, indem wir Videos und Animationen verwenden, um die Botschaft zu vermitteln.

Wenn ein statisches Bild mehr als tausend Worte sagt, wie viel ist dann eine Animation wert?

Hier kommt die Webanimation ins Spiel. Webdesigner hoffen, unsere Aufmerksamkeit zu erregen und zu halten und vielleicht einen unerwarteten Ruck der Freude hinzuzufügen. Webanimationen können verwendet werden, um verschiedene Schritte in einem komplexen Prozess oder einer Idee zu visualisieren, um eine einfache Marketingbotschaft zu veranschaulichen oder um Dinge auf einer Webseite auf natürliche und fließende Weise zu bewegen, während die Leute scrollen – wiederum, um die Aufmerksamkeit auf etwas zu lenken.

Wie die Webanimation begann, der Aufstieg von GIFs

In den Anfängen des World Wide Web war alles eher statisch und langweilig. Webseiten basierten meist auf Grafikdesign und Layouts aus der Printwelt. Einige Designer haben sich jedoch – trotz der technischen und Bandbreiten-Herausforderungen – bemüht, frühe Formen der Webanimation einzubeziehen, um sie dynamischer und attraktiver zu machen. Eine der ersten Ergänzungen einer GIF-Animation auf einer Website war Jeffrey Zeldmans Batman Forever im Jahr 1995. Die Besucher wurden von Batmans Flug auf sie begrüßt, animiert als Bildsequenz.

Die Werbeseite von Batman Forever war damals eine der beliebtesten Seiten. Es inspirierte andere Webdesigner und Entwickler, GIF-Webanimationen als skurriles, auffälliges Element in ihre Websites zu integrieren.

Spulen wir 20 Jahre vor und animierte GIFs sind jetzt überall. Sie sind auf Twitter, Messenger, iMessage, WhatsApp, Skype, Instagram und Facebook. GIFs eignen sich für Short-Loop-Animationen, Bildsequenzen und sogar kurze Video-Loops. Ein unglücklicher Mangel ist jedoch, dass das GIF-Dateiformat keine variable Transparenz hat und keinen Alphakanal unterstützt; Daher sind alle Pixel entweder vollständig undurchsichtig oder vollständig transparent.

GIF-Animationen waren der Beginn einer Renaissance im Webdesign, aber sie waren nicht ideal. Besonders in den frühen Tagen der DFÜ- und langsamen Internetgeschwindigkeiten waren GIFs Bandbreitenfresser. Das Ergebnis war eine niedrig aufgelöste, verpixelte Sequenz. Der Nachteil für Designer, GIFs auf die kleinstmögliche Größe zu komprimieren, war eine begrenzte 8-Bit-Palette, die zu viel Dithering führte. Dies änderte sich, als Hochgeschwindigkeitsinternet im 21. Jahrhundert immer üblicher wurde, und als Folge davon wurden Webanimationen mit Millionen von Farben besser aussehend und mit höheren Bildraten flüssiger.

Der Beginn der Flash-Webanimation

Der große Webanimationsboom kam mit der Einführung von Flash im Jahr 1996, als Macromedia sein Web-Plug-in und das dazugehörige Frame-basierte Animationstool ankündigte: Macromedia Flash (nachdem sie FutureSplash Animator, ein Vektoranimationsprogramm, übernommen hatten). Flash spielte eine führende Rolle bei der Bereitstellung neuer Funktionen für das Web. Von Audio und Animation bis hin zu Interaktivität und Video hat Flash dazu beigetragen, das Internet voranzutreiben.

Die Möglichkeit, einfache, schlanke, vektorbasierte Webanimationen über ganze Websites zu erstellen, die Interaktionen beinhalteten, führte zu einer sogenannten „Barockzeit“ des Webdesigns mit (zu) vielen animierten Elementen, die die Landschaft überfüllten. Nichtsdestotrotz bot Flash einen Einblick in die Möglichkeiten des dynamischen Webdesigns, gab den Designern die Möglichkeit zu experimentieren und löste eine Phase der rasanten Weiterentwicklung des Webdesigns aus.

Flash-Animationen sind leichtgewichtig und relativ einfach zu erstellen. Sie sind nur wenige Kilobyte groß und werden im SWF-Dateiformat und einer Tondatei mit gestochen scharfen Vektorgrafiken vertrieben. Das Erstellen von Webanimationen wurde zu einem optimierten Prozess, der die Ladezeiten der Webseiten nicht wesentlich verlängerte. Aber trotz alledem blieb ein erheblicher Nachteil bestehen – ein Browser-Plug-in war erforderlich, damit es ausgeführt werden konnte.

Darüber hinaus wurde eine ausgeklügelte Interaktion in Flash durch ActionScript (AS) ermöglicht, eine objektorientierte Programmiersprache ähnlich wie JavaScript. ActionScript wurde ursprünglich entwickelt, um einfache 2D-Vektoranimationen zu steuern, hat sich aber später zu einem ausgeklügelten Tool entwickelt.

Leider war die Flash-Animation nicht darauf ausgelegt, reaktionsschnell zu sein, funktionierte nicht auf allen Geräten gut und wurde schließlich von allen gängigen Mobilgeräten entfernt. Während die Dateigröße relativ klein war, war Flash nicht gut optimiert und am Ende CPU-hungrig, was auch auf Mobilgeräten ein Problem war. Das Ende der Flash-Ära kam, nachdem Steve Jobs entschieden hatte, Flash auf Apple-Mobilgeräten nicht mehr zu unterstützen.

Flash wurde während der PC-Ära entwickelt – für PCs und Mäuse. Aber im mobilen Zeitalter geht es um energiesparende Geräte, Touch-Oberflächen und offene Webstandards – alles Bereiche, in denen Flash zu kurz kommt.

Steve Jobs

Webanimation heute

Heute, da Flash veraltet ist, haben wir andere Anforderungen an die Webanimation. Werkzeuge müssen flexibel und leicht sein. Webdesigner müssen reaktionsschnelle und anpassbare Inhalte für verschiedene Geräte (Desktop, Tablet und Mobilgerät) erstellen und dabei verschiedene Bildschirmabmessungen, Browser, Seitenverhältnisse, Pixeldichten und mehr berücksichtigen. Unsere Webanimations-Meisterwerke müssen auf einem 5-Zoll-720-Pixel-Handy über ein 9,7-Zoll-QXGA-Tablet bis hin zu einem 32-Zoll-Retina-6K-Display funktionieren.

Die Technologie ist so weit ausgereift, dass selbst leistungsschwache Mobilgeräte über die Bandbreite und Verarbeitungsleistung verfügen, um sehr anspruchsvolle Webanimationen und hochauflösende Videoinhalte zu verarbeiten. Das bedeutet nicht, dass Websites super „beschäftigt“ sein sollten. Wie immer geht es darum, die richtige Balance zwischen Animation, dynamischer Interaktion und statischen Elementen zu finden. Die Tatsache, dass wir heute viele ausgefallene Webanimationen implementieren können, bedeutet nicht, dass wir dies tun sollten.

Webdesigner/Animatoren müssen auch die plattformübergreifende Unterstützung berücksichtigen. Vor zehn Jahren mussten Designer nicht darauf achten, dass ihre Kreationen auf so vielen unterschiedlichen Geräten gut aussehen. Unterschiedliche Seitenverhältnisse, Hoch- und Querformate sowie unterschiedliche Pixeldichten und Betrachtungsabstände müssen berücksichtigt werden. Dieses Rätsel stellt Webdesigner vor eine Reihe neuer Herausforderungen und potenzieller Fallstricke. Benutzertests kosten wertvolle Zeit, auf einer Vielzahl von Plattformen können mehr Dinge schief gehen, und Webanimationen müssen detaillierter denn je sein.

HTML5, CSS3, JavaScript und SVG (skalierbare Grafiken) scheinen die besten Lösungen für Webanimationen zu sein. Die Verwendung dieser modernen Webtechnologien und -sprachen hilft, die meisten, aber nicht alle der oben genannten Probleme zu lösen. Aber es ist immer eine gute Idee, vorsichtig vorzugehen, besonders wenn man sich auf unbekanntem Terrain befindet, und umfangreiche Qualitätssicherung und Tests sind ein Muss.

Warum Webanimation verwenden?

Webanimationen können die Aufmerksamkeit der Menschen länger fesseln und halten als eine statische Webseite und eine Idee oder ein Konzept klarer und effektiver kommunizieren. Exzellente Webanimationen vermitteln hinter jeder Bewegung eine Geschichte. Es geht darum, eine Animation mit Sinn und „Seele“ (lat. anima) zum Leben zu erwecken.

Webanimationen sollten reibungslos und aussagekräftig sein und die Reise des Besuchers unterstützen. Der Webdesigner/Animator muss sich bewusst sein, wie die Animation in die Benutzererfahrung passt, versuchen, wahrscheinliche Benutzerströme vorherzusagen, und sie dann auf sinnvolle Weise unterstützen.

Webdesigner dürfen Webanimationen nicht aus einer rein technischen Perspektive betrachten; Sie müssen es aus der Perspektive des Benutzers betrachten.

Eines der wesentlichen Dinge bei der Animation ist das Timing. Das richtige Timing verleiht einer Animation eine physische und emotionale Bedeutung. Die Erfahrung sollte nahtlos und logisch sein. Wenn die Animation nicht flüssig ist (ein Timing-Problem hat), könnten die Leute sie als Fehler wahrnehmen und jegliche Motivation verlieren, die Website weiter zu erkunden.

Der Animator muss ein angemessenes Timing verwenden, um den beabsichtigten Effekt zu erzielen. Wie viele Keyframes sollen in der Animation verwendet werden? Welche Art von dynamischer Veränderung in der Animation entsteht durch die Besucherinteraktion und wie schnell kommt die Reaktion nach der Interaktion? Ist die Animation skurril, ernst, unterhaltsam?

Aus logischer Sicht können wir Webanimationen in zwei Grundtypen unterteilen:

• Eine statische, nicht interaktive Webanimation, beispielsweise eine GIF-Animation.
• Eine dynamische Webanimation mit Benutzerbeteiligung und Interaktivität, die sich bei Benutzereingaben ändert.

Das beste Beispiel für dynamische Animation ist ein Spiel, bei dem Benutzer den Bildschirminhalt manipulieren. Ein weiteres einfaches Beispiel wäre das Ändern der Position bestimmter Elemente, wenn ein Website-Besucher durch eine Parallax-Scrolling-Website scrollt. Die Animation ist nicht passiv, sie variiert je nach Benutzeraktionen.

Dynamische Webanimationen werden oft verwendet, um animierte Infografiken auf einer Website zu präsentieren, damit die Leute bestimmten Bereichen mehr Aufmerksamkeit schenken, während sie durch die Seite scrollen – es ist eine wirkungsvolle Möglichkeit, relevante Informationen hervorzuheben.

Die Vor- und Nachteile der Webanimation

Hier sind einige Vor- und Nachteile von Webanimationstechniken, einschließlich veralteter Lösungen, die nicht mehr verwendet werden.

Was ist mit den Vor- und Nachteilen der Webanimation im Allgemeinen? Gut ausgeführte Webanimationen können immer noch fehl am Platz aussehen, daher ist es immer eine gute Idee, einige entscheidende Fragen (sowie Quizkunden und andere Teammitglieder) zu stellen, bevor Sie mit der Integration von Animationen in das Design einer Website fortfahren.

Zuerst müssen wir prüfen, wie sich die Animation auf die Benutzererfahrung auswirkt. Wird es die UX der Website verbessern ? Designer sollten:

• Untersuchen Sie das vorhandene Website-Design (falls verfügbar)
• Überprüfen Sie die Zielgruppe und die von ihnen verwendeten Hardwareplattformen
• Überprüfen Sie die Ladezeiten der Website und die CPU-Auslastung
• Erkunden Sie andere Alternativen
• Behalten Sie die Benutzerfreundlichkeit im Auge

Es ist keine gute Idee, Webanimationen auf einer Website zu verwenden, um nur Trends zu folgen.

Die Entscheidung, Webanimationen zu verwenden, sollte wie jede andere Designentscheidung behandelt werden; Webdesigner müssen die Vor- und Nachteile abwägen und sicherstellen, dass die Benutzererfahrung nicht beeinträchtigt wird. Sie sollten auch mit Entwicklern zusammenarbeiten, um die Codeanforderungen zu ermitteln und sicherzustellen, dass sie nicht mit ineffizientem Code hängen bleiben, der später möglicherweise optimiert werden muss.

Die moderne Webanimationstechnologie ist in den letzten 20 Jahren erheblich gereift – Leistung, verfügbare Bandbreite und Renderqualität haben zugenommen. Designer sollten jedoch vorsichtig vorgehen und Animationen nur dann zu einer Website hinzufügen, wenn dies die Benutzererfahrung sinnvoll verbessert.

Weiterführende Literatur im Toptal Design Blog:

• So erstellen Sie benutzerdefinierte Ladeanimationen, um die Absprungraten zu verringern
• Erstellen Sie im Handumdrehen atemberaubende Illustrationen mit Sketch und Looper
• Eine Schritt-für-Schritt-Anleitung zur UI-Animation mit Prinzip und Skizze
• Logo-Animations-Inspirationen, um Ihre Marke identifizierbarer zu machen
• Eine Schritt-für-Schritt-Anleitung zum Erstellen animierter Produkterklärvideos