Blog über Architektur- und Designpsychologie

Interface Design braucht Bewegung

Der Reiz unserer Umwelt besteht darin, dass sie sich bewegt und verändert. Das Gleiche gilt auch für digitale Welten. Eine gezielte Animation von Software und Webseiten kann die User Experience deutlich verbessern.

Moderne Software bietet immer neue Interaktionsmöglichkeiten und Interfaces entwickeln durch Sensoren und Algorithmen ein Eigenleben. Sie bewegen sich, reagieren auf den Nutzer, entwickeln ein Eigenleben. Dass der Nutzer eigentlich auf einen Bildschirm aus vielen kleinen Bildpunkten schaut und mit Programmcode interagiert, rückt dabei in den Hintergrund. Es fühlt sich an, als würde man wirkliche Knöpfe drücken, an Rädern drehen oder Kacheln umher schieben.

Das liegt nicht zuletzt auch an einem erfolgreichen Motion Design. Zu bestimmen, wie ein Interface reagiert und sich bewegt, ist zu einer eigenen Kunstfertigkeit geworden. Doch welche Vorteile bieten bewegte Benutzeroberflächen gegenüber starren? Und wann wird Animation zu einem Störfaktor? In der Psychologie finden sich einige Antworten auf diese Fragen.

Bewegung zieht Aufmerksamkeit auf sich

Bewegung hängt in verschiedener Hinsicht mit Aufmerksamkeit zusammen. Grundsätzlich ziehen Veränderungen in unserem Blickfeld unsere Aufmerksamkeit auf sich. Neben Bewegungen kann das auch eine Veränderung von Helligkeit oder Farbe sein. Gleichförmige Bewegung nehmen wir nicht immer als eine Veränderung wahr. Einen Deckenventilator, der sich mit konstanter Geschwindigkeit dreht, nehmen wir häufig gar nicht wahr. Bleibt er jedoch plötzlich stehen, fällt uns das sofort auf.

Dabei könnte es sich um einen natürlichen Schutzmechanismus handeln. Da die menschliche Aufmerksamkeit begrenzt ist, muss sie gut eingeteilt werden. Veränderungen in unserer Umgebung bedeuten eine neue Situation. Wir richten unsere Aufmerksamkeit automatisch auf sie, um beurteilen zu können, ob sie für uns relevant ist.

Im Kino sind wir von den bewegten Bildern auf der großen Leinwand wie gefesselt.

Im Kino sind wir von den bewegten Bildern auf der großen Leinwand wie gefesselt.

Zum anderen wird unsere Aufmerksamkeit von sich bewegenden Bildern stärker in Bann gezogen als von unbewegten. Ein Fernsehprogramm fesselt unsere Aufmerksamkeit Untersuchungen zufolge mehr, wenn sich auf dem Bild Gegenstände bewegen oder das Bild vergrößert, verkleinert oder verschoben wird. Auch häufige Schnitte zwischen verschiedenen Szenen ziehen uns mehr in den Bann. Diese Technik wird unter anderem bei Trailern und Werbefilmen gerne eingesetzt.

Eine Nutzeroberfläche, die sich verändert und bewegt, kann die Aufmerksamkeit seiner Nutzer also stärker anziehen als eine statische. Verschiedene Fälle zeigen aber auch, dass man mit diesem Effekt vorsichtig umgehen sollte. Werbebanner oder Pop-ups können die Nutzer einer Webseite oder Software ablenken und damit stark frustrieren. Der Microsoft Avatar Clippy ist ein solcher Fall. Eigentlich sollte die niedliche Büroklammer lediglich ihre Hilfe anbieten und mit nützlichen Tipps zur Seite stehen. Das ständige Auftauchen der Comic-Figur hat viele Nutzer aber aus dem Konzept gebracht, da sie von der eigentlichen Tätigkeit abgelenkt wurden. Es gilt also, die Aufmerksamkeit der Nutzer bewusst auf die wichtigen Inhalte zu lenken, wie das beispielsweise ein blinkender Cursor tut.

Durch Bewegung entstehen Zusammenhänge

