Motion Design als Erfolgsfaktor: 6 Tipps, wie ihr mit Webanimationen die Usability und User Experience eurer digitalen Produkte verbessert

Ihr kennt sie alle. Diese lustigen kleinen Bildchen oder auch Memes, die sich bewegen. Die man sich gerne mal im Teams Chat schickt, um die eigene Stimmung möglichst präzise zum Ausdruck zu bringen.

Ein tolles Mittel, um Botschaften ohne große Worte zu transportieren. Und irgendwie funktioniert das mit den bewegten Inhalten viel besser als mit einfachen Bildern. Man könnte auch sagen: Ein Bild sagt viel mehr als tausend Worte. Und eine Animation sagt viel mehr als tausend Bilder.

Diese GIFs, von denen wir hier sprechen, sind eine tolle Spielerei. So toll, dass Microsoft Teams sogar einen eigenen Button dafür in der Chat Toolbar bereitstellt. Aber mal im Ernst, diese Form der Kommunikation funktioniert nicht ohne Grund einfach so gut.

Es gibt tatsächlich einige gute Argumente für die Nutzung von GIF-Animationen, die auch außerhalb von Chatnachrichten einige Mehrwerte für euer Business liefern können. Lasst uns dabei nicht nur beim GIF bleiben, welches wohl das bekannteste, aber auch nur eines von vielen gängigen Formaten für die Darstellung von bewegten Inhalten im Web ist.

Vielmehr soll es in diesem Beitrag allgemein um die Nutzung von Motion Design im digitalen Kontext gehen und euch zeigen, wie ihr durch den gezielten Einsatz die User Experience, Usability und Markenidentität optimieren könnt. Aber erstmal ganz von vorne.

Motion Design im Überblick

1. 1. 1. Der Unterschied zwischen Motion Design, Motion Graphics und Animation
      2. Die Business-Mehrwerte
      3. 6 Tipps für bessere Usability & User Experience
      4. Motion Design-Strategie

Motion Design, Motion Graphics und Animation

Anders als bei allen anderen Design-Praktiken, geht es beim Motion Design um die Visualisierung von Bewegung. Statische Elemente werden durch den Einsatz von »Motion« (Bewegung) zum Leben erweckt. Der Begriff umfasst eine Menge an Techniken und Praktiken, auf die wir im Verlauf des Artikels noch näher eingehen werden.

Ganz grundsätzlich beschreibt Motion Design – oder auch Motion Graphics – aber die Bewegung von Form, Farbe & Typografie. Die drei Grundelemente der Grafik. Ein weiterer Begriff, der neben dem Motion Design häufig genannt wird, ist die Animation.

Die Abgrenzung zu Motion Design ist nicht immer eindeutig und wird je nach Branche, wie beispielsweise der Filmproduktion, Spieleentwicklung oder dem Webdesign teilweise unterschiedlich verstanden.

Animation

Wir unterscheiden es folgendermaßen: Animation ist der allgemeine Begriff, der die eigentliche Praxis – also das Erzeugen von Bewegung beschreibt und dabei alle Arten von Bewegtbildern umfasst.

Das kann Stop-Motion, 3D, Zeichentrick oder eben auch Webanimation sein. Häufig wird bei Animationsprojekten das Ziel verfolgt, eine ganze Geschichte visuell zu erzählen.

Motion Design

Motion Design hingegen fokussiert sich auf die rein grafische Bewegung und versucht mit einfachen, zielgerichteten und kurzen Animationen bestimmte Botschaften zu übermitteln oder Hinweise zu geben. Im Motion Design wird also auch animiert, jedoch ist das Konzept, das dahintersteht, ein völlig anderes.

Sowohl Motion Design als auch Animation beziehen sich also auf die Visualisierung von Bewegung und werden deshalb häufig miteinander in Verbindung gebracht. Ergänzt durch auditive Inhalte, bspw. in Form von Soundeffekten und stimmungsvollen Klangkulissen können so eindrucksvolle Nutzererlebnisse geschaffen werden.

Business-Mehrwerte mit Motion Design

Im Digital Business punktet ihr mit Animationen besonders im Bereich der Unternehmenskommunikation bei der Gestaltung von digitalen Produkten wie Websites, Onlineshops oder Apps.

Über die Webanimationen macht ihr zum Beispiel, abstrakte Themen besser greifbar, erzählt Geschichten ansprechend und lebhaft oder hebt wichtige Interaktionselemente eines User Interfaces besser hervor.

Erfolgreiche Content Creation und Kommunikation

Ein typischer Anwendungsfall ist die Erstellung von Content für verschiedene Plattformen und Ausgabekanäle. Wichtige Botschaften und komplexe Sachverhalte so zu übermitteln, dass sie bei der Zielgruppe auch Anklang finden und gut verstanden werden, kann schnell zur Herausforderung werden.

Besonders bei größeren Textmengen und schwierigeren Themen neigen wir dazu, schneller abzuschalten und unsere Aufmerksamkeit anderen Dingen zu widmen.

