Wie Animationen unsere Wahrnehmung beeinflussen
In einem Punkt sind sich Befürworter und Gegner von "Motion Design", also dem Integrieren animierter Elemente in eine Nutzeroberfläche, einig: Animationen schaffen Aufmerksamkeit. Der Grund hier für liegt in der natürlich angelegten Neugier des Menschen allen kinetischen Phänomenen gegenüber, also allen Dingen, die sich bewegen. Somit entfalten Bewegungen eine Sogwirkung, der wir uns kaum entziehen können.
Im Design für digitale Produkte hielten Animationen und die Disziplin des Motion Designs aus unterschiedlichen Gründen Einzug:
- Animationen können Nutzeroberflächen bereichern, wenn sie eine unmittelbar erlebbare Interaktivität abbilden sowie visuelles Feedback anschaulicher darstellen als statische Elemente.
- Komplexe Prozesse, Ideen und Konzepte können mithilfe von Animationen verständlicher illustriert werden, z. B. wenn es darum geht, die Beziehung oder Wechselwirkung zwischen verschiedenen Dingen darzustellen.
- Animationen können auch das Verhalten von realen, physischen Objekten widerspiegeln und Nutzeroberflächen so vertrauter und intuitiver wirken lassen.
- Als Folge der vorgenannten Punkte können Animationen die kognitive Belastung reduzieren, die bei der Benutzung der Website oder App entsteht.
- Und letztendlich können Animationen auch Emotionen hervorrufen oder bestärken: positive Emotionen wie Freude oder Befriedigung – aber auch negative wie Irritation oder gar Ärger.
Der Vormarsch der Feder-Animationen
Vor etwa fünfzehn Jahren begannen Software-Entwickler, vor allem in den USA, sogenannte "spring animations", also Feder-Animationen, einzusetzen. Das Konzept beruht auf dem Verhalten von Stahlfedern (und anderen physischen Objekten) in der realen Welt, versucht also, kinetische Gesetze auch in der digitalen Welt abzubilden. Ein populäres Beispiel befand sich auf dem iPhone, dessen Software (erst iPhone OS, dann iOS genannt) ein neues Verhalten von Listen beinhaltete: Wenn man bei einer Liste herunterscrollte und am Ende angekommen war, stoppte sie nicht abrupt, sondern federte elastisch zurück, als wäre sie mit einem Gummiband fixiert.
Dieser und andere Effekte machten aus der Nutzeroberfläche des iPhones ein besonders nahbares und vertrauenserweckendes Erlebnis, das auch von der Konkurrenz wahrgenommen und schon bald übernommen wurde.
Seitdem sind Feder-Animationen ein weitverbreitetes Einsatzmittel bei digitalen Lösungen. Apple selbst hat kürzlich auf seiner Entwicklerkonferenz WWDC Empfehlungen für den Einsatz von Feder-Animationen kommuniziert. Dabei werden drei Hauptkategorien definiert:
- Sprünge (engl. "Bounces): Mithilfe von Federn können Sprünge animiert werden, die natürlich und realistisch wirken.
- Verzögerungen (engl. "Drag"): Damit werden die Bewegungen von Objekten verlangsamt.
- Elastizität (engl. "Springiness"): In diese Kategorie fallen alle Animationen, die Objekte biegsam bzw. formbar erscheinen lassen, also weniger starr und unbeweglich. Das Beispiel der Listen in iOS gehört dazu.
Wie man Feder-Animationen richtig einsetzt
Mit diesen positiven Eigenschaften des Motion-Designs können Websites und Apps aufgewertet werden:
- Intuitivere Bedienung: Weil Feder-Animationen die kinetischen Gesetze der physischen Welt imitieren, wirken sie vertraut und verleihen damit der Oberfläche selbst den Eindruck, intuitiv bedienbar zu sein.
- Weichere Übergänge und Verläufe: Mithilfe von Feder-Animationen kann das Interaction-Design weich und flüssig gestaltet werden, also ohne abrupte und unnatürlich wirkende Einblendungen von Elementen.
- Aufmerksamkeit für Wichtiges: Eingangs haben wir beschrieben, dass Animationen ein Aufmerksamkeitsmagnet sind. Dies kann man im Sinne der Nutzer·innen einsetzen, indem Dinge, die für sie wichtig sind, mithilfe von Animationen hervorgehoben werden.
- Freude und Spaß: Animationen können so gestaltet sein, dass sie sowohl funktional sinnvoll sind als auch positive Emotionen hervorrufen: Richtig und sparsam eingesetzt, können sie dazu beitragen, dass die Benutzung der Website oder App noch mehr Spaß macht.
Die kognitive Psychologie der Animationen
Aus der Perspektive der kognitiven Psychologie kann man Feder-Animationen als eine Nutzung des Mechanismus verstehen, mit dem unser Gehirn Bewegungsabläufe verarbeitet: Wenn wir sehen, dass sich etwas bewegt, stellt unser Gehirn automatisch Vorhersagen darüber auf, wohin sich dieses Objekt bewegt. Dies erlaubt es uns, reaktionsschnell auf spontan entstehende Situationen zu reagieren. Folgende Aspekte sind dabei ausschlaggebend:
1. Mentale Modelle
Dass wir Feder-Animationen als vertraut empfinden und wir in ihnen das Verhalten von Gegenständen in der physischen Welt wiedererkennen, liegt an der Fähigkeit des Gehirns, "mentale Modelle" zu erstellen. Dies sind Muster von bekannten Phänomenen, die das Gehirn, quasi als kognitive Abkürzungen, auf neue, aber ähnlich wirkende, Situationen oder Phänomene anwendet.
2. Aufmerksamkeit und Gedächtnis
Dadurch, dass sich bewegende Objekte unsere Aufmerksamkeit auf sich ziehen, bleiben Informationen, z. B. in Form von Bildern oder Texten, die Teil der Animation sind, auch stärker im Gedächtnis. Dies kann man z. B. gut in der Navigation der Website oder App nutzen, um Nutzer·innen zu helfen, sich noch schneller zurechtzufinden und sich zu merken, wo sie was finden können.
3. Visuelle Reize
Studien haben gezeigt, dass bereitssehr subtile Bewegungen als visueller Reiz genügen, um vom Auge als auffällig wahrgenommen zu werden. Daher ist es für die Gestaltung desMotion-Design wichtig, den Reiz nicht stärker als nötig auszuspielen. Beispiel: Wenn es bei einer App eine Glocke als Symbol für Benachrichtigungen gibt, genügt eine kurze Bewegung, die das Läuten der Glocke imitiert, um zu signalisieren, dass es neue Benachrichtigungen gibt.
4. Engagement und Vertiefung
Der psychologische Begriff "Flow" beschreibt einen Zustand von hohem Engagement und innerer Vertiefung in eine Sache. Feder-Animationen können durch ihre aufmerksamkeitslenkende Funktion wirksam dazu beitragen, dass Menschen in einer App einen Flow-Zustand erreichen und in ihm verharren.
5. Emotionale Einflüsse
Auch auf dem Gebiet der kognitiven Psychologie ist es längst kein Geheimnis mehr, dass Emotionen unser Verhalten und unsere Entscheidungen weitaus stärker beeinflussen als kognitive Denkprozesse. Gutes Motion-Design nutzt Animationen daher auch, um positive Emotionen bei der Benutzung der App oder Software hervorzurufen und damit das Nutzererlebnis auch in emotionaler Hinsicht aufzuwerten.
Fazit
Feder-Animationen sind wie alle guten Werkzeuge: Sie können verwendet werden, um Apps und Software im Sinne der Nutzer·innen zu verbessern und deren Nutzererlebnis auf eine ganz neue Stufe zu heben – aber sie können leider auch benutzt werden, um abzulenken, zu verführen und zu täuschen. Es liegt an uns als Produkt- und UX-Verantwortliche, dafür zu sorgen, dass dieses Werkzeug – und all die anderen Werkzeuge, die man für die Entwicklung digitaler Produkte nutzen kann – immer den Menschen zugutekommt, die damit interagieren.