Micro Animations: Unterhaltsame Interaction in Web Design

Ein Großteil der Webdesign Trends 2017 bezieht sich auf die Aspekte User Experience und User Interface. Dazu zählen neben Design Elementen wie Ghost Buttons, Mobile First, Menüs mit revolutionären Navigations-Paradigmen, Flat 2.0 bzw. Material Design, filmische Erlebnisse, Storytelling Webdesign, Gamification und Scrolling Websites auch sogenannte Micro Animations bzw. Microinteractions.

Fluid Switch | Leo Zakour

Bewegung zieht unsere Aufmerksamkeit auf sich. Im Zeitalter des Überfliegens, in dem die Aufmerksamkeitsspanne des Rezipienten immer kürzer wird, kommt der Nutzerunterhaltung sowie hochwertigen Nutzersignalen eine immer größere Rolle zu. Mithilfe eines ausgewogenen Microinteractions Web Design können Besucher länger “bei Laune” gehalten werden. Aus dem Gefühl heraus, selbst etwas in der Hand zu haben und dafür eine “Rückmeldung” zu erhalten, verweilen Sie länger auf einer Website und werden mit einer memorablen Erfahrung zurück gelassen. Dies ist nicht zuletzt auch für SEO wirksam.

Microinteraction – the magic is all in the details

Klein aber Oho: Als micro wird die Interaktion bezeichnet. In ihrer Funktion und Wirkung ist sie aber tatsächlich eher macro. Dabei liegt die Microinteraction Magie in der Performance, noch mehr aber in der Liebe zum Detail.

Oftmals fällt uns gar nicht auf, wie häufig wir die Microinteractions tagtäglich vollziehen. Sei es das Wegschalten des Weckerklingelns per Snoooooze Taste, das Tinder-Swipen oder der “Gefällt mir” facebook Daumen, Mikro Interaktionen sind allgegenwärtig. Ganz neu sind sie ebenfalls nicht. Zugleich, so finden wir vom Webdesign Berlin Team, hat das Interaction Web Design in den vergangenen Jahren eine Entwicklung durchgemacht:

So waren in den letzten Jahren insbesondere Animationen anzutreffen, die den User für eine bestimmte Handlung „belohnen“ sollen – beispielsweise bewegt sich etwas, wenn man mit der Maus darüber fährt oder anklickt. Seit Kurzem hingegen lassen sich eher dezente Micro Animationen erkennen, die als Designelement in die Seiten integriert sind und mit dem Zweck benutzt werden, Aufmerksamkeit des Users zu erregen. Im Speziellen lassen sich viele Waypoints erkennen, welche es ermöglichen etwas auszulösen, wenn ein User eine Seite herunterscrollt. Folglich können Designer auf diese Weise Besucher dazu bringen, genau da hinzuschauen, wo wir sie hinschauen lassen wollen. Und hier schließt sich wieder der Kreis zum “Zaubertrick” und der Wow-Erfahrung beim Empfänger.

 Gesehen bei Kekselias

The Rise of Micro UX

Was genau ist eigentlich unter Micro Interactions und Micro UX zu verstehen? Als Weiterentwicklung von Infografiken informiert eine Microinteraction den Benutzer in erster Linie darüber, dass Ausführungen erfolgreich abgeschlossen wurden. Derlei Feedback an den User kann ganz unterschiedlich aussehen: Schaltflächen werden gedrückt, Umschalttasten werden verschoben, erforderliche Felder werden ausgefüllt, um nur einige Beispiele zu nennen. Umgekehrt können sie über diejenigen Fälle informieren, bei denen die Schritte eben nicht erfolgreich durchgeführt wurden. Auf diese Weise bekommt ein Benutzer die Informationen über den Fehler oder nicht abgeschlossenen Vorgang schnell und einfach.

Oft sind es reale Interaktionen wie das Drücken von Knöpfen, Öffnen von Boxen oder Türen, Ziehen von Griffen, die imitiert werden. Beispielsweise erfolgt eine Micro Interaction, wenn beim Eintragen der Email Adresse während eines Logins, das @-Zeichen fehlt. Dem User ist es gar nicht möglich, auf den Log-In-Button zu klicken; er wird aufgefordert seine Adresse genauer anzusehen und zu korrigieren. Damit wird der “Fehler” transparent und spart er sich einen erneuten Anlauf.

Das innere Spielkind wecken

Mikrointeraktionen sind kleine Dinge, die dem Nutzer das Gefühl geben etwas tun zu können. Es ist das Gefühl, nicht mehr nur ein unbedeutender, starrer Leser zu sein, sondern etwas bewegen, sagen oder verändern zu können und zwar mit wenig Aufwand. Der Nutzer wird auf “spielerische Weise” beschäftigt, ohne dass es kompliziert wird. Dies ist mit Blick auf das allgegenwärtige Phänomen Gamification umso wichtiger. Das steigende Interesse an Interaktion und Selbstbestimmung Games zeigt sich nicht nur in der großen (WOW und andere) Rollenspiele Community. Auch die Anzahl von Büchern, in denen man selbst bestimmt, wie Story weitergeht bzw. an welcher Stelle man anknüpft wird jährlich größer. Um Besucher einer Seite aus dem Modus des starren Rezipierens heraus zu holen und dadurch nachhaltig zu punkten, gehören (zumindest in kleinstem Maß) spielerische Elemente in Webdesign Konzept. Eine Generation, die mit Games überall aufwächst, wird dies künftig auch in anderen Bereichen, wie eben Design, immer mehr fordern. Micro Animationen bereiten hierfür einen subtilen und zugleich das innere Spielkind befriedigenden Weg.

Ein Hauch mehr Persönlichkeit