Durch Motion Design könnt ihr über zielgerichtete Text-, Form- und Farbanimationen den sonst so langweilig erscheinenden Botschaften frischen Wind einhauchen. Das kann wiederum zu mehr Aufmerksamkeit und Aufnahmebereitschaft auf der Empfängerseite führen. Animationen helfen euch also dabei,

• Inhalte verständlich zu kommunizieren
• Geschichten anschaulich und attraktiv zu erzählen
• wichtige Hinweise zu geben und Akzente zu setzen
• die Aufmerksamkeit zu steuern und
• den Blick der User auf die wichtigen Dinge zu lenken.

Auch der Zeitpunkt, wann welche Informationen bereitgestellt werden, könnt ihr durch Motion Design exakt steuern. So zeigt ihr Inhalte genau zur richtigen Zeit an der richtigen Stelle an, ohne eure Zielgruppe dabei mit zu viel Information auf einmal zu überfordern. Ihr

• reduziert so die kognitive Belastung,
• sorgt für eine bessere Aufnahmefähigkeit und
• erhöht dadurch die Chancen, dass eure Botschaften auch wirklich von euren Kunden wahrgenommen werden.

Nicht nur die Botschaften werden besser wahrgenommen, sondern auch eure Marke selbst. Gut gemachtes Motion Design, das Hand in Hand mit euren Brand Guidelines geht und eure Markenidentität ideal nach außen verkörpert, sorgt für

• einen höheren Wiedererkennungswert,
• mehr Reichweite und
• eine stärkere Markenbindung.

Animierte Inhalte erzeugen grundsätzlich mehr Aufmerksamkeit als statische Inhalte und können mehr Emotionen und Gefühle hervorrufen, was sich insgesamt positiv auf die Interaktionsbereitschaft auswirkt.

Webanimationen eignen sich daher besonders gut für Social Media und andere kurzlebige Formate, bei denen das Erzeugen von Aufmerksamkeit und Engagement ausschlaggebende Erfolgskriterien sind.  

Mit einem durchdachten Motion-Design-Konzept, das eure Markenbotschaften und Kampagnen visuell unterstützt, könnt ihr dafür sorgen, dass ihr auch wirklich gesehen und gehört werdet und euch somit entscheidende Vorteile im Wettbewerb sichern. 

Motion Design: 6 Tipps, für bessere Usability & User Experience

User Experience beschreibt alle positiven und negativen Erfahrungen, die vor, während und nach der Nutzung eines digitalen Produkts gesammelt werden.  

Usability hingegen bezieht sich nur auf den Zeitraum der eigentlichen Nutzung des Produkts und beleuchtet dabei, wie effizient und effektiv User mit dem Produkt ihre Ziele erreichen und wie zufrieden oder unzufrieden sie währenddessen sind. 

Ein gutes Interface zu entwickeln, das nicht nur super aussieht, sondern auch ein hohes Maß an Usability und eine gute User Experience gewährleistet, ist keine leichte Aufgabe.  

Die Herausforderung besteht darin, dass ihr alle Anforderungen an das System exakt spezifizieren solltet, um daraus die bestmöglichen Gestaltungslösungen zu entwickeln, die wiederum aus Sicht der Endnutzenden maximal zufriedenstellend sind. 

Die zielgerichtete Nutzung von Motion Design bietet euch auch hier einige Mehrwerte für eine bessere User Experience wie Usability. 
Im Folgenden geben wir euch sechs Tipps aus der Praxis. Die Beispiele beziehen sich auf allgemeine Heuristiken der Usability, wie

• Wahrnehmungssteuerung,
• Selbstbeschreibungsfähigkeit,
• Lernförderlichkeit,
• Joy of Use und
• Aufgabenangemessenheit

Ein ausgereiftes Motion-Design-Konzept, das nutzenorientiert zum Einsatz kommt, kann genau in diesen Bereichen seine Stärken voll ausspielen:

Tipp 1: Orientierung beim Navigieren verbessern

Animierte Seitenübergänge und Micro Animations helfen dabei, Abhängigkeiten zwischen einzelnen UI-Elementen auf einer Seite zu verdeutlichen. Zudem verbessern sie die Orientierung bei der Navigation durch verschiedene User Interfaces oder Seiten hinweg, indem sie Zusammenhänge und Wege visualisieren und User in die richtige Richtung lenken.

Tipp 2: Sichtbarkeit des Systemstatus optimieren

Mit Systemstatus sind beispielweise folgende Faktoren gemeint: Wartezeiten, Fehler- oder Erfolgsmeldungen. Mithilfe von animierten Statusanzeigen oder Systemmeldungen verstärkt ihr das visuelle Feedback. User können diese Inhalte dadurch besser wahrnehmen.

Tipp 3: Interaktionsbereitschaft steigern

Mit Hover- und Scroll-Animationen verdeutlicht ihr die Klickbarkeit von interaktiven Seitenelementen. Diese Webanimationen erhöhen somit die Wahrscheinlichkeit, dass Besuchende eurer Seiten tatsächlich auch mit den entsprechenden Elementen interagieren.

