Über den Tellerrand geschaut

Animationen im User Interface Design: Wesentlicher Bestandteil statt nur „Eye Candy“

Markus Weber
Markus Weber
31. Januar 2010

Ein prototypischer Arbeitsablauf im User Interface Design verläuft von der Erstellung von Wireframes über das Interaktionsdesign bis hin zum visuellen Design. Das User Interface wird sukzessive verfeinert, angefangen mit der Beschreibung von statischen Aspekten (Grundlayout), gefolgt von der Spezifikation der grundlegenden dynamischen Aspekte, bis schlussendlich visuelle Details hinzugefügt werden. Dieser Ablauf entspricht der verbreiteten Ansicht, dass visuelle Aspekte eines User Interface mehr oder weniger das Sahnehäubchen darstellen – Details, um die man sich erst kümmern sollte, nachdem die grundlegende Benutzerfreundlichkeit gewährleistet ist. Aber diese Sichtweise erscheint nicht gänzlich gerechtfertigt.

Die Diskussionen zur Bedeutung von Ästhetik für User Interface Design und Usability im Allgemeinen zeigen, dass es mit dem visuellen Erscheinungsbild mehr auf sich hat, als auf den ersten Blick erkennbar ist und dass visuelles Design von essenzieller Bedeutung für ein User Interface ist. Daher sollte Ästhetik ein Business Requirement sein (wie in einer Präsentation von Stephen P. Anderson beschrieben).
Ein besonderer Fall von „User Interface Eye Candy“ sind Animationen. In diesem Artikel soll der Begriff „Animation“ verweisen auf das Animieren von User Interface (Kontroll-)Elementen und Widgets – im Gegensatz zu animierten Filmen oder ähnlichem, die z.B. in eLearning Anwendungen genutzt werden, um Modelle zu veranschaulichen und Wissen zu kommunizieren.
Animationen kommen in Betriebssystemen wie Mac OS X immer häufiger zur Anwendung, z.B. in Form von hüpfenden Icons während des Starts einer Anwendung, durch den „Genie“ Effekt beim Maximieren/Minimieren eines Fensters oder durch dynamisches „Ausbreiten“ des zugehörigen Fensters beim Öffnen eines Ordners. Auch wenn Animationen im User Interface unterhaltsam sein können – besonders für Nutzer, die eher Vorerfahrung mit nicht-animierten User Interfaces haben – kann deren Nutzen jedoch weit über das reine Vergnügen hinausgehen. Einige Funktionen von Animationen in User Interfaces werden im folgenden Abschnitt beschrieben. Die Erklärungen werden am Beispiel eines animierten User Interface Prototypen illustriert, der ein Gebäudemanagementsystem darstellt. Die folgende Animation gibt einen Überblick über den gesamten Prototyp, bevor einzelne Aspekte detaillierter unter die Lupe genommen werden. Der abgebildete Arbeitsablauf zeigt, wie Anpassungen in einem modalen Dialog vorgenommen werden, um in der Folge zur Ursache eines Problems zu navigieren und dieses durch Zuweisung einer verantwortlichen Person zu lösen.

Überblick über den animierten Gebäudemanagement-Prototyp

Überblick über den animierten Gebäudemanagement-Prototyp
Loading...

Animation: Funktionen

Aufmerksamkeitssteuerung

Wie Animationen die Aufmerksamkeit beeinflussen erlebt jeder, der sich durch animierte Banner auf einer Internetseite genervt fühlt – zumindest bis zu dem Punkt an dem sich Banner-Blindheit einstellt. Jedoch kann man sich diesen Effekt von Animationen auch im Guten zu Nutze machen. Er kann z.B. helfen, einen Nutzer auf Veränderungen auf dem User Interface aufmerksam zu machen, die vom System selbst ausgelöst werden und die sonst möglicherweise unbemerkt blieben. Diese Gefahr besteht beispielsweise, wenn relativ kleine Interface-Elemente erscheinen oder verschwinden. Im Falle des Mac OS X Dock verschwindet ein Icon, indem es kleiner wird und langsam ausgeblendet wird, anstatt abrupt zu verschwinden. Das unterstützt den Nutzer dabei, zu erkennen, an welcher Stelle des Dock die Veränderung passiert und – wenn er schnell genug ist – zu erkennen, welches Icon verschwindet. Dies ist deutlich besser, als nur wahrzunehmen, dass das Dock von einem auf den anderen Moment kürzer geworden ist.
Das folgende Beispiel zeigt, wie die Aufmerksamkeit des Nutzers auf einen animierten Fortschrittsbalken gelenkt wird, der ansonsten vielleicht unbemerkt bliebe.

