Zu unserer großen Freude durften wir auf dem UXcamp Europe 2011 miterleben, wie unser animierter Facility Management Prototyp und der zugrundliegende Blog-Artikel als Referenz- und Anschauungsmaterial verwendet wurden. Aufgrund des offensichtlichen Interesses, widmet sich dieser Artikel erneut dem Thema und fokussiert dabei vorwiegend auf wissenschaftliche Betrachtungen der letzten Jahre.
Animationen sind heutzutage aus modernen Applikationen vor allem auf mobilen Endgeräten wie iPhone und Co. kaum noch wegzudenken. In diesem Sinne erstaunt es aber, dass die Forschung auf diesem Gebiet nach wie vor in den Kinderschuhen steckt, und dass die wenigen existierenden Forschungsansätze sich zumeist vage auf Animationstechniken der Trickfilmindustrie begründen. Dabei können gerade unüberlegte oder laienhafte Entscheidungen bei der Auswahl und Gestaltung von Animationen ein User Interface im wahrsten Sinne des Wortes lahmlegen.
Forschung
Die Bedeutung von Bewegung als Kodierungsmechanismus ist seit jeher für den Menschen von kritischster Wichtigkeit. Ihre Schnelligkeit und Frequenz helfen uns dabei, sie zu interpretieren und entsprechende Schlussfolgerungen zu ziehen. Sie transportieren also Nachrichten – das heißt eine tanzende Bewegung lässt dementsprechend andere Implikationen zu als eine hektische oder schnelle. Heider und Simmel konnten Mitte der 40er diesen Zusammenhang bereits sehr schön verdeutlichen, als abstrakten Objekte in einem Animationsfilm, plötzlich personenähnliche Züge und Eigenschaften durch den Zuschauer zugeschrieben wurden.
Bewegungen rufen weiterhin Orientierungsreaktionen hervor und können 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 können, da Änderungen im UI effizient kommuniziert werden (Bederson, 2004). Das ist zum Beispiel der Fall, wenn Controls auf dem UI hinzukommen oder verschwinden. Diese Änderungen können bereits sehr früh wahrgenommen und zum Teil „präattentiv“ verarbeitet werden (Bartram, 2001). Übersetzen lässt sich der Begriff „präattentiv“ 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äattentiv wahrgenommen werden, da es die visuelle Eigenschaft „gelb“ besitzt.
Wenn also, um es in der Sprache eines Informatikers zu erklären, die Festplatte unser Langzeitgedächtnis ist mit langsamen aber sicherem Zugriff, und der RAM unser Kurzzeitgedächtnis schneller aber flüchtig, dann entspricht die Grafikkarte präattentiver Verarbeitung, da sie Daten rapide und ohne Rückgriff auf eben genannte Hardware bearbeitet.
Auch Bewegungen und ihre Wahrnehmung können durch die diesem Phänomen zugrundeliegenden Mechanismen verarbeitet werden, wobei es hier unterschiedliche Schichten gibt, die in jedem Fall Spielraum für Diskussionen bieten. Unterm Strich können Animationen aber in jedem Fall effiziente „pop out“ Effekte gewährleisten, insbesondere auf unübersichtlichen UIs (Bartram, 2001).
Andere interessante Ansätze postulieren, dass Animationen den Nutzer in seiner räumlichen Wahrnehmung bestärken. In der natürlichen Umwelt helfen Umgebungs- und Eigenbewegungen dem Menschen ein räumliches 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ünstigt (Boltman & Bederson, 1998).
Auch die Aufrechterhaltung des „Flow“ wurde diskutiert, vor allem im Hinblick auf die Ermöglichung fließender Übergänge bei aus technischen Gründen verlangsamt reagierenden UIs (Huhtala, Sarjanoja, Mäntyjärvi, Isomursu, & Häkkilä, 2010).
Die Komplexität einer Animation
Soweit so gut. Aber wie soll jetzt eine Animation genau aussehen, um die skizzierten Vorteile zugänglich zu machen? Dazu muss man sich zunächst darüber klar werden, dass Animationen komplexe Phänomene sind, bei deren Ausgestaltung es eine Vielzahl von Einflussfaktoren zu berücksichtigen gilt. Diese zu beachtenden Faktoren lassen sich grob in die drei Kategorien Mensch, Computer und Interaktion einordnen. Mit Blick auf den Menschen, das heißt den User einer Anwendung, müssen Expertise und Erfahrung mit der IT und der Anwendung selber einbezogen werden. Durch das Aufgreifen des entsprechenden mentalen Modells kann eine Animation weiterhin das Verständnis erleichtern– so orientieren sich die Animationen eines eBook-Readers an der realen Vorlage (e.g. page curl). An dieser Stelle lässt sich sicherlich darüber diskutieren, ob eine realitätsgetreue Nachbildung (Skeuomorph) die Innovation schmälert und damit neue, vielleicht bessere Konzepte von vorneherein ausschließt. In der Essenz geht es aber nur darum, dass eine Animation glaubhaft, natürlich und „organisch“ wirkt und sich deshalb Objekte auf dem UI entsprechend ihrer physischen Substanz verhalten.
Im 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öße des Bildschirms. Naturgemäß 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älle ergeben.
Nicht zuletzt wird auch die Art der Interaktion einen wesentlichen Einfluss auf die Gestalt der Animation haben. Dabei ist zum einen der Nutzungskontext zu klären. Während im Bereich „Entertainment“ auch ausufernde und komplexe Animationen zum Einsatz kommen können, 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önnten potenzielle Ziele „Orientierung verbessern“ oder „zusätzlichen Hinweisreiz liefern“ sein. Der Einsatz von Animationen um ihrer selbst willen ist deshalb der Spielebranche vorenthalten; für das Erstellen von UIs gilt: Der erste Schritt zu einer guten Animation ist es, ihr Ziel zu definieren.
Motion Design: Das Design von Animationen
Immer mehr Kunden von Centigrade entscheiden sich für die Dienstleistung des „Motion Designs“, also der Gestaltung von Animationen im Hinblick auf ein gewisses Ziel. Folgendes Projekt beispielsweise setzt Animationen ein, um trotz des geringen Platzes auf dem Touchscreen Monitor (7“) immer noch eine gute Orientierung im UI zu bieten: es werden flüssig solche Elemente ein- und ausgeblendet, die in einem bestimmten Kontext auch notwendig sind.
Animationen können auch als primäre Design Dimension verwendet werden, wie das nachfolgende Video zeigt. Die Motion Design Studie für den Bereich Human Resource Management erhöht durch das reduzierte visuelle Design die Wahrnehmung und Wirkung der angewendeten Animation. Dem Human Resource Manager werden durch Animationen vorwiegend Zusammenhänge und Abhängigkeiten auf verständliche und intuitive Art und Weise aufgezeigt.
Bei der Gestaltung der Animation selbst ist es sinnvoll, zwischen Makro- und Mikro-Animation zu unterscheiden, je nachdem ob die Animation einen komplexen Screen-Übergang begleitet oder nur ein einzelnes Widget verschwinden lässt. Darüber hinaus gibt es eine Reihe von perzeptuellen Charakteristika oder Dimensionen einer Animation, wie die Dauer, Geschwindigkeit, Richtung und Modalität, sowie die räumliche Ausdehnung, Synchronisierung und Kategorie. Verfeinert werden kann im Anschluss außerdem durch die Verwendung einer Easing-Funktion.
An dieser Stelle existiert eine ganze Reihe von Handlungsanweisungen. So wird beispielsweise in einem Artikel auf MSDN empfohlen, den kürzesten Weg zwischen zwei Punkten als Animationspfad zu wählen. Die Animation beim Löschen einer Datei auf dem Mac OS X verstößt allerdings gegen diese Empfehlung, und inszeniert die Animation in einem Bogen. Auch der berüchtigte Genie-Effekt überschreitet mit einer Laufzeit von etwa einer Sekunde, ebenfalls die im MSDN Artikel empfohlene Dauer von unter 200ms maßgeblich. Trotz allem würde man in beiden Fällen von einer „guten“ Animation sprechen (auch ohne die Annahme zu treffen, Mac User hätten schlicht und ergreifend einfach mehr Zeit).
Die Begründung liegt natürlich auf der Hand: neben dem Zweck ein UI verständlicher und flüssiger erscheinen zu lassen, können Animationen einer Software Persönlichkeit, Charakter und Style vermitteln. Eine neuere Studie von Parker und Lee (2010) weißt sogar darauf hin, dass sie eine affektive Komponente beinhalten können. Damit bildet dieser Aspekt eine mögliche – und verhältnismäßig mächtige – Zieldefinition ab: „Persönlichkeit geben und Wiedererkennungswert steigern“.
Und was kommt nun?
Spätestens jetzt befindet sich der Motion Designer aber auf einem schmalen Grat – zwischen der Sicherheit und Konformität einer eindimensionalen, kurzen und subtilen Animation und dem Wunsch nach Ausdruck und Persönlichkeit. Es ist genau diese Stelle an der die Forschung gefordert ist. Viele der weitläufig akzeptierten Konzepte begründen sich zu diesem Zeitpunkt eher auf Alltagspsychologie als auf empirische Wissenschaft, z.B. blinkende Taskbar Icons die den Nutzer über eine Statusänderung notifizieren sollen.
Interessant wäre es vor allem, verschiedene Anwendungsfälle bzw. Interaktionsschemata zu isolieren und zu ergründen, welche Arten von Animationen in einer bestimmten Domäne besonders bzw. weniger vorteilhaft sind. In diesem Sinne geht es z.B. um die Aufstellung eines Animationsvokabulars für verschiedene Branchen oder die Untersuchung von Real World Metaphern in Bezug auf Animationen. Auf der Grundlage eines fundierten und gefestigten Rahmenwerks wäre die Ausarbeitung einer Animation dann um einige Freiheitsgrade vermindert.
Ein passendes Wort zum Abschluss: Die Vorgabe von Design-Richtlinien wird zumeist mit dem Abbau von künstlerischen Freiheiten gleichgesetzt. Was im UI Design aber wirklich zählt ist nicht Kreativität per se, sondern jene die innerhalb der durch das Engineering vorgegeben Grenzen existiert.
Quellen
Bartram, L. R. (2001). Enhancing Information Visualization with Motion.
Bederson, B. (2004). Interfaces for staying in the flow. Ubiquity.
Boltman, A., & Bederson, B. (1998). Does Animation Help Users Build Mental Maps of Spatial Information. HCIL Technical Report.
Faraday, P., & Sutcliffe, A. (1997). Designing effective multimedia presentations. Proceedings of ACM CHI, (S. 272–279).
Heider, F. &. Simmel, M (1944). An experimental study of apparent behavior. American Journal of Psychology, S. 243–259.
Huhtala, J., Sarjanoja, A.-H., Mäntyjärvi, J., Isomursu, M., & Häkkilä, J. (2010). Animated UI transitions and perception of time: a user study on animated effects on a mobile screen. CHI, (S. 1339-1342).
msdn. (2011). Animations and Transitions. Abgerufen am 29. 7 2011 von http://msdn.microsoft.com/en-us/library/aa511285.aspx
Park, D., & Lee, J.-H. (2010). Investigating the Affective Quality of Motion in User Interfaces to Improve User Experience. ICEC , 67-78.
