Mikrointeraktionen: 15 Beispiele und wie man sie gestaltet
Mikrointeraktionen erklärt: eine Definition, die vier Teile von Dan Saffer, 15 reale Beispiele, gruppiert nach Typ, Designregeln und wie man sie in CSS, Framer Motion, GSAP oder ExodeUI erstellt.
Kernaussage
Eine Mikrointeraktion ist ein kleiner, abgeschlossener Moment in einer Benutzeroberfläche, der eine Sache bewirkt: einen Beitrag mit „Gefällt mir“ markieren, eine Einstellung umschalten, ein Formular bestätigen oder eine Geste ausführen. Der Begriff und seine Anatomie stammen von Dan Saffer, der vier Teile definiert. Ein Auslöser startet es, Regeln entscheiden, was passiert, Feedback zeigt das Ergebnis und Schleifen oder Modi bestimmen, was im Laufe der Zeit geschieht. Gute Mikrointeraktionen sind kurz, reagieren auf die eigenen Eingaben des Benutzers und bleiben unterbrechbar.
Was ist eine Mikrointeraktion?
Eine Mikrointeraktion ist die kleinste vollständige Interaktion in einem Produkt: eine einzelne Aufgabe mit einem Anfang, einer Änderung und einem Ende. Es ist kein ganzer Fluss. Das Liken eines Beitrags ist eine Mikrointeraktion; Das Schreiben und Veröffentlichen eines Kommentars ist ein Fluss. Die Idee und ihre Struktur stammen aus Dan Saffers Buch „Microinteractions“, das alle in vier Teile gliedert.
Die vier Teile einer Mikrointeraktion
Das Framework von Dan Saffer unterteilt eine Mikrointeraktion in vier Komponenten. Sie zu benennen ist nützlich, da die meisten Fehler und die meisten schlechten Bewegungen in einem der vier vorkommen und nicht im Ganzen.
Auslösen
Das Ereignis, das es startet. Vom Benutzer initiiert (Tippen, Bewegen des Mauszeigers, langes Drücken, Ziehen) oder vom System (Beenden eines Downloads, Auftreten eines Netzwerkfehlers). Bildnachweis: Dan Saffer.
Regeln
Was passiert, wenn es gestartet wird: gültige Zustände, Einschränkungen wie Ziehgrenzen oder Mindest- und Höchstwerte sowie die Abfolge der Ereignisse. Bildnachweis: Dan Saffer.
Rückmeldung
Wie das Produkt dem Benutzer mitteilt, was passiert ist: das Einfedern, die Farbänderung, die Symbolveränderung, die Textaktualisierung. Hier lebt der Großteil des Motion-Designs. Bildnachweis: Dan Saffer.
Schleifen und Modi
Was die Interaktion im Laufe der Zeit bewirkt und wie Modi sie verändern. Derselbe Schalter kann sich im Dunkelmodus oder in einem kompakten Layout unterschiedlich verhalten, ohne seine Logik zu ändern. Bildnachweis: Dan Saffer.
Warum Mikrointeraktionen wichtig sind
Eine Mikrointeraktion ist die Art und Weise, wie eine Schnittstelle dem Benutzer ohne einen Textabschnitt antwortet. Es bestätigt, dass eine Aktion eingegangen ist, zeigt an, dass etwas noch funktioniert, oder erklärt, was sich gerade geändert hat. Wenn sie fehlen, fühlt sich das gleiche Produkt schwerer an: Benutzer tippen zweimal, weil ihnen nichts mitgeteilt hat, dass das erste Tippen gelandet ist, oder sie warten auf einem Bildschirm, der keine Anzeichen von Fortschritt zeigt. Gute werden mehr gefühlt als wahrgenommen, und das ist der Punkt.
15 Beispiele für Mikrointeraktionen
Diese sind nach dem, was sie kommunizieren, gruppiert. Wenn ExodeUI ein passendes Beispiel liefert, wird der Name angegeben, damit Sie es öffnen und bearbeiten können.
Tasten und Schalter (Drücken und Zustand)
1. Tastendruck: Skaliert auf etwa 0,92, wenn der Zeiger nach unten zeigt, und springt beim Loslassen zurück (ExodeUI Beispiel: Jelly Button). 2. Kippschalter: Federbasierte Übersetzung mit Farbwechsel beim Festschreiben (Gooey Toggle). 3. Modusschalter: ein segmentiertes Steuerelement, das seinen Indikator verschiebt und die aktive Beschriftung verändert (Bewegungsschalter).
Formular-Feedback (Validierung und Einreichung)
4. Ungültiges Verwackeln der Eingabe: eine kurze horizontale Bewegung mit der Aufschrift „Dieses Feld überprüfen“ ohne Dialog (Wiggle Text Input). 5. Senden läuft: Die Schaltfläche wird zur Fortschrittsanzeige, sodass der Benutzer nie seinen Platz verliert (Animierte Schaltfläche „Senden“). 6. Erfolgsbestätigung: ein kleiner feierlicher Ausbruch auf dem Knopf, wenn die Aktion landet (Raketenstartknopf).
Laden und Fortschritt
7. Kreisförmiger Fortschritt: ein Ring, der sich bis zum tatsächlichen Wert füllt und sich mit einer Feder (Radialanzeige) stabilisiert. 8. Pegel- oder Aktivitätsanzeige: eine Leiste, die live auf eingehende Daten wie den Audiopegel (Sound Wave) reagiert.
Navigation
9. Menüumschaltung: ein Symbol, das zwischen zwei Zuständen wechselt und das Menü an Ort und Stelle anzeigt (Morph Nav). 10. Dock-Vergrößerung: Objekte in der Nähe des Cursors heben sich, wachsen und setzen sich dann ab (Magnetic Dock). 11. Tab-Auswahl: eine Anzeige, die zwischen den Tabs gleitet, anstatt zu blinken (Liquid Tab Bar).
Leer- und Erfolgszustände
12. Leerer Zustand: eine kleine Illustration, die einmalig animiert wird, um einen leeren Bildschirm weicher zu machen. 13. Belohnungspräsentation: ein Geschenk oder Abzeichen, das sich voller Vorfreude öffnet, wenn ein Meilenstein erreicht ist (Überraschungsgeschenkbox).
Zum Aktualisieren ziehen
14. Pull-to-refresh: elastisches Überrollen, das dem Widerstand folgt, dann zurückspringt und sich beim Loslassen beruhigt. Das Feedback ist die Dehnung, kein Spinner.
Feedback im haptischen Stil
15. Bestätigungsimpuls: ein kurzes Skalieren und Leuchten auf dem Element, das das haptische Tippen auf dem Mobiltelefon widerspiegelt, sodass sich die gleiche Aktion auf einem Gerät ohne Vibrationsmotor gleich anfühlt.
Designregeln, die dafür sorgen, dass sie gut bleiben
Ein paar Regeln unterscheiden eine Mikrointeraktion, die hilft, von einer, die nervt.
- Fassen Sie es kurz: Am vollständigsten ist es in etwa 200–400 ms; Eine längere Bewegung auf einem kleinen Element fühlt sich langsam an
- Beginnen Sie im selben Frame wie die Eingabe; Ein verspäteter Start zerstört den Sinn für Ursache und Wirkung
- Halten Sie es unterbrechbar: Wenn der Benutzer die Aktion mitten in der Bewegung umkehrt, leiten Sie mit der Geschwindigkeit um, anstatt von Null neu zu beginnen
- Respektieren Sie Prefers-Reduced-Motion: Stellen Sie einen statischen oder überblendenden Fallback bereit, der die Änderung dennoch kommuniziert
- Geben Sie ihm eine Aufgabe: Wenn die Interaktion mehr als eine Entscheidung erfordert, ist sie ein Fluss
Wie man Mikrointeraktionen aufbaut
Welches Tool das richtige ist, hängt davon ab, auf wie vielen Plattformen die gleiche Interaktion laufen muss.
Nur CSS
Gut für einfache, eigenständige Fälle: Schwebelifte, Fokusringe und Umschalter, die durch :checked oder einen Klassenwechsel gesteuert werden. Übergänge und @keyframes reichen aus, und außer dem Stylesheet gibt es nichts zu versenden.
Framer Motion oder GSAP (Web)
Gut, wenn die Bewegung Sprünge, Gesten oder Orchestrierung erfordert und nur im Internet ausgeführt werden muss. Beide bieten unterbrechbare Federn und können per React-Zustand angetrieben werden.
ExodeUI (Web, iOS und Android aus einer Datei)
Verwenden Sie dies, wenn sich dieselbe Interaktion in einer React-App, einer SwiftUI-App und Flutter identisch verhalten muss. Sie erstellen es einmal in einer .exode-Datei und die Laufzeit spielt es auf jeder Plattform ab, sodass kein Umschreiben pro Plattform erfolgt.
Produktionsnahes Implementierungsbeispiel
import { ExodeUICanvas } from 'exodeui';
// Springs, states and timing live in the .exode file (designed in the
// editor). Your code passes inputs in and hears events back.
export function SendButton() {
return (
<ExodeUICanvas
src="/send_button.bexode"
onTrigger={(name) => console.log('ExodeUI event:', name)}
/>
);
}Wichtige Prinzipien
- Eine Mikrointeraktion ist eine kleine Aufgabe mit einem Auslöser, Regeln, Feedback und Schleifen oder Modi, den vier Teilen, die Dan Saffer nennt
- Die meisten guten sind in etwa 200–400 ms fertig, starten im selben Frame wie die Eingabe und bleiben unterbrechbar
- Feedback ist das, was funktioniert: Es bestätigt die Aktion und erklärt, was sich geändert hat, oft ohne Text
- Stellen Sie immer einen bevorzugten Fallback mit reduzierter Bewegung bereit, der dieselben Informationen ohne Bewegung überträgt