Motion Design → (E-)Motion Design

In Digitale Erlebnisse, Interface Design, Tools, User Experience Posted

Aktuell scheint es, als gäbe es für jedes noch so kleinste Alltagsproblem das passende Produkt. Der reale Gebrauchswert tritt dabei immer mehr in den Hintergrund. Gefragt ist, wer auf Emotionen setzt, die sich über verschiedene Faktoren triggern lassen. Das Emotional Design macht bereits vor, wie sich dieser Kniff auch im User Experience Design anwenden lässt. Worauf es dabei ankommt? Bedürfnisse erkennen und diese gezielt ansprechen. Und wie das geht? Beispielsweise über Motion Design.

Die einzigartigen Gestaltungsmöglichkeiten

Das Bewegtbild ermöglicht es dabei nicht nur, dem User Hilfestellung in Sachen Usability zu leisten. Animationen und Co. regen außerdem die Gefühlswelt an und verhelfen, dass sich das Produkt nachhaltig in den Köpfen der Verbraucher verankert. Hier die drei erwähnenswertesten Pluspunkte, die jeden Entwickler davon überzeugen sollten, auch auf Motion Design zu setzen:

1. Den Content lebendig vermitteln

Pluspunkt Nummer 1 in Sachen Motion Design ist natürlich der Fun Factor. Wer freut sich schließlich nicht, wenn nach einer (gefühlt) stundenlangen Wartezeit das Projekt in WeTransfer hochgeladen wurde und die langersehnte Animation inklusive dem bestätigenden „Geschafft!“ aufpoppt.

Sobald Bewegung und visuelles Feedback im Spiel sind, besteht ein emotional fesselnder Bezugspunkt für den Betrachter. In der Anwendung kräftezehrende  Situationen, wie beispielsweise nicht endende Wartezeiten, können so geschickt überwunden werden. Es scheint fast schon zu banal, aber sobald Elemente des Interface Designs wiedererkennbaren Bewegungsabläufen folgen, wird automatisch Empathie geweckt. Spaßig, putzig, humoristisch – egal welche Assoziationen es auch sein mögen. Der User beschäftigt sich aktiv mit der Anwendung. Folglich sinkt auch die Absprungrate auf ein Minimum.

2. Die User Experience unterstützen

Der Einsatz von Motion Design kann einen enormen Mehrwert haben, wenn es um die Optimierung der User Experience geht. Das simple Aus- und Einblenden des Interfaces erfüllt so zwar seinen Zweck, der Nutzer ist in puncto Anwendung aber auch völlig auf sich allein gestellt. Verweise hervorheben, bei welchen Textelementen es sich um einen Link handelt, sind das Mindeste. Die Elemente danach gemäß der Timeline sichtbar zu machen, eine solide nächste Stufe. Die Hauptsache ist deswegen, sich bei der Entwicklung eines Konzepts darüber bewusst zu werden, welche Navigation der User einschlagen könnte und an welchen Schnittstellen Problempotential besteht.

3. Den Produktcharakter schärfen

Motion Design ist weit mehr als die niedlichen Animationen von Disney, Pixar und Co. Das Bewegtbild kann vielmehr den kompletten Charakter eines Produkts widerspiegeln. Ein schönes Beispiel an dieser Stelle ist die Photo-Community 500px. Mit dem Ziel, eine Sharing-Plattform für Profi- und Amateurphotographen zu bieten, um dort eigene Werke hochzuladen und zu teilen, formt das animierte Logo genau die Quintessenz des Netzwerks: ein Kameraobjektiv.

Was es im Motion Design zu beachten gilt

Ähnlich den uns aus dem Alltag bekannten Bewegungsabläufen, sollten natürlich auch die Animationen einen geregelten Charakter haben. Um diese Ordnung im Motion Design herzustellen, gilt es zunächst, auf ein ausgeglichenes Tempo zu achten. Zwischen 200 ms und 500 ms sind optimal, um den Nutzer genügend Zeit zu geben, das Gesehene kognitiv zu verarbeiten. Die Schnelligkeit der Elemente sollte dabei mit der Größe des Objekts korrelieren. Je größer das Objekt, desto langsamer die Bewegung. Ähnlich verhält es sich mit dem Screen: je größer der Screen ist, desto weiter ist die zu überwindende Distanz. Ergo kann das Objekt ohne weiteres à la Ease-In von links nach rechts fliegen, ohne dabei einen Error 404 zu verursachen.

Passend zum Stichwort: im Motion Design kann jeder Objektbewegung ein bestimmter Name zugeordnet werden. Ease-In beschreibt dabei Beschleunigungskurven der Elemente von langsam zu schnell (z.B. wenn das Objekt den Screen verlässt), Ease-Out von schnell zu langsam (z.B. wenn das Objekt in den Screen eintritt. Geregelter verhält es sich mit bei linearen Bewegungsabläufen, welche mit konstanter Geschwindigkeit zu konstanter Zeit ablaufen.

Die gesamte Architektur macht natürlich nur wenig Sinn, wenn die User Journey beim Footer beginnt und beim Header endet. Sobald also Motion Design zum Einsatz kommen soll: die geregelte Ordnung nicht vergessen und den User gezielt zu Konzentrationspunkten navigieren.

Mit dem geeigneten Tool zum Ziel

Um Motion Design sinnvoll nutzen zu können, braucht es kein entsprechendes Studium. Schließlich würden wir nicht in einer durchdigitalisierten Welt leben, wenn es nicht schon längst das passende Tool gäbe.

Die Zusammenhänge sind vielleicht nicht ganz eindeutig, aber die kreativen Köpfe hinter Air BnB haben mit Lottie ein Tool geschaffen, welches eine direkte Verbindung zwischen Animationen aus After Effects und dem finalen Endgerät herstellen kann. Auf diese Weise muss die Animationen lediglich über ein Programm gestaltet werden und kann ohne weitere Umwege über einen zusätzlichen Entwickler in die Anwendung integriert werden.

Und dann kann es eigentlich schon losgehen. Kreativen Ideen werden im Motion Design keine Grenzen gesetzt. Eine gewissen Beziehung zum Produktcharakter sollte natürlich bestehen, but anyway – es zählt was überrascht, fasziniert und sich nachhaltig im Gedächtnis verankert.

• Creating Usability with Motion: The UX in Motion Manifesto uxinmotion.com am 31.03.2017
• Kleine Animation – Große Wirkung nanogiants.de am 28.05.2018
• 45 animierte Logos: Dieser Designtrend bringt Bewegung in dein Logo 99designs.de am 30.06.2019