Beispiel: Aufmerksamkeitssteuerung durch animierten Fortschrittsbalken

Beispiel: Aufmerksamkeitssteuerung durch animierten Fortschrittsbalken
Loading...

Verbesserung der Orientierung

Die Navigation auf einem User Interface besteht im wesentlichen darin, sich von einem Interessensbereich zum nächsten zu bewegen um dort jeweils Aktivitäten auszuführen. Das kann entweder bedeuten, zwischen einzelnen Bereichen innerhalb eines Screens zu navigieren oder sich von einem Screen zu einem anderen zu bewegen. Die Notwendigkeit für letzteres ist größer, je kleiner der Bildschirm ist. Je mehr der Nutzer zwischen Screens navigieren muss, desto größer ist die Gefahr, die Orientierung zu verlieren, da es schwieriger wird, Zwischenverbindungen und Hierarchien der einzelnen Screens im Kopf zu behalten. Animationen können den Orientierungssinn unterstützen, indem sie Screenabfolge und –hierarchie verdeutlichen. Nehmen wir beispielsweise das iPhone. Der Nutzer navigiert durch die Email-Anwendung auf hierarchische Art und Weise: Account – Ordner – Nachricht. Diese Hierarchie wird visualisiert, indem eine Animation die Screens von rechts nach links gleiten lässt, wenn der Nutzer eine Hierarchieebene nach unten navigiert. Das unterstützt den Orientierungssinn besser, als abrupt einen Screen durch den nächsten zu ersetzen – ohne jegliche Animation.
In dem untenstehenden Beispiel unterstützt ein animierter Übergang zwischen Etagen-Ansicht und Einzelraum-Ansicht die Orientierung des Nutzers im Gebäudemodell. Der Anwender könnte leicht die Orientierung verlieren, wenn die Einzelraum-Ansicht die Etagen-Ansicht direkt ersetzen würde, ohne den animierten Übergang.

Beispiel: Verbesserung der Orientierung durch animierte Übergänge

Beispiel: Verbesserung der Orientierung durch animierte Übergänge
Loading...

Aufrechterhaltung des „Flow“

