Täglich nutzen wir Apps und Webseiten auf unseren digitalen Helfern, aber bemerken oftmals nur unterschwellig die für eine angenehme Nutzererfahrung gestalteten Feinheiten. Klare Inhalte und strukturiertes Design (Bilder, Texte, Interaktionen, Erscheinungsbild, Nutzerführung) beeinflussen unsere User Experience und sind alles, was wir auf der digitalen Oberfläche sehen und fühlen.

Als Nutzer beurteilen wir täglich Webseiten unterbewusst abhängig von Funktionen, Verhalten und Look-and-Feel. Ein guter Designer konzentriert sich daher nicht nur darauf, ein ansprechendes Design zu gestalten, sondern auch durch die Bedienung und das Verhalten der gestalteten Elemente emotionale Momente auszulösen.

Ein wichtiger Teil der User Experience sind Micro Interactions.

In diesem Beitrag gehe ich mit dir die Wirkungsweise von Micro Interactions durch, erkläre wie du sie am besten nutzt und worauf du beim Einsatz dieser kurzen Animationen achten solltest.

Welche Detailfragen klären Micro Interactions?

Jede Interaktion löst eine Reaktion aus. Jedes Mal beim Einloggen in ein System, beim Absenden einer Nachricht, beim Ablegen eines Produkts in den Warenkorb, beim Öffnen eines Menüs oder beim Tippen auf einen Button.

Die Reaktion darauf erfolgt auf verschiedene Arten, z.B. mit einer Animation, einem Sound, mit dem Ändern der Button-Farbe, dem Verschieben der Elemente über den Bildschirm oder auch einer Vibration.

Bekannte Micro Interactions sind z.B. der „Gefällt-mir“ Button bei Facebook oder auch das Herz-Symbol bei Instagram, die den Klick/Tap des Nutzers mit einem Animationseffekt belohnen.

Micro Interactions werden laut Dan Saffer (Produktdesigner und Autor von Microinteractions) in vier Phasen unterteilt:

Phase 1: Trigger – durch den Trigger soll eine Interaction ausgelöst werden, z.B. der Nutzer wird animiert zu tippen; Aufforderung zur Passworteingabe.

Phase 2: Rules – Regeln legen fest, was passieren soll bzw. was der Nutzer tun soll z.B. Nutzer tippt seine Kontaktdaten ein.

Phase 3: Feedback – mit dem Feedback soll sichergestellt werden, dass die Regeln eingehalten werden, d.h. was soll der Nutzer erfahren, hören, spüren. Bsp: Die Eingabe ist nicht korrekt => Meldung (Feedback) “Es müssen 8 Zeichen sein.”

Phase 4: Loops & Modes – damit soll festgelegt werden, wie oft sich etwas wiederholen, wie lange etwa dauern soll.

Warum ist es wichtig Micro Interactions zu nutzen?

Animationen werden heute bereits in vielen Apps verwendet, kommen aber zunehmend auf Webseiten und Onlineshops zum Einsatz. Die Benutzung wird durch Micro Interactions lebendiger, sympathischer und erhöht den sogenannten Joy of Use.

Micro Interactions können also entscheidend zur Beliebtheit des Produktes oder einer Anwendung beitragen. Mit liebevoll und sinnhaft gestalteten Details wird dein Produkt also einfacher, unterhaltsamer, menschlicher und spannender. Sie können sogar ein Gefühl von Humor und Wärme erzeugen, da eine Art von Kommunikation mit dem Nutzer stattfindet, die positiv auf die gesamte Marke strahlen kann.

Beispiele, wie Micro Interactions die User Experience beeinflussen

Animierte Elemente können Aktionen auf der Webseite/App verdeutlichen. Einige Beispiele habe ich nachfolgend aufgelistet.

Beispiel 1&1: Das Auge an einen bestimmten Ort führen (Aufmerksamkeit lenken)

Das menschliche Auge lässt sich von beweglichen Dingen ablenken. Unser Gehirn ist darauf ausgelegt, Bewegungen zu bemerken und darauf zu reagieren. Dinge die sich bewegen ziehen die Aufmerksamkeit auf sich. Du kannst das in Webseiten oder Apps zu deinem Vorteil nutzen.

Beispiel konto.ao: Die Eingaben des Benutzers bestätigen (sofortige Rückmeldungen)

