Animation für Aufmerksamkeit und Verständnis

Bewegliche Elemente sind ein mächtiges Werkzeug, um die Aufmerksamkeit der Nutzer auf sich zu ziehen. Beim Design einer Animation müssen die Zielsetzung, die Häufigkeit des Erscheinens und seine Mechaniken bedacht werden.

 

by Aurora Bedford (deutsche Übersetzung) - 21.09.2014

 

Dank dem Aufstieg von HTML5 und CSS3 sind Animationen und Bewegungen im modernen Web-Design zunehmend an der Tagesordnung. Bei einer kürzlich abgehalten Web- und Mobile-Konferenz haben zahlreiche Talks das visuelle Design und Entwicklungsüberlegungen, wie man den UI-Elementen Interaktivität verleihen kann, besprochen. Leider wurde bei der Vielzahl der Gespräche die Usability solcher Animationen und welche Arten von Bewegungen sich für bestimmte Designziele am besten eignen kaum angesprochen.

Animationen und Interaktivität auf Webseiten verfolgen üblicherweise eines der folgenden User Experience Ziele:

• Lenken Sie die Aufmerksamkeit auf die Site und erklären Sie die Änderungen: Änderungen des Zustandes eines Elements, das Zeigen und Verstecken von Inhalten oder der Wechsel zu anderen Inhaltsbereichen sind alles gängige Bereiche für Übergangsanimationen.
• Fügen Sie Spass und Originalität hinzu: Elemente die eingeblendet werden, die Farbe ändern oder sich anderweitig bewegen begeistern Nutzer und sorgen für ein "poppiges" Design. Animationen und Soundeffekte sind insbesondere bei Seiten die sich an Kinder (engl.) und Jugendliche (engl.) richten sehr beliebt. (Solche Tricks lenken Kinder häufig ab; da die jüngeren Besucher weniger zielorientiert sind als Erwachsene, ärgern sie sich weniger über diese Effekte und tolerieren sie auch mehr.)
• Wirken Sie modern und Up-to-Date mit den neusten Designtrends: Der Einsatz neuer Technologien und Techniken beim Webdesign ist nicht nur eine spannende Übung für Entwickler, sondern kommunizieren vermutlich auch, dass die Marke auf dem neuesten Stand ist und sich auskennt.

Bevor Sie Webseiten oder Applikationen mit Animationen anreichern, sollten Sie sicherstellen, dass deren Ziel und Zweck genau festgelegt sind. Wenn Sie eine Animation in Erwägung ziehen, überlegen Sie sich folgende Fragen:

1. Aufmerksamkeit der Nutzer: Worauf würde sich die Aufmerksamkeit des Nutzers zum Zeitpunkt der Animation sonst fokussieren?
2. Ziel der Animation ist es:
• Die Nutzeraufmerksamkeit auf sich zu lenken: Ist das animierte Objekt etwas, das dem Nutzer sofort auffallen und zur Handlung animieren sollte?
• Soll die Kontinuität in einem Übergang (engl.) zwischen Zuständen eines Objektes gezeigt werden?
• Soll sie die Beziehung zwischen den Objekten andeuten, die bereits die Aufmerksamkeit des Nutzers auf sich gelenkt haben?
3. Häufigkeit der Animation: Wie häufig soll der Nutzer die Animation während seines Besuchs zu sehen bekommen?
4. Mechanik der Animation. Ist sie:
• Direkt durch die Handlung des Nutzers verursacht?
• Indirekt ausgelöst (während dem Laden der Seite, beim Scrollen oder durch andere nicht relevante Aktivitäten)?

Erst wenn diese Fragen beantwortet wurden, können passende Animationen gestaltet werden.

Nutzeraufmerksamkeit: Periphere Bewegung verlangt Aufmerksamkeit

Bewegungen des peripheren Sehvermögens lösen eine reizbedingte Verschiebung der visuellen Aufmerksamkeit aus und sind ein Beispiel der Bottom-Up-Verarbeitung. Dies steht im Gegensatz zu einer zielgerichteten Verschiebung (Top-Down-Verarbeitung) bei der eine Person seine Aufmerksamkeit freiwillig auf den Interessensbereich lenkt. Die instinktive Aufmerksamkeitsverschiebung zur Bewegung ist noch ein Überbleibsel aus den Tagen, als wir schnell die Schlange im Gras und andere lauernde Gefahren oder potentielle Beute entdecken mussten (Sie können selbst entscheiden, welcher Kategorie Sie die Schlange zuordnen würden). (Mehr über die Top-Down und Bottom-Up-Verarbeitung gibt es in unserem Kurs zum Thema User Interface Prinzipien die jeder Designer kennen sollte (engl.)).