Mit „Flow“ ist eine menschliche Erfahrung gemeint, die in der Psychologie bereits seit einiger Zeit erforscht wird: „Flow is the mental state of operation in which the person is fully immersed in what he or she is doing by a feeling of energized focus, full involvement, and success in the process of the activity.” (http://en.wikipedia.org/wiki/Flow_(psychology))
Animationen können helfen, Erfahrungen zu verbinden, die sonst unverbunden wären, und helfen dadurch, den Nutzer im Flow zu halten. Ein solcher Fall wurde im vorigen Abschnitt bereits beschrieben: durch den Einsatz von Animationen beim Navigieren zwischen Screens wird der Flow aufrechterhalten statt ihn durch eine abrupte Veränderung eines Großteils des Bildschirms zu unterbrechen. Außerdem können Animationen genutzt werden, um eine notwendige Pause (z.B. aus technischen Gründen) organisch zu überbrücken, indem beispielsweise ein Screen-Element ausgeblendet wird während ein anderes noch lädt.

Animationen: Dimensionen

Animationen im User Interface lassen sich auf verschiedenen Dimensionen klassifizieren. Einige davon sollen in diesem Abschnitt beschrieben werden.

„Modal“ vs. „Nicht-Modal“

Die Unterscheidung in modale und nicht-modale Animationen ist der Terminologie in Bezug auf Dialoge entlehnt. Im Falle einer modalen Animation muss der Nutzer deren Beendigung abwarten, bevor er seine Interaktion fortführen kann, während eine nicht-modale Animation den Zeitverlauf der Nutzer-System-Interaktion nicht beeinflusst. Modale Animationen können ihrerseits weiter differenziert werden in interface-modale und objekt-modale Animationen, wobei interface-modale Animationen die Interaktion mit dem kompletten User Interface blockieren, wohingegen objekt-modale Animationen nur das jeweilige Objekt für den Nutzer blockiert. Die oben erwähnte iPhone-Navigations-Animation in Emails ist ein Beispiel für eine Interface-modale Animation.
Das untenstehende Beispiel stellt dar, wie eine verantwortliche Person einer Problemquelle zugewiesen werden kann, indem sie per Drag & Drop auf einen Zielbereich gezogen wird. Solange die Drop-Animation nicht beendet ist, kann der Nutzer nicht mit dem jeweiligen Objekt interagieren, wobei der Rest des User Interface nicht blockiert ist. Die Animation, die beim Drop-Prozess genutzt wird, kann dementsprechend als objekt-modale Animation klassifiziert werden.

Beispiel: Objekt-modale Animation

Beispiel: Objekt-modale Animation
Loading...

Geschwindigkeit

Animationen von User Interface Elementen können in der Geschwindigkeit, mit der die Veränderung von einem Anfangs- zu einem Zielzustand vonstatten geht von sehr langsam bis hin zu fast unmittelbar variieren. Beide Extreme könnten nachteilig sein: Während ein zu abrupter Übergang unbemerkt bleiben oder eine ansonsten kohärente User Experience unterbrechen könnte, so unterbricht ein zu langer Übergang möglicherweise den Flow, da dem Nutzer Wartezeiten aufgezwungen werden. Im Allgemeinen sollten Animationen so genutzt werden, dass sie zu einem responsiven Verhalten des User Interfaces beitragen, was in den meisten Fällen bedeutet, dass sie am schnelleren Ende des Geschwindigkeitsspektrums angesiedelt sind. Dies gilt im Besonderen für „modale Animationen“.
Das erste der unten dargestellten Beispiele zeigt einen animierten Übergang in seiner normalen Geschwindigkeit, während das zweite Beispiel eine verlangsamte Version derselben Animation zeigt. Zusätzlich zu dem Effekt, dass die langsame Animation zu einem eher trägen User Interface führt, kann sie den Nutzer auch verwirren, da – ironischerweise – die langsame Geschwindigkeit das Wahrnehmen vieler Details der Animation möglich macht, die bei schnellerer Geschwindigkeit nicht bewusst wahrgenommen würden: die langsame Animation kann also zu Informationüberlastung beim Anwender führen.

Beispiel: Animation in normaler Geschwindigkeit

Beispiel: Animation in normaler Geschwindigkeit
Loading...

Beispiel: Animation in verringerter Geschwindigkeit

Beispiel: Animation in verringerter Geschwindigkeit
Loading...

Räumliche Ausdehnung

Eine weitere Dimension, auf der sich Animationen unterscheiden können, ist die Bildschirmfläche, über die sie sich ausbreiten. Wenn beispielsweise ein Objekt auf dem Screen verschoben wird, kann sich die dazugehörige Animation über eine beträchtliche Bildschirmfläche ausbreiten, während z.B. die „Notification Bubbles“ der Windows Taskbar nur einen kleinen Teil der sichtbaren Bildschirmfläche benötigen. Die Balance zwischen räumlicher Ausbreitung und Sichtbarkeit muss beim Gestalten von Animationen beachtet werden. Der Ort der Animation auf dem sichtbaren Screen ist in diesem Kontext ein relevanter Faktor – vereinfacht ausgedrückt: je peripherer eine Animation platziert ist, desto größer sollte sie sein, um bemerkt zu werden. Der Effekt, dass Animationen Aufmerksamkeit auf sich ziehen (s.o.), erlaubt es dennoch, periphere Animationen kleiner zu halten als deren statische Gegenstücke.
Das unten angeführte Beispiel zeigt eine animierte Fehlermeldung von mittlerer Größe.

Beispiel: Animierte Fehlermeldung

Beispiel: Animierte Fehlermeldung
Loading...

Synchronisiert vs. Unsynchronisiert

Eine Animation kann in dem Sinne autonom sein, dass sie unabhängig von anderen Ereignissen auf dem User Interface abläuft, sobald sie einmal gestartet wurde. Sie kann aber auch synchronisiert sein mit Prozessen, die zur selben Zeit ablaufen, also z.B. mit Handlungen des Nutzers oder mit anderen Animationen. Synchronizität von Animationen muss vorsichtig ausbalanciert sein, um eine kohärente User Experience zu gewährleisten und den Nutzer in die „Welt“ des User Interface eintauchen zu lassen. Selbst eine leichte Abweichung zwischen Animationen, die eigentlich synchron ablaufen sollten, kann den Gesamteindruck beeinträchtigen und „die Illusion zerstören“.
Das untenstehende Beispiel zeigt, wie die Animationen von Schiebereglern miteinander (und mit den Handlungen des Nutzers) synchronisiert sind, um deren Beziehungen untereinander zu verdeutlichen.

Beispiel: Synchronisierte Schieberegler

Beispiel: Synchronisierte Schieberegler
Loading...

„Visuelle Spikes“: Animationen in Prototypen

Da Animationen wesentliche Funktionen in Bezug auf die User Experience erfüllen können, kann es notwendig sein, sie in bestimmten Fällen relativ früh in den Design Prozess zu integrieren, z.B. um einen Prototypen zu evaluieren oder um ihn Stakeholdern zu präsentieren. Animationen sollten immer dann eingebaut werden, wenn es wahrscheinlich ist, dass das Feedback (von repräsentativen Nutzern oder anderen Stakeholdern) bezüglich des Prototypen wesentlich verzerrt wäre, wenn Animationen außen vor gelassen würden.
Es ist offensichtlich, dass Papier-Prototypen und Wireframes für die Kommunikation von (geplanten) Animationen auf dem User Interface nicht brauchbar sind. Da andererseits die Erstellung von Animationen mit beträchtlichem Aufwand verbunden ist, sollte dieser Aufwand fokussiert eingesetzt werden. In „visuellen Spikes“ werden die wesentlichen Aspekte von Animationen entworfen und in einen größeren Prototyp eingebaut. Für einen Usability Test kann der visuelle Spike beispielsweise die Form eines einzelnen Screens annehmen, der visuell ausgestaltet und mit der geplanten Animation ausgestattet ist. Für die Test-Sitzung muss dann sichergestellt werden, dass der Screen an angemessener Stelle im Gesamt-Testplan eingeführt wird. Ihn zu früh einzuführen könnte beispielsweise dazu führen, dass die Teilnehmer in späteren Phasen des Tests auf visuelle Aspekte fokussieren, in denen dies unangemessen wäre, besonders wenn die dort verwendeten Screens abstrakterer Natur sind als der visuellen Spike.

Fazit

Wie in diesem Artikel dargestellt, hat es mit Animationen mehr auf sich, als auf den ersten Blick ersichtlich ist. Animationen können im User Interface wesentliche Zwecke erfüllen, wie z.B. die Aufmerksamkeit des Nutzers zu lenken oder dessen Orientierung zu verbessern. Wenn Animationen wohldurchdacht sind, können sie die Usability positiv beeinflussen.
Da Animationen mehr als bloß Eye Candy sind, sollte ihre Gestaltung angemessen im User Interface Design Prozess berücksichtigt werden, z.B. indem sie in Prototypen für Usability Tests oder in Präsentationen für Stakeholder integriert werden. Wird der Gestaltung von Animationen zum angemessenen Zeitpunkt während des Designprozesses Aufmerksamkeit geschenkt, statt sich nur am Ende des Prozesses mit ihnen zu beschäftigen, können sie mit größtmöglichem Nutzen eingesetzt werden.

Möchten Sie mehr zu unseren Leistungen, Produkten oder zu unserem UX-Prozess erfahren?
Wir sind gespannt auf Ihre Anfrage.

Luzie Seeliger

Corporate Experience Manager

+49 681 959 3110

Kontaktformular

Bitte bestätigen Sie vor dem Versand Ihrer Anfrage über die obige Checkbox, dass wir Sie kontaktieren dürfen.
  • Saarbrücken

    Science Park Saar, Saarbrücken

    Standort Südwest

    Hauptsitz Saarbrücken
    Centigrade GmbH
    Science Park 2
    66123 Saarbrücken
    Deutschland
    Saarland
    Auf der Karte

    +49 681 959 3110

    +49 681 959 3119

  • Mülheim an der Ruhr

    Games Factory Mülheim an der Ruhr

    Standort Nordwest

    Geschäftsstelle Mülheim
    Centigrade GmbH
    Kreuzstraße 1-3
    45468 Mülheim an der Ruhr
    Deutschland
    Nordrhein-Westfalen
    Auf der Karte

    +49 208 883 672 89

    +49 681 959 3119

  • Haar · München

    Haar / München

    Standort Süd

    Geschäftsstelle München
    Centigrade GmbH
    Bahnhofstraße 18
    85540 Haar · München
    Deutschland
    Bayern
    Auf der Karte

    +49 89 20 96 95 94

    +49 681 959 3119

  • Frankfurt am Main

    Frankfurt am Main

    Standort Mitte

    Geschäftsstelle Frankfurt
    Centigrade GmbH
    Kaiserstraße 61
    60329 Frankfurt am Main
    Deutschland
    Hessen
    Auf der Karte

    +49 69 241 827 91

    +49 681 959 3119

Cookies helfen uns bei der Bereitstellung unserer Dienste. Durch die Nutzung unserer Dienste erklären Sie sich damit einverstanden, dass wir Cookies setzen. Mehr erfahren.

Close