Cookies helfen uns bei der Bereitstellung unserer Dienste. Durch die Nutzung unserer Dienste erklären Sie sich damit einverstanden, dass wir Cookies setzen. Mehr erfahren.

Close

Über den Tellerrand geschaut

Spezifizieren von Animationen – Do’s and Dont’s

Marius Hubertus

Motion Design, also das Animieren digitaler Inhalte, ist aus unserer heutigen modernen Interaktion mit Computern nicht mehr wegzudenken. Wo immer man in modernen Anwendungen hinsieht, fliegen Textboxen durch die Gegend, ploppen Elemente auf und schrumpfen Menüs beim Scrollen zusammen. Auch UX Designer haben Animationen längst als einen wesentlichen Baustein erkannt mit dem die Usability erhöht und der Nutzer begeistert werden kann.

Als Visual Designer setze ich mich seit einigen Jahren vermehrt mit dem Thema auseinander. In meiner persönlichen Erfahrung hat sich die Übergabe von Design zur Entwicklung als kritische Schnittstelle herauskristallisiert. Wie sich herausgestellt hat, ist es gar nicht mal so einfach, die abstrakte Idee einer Bewegung aus dem Kopf eines Designers in eine sehr reale Anwendung zu übersetzen. Übergabeform und Art der Spezifizierung beeinflussen die Effizienz in der Umsetzung und Implementierung maßgeblich. Das kann sowohl für die beteiligten Entwickler als auch Designer frustrierend werden. Wie lässt sich das vermeiden?

Positionsübergang beim Motion Design von Animationen

Designer arbeiten teils sehr unterschiedlich bei der Integration von Motion Design in ihre Arbeiten. Neben diversen unterschiedlichen Tools (z.B. After Effects, Protio.io, Kite Composer, Framer, Flinto, Principle) kann der Output von losen Scribbles, über Storyboards bis hin zu Frame genauen Animatics variieren. Um trotz all der variablen Faktoren die Kommunikation zwischen Entwicklung und Design zu erleichtern, stelle ich im Folgenden einige Richtlinien und Grundsatzüberlegungen für die effiziente Spezifikation von Animationen im UX Prozess vor.

 

Erste Schritte beim Motion Design: Scribble, Storyboard oder Animatic?

Am Anfang jedes Motion Designs stellt sich für uns visuelle Designer die Grundsatzfrage, welche Werkzeuge wir verwenden, um welche Art von Output zu generieren. Während noch vor einiger Zeit Adobe eine gefühlte Monopolstellung quer durch alle Designbereiche inne hatte, so fand innerhalb der letzten Jahre ein rapider Wandel statt. Gefühlt erscheinen jeden Monat neue Programme und Plugins für Prototyping, Animation und UI Design. Dementsprechend schwierig fällt es mir momentan, mich auf einen spezifischen Workflow festzulegen, der immer für mich funktioniert. Stattdessen verwende ich zur Zeit unterschiedliche Tools – je nach Anwendungsfall. Sicher hat es sich für mich jedoch bewährt, ausdefinierte Animationen und Prototypen zu erstellen anstatt loser Scribbles oder Storyboards. Das hat einen doppelten Mehrwert: Ich kann validieren, ob die Animation so wirklich für mich funktioniert, wie vorgestellt und kann sie im Anschluss zur besseren Kommunikation mit den Stakeholdern nutzen.

 

Präzise Informationen liefern

Bei der Übergabe zum Entwickler ist es aber keineswegs ausreichend, eine Animation in Form eines Videos oder einer Bildsequenz zu überliefern. Der Entwickler kann zwar versuchen, nach Augenmaß die Animation zu übersetzen, dies wird aber oft zu Rückfragen und Missverständnissen führen. Es ist deshalb wichtig, zusätzliche, möglichst klar definierte, präzise Informationen in einer für den Entwickler verständlichen Sprache zu liefern. Wie ich zeigen werde, hat das auch einen zusätzlichen Mehrwert für mich als visuellen Designer. Gutes Motion Design erfüllt einen Zweck, liefert Feedback, erzählt eine Geschichte und reflektiert das Produkt. Aus diesen Gründen ist es sinnvoll auch Grundsatzgedanken beim Erstellen von Animationen zu treffen, Metaphern zu verwenden, Pattern zu erstellen und Regeln zu entwickeln.

Welche Erwartungen hat der Nutzer von einem Objekt und dessen Verhalten. Wie unterstütze ich ihn bei der Führung durch das Interface und sorge für Kontinuität durch mein Produkt? Beispielsweise können Animationen als Orientierungshilfe zur besseren Koordination des strukturellen Aufbaus meiner App beitragen oder mir direktes Feedback liefern, ob eine Aktion ausgeführt wurde.

Animationen als Orientierungshilfe

Bildschirmübergänge nach rechts und links können mir signalisieren, dass ich eine Ebene tiefer oder höher navigiere und meiner App so eine physikalischere Anmutung beschaffen. Welche Regeln kann ich hieraus bezüglich Easing-Verhalten und Animationsdauer allgemeingültig definieren?

Bildschirmübergänge bei Animationen

Objekte können anhand einer Zeitverzögerung voneinander separiert werden um darauf aufmerksam zu machen, das mit ihnen individuell interagiert werden kann. Wie differenziere ich zwischen interaktiven und nicht interaktiven Objekten und wie gestaltet sich das Interaktionsfeedback?