Auf einer Webseite umfasst die Peripherie in der Regel alle Bereiche ausserhalb des F-förmigen Lesemusters. Blinkende Bilder und Video-Anzeigen auf der rechen Seite sind die offensichtlichsten Beispiele der Verwendung von Peripherie-Animationen für geschäftsorientierte Ziele (durch zu starken Einsatz werden Banner-Blindheit und Rechtsblick-Blindheit (engl.) bewirkt), aber auch gut gemeinte Animationen können sich als störend und ärgerlich herausstellen (Clippy, wir zeigen auf dich). Benachrichtigungen in Nähe der Ränder auf dem Bildschirm, Bekanntmachung ähnlicher Inhalte, Aktivitäten oder der Einsatz von Live-Chat sind alles Beispiele von Peripherie-Animationen, die dazu dienen, den Nutzer über relevante Features oder Inhalte zu informieren, die sich jedoch in der Praxis als störend und unerwünscht wie das Pop-Up Fenster herausstellen.

Kurz nachdem die Homepage von Olark geladen ist, gleitet ein "Wie können wir helfen?" Fenster von unten rechts in den Bildschirm, welches ein zusätzliches "Hey..." Fenster als Pop-Up über sich hat. Während diese Animation mit Sicherheit erfolgreich darin ist, den Nutzer über die Existenz des Chat-Features zu informieren, sorgt die plötzliche Erscheinung im Sichtfeld des Nutzers dafür, dass dieser abgelenkt ist und er seiner primären Aufgabe, dem Lesen der Hauptinhalte der Seite, nicht nachkommen kann.

Wie schnell die visuelle Aufmerksamkeit auf ein sich bewegendes Objekt der Peripherie gelenkt wird, hängt von der wahrgenommenen Animation des Objekts ab. Faktoren wie die zunehmende Geschwindigkeit des Objekts, der Grösse der Positionsverschiebung und vor allem, ob diese Bewegung natürlich wirkt (statt durch eine externe Kollision irgendeiner Art verursacht zu werden) beeinflussen alle die Wahrnehmung der Animation. In Bezug auf das Interaktionsdesign bedeutet das, dass Elemente die hinein sliden oder anderweitig - unabhängig von der Geschwindigkeit - eine Verschiebung ihrer Position verzeichnen, die Aufmerksamkeit des Nutzers schneller auf sich ziehen als Elemente, die langsam eingeblendet werden.

Der "Nach oben" Link auf der Webseite Festival of Marketing gleitet von unten links auf die Seite, sobald der Nutzer nach unten scrollt, einer Bewegung die sofort die Aufmerksamkeit der Elemente des Sichtfelds des Bildschirms lenkt und völlig von der Hauptaufgabe, dem Lesen der Hauptseiten, ablenkt.

Die Pfeiltaste um nach oben zu scrollen, gleitet langsam von der rechten Seite in den Bildschirm, sobald der Nutzer die Seite nach unten scrollt. Diese langsame Animation ohne Änderung der Position ist visuell weniger ablenken als die Slide-In-Animation, die wir im vorherigen Beispiel gezeigt haben. Eine andere Lösung die das Problem der möglichen Unterbrechung des Nutzers während dem Durchstöbern von Produkten behebt wäre, den Link einfach immer auf der Seite anzuzeigen.

Wenn das Ziel wäre, die Aufmerksamkeit des Nutzers schnell auf neue Objekte zu lenken, dann wäre das animierte Sliding sehr effektiv. Wenn das Ziel auf der anderen Seite ist, Zugang zu einem kontextuellen Feature zu liefern, ohne den Nutzer während seiner Hauptaufgabe zu unterbrechen, dann wäre eine dezentere Animation ohne positionellen Wechsel die bessere Wahl. (Keine Animation wäre natürlich am wenigsten ablenkend und wenn es sich ermöglichen lässt, die bestmögliche Wahl.)

