Microanimation Blog | UX/UI Design PESCHKE Wien
Mikrointeraktionen: Klein, aber oho

Die kleinsten Dinge machen manchmal den größten Unterschied. Was wir konkret meinen? Mikrointeraktionen, bzw. Mikroanimationen. Was das ist? Kleine, funktionale Animationen, die in digitalen Anwendungen eingesetzt werden, um diese lebendiger zu gestalten und ihre Nutzung zu erleichtern. Neben ihren funktionalen Aufgaben tun sie aber vor allem eins: Sie verleihen digitalen Produkten einen „menschlichen Touch“ und ziehen den Nutzer durch das Erwecken von Emotionen in ihren Bann…

November 24, 2022

  • Scroll-Leiste
  • Buttons mit Feedback, z.B. Hover-Zustände
  • „Pull to refresh“ (Ziehen zum Neuladen der Seite)
  • Swipe-Animation („Wischen“)
  • Pop-ups
  • Skeleton Screens (partielles Laden des Grundgerüsts einer Seite)
  • „Pinch to zoom“ (Ansicht mit zwei Fingern vergrößern/verkleinern)
  • Loading Screens und Loaders
  • Erfolgsnachrichten
  • Fehlermeldungen
  • Dropdowns
  • Progress-/Fortschritt-Anzeige
  • Reaktionen wie „Like“/“Gefällt mir“

Aufbau & Ablauf von Mikrointeraktionen

Die Funktion von Mikrointeraktionen wird durch Trigger, Regeln, Feedback sowie Loops & Modi vorgegeben:

Mikrointeraktionen – Aufbau und Ablauf | PESCHKE Designstudio Wien

1. Trigger – leitet die Aktion ein

Mikrointeraktionen werden durch einen Trigger initiiert und sind zweckgebunden. Ein Trigger kann eine Handlung des Users sein, etwa wenn der Cursor über einen Button bewegt wird, oder auch eine Veränderung im Systemstatus.

2. Regeln – geben den Ablauf vor

Regeln geben im Hintergrund vor, was während der Interaktion passiert. Durch Interagieren lernt der User die Regeln, nach denen eine Aktion abläuft → siehe Feedback.

3. Feedback – Bestätigung der Aktion

Visuelles Feedback informiert den User, was gerade aufgrund des Auslösers passiert. Kommuniziert wird das durch kleine, kontextgebundene, meist visuelle Veränderungen am User Interface.

Ein Beispiel: „Ziehe“ ich mit dem Finger den oberen Teil des Smartphone-Screens nach unten, lädt die Seite neu.

4. Loops & Modi – Dauer & Entwicklung der Aktion

Loops und Modi bestimmen im letzten Schritt die Meta-Regeln der Microinteraktion. Meta-Regeln sind übergeordnete Regeln, die beschreiben, wie die eigentlichen Regeln der animierten Interaktion ablaufen oder verändert werden sollen. Loops sind jener Teil der festlegt, wie lange die Mikrointeraktion andauert, ob sie sich wiederholt und wie sie sich im Laufe der Zeit verändert.

Ein kurzes Beispiel: Der animierte Button „Jetzt kaufen“, der neben einem Produkt platziert ist, wird zu „Noch eines kaufen“, sobald der User eine Einheit des Produkts im Warenkorb abgelegt hat.

Zeit für Beispiele

Fühlen Sie den Unterschied?

Bei guten Designs spüren User intuitiv, wie ein Interface und seine Elemente zu bedienen sind. Und bei komplexeren Anwendungen kann die Bedienung dank Mikroanimationen schnell erlernt werden.

Dabei fallen gute Mikroanimationen aber am meisten auf, wenn sie fehlen. Erfüllen sie nämlich ihren Zweck, erleichtern sie zwar die Handhabung und schaffen positive Emotionen, sie stellen sich aber nicht in den Mittelpunkt.

Klicken Sie sich durch eine Auswahl an Beispielen, die spürbar machen, was ohne Mikrointeraktionen „fehlt“:

Microanimation Comparison | UX/UI Design PESCHKE Wien

1.

Microanimation Comparison | UX/UI Design PESCHKE Wien

2.

Microanimation Comparison | UX/UI Design PESCHKE Wien

3.

Previous slide
Next slide

App-Vertrauen durch Mikrointeraktionen

Dieses positive Gefühl gegenüber einem Produkt lässt sich bei Apps sehr gut anhand des Vertrauens erkennen, das ein User einer App entgegenbringt. Visuelle Aufbereitung und Funktion haben nämlich maßgeblich Einfluss darauf, ob ich mich als User z.B. dazu entscheide, meine Kreditkarteninformationen einzugeben, oder ob ich die App gleich nach dem Herunterladen wieder deinstalliere.