So entsteht bereits zu Beginn eines Projektes ein festes Konstrukt von in sich konsistenten Elementen und Regeln, die im Folgenden als Grundgerüst für alle Animationen fungieren. Des Weiteren ist es sinnvoll, vorab eine Bibliothek verschiedener zeitlicher Verhaltensmuster zu definieren auf die anschließend nur noch referenziert wird. Anstatt für jede Animation eine eigene Easing-Kurve mitzuliefern erstelle ich mir vorher ein Set verschiedener Kurven, auf die ich anschließend beziehe. Gleiches kann für Animationszeitspannen, Verzögerungen, Wiederholungen und Auslöser der Animation vorgenommen werden.

Beim Spezifizieren einer Animation werden alle sich ändernden Parameter in ihrem zeitlichen Verhalten möglichst genau bestimmt und erfasst.

 

Parameter bei Animationen

Parameter beim Design von Animationen - Easing

Parameter beim Design von Animationen - Easing Zeitspanne

Ausgangspunkt – Startpunkt der Animation, Standard = Mittelpunkt des Elements

Deckkraft – von 0% – 100%

Größe – Angabe von Breite und Höhe

Translation – Relative oder absolute Position des Elements mit x und y Koordinaten (Achtung: Falls das Element sich nicht linear bewegen soll, müssen zusätzlich Informationen mitgegeben werden z.B. Storyboard)

Rotation – Gradzahl vom Rotationspunkt

Farbe – Übergang von Farbe 1 zu Farbe 2

Auslöser der Animation – OnClick, Hover, Scroll-Position …

 

Übergabe von UI Animationen

Ausschlaggebend für die Art der Übergabe ist letztendlich die Größe des Mehraufwands für die Spezifizierung im Verhältnis zum eigentlichen Mehrwert, den der Designer oder der Entwickler dadurch erhält. Prinzipiell sollte die reine Textform zur Beschreibung einer Vielzahl von Animationen ausreichen und deshalb auch die bevorzugte Methode sein. In einzelnen komplexen Fällen jedoch wie beispielsweise das Morphen oder Verschmelzen von geometrischen Formen wird oft noch eine zusätzliche Beschreibung anhand eines Storyboards oder Ähnlichem benötigt.

Positionsübergang beim Motion Design von Animationen

Die Spezifikation in reiner Textform zu dieser Animation könnte wie folgt aussehen:

on-click, origin-center, duration 200ms, EaseOut, position x485 y354 – x129 y273 (relativ x0 y0 – x40 y80), scale w180 h180 – w580 h580 (relativ w100% h100% – w400% h400%)

Dies ist allerdings ein sehr einfach gestricktes Beispiel. Je nach Komplexität der Animation wird der Textoutput auch wesentlich länger ausfallen und schwieriger zu strukturieren sein.

 

Fazit

Animationen sind heute ein fundamentaler Baustein von UX Design und es ist wichtig für uns Designer, ein Gefühl für den richtigen Umgang damit zu entwickeln. Das Entwickeln von Regeln und Grundsätzen und eine gezielte Intention hinter jeder Animation ist ebenso Voraussetzung, wie die gezielte Entscheidung auf eine Animation gegebenenfalls zu verzichten. Grundlage für ein konstruktives Feedback zwischen uns Designern und bei der Kommunikation mit den Entwicklern ist, dass wir eine gemeinsame Sprache finden, um unsere Zusammenarbeit so angenehm wie möglich gestalten zu können. Bei der momentanen rapiden Entwicklung von Tools und Arbeitspraktiken im Bereich Motion Design bleibt es spannend, ob wir in Zukunft zu einer Standardisierung von Workflow und Spezifizierung gelangen werden.

Möchten Sie mehr zu unseren Leistungen, Produkten oder zu unserem UX-Prozess erfahren?
Wir sind gespannt auf Ihre Anfrage.

Corporate Experience Manager
+49 681 959 3110
Kontaktformular

Bitte bestätigen Sie vor dem Versand Ihrer Anfrage über die obige Checkbox, dass wir Sie kontaktieren dürfen.
  • Saarbrücken

    Science Park Saar, Saarbrücken

    Standort Südwest

    Hauptsitz Saarbrücken
    Centigrade GmbH
    Science Park 2
    66123 Saarbrücken
    Deutschland
    Saarland
    Auf der Karte

    +49 681 959 3110

    +49 681 959 3119

  • Mülheim an der Ruhr

    Games Factory Mülheim an der Ruhr

    Standort Nordwest

    Geschäftsstelle Mülheim
    Centigrade GmbH
    Kreuzstraße 1-3
    45468 Mülheim an der Ruhr
    Deutschland
    Nordrhein-Westfalen
    Auf der Karte

    +49 208 883 672 89

    +49 681 959 3119

  • Haar · München

    Haar / München

    Standort Süd

    Geschäftsstelle München
    Centigrade GmbH
    Bahnhofstraße 18
    85540 Haar · München
    Deutschland
    Bayern
    Auf der Karte

    +49 89 20 96 95 94

    +49 681 959 3119

  • Frankfurt am Main

    Frankfurt am Main

    Standort Mitte

    Geschäftsstelle Frankfurt
    Centigrade GmbH
    Kaiserstraße 61
    60329 Frankfurt am Main
    Deutschland
    Hessen
    Auf der Karte

    +49 69 241 827 91

    +49 681 959 3119