Animationen im User Interface

Was versteht man unter Animationen im UI?

Eine Animation im User Interface (UI) bezieht sich auf die visuelle Bewegung oder Veränderung von Elementen im User Interface. Diese Elemente können textbasiert oder von grafischer Natur sein. Die Animationen können verschiedene Formen annehmen und unterschiedliche Funktionen erfüllen.

Warum braucht man Animationen in UI?

Animationen sind ein wesentliches Element eines modernen User Interface – Designs. Sie verbessern nicht nur die Ästhetik und verleihen der Anwendung eine lebendige und visuell ansprechende Erscheinung, sondern erfüllen auch zahlreiche funktionale Zwecke. Durch Animationen erhält der Benutzer unmittelbares Feedback auf seine Aktionen, was die Interaktion intuitiver und benutzerfreundlicher macht. Sie lenken die Aufmerksamkeit auf wichtige Elemente, erleichtern den Übergang zwischen verschiedenen Zuständen und visualisieren komplexe Prozesse auf verständliche Weise. Animationen können die Persönlichkeit einer Marke betonen – ob humorvoll, verspielt, professionell usw. Insgesamt tragen Animationen im User Interface dazu bei, eine reibungslose und attraktive Benutzererfahrung zu schaffen, indem sie die Bedienung erleichtern und die Anwendung ansprechender und lebendiger gestalten.

Bei der Art von Interaktion mit Animationen unterscheidet man zwischen zwei Arten:
Echtzeit und Nicht-Echtzeit Interaktionen.

Echtzeit bedeutet, dass der Benutzer direkt mit den Objekten auf der Benutzeroberfläche interagiert. Interaktionen in Echtzeit können auch als „direkte Manipulation“ betrachtet werden.
Echtzeit Animationen dienen dazu, sofortige visuelle Rückmeldungen zu bieten, was die Benutzerzufriedenheit und das Engagement insofern fördert, als da sich User stärker in die Anwendung eingebunden fühlen. Eingesetzt werden Echtzeit Interaktionen beispielsweise bei Hover-Effekten oder beim Wischen durch eine Galerie.

Nicht-Echtzeit bedeutet, dass das Objektverhalten post-interaktiv ist: Die Interaktion tritt nach einer Benutzeraktion auf und ist übergangsweise. Nicht-Echtzeit Interaktionen haben zudem den Effekt, dass der Benutzer kurzzeitig von der Benutzererfahrung ausgeschlossen wird, bis der Übergang abgeschlossen ist. Nicht-Echtzeit Animationen ermöglichen eine kontrollierte Darstellung und ein einheitliches visuelles Erlebnis, da sie von Usern nicht manipuliert werden können, weshalb sie sich vor allem für Hintergrundanimationen, Seitenübergänge oder Einführungssequenzen eignen.

Jede Interface-Animation schöpft aus dem gleichen Repertoire an Techniken, um Websites und Apps ansprechender zu gestalten. Viele dieser Techniken haben ihre Wurzeln im goldenen Zeitalter der handgezeichneten Cartoons – wurden aber für das digitale Zeitalter angepasst.
Die Umsetzung dieser Techniken für Animationen im User Interface sind zwar in der Ausführung zu den Animationsprinzipien von Disney ähnlich, unterscheiden sich aber in Zweck und Ergebnis: Während UI-Animationen das Benutzererlebnis verbessern und praktische Funktionen erfüllen sollen, priorisieren Disney-Animationen künstlerische und erzählerische Aspekte, um Geschichten erzählen zu können.

Prinzip 1: Easing

In der Natur ist die Geschwindigkeit von Bewegungen nie linear bzw. konstant:
Objekte werden schneller, wenn sie sich in Bewegung setzen, und langsamer, wenn sie zum Stillstand kommen. Mit der Technik des „Easing“ können wir dies vermitteln.
Easing bezeichnet eine Animationstechnik, die Bewegungen durch variable Geschwindigkeiten realistischer macht und das natürliche Verhalten von Objekten nachahmt. Sie ist von dem Disney Animationsprinzip „Slow In and Slow Out“ beeinflusst. Nutzer empfingen nicht-lineare Bewegungen als nahtlos und weitgehend unsichtbar – was insofern gut ist, als dass sie nicht ablenken. Lineare Bewegungen sind hingegen deutlich sichtbar und wirken oft irgendwie unfertig, störend und ablenkend.

Linear: Das Objekt bewegt sich mit einer konstanten Geschwindigkeit.

Ease: Das Objekt wird am Anfang leicht beschleunigt und am Ende leicht verlangsamt.