Dieses App-Vertrauen lässt sich gut in einer Pyramide à la Maslow abbilden:

  1. Grundlegende Relevanz und Vertrauen, die erfüllt werden müssen
  2. Interesse und Präferenz gegenüber anderen Optionen/Apps
  3. Anvertrauen persönlicher Informationen
  4. Anvertrauen heikler/finanzieller Informationen
  5. Bereitschaft, sich auf eine dauerhafte „Beziehung“ mit der App einzulassen

Oft wird überschätzt, wie viel Vertrauen ein User einer App schenkt. In den meisten Fällen ist nämlich (zumindest anfangs) gar kein Vertrauen vorhanden. Daher imitieren wir mit Mikroanimationen menschliches Verhalten und Emotionen, wodurch User leichter Vertrauen zur App aufbauen können.

Pyramide App-Vertrauen | Microinteractions PESCHKE Designstudio Wien
Mikrointeraktionen: Vorteile im UX Design

Konkret auf die User Experience bezogen, zählen folgende Aspekte zu den Vorteilen von Mikrointeraktionen:

  • Instant Feedback für den User und seine Aktionen
  • Orientierungshilfe innerhalb der Anwendung
  • Unterstützt beim Vertrauensaufbau zwischen App und User
  • Der User weiß immer, was passiert
  • Unterstützt das Verständnis, besonders bei komplexen Interfaces
  • Daraus resultierend: Fehlerprävention (z.B.: eine Einstellung wird erfolgreich gespeichert, anstatt den Vorgang versehentlich abzubrechen oder ungewollte Änderungen vorzunehmen)

Extra-Info für Tech-Nerds: geringe Dateigröße von .lottie

Einen weiteren Benefit bei Mikroanimationen liefern Lottie-Dateien ». Dieses Grafikformat ermöglicht JSON-basierte Animationen mit vielen Vorteilen, denn Lottie-Dateien:

  • Können auf fast jeder Plattform eingesetzt werden, auch ohne Code
  • Besitzen eine sehr geringe Dateigröße (lediglich ein Bruchteil von GIFs oder PNGs), wodurch sie schnell laden und Websites sowie Apps nicht verlangsamen
  • Können skaliert werden, ohne an Qualität einzubüßen, da sie auf mathematischen Berechnungen basieren
  • Sind über HTML oder auf WordPress mittels kostenlosem Plugin leicht zu implementieren
  • Sind via Lottie Editor und Farbpaletten-Feature auch für Unerfahrene leicht bearbeitbar
.lottie Dateigröße | Microinteractions PESCHKE Designstudio Wien

Mikrointeraktionen: Anwendungen im Branding

Auch konkret auf das Thema Branding bezogen bieten Mikrointeraktionen eine Reihe an Vorteilen – ganz nach dem Motto „Motion for emotion“:

  • Rufen Emotionen im User hervor, welche sich positiv auf die Nutzung auswirken
  • Steigern die Interaktionsbereitschaft
  • Unterstützen das Erzählen der Brand Story und des USPs (Unique Selling Point/Alleinstellungsmerkmal)
  • Das Produkt bleibt eher in Erinnerung

Einsatzmöglichkeiten und Nutzen

Diese Vorteile kommen mehreren Marketing-Bereichen zugute und finden sich wieder in:

  • Bewerbung von neuen Produkt-Features
  • Kommunikation der Markenwerte
  • E-Mail Marketing
  • Social Media Content
  • Präsentationen
  • Logo-Animationen
Logo Animation | UX/UI Design PESCHKE Wien

Mikrointeraktionen sind großartig – aber was jetzt?

Mikrointeraktionen werten digitale Anwendungen durch die Verbesserung der User Experience stark auf, sind leicht zu implementieren und helfen sogar bei der Vermarktung eines Produkts aufgrund der emotionalen Bindung, die sie zwischen User und Produkt aufbauen.

Es spricht also nichts dagegen und umso mehr dafür, Mikrointeraktionen auch bei Ihrem digitalen Produkt verstärkt einzusetzen.

Sind Sie bereit, Ihre Anwendung aufzuwerten oder sich zu dem Thema beraten zu lassen? Kontaktieren Sie uns gleich unverbindlich » oder machen Sie direkt einen Termin für ein kostenloses Erstgespräch » aus. Wir freuen uns, Sie und Ihre Projektidee kennenzulernen!

Nach oben Arrow