Die Welt um uns herum ist nicht starr. Bewegung und Veränderung bilden eine wichtige Grundlage, damit wir unsere Umwelt verstehen können. Das beschreibt unter anderem die Gestalttheorie. Ein Gesetz dieser Theorie ist das Gesetz der gemeinsamen Bewegung. Es sagt, dass wir Elemente, die sich zusammen bewegen, auch als zusammenhängend betrachten. Auf einer dicht befahrenen, mehrspurigen Autobahn nehmen wir die vorbeifahrenden Autos nicht nur einzeln war, sondern auch als einen einheitlichen Verkehrsfluss. Je nach Kontext macht es durchaus Sinn, sich den Verkehr als Ganzes vorzustellen, da er eigene Gesetzmäßigkeiten und Wirkungsweisen besitzt, die sich nicht durch die einzelnen Autos an sich beschreiben lassen. Ein Beispiel hierfür ist die Art und Weise, wie Staus entstehen und wieder verschwinden.

Autos auf der Straße nehmen wir nicht nur einzeln, sondern auch als einheitlichen Verkehrsfluss wahr.

Autos auf der Straße nehmen wir nicht nur einzeln, sondern auch als einheitlichen Verkehrsfluss wahr.

Auch im Design können Beziehungen durch Bewegung deutlich gemacht werden. Wenn ein Nutzer auf einer Bedienoberfläche eine bestimmte Aktion ausführt, können zum Beispiel damit verbundene Elemente der Oberfläche hervorgehoben werden. Das kann etwa bei Drag and Drop Interaktionen wichtig sein. Während ein Nutzer ein Element über einen Bildschirm zieht, können Bereiche aufleuchten, in denen das Element abgelegt werden kann.

Neben übergreifenden Zusammenhängen hilft uns Bewegung auch, einzelne Objekte und ihre Distanz zu begreifen. Fährt man selbst auf einer Straße, dann ziehen Objekte im Umfeld scheinbar mit unterschiedlicher Geschwindigkeit vorbei. Schilder am Straßenrand tauchen plötzlich auf und verschwinden sofort wieder. Berge am Horizont hingegen kann man dort über eine sehr lange Zeit sehen. Dadurch wirkt es, als würden sie langsamer an uns vorbeiziehen als die Straßenschilder. Dieser Effekt wird in der Psychologie als Bewegungsparallaxe bezeichnet.

Auch die Bewegungsparallaxe wird im Design verwendet, etwa auf vielen Smartphones. Wenn Nutzer durch die verschiedene Home Screens blättern, bewegt sich das Hintergrundbild häufig leicht mit. Dadurch entsteht der Eindruck, als sei der Hintergrund weiter vom Betrachter entfernt als die App-Icons. Das ist nicht nur ein interessanter optischer Effekt, sondern kann auch dazu beitragen, die Icons und ihre Beschriftung besser erkennen zu können.

Bewegung schafft Bedeutung

Wenn ein Lehrer seinen Schülern etwas erklärt, dann gestikuliert er dabei, schreibt etwas an die Tafel, zeigt vielleicht einen kurzen Filmausschnitt. Durch Bewegung können komplexe Abläufe und Beziehungen besser verständlich gemacht werden. Eine hohe Transparenz und Verständlichkeit ist auch eine Grundanforderung an gutes Interaktionsdesign. Durch die gezielte Animation kann der Aufbau und die Funktionsweise eines Interfaces erklärt werden, ohne dass der Nutzer sich viel Text durchlesen muss oder in seinem Arbeitsablauf unterbrochen wird.

Um ein Motion Design zu erzielen, das zum Verständnis des Interfaces beiträgt, kann man sich unter anderem an Metaphern aus der realen Welt orientieren. Wenn eine Software aussieht und sich verhält wie etwas, das wir aus unserer Umwelt bereits kennen, wissen wir intuitiv, wie wir damit umgehen können. Ein Interface kann zum Beispiel so funktionieren wie ein Buch, ein Stapel von Kisten oder eine Tafel, an die man etwas schreiben kann. Metaphern können aber auch sehr viel abstrakter sein. Die sogenannten Image Schemata zeigen, wie unsere Erfahrung mit der Umwelt in einzelne Aspekte zerlegt werden und als Grundlage für ein User Interface Design verwendet werden kann. Wir werden uns das große Thema der Image Schemata in einem der folgenden Artikel noch einmal genauer anschauen.