Ease-in Die Bewegung beginnt langsam, wird aber im weiteren Verlauf beschleunigt.

Ease-out: Die Bewegung beginnt schnell und wird am Ende sanft abgebremst.

Typische Einsatzbereiche.

• Scroll-Effekte: Weiches Ein- und Ausblenden von Inhalten beim Scrollen.
• Seitenübergänge: Übergänge zwischen Seiten oder Zuständen, die durch Beschleunigungs- und Verzögerungseffekte flüssiger wirken.

Prinzip 2: Offset & Delay

Offset & Delay ist das zweite Prinzip, welches indirekt von einem Disney Animationsprinzip übernommen wurde, in diesem Fall von „Follow Through and Overlapping Action“. Sie beschreibt eine Animationstechnik, bei der Elemente zeitlich versetzt (Offset) oder verzögert (Delay) bewegt werden, um dynamische und natürliche Bewegungen zu erzeugen. Die Technik verstärkt das Gefühl von einer vielschichtigen Bewegung und hilft dabei, die Aufmerksamkeit auf einzelne Elemente im User Interface zu lenken, in dem sie den Platz eines Objekts innerhalb einer Hierarchie von Elementen angibt.

Typische Einsatzbereiche:

• Galerien und Karusselle: Bilder oder Inhalte, werden mit leichter Verzögerung durchlaufen, um einen dynamischen Übergang zu erzeugen.
• Scroll-Effekte: Elemente, die beim Scrollen in den Sichtbereich kommen, können versetzt und verzögert eingeblendet werden.

Prinzip 3: Transformation

Unter Transformation versteht man eine Technik zur Umwandlung eines Objektes (z.B. eines runden Symbols) in ein anders ( z. B. Ein quadratisches Symbol), indem zwischen verschiedenen Zuständen interpoliert wird. Transformationen können dabei helfen, den Benutzerfluss zu verdeutlichen, bzw. einen kontinuierlichen Erzählfluss zu erzeugen, indem sie den Übergang von einem Zustand oder einer Seite zum Nächsten darstellen. Wenn ein Element sich in ein anderes verwandelt, wird klar, wie diese Elemente zusammenhängen. Diese Kontinuität führt zu einer besseren Wahrnehmung und Weiterverfolgung durch den Benutzer.
Die Transformation ist gut erkennbar, erregt unsere Aufmerksamkeit, erzählt eine Geschichte und hat einen Abschluss.

Typische Einsatzbereiche

• Icon-Animationen: Icons, die sich bei Interaktion in andere Symbole verwandeln.
• Formularübergänge: Elemente, die sich von einer Form in eine andere ändern, um den Übergang zu verdeutlichen.

Prinzip 4: Fade-in & Fade-out

Die Animationstechnik Fade-in & Fade-out bezieht sich auf das Erscheinen und Verschwinden eines Objekts durch einen Übergang von Transparenz zu Opazität. Dies ist eine einfache und effektive Methode, um Inhalte sanft ein- oder auszublenden und dabei wichtige Informationen hervorzuheben oder den Übergang zwischen verschiedenen UI-Elementen zu unterstützen.

Typische Einsatzbereiche:

• Modale Dialoge: Ein- und Ausblenden von Popup-Fenstern.
• Bildwechsel: Übergänge zwischen Bildern in Galerien oder Slider, die durch sanftes Ein- und Ausblenden erfolgen.

Prinzip 5: Masking

Masking ist eine Technik, bei der Teile eines Elements durch eine Maske versteckt oder sichtbar gemacht werden. Mit Masking kann man bestimmte Bereiche eines Elements sichtbar machen, während andere Bereiche verborgen bleiben.

Typische Einsatzbereiche:

• Bildenthüllung: Bilder, die durch einen Wisch- oder Scroll-Effekt teilweise enthüllt werden.
• Interaktive Karten: Bereiche einer Karte, die je nach Interaktion des Nutzers sichtbar gemacht werden.

Prinzip 6: Dimension

Dimension bezieht sich auf die Verwendung von dreidimensionalen Animationseffekten, um räumliche Beziehungen und Hierarchien zwischen UI-Elementen klarer darzustellen. Dimension schafft im User Interface einen räumlichen Erzählrahmen und vermittelt ein Gefühl von Tiefe und Raum.

Typische Einsatzbereiche:

• Modalfenster: Pop-ups, die aus dem Hintergrund hervortreten und den Benutzerfokus einnehmen.
• Produktpräsentationen: Dreidimensionale Darstellungen von Produkten, die gedreht oder vergrößert werden können