Ziel: Animation, welche die Einsicht und das Verständnis fördern

Bewegung innerhalb des aktuellen Fokuspunktes einer Person lösen nicht die gleiche visuelle Antwort aus, wie wenn sie in der Peripherie verzeichnet werden. Da wir die Aufmerksamkeit des Nutzers bereits haben, müssen wir sie nicht mehr auf uns ziehen und können uns auf die Gestaltung einer Animation konzentrieren, welche die Fähigkeit des Nutzers verbessern soll, die UI zu verstehen: In welchem Bezug ein Element zu anderen Elementen steht, Änderungen des Zustandes eines bestimmten Elements usw.

Wenn aus den richtigen Gründen eingesetzt, können animierte Elemente auf dem Bildschirm uns dabei helfen zu übermitteln, wie die Elemente der Seite zueinander in Verbindung stehen und wie sie sich bei Aktionen verhalten. Wenn beispielsweise ein Formular eine konditionale Logik aufweist, kann das was der Nutzer in ein Feld eintippt dazu führen, dass andere davon abhängige Felder unter dem Eingabefeld auftauchen. (In vielen E-Commerce Checkout-Formularen ist es z.B. so, dass wenn ein Nutzer unterschiedliche Adressen für Zahlung und Lieferung angibt, dass die Felder für die zweite Adresse als Ergebnis der Nutzerhandlung animiert werden und unterhalb des Formulars mit der Zahlungsadresse erscheinen.) Die Animation deutet verstärkt die Beziehung zwischen dem auslösenden Feld und dem abhängigen Feld.

Sobald das Feld für "Meine Rechnungs- und Versandadresse ist die gleiche", deaktiviert wird, wird das verschachtelte Checkout-Formular, das Eingabefeld für Rechnungsadresse mit Hilfe einer Animation freigelegt, was deutlich auf die abhängige Beziehung dieser neuen Felder hinweist.

Damit eine Animation effektiv eine "Ursache-Wirkung"-Beziehung zwischen den UI Elementen vermitteln kann, muss der Effekt innerhalb 0.1 Sekunden nach erster Nutzeraktion eintreten. Diese 0.1-Sekunden Reaktionszeit hält das Gefühl der direkten Manipulation aufrecht und unterstützt die Wahrnehmung, dass der Nutzer das Erscheinen des neuen Elementes verursacht hat.

Häufigkeit: Dem Nutzer nicht in die Quere kommen

Ein weiterer wichtiger Aspekt den es bei der Gestaltung einer Animation zu bedenken gibt, ist die Häufigkeit, die wahrscheinlich bei einem einzigen Besuch eines typischen Besuchers verzeichnet wird. Animationen die häufig auftreten, sind wie Strassensperren für die Inhalte und verlängern die notwendige Zeit, diese Aufgabe zu vervollständigen. Anwender wollen nicht warten und immer wieder lange Animationssequenzen zu sehen bekommen, insbesondere dann nicht, wenn diese keinen anderen Zweck verfolgen als "lustig" zu sein und die Fähigkeiten der Entwickler aufzuzeigen. Denken Sie daran: Nur weil Sie in der Lage sind eine Animation zu implementieren, bedeutet dies nicht, dass Sie dies auch sollten.

Wir können schon gar nicht mehr zählen wie oft wir in Usability-Tests gesessen sind und Teilnehmer Varianten des folgenden Satzes sagten: "Diese [Animation] war beim erstem Mal nett, aber dann wurde es nervig."

Ein Beispiel für eine zunehmend verbreitete unnütze Animation ist der Übergang der erscheint, wenn ein verborgenes Hauptmenü erscheint. Die globale Navigation verstecken (engl.) ist an sich ist schon schlimm genug, aber die Anwender zu zwingen, sich jedes mal wenn sie auf das Hauptmenü zugreifen wollen, die Animation zu Gemüte zu ziehen, ist noch schlimmer. Obwohl die Animation beim ersten Mal noch so hübsch und visuell ansprechend sein kann, wird es beim zweiten Mal ermüdend und beim dritten Mal schon richtig nervig (und kann dafür sorgen, dass Nutzer so frustriert sind, dass sie die Seite sofort verlassen.)