Micro Animationen in Form kleiner, flüssiger Bewegungen hauchen einer Website oder App einfach mehr Leben ein. Optimalerweise ist es ja so, dass Microinteractions einen funktionalen Nutzen haben und den Besucher dabei erfreuen. Dies kann auf ganz unterschiedliche Weise umgesetzt werden. Eine Sache, die dabei aber alle erfolgreichen Konzepte gemein haben, ist der Faktor Persönlichkeit: Selbstverständlich abhängig von der Message einer Website allgemein, hinterlassen Micro Animationen einen persönlichen Touch. Geradezu flirtend holen sie den Nutzer an einer ehemals “langweilig” designten Schnittstelle ab und machen den Moment unterhalt- und einprägsam.

Quelle: Emojipedia

Facebook macht es vor

Besonders clever hat Facebook die Sache mit der Micro Interaction gelöst: Am Anfang stand das einfache Like. Ein Daumen hoch; simpel und dennoch enorm aussagekräftig. Heute, einen Schritt weitergedacht, sind es die Emojis, die dem Besucher erlauben, jeden Beitrag mit geringstem Aufwand zu bewerten und ihm (über das “Gefällt mir” hinaus) eine persönliche Emotion verleihen. Simpel und doch mächtig. Die Nutzer haben das Gefühl, sich mitteilen zu können, per Klick.

Auch Google belohnt Interaktionen und Nutzerunterhaltung

Den Nutzer beschäftigen, halten und gefallen – eine Herausforderung nicht nur im Webdesign, sondern ebenso im Bereich Suchmaschinenoptimierung. Micro Animations sind da ein einfaches Mittel, mit wenig Aufwand Interaktion zu erzeugen, die jedem gefällt und mit der jeder umgehen kann. So wird die Verweildauer länger. Daumen hoch bei hochwertigen Nutzersignalen, das sagt auch Google; solange die Ladezeiten der Seite dadurch nicht überfrachtet werden, versteht sich.

Die Vorteile der Schnittstellenanimationen im Überblick

Zu den wesentlichen Vorteilen der Schnittstellenanimation gehören:

• Größere Usability
• Originalität
• Bequeme und einfache Interaktion
• Erfüllen mehrerer Funktionen gleichzeitig
• Hohes Potenzial die Prozesse der Interaktion zu beschleunigen
• Klare Rückmeldung für den Benutzer
• Schaffung von (notwendigen) Erwartungen

Das Einmaleins im Microinteractions Web Design

Folgendes gilt es zu beachten, wenn Microinteractions im Design Konzept eingeplant sind:

Funktionalität hat Vorrang

Im Vordergrund steht es, die Micro Animations so zu konzipieren, dass diese zu ihrer funktionellen Bedeutung passen und nicht als seltsam oder gar nervig aus dem Gesamtkonzept herausstechen. Fast unsichtbar sollten die Elemente sein. Häufige und eher kleinere Aktionen sollten eine verhaltene Rückmeldung nach sich ziehen, wohingegen weniger häufige, dafür aber größere Aktionen auch mit einer substanziellen Rückmeldung daherkommen sollten.

Langlebigkeit im Blick

Was beim ersten Mal noch viel Spaß bereitet, kann nach dem hundertsten Mal lästig werden. Folglich müssen Micro Interactions für einen dauerhaften Gebrauch überlebensfähig sein. Beispielsweise muss man sich den Einsatz von Popups für Newsletter Anmeldungen oder Ähnliches genau überlegen, da sich manche Besucher von aufpoppenden Fenstern gestört fühlen könnten. Zudem straft Google dies seit dem letzten Update zunehmend ab.

Genüsslich interagieren

Wenn Mikrointeraktionen mit einfachen Gesten und subtilen visuellen Feedbacks gepaart werden, nehmen wir sie fast nicht wahr. Sie werden geradezu Teil unseres natürlichen Interagierens mit Produkten und Services. Gerade hier entsteht die Chance, Gewohnheiten beim User aufzubauen und diese mit überraschenden Elementen auf freudige Weise zu durchbrechen. Sie können nicht nur den entscheidenden Unterschied zu einer Erfahrung, in der man interagiert, sondern eine Erfahrung die man toll findet werden.

Checkliste

✅ Zeige den Status an

(z.B. zu wieviel Prozent eine Datei bereits heruntergeladen ist)

✅ Mach Buttons und Bedienelemente durch visuelles Feedback greifbar

✅ Erstelle sinnvolle Übergänge

(z.B. können Micro Animationen als natürliche Navigations-Elemente dienen)

✅ Hilf dem User auf die Sprünge

(gerade bei neuen Besuchern oder App-Neulingen können Micro Animations als Guide fungieren)

✅ Highlighte Änderungen an den Schnittstellen

(z.B. durch visuelle Cues bei Erhalt von Nachrichten)

✅ Füge entzückende Details um die User Erfahrung umso erinnerungswürdiger zu machen

Unsere vier schönsten Micro Interaction Exempel

Zündende Aktualisierung

Pull down to refresh von Toma Reznichenko.

Fliegende Danksagung

Social media sharing mal anders: Kei Sato schafft hier freudige Erfahrungen.

Animation für Data Down- und Upload

Der Bereich Up- und Download von Daten eröffnet eine gute Gelegenheit, mit kreativen animierten Microinteractions zu arbeiten, wie Nick Buturishvili in diesem Beispiel zeigt.

Kreative-Name-Generator

YoungGiverBird, ImportantLoverPanda, BriefAvenueStudent, MysticalHarmonyEngineer oder WildlyLeftCreator – tumblr hilft mit kreativen Account-Namen auf die Sprünge.