Prinzip 7: Parallax

Das Parallax-Prinzip erzeugt einen Tiefeneffekt, indem verschiedene Objekte sich mit unterschiedlicher Geschwindigkeit auf der Benutzeroberfläche bewegen. Beim Scrollen wird dadurch eine Tiefenillusion erzeugt.

Typischer Einsatzbereich:

• Landing Pages: Dynamische Übergänge zwischen Seitenabschnitten.
• Produktpräsentationen: Produkte erscheinen detaillierter und interessanter.

Prinzip 8: Zoom

Zoom beschreibt die Veränderung der Bildgröße. Dabei wird das Bild fließend von einer Gesamtaufnahme zu einer Nahaufnahme (oder umgekehrt) verändert. Diese Animationstechnik verleiht der Anwendung mehr Tiefe, informiert Nutzer über zusätzliche Inhalte, die primär nicht sichtbar sind und kann verwendet werden, um den Fokus auf bestimmte Inhalte zu lenken.

Typische Einsatzbereiche:

• Bildgalerien: Vergrößerung von Bildern bei Hover oder Klick.
• Karteninteraktionen: Vergrößern eines Kartenausschnitts zur besseren Detailansicht.

Prinzip 9: Cloning

Cloning beschreibt einen Vorgang, bei dem ein Element dupliziert oder kopiert wird, um visuelle Effekte oder Übergänge zu erstellen. Dies kann durch Kopieren und Einfügen eines Elements in eine neue Position oder einen neuen Zustand erfolgen, wodurch visuelle Hierarchien oder Übergänge verdeutlicht werden könnenn.

Typische Einsatzbereiche:

• Navigationsübergänge: Duplizieren von Menüelementen, um den Wechsel zwischen verschiedenen Seiten oder Ansichten zu verdeutlichen.
• Interaktive Listen: Klonen von Listenelementen bei Drag-and-Drop-Aktionen, um eine visuelle Rückmeldung zu geben.

Prinzip 10: Value Change

Value Change beschreibt die visuelle Änderung von numerischen Werte.
Diese Änderung kann durch schrittweise Aktualisierungen oder flüssige Übergänge erfolgen. Die Technik schafft eine dynamische und erzählerische Verbindung zu den dargestellten Werten.

Typische Einsatzbereiche:

• Ladebalken: Fortschrittsanzeigen, die den Fortschritt eines Prozesses zeigen.
• Statistiken und Diagramme: Animierte Veränderungen in Grafiken oder Zählern.

Prinzip 11: Overlay

Overlay beschreibt eine Technik, mit der eine zusätzliche Ebene (Overlay) über die bestehende Benutzeroberfläche gelegt wird, um Informationen, Interaktionen oder visuelle Effekte anzuzeigen, ohne den aktuellen Kontext vollständig zu verlassen. Diese Overlays können temporär erscheinen und verschwinden und helfen dabei, die Aufmerksamkeit des Nutzers zu lenken.

Typische Einsatzbereiche:

• Modalfenster: Dialoge oder Pop-ups, die über den Hauptinhalt gelegt werden.
• Benachrichtigungen: Hinweise oder Alarme, die temporär über dem Inhalt erscheinen.

Prinzip 12: Obscuration

Durch die Obscuration-Technik wird der Fokus auf ein bestimmtes Element oder eine bestimmte Interaktion gelenkt , in dem sie Teile der Benutzeroberfläche vorübergehend verdeckt oder abdunkelt. Diese Technik wird verwendet, um die Aufmerksamkeit des Nutzers gezielt auf wesentliche Informationen oder Aktionen zu richten, indem der restliche Inhalt visuell zurückgenommen wird.

Typische Einsatzbereiche:

• Modale Überlagerungen: Dunkler Hintergrund, wenn ein Modalfenster aktiv ist.
• Ladebildschirme: Verdunkelung des Hintergrunds, während ein Ladeindikator angezeigt wird.

Animationen sind ein wesentlicher Bestandteil des User Interfaces. Sie heben Details hervor, unterstützen die Navigation, lenken die Aufmerksamkeit, regen zur Interaktion an, geben Hinweise zur Nutzung von UI-Elementen, visualisieren Hierarchien und schaffen einzigartige Branding- und Storytelling-Erlebnisse. Animationen im User Interface sollen Freude bereiten und in erster Linie die Benutzerfreundlichkeit verbessern. Designer müssen sich daher stets fragen, inwiefern eine Animation neben der ästhetischen Wirkung die Benutzerfreundlichkeit unterstützt.