Die Webseite Newton Running verbirgt beispielsweise 4 Navigationsmöglichkeiten hinter dem 3-Zeilen "Hamburger" Menu-Icon. Beim Klicken auf das Icon wird eine Animation ausgelöst, bei der die aktuelle Seite weggezoomt wird und in ein farbiges Quadrat verändert wird, während andere farbige Quadrate auf dem Bildschirm auftauchen und zu Menüpunkten werden. Sobald man einen Menüpunkt gewählt hat, wird die Animation in umgekehrter Richtung erneut wiederholt und die vorher gewählte Seite wieder heranzoomt. Natürlich gibt es keine Möglichkeit, diese Animation zu überspringen, sobald sie einmal ausgelöst wurde. Dimensionalität zu zeigen ist eine Stärke von Animationen, aber in diesem Beispiel ist die Beziehung zwischen den Seiten bedeutungslos und die Animation an sich ist ein völlig unnötige Sperre, da alle 4 Menüpunkte ganz einfach als statische Links auf der Seite anzeigt hätten werden können.

Das Hauptmenü von Newton Running erscheint am Ende einer langen Animationssequenz, die dann wieder umgekehrt abgespielt wird, sobald eine Option ausgewählt wurde. Wann auch immer ein Anwender das Hauptmenü verwenden möchte, muss er sich durch die gesamte Animationssequenz quälen. Diese Art unnötiger und sinnloser Animationen demotiviert den Anwender, weiter mit der Webseite zu interagieren, da die Seite einfach unnötig wertvolle Zeit stiehlt, die man auch mit dem Lesen der eigentlichen Inhalte verbringen könnte.

Mechanik: Wie man eine angemessene Animation wählt

Wenn Sie bei Ihrem Design auch eine Animation verwenden wollen, stellen Sie sicher, eine angemessene Geschwindigkeit für den Kontext und das Ziel der Animation zu wählen:

• Langsamere Übergänge lenken weniger ab und sorgen weniger für einen Aufmerksamkeitswechsel. Sie eignen sich für Animationen die direkt vom Nutzer ausgelöst werden oder auch nicht nutzerabhängig sind. In diesen Situationen sollten die Elemente mit wenig oder keiner Positionsverschiebung erscheinen, um die Ablenkung auf ein Minimum zu beschränken.
• Schnelle Animationen lenken die Aufmerksamkeit stärker auf sich, wenn sie ausserhalb des Aufmerksamkeitsbereichs des Nutzers erscheinen. Sie eignen sich für wichtige Elemente die für Nutzer wichtig sind, um darauf reagieren zu können.

Schnelle Übergänge verschwenden auch weniger Zeit des Nutzers und eignen sich dann, wenn der Nutzer seinen Fokus bereits auf das Element gelenkt hat und die Animation direkt ausgelöst hat. Diese Arten der Übergänge sollten natürlich nicht rüttelhaft erscheinen oder Text ersetzen, den der Nutzer gerade lesen wollte. Auch wenn selten verzeichnet, gibt es Zeiten, in denen die UI zu schnell ist und Nutzer diese Änderung nicht erkennen, um dementsprechend reagieren zu können.

Animierte UI: Vorsicht ist geboten

Animierte Elemente beim Nutzerinterface sind verführerische und mächtige Werkzeuge, doch können sie zwei gewaltige Nachteile mit sich bringen: Aufmerksamkeit und Zeit der Nutzer. Setzen Sie diese nur selten ein und auch nur, wenn sie für die Interaktion von Bedeutung sind. Denken Sie daran, ob die Animation die Aufmerksamkeit zu sehr auf sich lenkt oder ob der gleiche Nutzer wieder und wieder über sie stolpern wird. Wird die Animation die Beziehung zwischen UI-Elementen verstärken? Lösen sie Nutzer direkt oder indirekt aus? All diese Aspekte spielen bei der Gestaltung einer erfolgreichen Animation eine entscheidende Rolle.

Referenz:

Pratt, J., Radulescu, P., Guo, R.M., & Abrams, R.A. (2010). It's Alive! Animate motion captures visual attention. Psychological Science, 21, 1724-1730. (Warnung: Link führt zu einer PDF-Datei.)

 

© Deutsche Version. Institut für Software-Ergonomie und Usability AG. Alle Rechte vorbehalten.