Kleine Animation – Große Wirkung

UX-Design

May 28 2018 17:44:08 Jul 23 2018 11:36:30 Kleine Animation – Große Wirkung LOGO appcom interactive GmbH

Eine Animation erklärt, verschafft Aufmerksamkeit und begleitet den Benutzer. Animationen gehören zu einem ganzheitlichen UX-Design. Animationseffekte werden eingesetzt, um die Aufmerksamkeit des Benutzers auf wichtige Details zu lenken und ihm zu helfen dorthin zu gelangen, wo er hinmöchte. Zudem verwandeln sie abstrakte flache Bildschirme in eine lebendige Welt, mit der wir gerne agieren.

 

Erklärend und selbsterklärend

Animationen vermitteln dem Benutzer ein besseres Verständnis für das, was er sieht. Ein animiertes Element erklärt und zeigt, wie dieses verwendet werden kann und sollte. Ein dezentes Blinken beispielsweise vermittelt unaufdringlich Hilfe.

Ebenso zeigen Animationen den Zusammenhang zwischen Elementen und wie diese miteinander interagieren. Beispielsweise wird ein Menü-Icon durch eine Animation zum Zurück-Icon. Durch die Animation weiß der App-Nutzer: Ich muss erst zurück, um wieder das Menü zu öffnen. Ein Effekt, der durch einfaches ein- und ausblenden nicht selbsterklärend ist. Elemente sollten nicht verschwinden und auftauchen ohne Erklärung. Daher: Das beste Element in einem Design ist das Selbsterklärende.

 

Animationen zeigen auf:

  • Was jetzt passiert
  • Was passierte
  • Was kann als nächstes passieren

Motion Design – Animation beeinflusst Empfinden

Durch Tempo und Dauer einer Animation können unterschiedliche Informationen vermittelt werden. Ein Luftballon hat ein anderes Tempo als ein Amboss, der fällt. Ein schwebendes leichtes Objekt wirkt beruhigend, ein schnelles vermittelt Dynamik. Das Empfinden zu einem Interface kann demnach durch die Art der Animation beeinflusst werden.

 

Das Wechseln von Views kann interessanter gestaltet werden als ein hartes Wechseln. Beispiel: Kommentar schreiben. Der Wechsel von der Bearbeiten-Ansicht zum Live-Kommentar kann animiert, unmittelbar den Erfolg einer Interaktion aufzeigen. Animationen können das Gefühl der direkten Manipulation verstärken und binden den Benutzer ein.

 

Animation zur Standorterkennung von Sarah Drasner

Ladezeit – Besser mit Animation

Lassen sich Wartezeiten nicht vermeiden, sorgen Animationen für Interesse. Einfach gesagt: Bieten Sie einen Grund zu warten. Dabei sollten Standard-Ladebalken und Kreise vermieden werden. Zu groß ist die Gefahr, dass diese nach Gewohnheit als Systemabsturz gewertet werden. Besser sind individuelle Animationen mit einer Handlung, ohne das eine Wiederholung zu erkennen ist.

Spielerische Animation von Chris Gannon

Fazit

Interaktion an einem Bildschirm ist eine mentale Herausforderung – jede Hilfestellung ist daher wichtig. Eine schöne Animation ist toll, aber passt sie zum Ziel? Verfolgt eine Animation nicht die Strategie, ist sie Unsinn. Animationen sollten verwendet werden, um das UX-Design zu verbessern, nicht weil sie hübsch sind. Mehr Zutaten eines gelungenen UX-Designs, verraten wir in unserem Artikel „UX-Design: Echter Benefit oder total Banane?“.

 

Was macht Ihrer Meinung nach eine gute Animation aus? Hinterlassen Sie uns ein Kommentar.

 

 

 

 

Bildquelle: fotolia (Wayhome Studio)
Jetzt Beitrag teilenShare on FacebookShare on LinkedInTweet about this on TwitterEmail this to someone

Kommentar schreiben

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.





Das kann Sie ebenfalls interessieren

Unser kostenloser Newsletter für Sie

Die Welt wandelt sich immer schneller und mit Ihr die Technologien und Trends. Mit unserem Newsletter informieren wir Sie über aktuellste Trends, stellen kostenlose Whitepaper zur Verfügung und bieten innovative Workshops an.


Gewonnenes Kundenvertrauen