Plötzliche Veränderungen auf einer Benutzeroberfläche sind für den Nutzer häufig schwer nachvollziehbar. Wenn ein Nutzer beispielsweise ein Objekt in einen Ordner verschieben will und es dann plötzlich vom Bildschirm verschwindet, kann sich der Nutzer nicht sicher sein, ob das Objekt erfolgreich in den Ordner eingeordnet wurde. Bewegt sich das Objekt hingegen sichtbar zum Ordner und verschwindet dort, ist die Interaktion besser nachvollziehbar. Eine solche Animation findet unter anderem auf dem MacOS Betriebssystem statt, wenn eine Datei aus dem Internet heruntergeladen wird und in den Downloads-Ordner im Dock springt.

AttentionToast

Zudem kann Bewegung helfen, die Bedeutung von Design-Elementen zu erweitern. Ein häufig verwendetes Element in Interfaces ist zum Beispiel ein Toast. Dabei handelt es sich um ein kleines Banner, das meist am oberen oder unteren Bildschirmrand auftaucht und eine Mitteilung an der Nutzer beinhaltet. Die Art und Weise, wie ein solcher Toast erscheint, kann über den angezeigten Text hinaus wichtige Informationen vermitteln. Eine dringende Mitteilung kann sehr vehement und deutlich auf den Bildschirm springen. Handelt es sich aber zum Beispiel um die Bitte, sich in einen Newsletter einzutragen oder einen Fragebogen auszufüllen, könnte die Nachricht vorsichtiger und verspielter ins Bild rutschen.

HelloToast

Bewegung macht Spaß

Eine Nutzeroberfläche, die auf den Nutzer reagiert und sich verändert, lädt zum Ausprobieren und Spielen ein. Das wird zum Beispiel bei Computerspielen wie Angry Birds deutlich: Hier besteht die Aufgabe darin, Vögel in Gebilde aus verschiedenen Materialien fliegen zu lassen und sie vollständig zum Einsturz zu bringen. Der Grundgedanke ist derselbe wir beim Dosenwerfen auf dem Jahrmarkt. Auch dort macht das laute Krachen der Dosen beim Umfallen einen Großteil des Reizes aus. Motion Design – und in diesem Fall auch Sound Design – hat daher das Potential, den Spaßfaktor eines Interfaces erheblich zu steigern.

Sofern kein Computerspiel entwickelt wird, sollten die Animationen dabei so gestaltet sein, dass sie den Nutzer bei seinen Tätigkeiten nicht behindern. Insbesondere in Situationen, in denen mehrere Handlungen in kurzer Zeit aufeinander folgen, müssen die Animationen möglichst kurz gehalten werden.

Die App Tinder zeigt, wie ein gutes Motion Design aussehen kann. Nutzer geben an, ob sie eine andere Person interessant finden oder nicht, indem sie eine Karte in die eine oder andere Richtung vom Bildschirm wischen. Da Nutzer dies häufig in schneller Abfolge tun, sollte die Animation nicht zu lange dauern. Zugleich bildet sie aber auch eine der Hauptfunktionen der App und ist somit zentral für die User Experience.

Die Lösung ist, dass die Karten sehr subtil auf feine Unterschiede der Nutzerinteraktion reagieren: Je nach dem wie genau der Nutzer die Karte wegwischt, rutscht sie leicht unterschiedlich aus dem Bild. Somit fühlen sich die Karten sehr real an und das Wegwischen bekommt einen spielerischen Aspekt. Trotzdem dauert die Interaktion nur wenige hundert Millisekunden und behindert den Nutzer daher nicht.

Wichtig ist außerdem, dass das Motion Design zur jeweiligen Anwendung der Software passt. Bei Interfaces, die für sehr präzise oder sicherheitsrelevante Aufgaben verwendet werden, müssen Animationen sparsamer eingesetzt werden. Doch auch hier kann Motion Design zu einem besseren Verständnis und mehr Aufmerksamkeit beitragen. Ganz unabhängig davon, ob es sich um eine App zur Unterhaltung oder eine Software für komplexe Business-Anwendungen handelt, lohnt es sich daher, ein gezieltes Motion Design zu entwerfen.

Tags

Digital
Interface Design
Motion Design
Software
UX

BLEIB AUF DEM LAUFENDEN

Melde dich für unseren Newsletter an