Tipp 4: Hilfestellung und Wegweiser geben

Auch automatisches Scrollen ist Teil von Webanimationen. Nutzt es, um Scrollwege zu verkürzen – ein Aufwand, den kein User gerne hat. Besonders bei der Bewältigung komplexerer Aufgaben oder Prozessschritte, wie einer Anmeldung oder Registrierung, kann Motion Design User eurer Webauftritte dabei unterstützen, schneller ans Ziel zu gelangen.

Tipp 5: Joy of Use und Session Time erhöhen

Gut gemachte Animationen erfreuen das Auge und erhöhen die Wahrscheinlichkeit, dass Kunden mehr Zeit mit dem digitalen Produkt verbringen, weil es – ganz simpel ausgedrückt – einfach Spaß macht, es zu benutzen.

Apple macht es mit dem Scrolly Telling, beispielsweise für die neue Generation der airPods Pro, vor: jedes neue Scrollen begeistert. Auch Instagram bietet in den Stories gute Animationen und 3D-Cube-Effekte beim swipen, um User ein gutes Erlebnis zu bieten. 

Tipp 6: Cognitive Load senken

Webanimationen helfen euch dabei, Inhalte dynamisch, gezielt und mit einem angemessenen Informationsgehalt bereitzustellen. So könnt ihr eine kognitive (Über)Belastung euer User proaktiv vermeiden.

Warum das wichtig ist?

Der durchschnittliche Smartphone-User nutzt 30 Apps monatlich und neun täglich. Wenn Apps und Websites häufiger genutzt werden sollen, müssen eure User also schnell verstehen, wie man sie bedient.

Motion Design braucht Strategie

Der altbekannte Spruch »Weniger ist mehr« hat auch im Rahmen von Motion Design eine besonders wichtige Bedeutung. Zu viel Bewegung kann Design extrem unruhig erscheinen lassen und wird eure Zielgruppe am Ende nur mehr verwirren, als ihnen eine echte Hilfe zu sein.

Ihr solltet Animationen daher immer gut durchdenken, zielgerichtet und stets mit einem tatsächlichen Mehrwert vor Augen zum Einsatz bringen.

Andernfalls besteht die Gefahr, dass das genaue Gegenteil erreicht wird – was uns zum letzten, aber auch extrem wichtigen Punkt führt, den wir unbedingt noch erwähnen möchten.

Und zwar das Thema Accessibility. Hier gilt zu beachten: Menschen mit gewissen Vorerkrankungen können sich von Bewegung, besonders wenn sie zu häufig, zu intensiv und einfach unüberlegt zum Einsatz kommt, extrem gestört fühlen und sind unter Umständen sogar dem Risiko ausgesetzt, körperlich zu leiden.

Eine Funktion, um Animationen zu stoppen oder global zu deaktivieren sollte deshalb immer mitgedacht werden. Falls ihr mehr zum Thema Accessibility erfahren möchtet, schaut doch gerne in den Artikel zur Digitalen Barrierefreiheit. 

Wer heutzutage wirklich hochwertige, ansprechende und besonders nutzerfreundliche Erlebnisse in der digitalen Welt schaffen möchte, der kommt am Thema UX und Usability nicht vorbei.

Motion Design ist dabei in vielen Branchen noch ein recht junger Bereich. Macht euch das zunutze. Ausreichend gute Gründe, warum es sich für euch lohnt, damit zu arbeiten, haben wir euch heute hier gemeinsam mit unseren UX- und Usability Expertinnen und Experten zusammengefasst.

Noch mehr zum Thema UX und Usability findet ihr hier: UX-Design – Erfolgreich & nutzerzentriert umsetzen | dotSource

 
Wir haben mit dem Bewegtthema was bewegt? Dann meldet euch gern, um gemeinsam herauszufinden, welche Webanimationen für euch in Frage kommen und wie ihr sie in euren Markenauftritt integrieren könnt.

Webanimation in der Praxis: TEAG Success Story jetzt kostenfrei herunterladen

Hubärt ist ein Markenbotschafter der ganz besonderen Art. Für den Energieversorger TEAG vermittelt er Nutzenden auf allen digitalen Kanälen wertvolle Inhalte rund um die Themen Energie, Nachhaltigkeit und Gesundheit. Und das auch in Bewegung. Erfahrt in der Success Story »Multistream-Projekt für Energieversorger, wie Hubärt entsatnden ist und warum es sich lohnt, auf eine moderne UXD- und Usability-Strategie zu setzen, um

• eure digitale Reichweite und Conversion-Rate zu erhöhen
• mit unterhaltsamer und informativer Social-Media-Kommunikation eure Kundenbindung zu steigern
• eure Produkt-Kampagne mit maßgeschneidertem crossmedialem Marketing erfolgreich zu machen

Füllt jetzt das Formular aus und erhaltet die Success Story kostenfrei in euer Postfach!