The perks of microinteractions

In Bewerbungsgesprächen wurde ich stets gefragt: Was liegt dir mehr: UX oder UI? Als passionierte Motion Designerin habe ich mich dabei immer gefühlt, wie die Mutter, die gefragt wird, welches Kind sie lieber hat. 

<strong><em>UI is the cosmetic of the experience: typography, colors, grid, spacing, icons, buttons.</em></strong> Nielson & Norman Group, 2022

fact

Das, was mich an der Frage immer so gestört hatte, war, dass es sich hierbei eigentlich nicht um eine Entweder-oder-Geschichte handelt (bzw. handeln sollte). So werden auch heute noch Animationen und Microinteractions oftmals fälschlicherweise in die „UI-Party-Gigs-Schublade“ geschoben. 

Was sind Microinteractions?

Microinteractions sind kurze Animationen, welche durch eine bestimmte Aktion oder einen Systemstatus ausgelöst werden und gemäß einer vorgefertigten Logik ein spezifisches Feedback (=Veränderungen auf der Benutzeroberfläche) anzeigen.

In meinen Augen haben diese jedoch insbesondere in den letzten Jahren einen wesentlichen Platz in der User-Experience-Welt errungen – und das aus gutem Grund! 

Hier also 4 Gründe, wie Microinteractions wesentlich zu einer positiven User Experience beitragen können. 

1. Vermitteln von Statusveränderung

Woher wissen wir, ob wir in einem Interface etwas richtig oder falsch gemacht haben? – Feedback zur richtigen Zeit an der richtigen Stelle. 

Beispiel: Unabdinglich, gleichzeitig oft vergessen und vernachlässigt, ist die allseits bekannte Ladeanimation. Stellt euch einen Dateiupload ohne animierte Fortschrittsleiste oder Ladeanimation vor. Nach einigen Sekunden ist die wahrscheinliche Reaktion darauf: Verwirrung, Frustration oder Rage Clicking auf ein und denselben Button (ähnlich, wie beim Aufzugknopf, in der Hoffnung, dass dieser schneller kommt, je häufiger und aggressiver man auf den Knopf drückt) und im schlimmsten Fall: Abbruch. 

Ein anderes Beispiel hierfür ist die Online-Shopping-Erfahrung. Schon mal erlebt? – Objekt zum Warenkorb hinzugefügt und dann nochmal zum Warenkorb-Icon geschaut, um sicherzugehen, dass alles geklappt hat? (Ist das Icon mit der Zahl “1” verziert, haben wir alles richtig gemacht.)

Dies könnte man nebenbei umgehen, indem man den Fokus der User:innen auf den Button nutzt. Bspw. könnte sich der CTA animieren und kurz die Erfolgsmeldungen “Erfolgreich hinzugefügt” im Button einblenden. Somit wird den User:innen unverzüglich die Sicherheit gegeben, dass eine Aktion erfolgreich durchgeführt wurde. Generell sollte die Feedback-Animation von Microinteractions sich optimalerweise immer in der Nähe der zuletzt durchgeführten Aktion abspielen. 

2. Vermitteln von Kontextveränderung

Nehmen wir das Beispiel eines animierten Hamburger Menüs an, welches sich auf Klick zum “Schließen-Icon” verwandelt.

Es kommuniziert den User:innen, was passieren würde, wenn ein weiteres Mal auf das Icon geklickt wird. Abhängig vom Kontext können hier für ein und dieselbe Position zwei unterschiedliche Elemente angezeigt werden (wie bspw. Schließen oder Menü). Dies gilt ebenso für Bookmarks, Favoriten oder auch Likes.

3. Lenken von Aufmerksamkeit 

Generell erregen Bewegungen auf Benutzeroberflächen Aufmerksamkeit. Diese Aufmerksamkeit kann durch Microinteractions gezielt gelenkt werden.

Gehen wir zurück zum Beispiel der Online-Shopping-Erfahrung. Klickt der/die UserIn auf den Button “Zum Warenkorb hinzufügen”, wird das Sichtfeld für kurze Zeit weiterhin auf die Fläche rund um den Button fokussiert sein. Alles außerhalb unseres zentralen Sichtfeldes kann von uns zwar grob wahrgenommen werden, jedoch erkennen wir Elemente und insbesondere Veränderungen in diesem Bereich deutlich schlechter. Dieses Phänomen wird auch als Change Blindness beschrieben.

In diesem Bild befindet sich die Hand im zentralen Sichtfeld und ist somit scharf. Alles darum wird zwar wahrgenommen, wirkt jedoch verschwommen (peripheres Sehen).

Um dem entgegenzuwirken wird der Warenkorb oftmals als kleiner Overlay animiert eingeblendet, um somit das zentrale Sichtfeld und den Fokus des Users / der UserIn zu lenken.

Generell werden Bewegungen innerhalb des peripheren Sichtfeldes weiterhin gut wahrgenommen. Evolutionstechnisch hat sich das periphere Sehen als Schutzmechanismus entwickelt. So können wir, selbst wenn wir gerade auf einen Baum starren, schnell wahrnehmen, wenn seitlich von uns ein Leopard auf uns zurasen würde.

Lauf Gazelle….LAAAAUUUUF

Hier ein Link, der die Thematik peripheres Sehen super aufgreift und erläutert: 

4. Delight und Branding

User-zentriert heißt nicht nur, funktional und benutzerfreundlich zu designen. Es heißt auch,  sich in die User:innen hineinzuversetzen. Ihre Gefühlslage, aber auch Bedürfnisse zu verstehen und darauf einzugehen. Es reicht nicht mehr, nur die richtigen Informationen anzuzeigen. Das Vermitteln von Informationen auf eine spielerische, vergnügliche Art und Weise – auch Edutainment genannt – steht derzeit bspw. im Mittelpunkt der digitalen Wissensvermittlung.

Bedacht eingesetzt, helfen Animationen und Microinteractions die Verweildauer sowie das Engagement mit Benutzeroberflächen zu erhöhen, aber auch gleichzeitig eben genannte Emotionen wie bspw. Vergnügen, Vertrauen und Innovation bei User:innen aufzubauen oder sogar auszulösen. 

Fazit

Microinteractions sind keine UI-Party-Gigs und können – detailliert und bedacht angewandt – einen wesentlichen Teil zur User Experience beitragen. 

Und zuletzt ein Appell an alle Unternehmen, Designer:innen, Entwickler:innen und Product Owners: Scheut euch nicht und investiert Zeit und Liebe in Animationen! Und nicht vergessen:

Bewegung ist Leben, Stillstand ist Tod.
– Eine passionierte Motion Designerin