{"id":9386,"date":"2019-01-24T08:23:24","date_gmt":"2019-01-24T07:23:24","guid":{"rendered":"https:\/\/www.centigrade.de\/blog\/?p=9386"},"modified":"2020-02-20T10:49:10","modified_gmt":"2020-02-20T09:49:10","slug":"spezifizieren-von-animationen-dos-and-donts","status":"publish","type":"blog","link":"https:\/\/www.centigrade.de\/de\/blog\/spezifizieren-von-animationen-dos-and-donts\/","title":{"rendered":"Spezifikation von Animationen – Do\u2019s and Dont\u2019s"},"content":{"rendered":"

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\u00fcs beim Scrollen zusammen. Auch UX Designer haben Animationen l\u00e4ngst als einen wesentlichen Baustein erkannt mit dem die Usability<\/a> erh\u00f6ht und der Nutzer begeistert werden kann.<\/p>\n

<\/p>\n

Als Visual Designer setze ich mich seit einigen Jahren vermehrt mit dem Thema auseinander. In meiner pers\u00f6nlichen Erfahrung hat sich die \u00dcbergabe 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 \u00fcbersetzen. \u00dcbergabeform und Art der Spezifizierung beeinflussen die Effizienz in der Umsetzung und Implementierung ma\u00dfgeblich. Das kann sowohl f\u00fcr die beteiligten Entwickler als auch Designer frustrierend werden. Wie l\u00e4sst sich das vermeiden?<\/p>\n

\"Positions\u00fcbergang<\/p>\n

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, \u00fcber 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\u00fcberlegungen f\u00fcr die effiziente Spezifikation von Animationen im UX Prozess vor.<\/p>\n

 <\/p>\n

Erste Schritte beim Motion Design: Scribble, Storyboard oder Animatic?<\/h3>\n

Am Anfang jedes Motion Designs stellt sich f\u00fcr uns visuelle Designer die Grundsatzfrage, welche Werkzeuge wir verwenden, um welche Art von Output zu generieren. W\u00e4hrend noch vor einiger Zeit Adobe eine gef\u00fchlte Monopolstellung quer durch alle Designbereiche inne hatte, so fand innerhalb der letzten Jahre ein rapider Wandel statt. Gef\u00fchlt erscheinen jeden Monat neue Programme und Plugins f\u00fcr Prototyping, Animation und UI Design<\/a>. Dementsprechend schwierig f\u00e4llt es mir momentan, mich auf einen spezifischen Workflow festzulegen, der immer f\u00fcr mich funktioniert. Stattdessen verwende ich zur Zeit unterschiedliche Tools \u2013 je nach Anwendungsfall. Sicher hat es sich f\u00fcr mich jedoch bew\u00e4hrt, 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\u00fcr mich funktioniert, wie vorgestellt und kann sie im Anschluss zur besseren Kommunikation mit den Stakeholdern nutzen.<\/p>\n

 <\/p>\n

Pr\u00e4zise Informationen liefern<\/h3>\n

Bei der \u00dcbergabe zum Entwickler ist es aber keineswegs ausreichend, eine Animation in Form eines Videos oder einer Bildsequenz zu \u00fcberliefern. Der Entwickler kann zwar versuchen, nach Augenma\u00df die Animation zu \u00fcbersetzen, dies wird aber oft zu R\u00fcckfragen und Missverst\u00e4ndnissen f\u00fchren. Es ist deshalb wichtig, zus\u00e4tzliche, m\u00f6glichst klar definierte, pr\u00e4zise Informationen in einer f\u00fcr den Entwickler verst\u00e4ndlichen Sprache zu liefern. Wie ich zeigen werde, hat das auch einen zus\u00e4tzlichen Mehrwert f\u00fcr mich als visuellen Designer. Gutes Motion Design erf\u00fcllt einen Zweck, liefert Feedback, erz\u00e4hlt eine Geschichte und reflektiert das Produkt. Aus diesen Gr\u00fcnden ist es sinnvoll auch Grundsatzgedanken beim Erstellen von Animationen zu treffen, Metaphern zu verwenden, Pattern zu erstellen und Regeln zu entwickeln.<\/p>\n

Welche Erwartungen hat der Nutzer von einem Objekt und dessen Verhalten. Wie unterst\u00fctze ich ihn bei der F\u00fchrung durch das Interface und sorge f\u00fcr Kontinuit\u00e4t durch mein Produkt? Beispielsweise k\u00f6nnen Animationen als Orientierungshilfe zur besseren Koordination des strukturellen Aufbaus meiner App beitragen oder mir direktes Feedback liefern, ob eine Aktion ausgef\u00fchrt wurde.<\/p>\n

\"Animationen<\/p>\n

Bildschirm\u00fcberg\u00e4nge nach rechts und links k\u00f6nnen mir signalisieren, dass ich eine Ebene tiefer oder h\u00f6her navigiere und meiner App so eine physikalischere Anmutung beschaffen. Welche Regeln kann ich hieraus bez\u00fcglich Easing-Verhalten und Animationsdauer allgemeing\u00fcltig definieren?<\/p>\n

\"Bildschirm\u00fcberg\u00e4nge<\/p>\n

Objekte k\u00f6nnen anhand einer Zeitverz\u00f6gerung 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?<\/p>\n

So entsteht bereits zu Beginn eines Projektes ein festes Konstrukt von in sich konsistenten Elementen und Regeln, die im Folgenden als Grundger\u00fcst f\u00fcr alle Animationen fungieren. Des Weiteren ist es sinnvoll, vorab eine Bibliothek verschiedener zeitlicher Verhaltensmuster zu definieren auf die anschlie\u00dfend nur noch referenziert wird. Anstatt f\u00fcr jede Animation eine eigene Easing-Kurve mitzuliefern erstelle ich mir vorher ein Set verschiedener Kurven, auf die ich anschlie\u00dfend beziehe. Gleiches kann f\u00fcr Animationszeitspannen, Verz\u00f6gerungen, Wiederholungen und Ausl\u00f6ser der Animation vorgenommen werden.<\/p>\n

Beim Spezifizieren einer Animation werden alle sich \u00e4ndernden Parameter in ihrem zeitlichen Verhalten m\u00f6glichst genau bestimmt und erfasst.<\/p>\n

 <\/p>\n

Parameter bei Animationen<\/h3>\n

\"Parameter<\/p>\n

\"Parameter<\/p>\n

Ausgangspunkt \u2013 Startpunkt der Animation, Standard = Mittelpunkt des Elements<\/p>\n

Deckkraft – von 0% – 100%<\/p>\n

Gr\u00f6\u00dfe \u2013 Angabe von Breite und H\u00f6he<\/p>\n

Translation \u2013 Relative oder absolute Position des Elements mit x und y Koordinaten (Achtung: Falls das Element sich nicht linear bewegen soll, m\u00fcssen zus\u00e4tzlich Informationen mitgegeben werden z.B. Storyboard)<\/p>\n

Rotation \u2013 Gradzahl vom Rotationspunkt<\/p>\n

Farbe \u2013 \u00dcbergang von Farbe 1 zu Farbe 2<\/p>\n

Ausl\u00f6ser der Animation \u2013 OnClick, Hover, Scroll-Position \u2026<\/p>\n

 <\/p>\n

\u00dcbergabe von UI Animationen<\/h3>\n

Ausschlaggebend f\u00fcr die Art der \u00dcbergabe ist letztendlich die Gr\u00f6\u00dfe des Mehraufwands f\u00fcr die Spezifizierung im Verh\u00e4ltnis zum eigentlichen Mehrwert, den der Designer oder der Entwickler dadurch erh\u00e4lt. Prinzipiell sollte die reine Textform zur Beschreibung einer Vielzahl von Animationen ausreichen und deshalb auch die bevorzugte Methode sein. In einzelnen komplexen F\u00e4llen jedoch wie beispielsweise das Morphen oder Verschmelzen von geometrischen Formen wird oft noch eine zus\u00e4tzliche Beschreibung anhand eines Storyboards oder \u00c4hnlichem ben\u00f6tigt.<\/p>\n

\"Positions\u00fcbergang<\/p>\n

Die Spezifikation in reiner Textform zu dieser Animation k\u00f6nnte wie folgt aussehen:<\/p>\n

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

Dies ist allerdings ein sehr einfach gestricktes Beispiel. Je nach Komplexit\u00e4t der Animation wird der Textoutput auch wesentlich l\u00e4nger ausfallen und schwieriger zu strukturieren sein.<\/p>\n

 <\/p>\n

Fazit<\/h3>\n

Animationen sind heute ein fundamentaler Baustein von UX Design<\/a> und es ist wichtig f\u00fcr uns Designer, ein Gef\u00fchl f\u00fcr den richtigen Umgang damit zu entwickeln. Das Entwickeln von Regeln und Grunds\u00e4tzen und eine gezielte Intention hinter jeder Animation ist ebenso Voraussetzung, wie die gezielte Entscheidung auf eine Animation gegebenenfalls zu verzichten. Grundlage f\u00fcr 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\u00f6glich gestalten zu k\u00f6nnen. 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.<\/p>\n","protected":false},"author":58,"featured_media":9444,"template":"","tags":[543,559,581,598,84,62],"class_list":["post-9386","blog","type-blog","status-publish","has-post-thumbnail","hentry","tag-animation","tag-animation-design","tag-animationen-spezifizieren","tag-design-de","tag-prototyping-de","tag-visuelles-design"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/blog\/9386","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/types\/blog"}],"author":[{"embeddable":true,"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/users\/58"}],"version-history":[{"count":2,"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/blog\/9386\/revisions"}],"predecessor-version":[{"id":11387,"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/blog\/9386\/revisions\/11387"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/media\/9444"}],"wp:attachment":[{"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/media?parent=9386"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/tags?post=9386"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}