\nBewegungen rufen weiterhin Orientierungsreaktionen <\/strong>hervor und k\u00f6nnen die Aufmerksamkeit lenken – sogar wenn sie nur in der Peripherie der Wahrnehmung stattfinden (Faraday & Sutcliffe, 1997). Es wird deshalb vermutet, dass die richtigen Animationen im digitalen Kontext die kognitive Last des Nutzers verringern<\/strong> k\u00f6nnen, da \u00c4nderungen im UI effizient kommuniziert werden (Bederson, 2004). Das ist zum Beispiel der Fall, wenn Controls auf dem UI hinzukommen oder verschwinden. Diese \u00c4nderungen k\u00f6nnen bereits sehr fr\u00fch wahrgenommen und zum Teil \u201epr\u00e4attentiv\u201c verarbeitet werden (Bartram, 2001). \u00dcbersetzen l\u00e4sst sich der Begriff \u201epr\u00e4attentiv\u201c wie folgt: die Informationsverarbeitung erfolgt rasant, automatisch und parallel. Ein simples Beispiel verdeutlicht den Zusammenhang auf einer anderen Ebene: Das Ziel im unten stehenden Bild kann pr\u00e4attentiv wahrgenommen werden, da es die visuelle Eigenschaft \u201egelb\u201c besitzt.<\/p>\n
![\"\"](\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/preattentive.png\")
<\/p>\n
Wenn also, um es in der Sprache eines Informatikers zu erkl\u00e4ren, die Festplatte unser Langzeitged\u00e4chtnis ist mit langsamen aber sicherem Zugriff, und der RAM unser Kurzzeitged\u00e4chtnis schneller aber fl\u00fcchtig, dann entspricht die Grafikkarte pr\u00e4attentiver Verarbeitung, da sie Daten rapide und ohne R\u00fcckgriff auf eben genannte Hardware bearbeitet. Soweit so gut. Aber wie soll jetzt eine Animation genau aussehen, um die skizzierten Vorteile zug\u00e4nglich zu machen? Dazu muss man sich zun\u00e4chst dar\u00fcber klar werden, dass Animationen komplexe Ph\u00e4nomene sind, bei deren Ausgestaltung es eine Vielzahl von Einflussfaktoren zu ber\u00fccksichtigen gilt. Diese zu beachtenden Faktoren lassen sich grob in die drei Kategorien Mensch, Computer und Interaktion einordnen. Mit Blick auf den Menschen, das hei\u00dft den User einer Anwendung, m\u00fcssen Expertise und Erfahrung mit der IT und der Anwendung selber einbezogen werden.\u00a0Durch das Aufgreifen des entsprechenden mentalen Modells kann eine Animation weiterhin das Verst\u00e4ndnis erleichtern\u2013 so orientieren sich die Animationen eines eBook-Readers an der realen Vorlage (e.g. page curl). An dieser Stelle l\u00e4sst sich sicherlich dar\u00fcber diskutieren, ob eine realit\u00e4tsgetreue Nachbildung (Skeuomorph) die Innovation schm\u00e4lert und damit neue, vielleicht bessere Konzepte von vorneherein ausschlie\u00dft. In der Essenz geht es aber nur darum, dass eine Animation glaubhaft, nat\u00fcrlich und \u201eorganisch\u201c wirkt und sich deshalb Objekte auf dem UI entsprechend ihrer physischen Substanz verhalten. Immer mehr Kunden von Centigrade entscheiden sich f\u00fcr die Dienstleistung des \u201eMotion Designs\u201c, also der Gestaltung von Animationen im Hinblick auf ein gewisses Ziel. Folgendes Projekt<\/a> beispielsweise setzt Animationen ein, um trotz des geringen Platzes auf dem Touchscreen Monitor (7\u201c) immer noch eine gute Orientierung im UI zu bieten: es werden fl\u00fcssig solche Elemente ein- und ausgeblendet, die in einem bestimmten Kontext auch notwendig sind. Sp\u00e4testens jetzt befindet sich der Motion Designer aber auf einem schmalen Grat – zwischen der Sicherheit und Konformit\u00e4t einer eindimensionalen, kurzen und subtilen Animation und dem Wunsch nach Ausdruck und Pers\u00f6nlichkeit. Es ist genau diese Stelle an der die Forschung gefordert ist. Viele der weitl\u00e4ufig akzeptierten Konzepte begr\u00fcnden sich zu diesem Zeitpunkt eher auf Alltagspsychologie als auf empirische Wissenschaft, z.B. blinkende Taskbar Icons die den Nutzer \u00fcber eine Status\u00e4nderung notifizieren sollen. Bartram, L. R. (2001). Enhancing Information Visualization with Motion.<\/p>\n Bederson, B. (2004). Interfaces for staying in the flow. Ubiquity.<\/p>\n Boltman, A., & Bederson, B. (1998). Does Animation Help Users Build Mental Maps of Spatial Information. HCIL Technical Report.<\/p>\n Faraday, P., & Sutcliffe, A. (1997). Designing effective multimedia presentations. Proceedings of ACM CHI, (S. 272\u2013279).<\/p>\n Heider, F. &. Simmel, M (1944). An experimental study of apparent behavior. American Journal of Psychology, S. 243\u2013259.<\/p>\n Huhtala, J., Sarjanoja, A.-H., M\u00e4ntyj\u00e4rvi, J., Isomursu, M., & H\u00e4kkil\u00e4, J. (2010). Animated UI transitions and perception of time: a user study on animated effects on a mobile screen. CHI, (S. 1339-1342).<\/p>\n msdn. (2011). Animations and Transitions. Abgerufen am 29. 7 2011 von http:\/\/msdn.microsoft.com\/en-us\/library\/aa511285.aspx<\/p>\n Park, D., & Lee, J.-H. (2010). Investigating the Affective Quality of Motion in User Interfaces to Improve User Experience. ICEC , 67-78.<\/p>\n","protected":false},"author":20,"featured_media":0,"template":"","tags":[63,3,139],"class_list":["post-1726","blog","type-blog","status-publish","hentry","tag-animationen","tag-usability","tag-ux"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/blog\/1726","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\/20"}],"version-history":[{"count":3,"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/blog\/1726\/revisions"}],"predecessor-version":[{"id":11281,"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/blog\/1726\/revisions\/11281"}],"wp:attachment":[{"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/media?parent=1726"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/tags?post=1726"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\nAuch Bewegungen und ihre Wahrnehmung k\u00f6nnen durch die diesem Ph\u00e4nomen zugrundeliegenden Mechanismen verarbeitet werden, wobei es hier unterschiedliche Schichten gibt, die in jedem Fall Spielraum f\u00fcr Diskussionen bieten. Unterm Strich k\u00f6nnen Animationen aber in jedem Fall effiziente \u201epop out\u201c Effekte<\/strong> gew\u00e4hrleisten, insbesondere auf un\u00fcbersichtlichen UIs (Bartram, 2001).
\nAndere interessante Ans\u00e4tze postulieren, dass Animationen den Nutzer in seiner r\u00e4umlichen Wahrnehmung<\/strong> best\u00e4rken. In der nat\u00fcrlichen Umwelt helfen Umgebungs- und Eigenbewegungen dem Menschen ein r\u00e4umliches Modell seiner Umgebung aufzubauen. Analog sollen Animationen diesen Effekt im digitalen Kontext erwirken. Durch die gesteigerte Orientierung im UI wird deshalb auch das Merken und Wiederfinden von Funktionen oder Informationen beg\u00fcnstigt (Boltman & Bederson, 1998).
\nAuch die Aufrechterhaltung des \u201eFlow\u201c<\/strong> wurde diskutiert, vor allem im Hinblick auf die Erm\u00f6glichung flie\u00dfender \u00dcberg\u00e4nge bei aus technischen Gr\u00fcnden verlangsamt reagierenden UIs (Huhtala, Sarjanoja, M\u00e4ntyj\u00e4rvi, Isomursu, & H\u00e4kkil\u00e4, 2010).<\/p>\nDie Komplexit\u00e4t einer Animation<\/h3>\n
\nIm Hinblick auf den Computer spielt vor allem die Technik eine entscheidende Rolle. Wichtige Eckpunkte sind an dieser Stelle die Plattform, die Hardware und die Gr\u00f6\u00dfe des Bildschirms. Naturgem\u00e4\u00df wird sich eine Animation auf einem Mobiltelefon von der auf einem Desktop PC unterscheiden, vor allem da sich durch die unterschiedlichen technischen Umgebungen andere Anwendungsf\u00e4lle ergeben.
\nNicht zuletzt wird auch die Art der Interaktion einen wesentlichen Einfluss auf die Gestalt der Animation haben. Dabei ist zum einen der Nutzungskontext zu kl\u00e4ren. W\u00e4hrend im Bereich \u201eEntertainment\u201c auch ausufernde und komplexe Animationen zum Einsatz kommen k\u00f6nnen, sind diese in einer Business Anwendung ein absolutes No-Go. Am wichtigsten ist jedoch die Funktion der Animation und was sie ganz konkret bewirken soll. So k\u00f6nnten potenzielle Ziele \u201eOrientierung verbessern\u201c oder \u201ezus\u00e4tzlichen Hinweisreiz liefern\u201c sein. Der Einsatz von Animationen um ihrer selbst willen ist deshalb der Spielebranche vorenthalten; f\u00fcr das Erstellen von UIs gilt: Der erste Schritt zu einer guten Animation ist es, ihr Ziel zu definieren.<\/p>\nMotion Design: Das Design von Animationen<\/h3>\n
\nAnimationen k\u00f6nnen auch als prim\u00e4re Design Dimension verwendet werden, wie das nachfolgende Video zeigt. Die Motion Design Studie f\u00fcr den Bereich Human Resource Management erh\u00f6ht durch das reduzierte visuelle Design die Wahrnehmung und Wirkung der angewendeten Animation. Dem Human Resource Manager werden durch Animationen vorwiegend Zusammenh\u00e4nge und Abh\u00e4ngigkeiten auf verst\u00e4ndliche und intuitive Art und Weise aufgezeigt.
\nBei der Gestaltung der Animation selbst ist es sinnvoll, zwischen Makro- und Mikro-Animation zu unterscheiden, je nachdem ob die Animation einen komplexen Screen-\u00dcbergang begleitet oder nur ein einzelnes Widget verschwinden l\u00e4sst. Dar\u00fcber hinaus gibt es eine Reihe von perzeptuellen Charakteristika oder Dimensionen einer Animation, wie die Dauer, Geschwindigkeit, Richtung und Modalit\u00e4t, sowie die r\u00e4umliche Ausdehnung, Synchronisierung und Kategorie. Verfeinert werden kann im Anschluss au\u00dferdem durch die Verwendung einer Easing-Funktion.
\nAn dieser Stelle existiert eine ganze Reihe von Handlungsanweisungen. So wird beispielsweise in einem Artikel auf MSDN<\/a> empfohlen, den k\u00fcrzesten Weg zwischen zwei Punkten als Animationspfad zu w\u00e4hlen. Die Animation beim L\u00f6schen einer Datei auf dem Mac OS X verst\u00f6\u00dft allerdings gegen diese Empfehlung, und inszeniert die Animation in einem Bogen. Auch der ber\u00fcchtigte Genie-Effekt \u00fcberschreitet mit einer Laufzeit von etwa einer Sekunde, ebenfalls die im MSDN<\/a> Artikel empfohlene Dauer von unter 200ms ma\u00dfgeblich. Trotz allem w\u00fcrde man in beiden F\u00e4llen von einer \u201eguten\u201c Animation sprechen (auch ohne die Annahme zu treffen, Mac User h\u00e4tten schlicht und ergreifend einfach mehr Zeit).
\nDie Begr\u00fcndung liegt nat\u00fcrlich auf der Hand: neben dem Zweck ein UI verst\u00e4ndlicher und fl\u00fcssiger erscheinen zu lassen, k\u00f6nnen Animationen einer Software Pers\u00f6nlichkeit, Charakter und Style vermitteln. Eine neuere Studie von Parker und Lee (2010) wei\u00dft sogar darauf hin, dass sie eine affektive Komponente beinhalten k\u00f6nnen. Damit bildet dieser Aspekt eine m\u00f6gliche – und verh\u00e4ltnism\u00e4\u00dfig m\u00e4chtige \u2013 Zieldefinition ab: \u201ePers\u00f6nlichkeit geben und Wiedererkennungswert steigern\u201c.<\/p>\nUnd was kommt nun?<\/h3>\n
\nInteressant w\u00e4re es vor allem, verschiedene Anwendungsf\u00e4lle bzw. Interaktionsschemata zu isolieren und zu ergr\u00fcnden, welche Arten von Animationen in einer bestimmten Dom\u00e4ne besonders bzw. weniger vorteilhaft sind. In diesem Sinne geht es z.B. um die Aufstellung eines Animationsvokabulars f\u00fcr verschiedene Branchen oder die Untersuchung von Real World Metaphern in Bezug auf Animationen. Auf der Grundlage eines fundierten und gefestigten Rahmenwerks w\u00e4re die Ausarbeitung einer Animation dann um einige Freiheitsgrade vermindert.
\nEin passendes Wort zum Abschluss: Die Vorgabe von Design-Richtlinien wird zumeist mit dem Abbau von k\u00fcnstlerischen Freiheiten gleichgesetzt. Was im UI Design aber wirklich z\u00e4hlt ist nicht Kreativit\u00e4t per se, sondern jene die innerhalb der durch das Engineering vorgegeben Grenzen existiert.<\/p>\nQuellen<\/h3>\n