Hier wird eine Animation verwendet, um dem Benutzer das mögliche Ergebnis der Aktion zu zeigen.

Beispiel Douglas: Eine Aktion mit einer geeigneten Reaktion verstärken

Als Feedback verstehen wir kleine Aktionen, die sich als direkte Reaktion auf eine Aktion des Nutzers auf der Webseite abspielen. Dem Nutzer wird auf positive Art und Weise suggeriert, dass er etwas richtig gemacht hat. Beispielsweise durch die Einblendung von grafischem Feedback, welches direkt auf eine getätigte Aktion folgt.

Beispiel Stabilo: Das Navigieren erleichtern

Durch kleine Highlights wird dem Nutzer das Navigieren erleichtert und macht somit auch mehr Spaß.

Worauf du beim Einsatz von Micro Interactions achten solltest

Ich möchte dir noch ein paar wichtige Prinzipien mitgeben, falls du darüber nachdenkst Micro Interactions in deiner Webseite/App einzusetzen.

Dauer und Geschwindigkeit der Animation

Wenn Elemente ihren Status oder ihre Position ändern, sollte die Dauer der Animation langsam genug sein, damit Benutzer die Änderung bemerken können, aber gleichzeitig schnell genug, um kein Warten zu verursachen.

Die optimale Geschwindigkeit liegt zwischen 200 und 500 ms. Jede Animation, die kürzer als 100 ms ist, wird überhaupt nicht erkannt. Während eine Animation, die länger als eine Sekunde dauert, ein Gefühl der Verzögerung vermittelt und somit für den Benutzer langweilig ist.

Linkes Video: Den Übergängen kann man schnell und einfach folgen.
Rechtes Video: Übergänge, die zu langsam sind, wirken auf den Benutzer langweilig und erschwerend. Der Benutzer kann die Änderungen an der Benutzeroberfläche nur schwer verfolgen. Vermeide Übergänge, die zu schnell sind. Den Vergleich kannst du dir auch auf material.io anschauen.

Easing für natürliche Bewegungen

In der physischen Welt starten oder stoppen Objekte nicht sofort. Stattdessen brauchen sie Zeit, um zu beschleunigen und zu verlangsamen. Easing ist eine Technik, bei der sich Elemente so bewegen, als ob natürliche Kräfte wirken. Die animierten Elemente bewegen sich nicht in einer konstanten Geschwindigkeit. Sieh dir dazu das folgende Beispiel von breakfreegraphics.com an.

Transitions für bessere Übergänge

Transitions sind Übergänge von einem Inhalt zum anderen. Indem die Übergänge z.B. weich erscheinen und nicht plötzlich eingeblendet werden, lassen sie die Anwendung natürlicher erscheinen. Dem Nutzer fällt es somit leichter nachzuvollziehen was gerade passiert. Zusammenhänge und Zugehörigkeiten von Inhalten und Elementen werden verdeutlicht und Nutzer können sich dadurch besser orientieren.

Fazit: Mit Micro Interactions die User Experience beeinflussen

Wenn es anstrengend ist, ein Produkt online zu kaufen, leidet auch der Gesamteindruck der Marke. Animationen tragen daher einen wichtigen Teil zur Markenidentität bei. Bereits in der Konzeptionsphase sollte das Design von Micro Interactions berücksichtigt werden. Platziere Micro Interactions an den richtigen Stellen, etwa in den Bereichen, wo längere Ladezeiten oder viele Informationen die User Experience unangenehm machen.

Gut gestaltete Micro Interactions können die gesamte UX und die Wahrnehmung der Marke positiv beeinflussen. Es sind die kleinen Momente, die entweder nervig oder angenehm sind, die entscheidend zur Produktbeliebtheit beitragen und daher einen wesentlichen Einfluss auf das emotionale Erlebnis deiner Kunden haben.

Wenn du noch mehr Wissen über UX Website-Design erlangen möchtest, ist das Growth Ambassador Programm ideal für dich. Neben interessanten Meetups mit der Community – in denen sich Fach- und Führungskräfte über ihre Erfahrungen austauschen – gibt es spezielle Videos über Neuro-Webdesign, die dir dabei helfen, deine Kund:innen emotional zu aktivieren.

Nutzt du ganz bestimmte Micro Interactions im Alltag oder hast bestimmte Erfahrung mit den Animationen gesammelt? Ich freue mich über einen Kommentar.