Microinteractions: Kleine Animationen mit großer Wirkung

Microinteractions sind kleine Rückmeldungen auf eine einzelne Handlung: Ein Button gibt beim Klick sichtbar nach, ein Schalter gleitet in die neue Position, ein Formularfeld meldet sofort, dass die E-Mail-Adresse unvollständig ist. Sie machen Bedienung verständlicher, weil Nutzer sehen, dass ihre Aktion angekommen ist. Gut umgesetzt sind sie kurz, zweckgebunden und respektieren die Einstellung für reduzierte Bewegung.

Weitere schnelle Verbesserungen für Ihre Website finden Sie in der Übersicht Tipps für ansprechendes Webdesign.

Woraus eine Microinteraction besteht

Der Begriff wurde vor allem durch das gleichnamige Fachbuch von Dan Saffer bekannt. Er beschreibt vier Bestandteile, die sich als Planungshilfe eignen:

Auslöser können vom Nutzer kommen, etwa ein Klick, oder vom System, etwa eine eingehende Nachricht. Wer diese vier Punkte vor der Gestaltung beantwortet, vermeidet Animationen, die schön aussehen, aber nichts erklären.

Wo Microinteractions wirklich helfen

Der beste Ort für eine Microinteraction ist ein Moment, in dem Nutzer sonst unsicher wären:

• Buttons und Links: Hover-, Fokus- und Klickzustand zeigen, dass ein Element bedienbar ist und reagiert hat. Wie Buttons darüber hinaus gestaltet werden, beschreibt Call-to-Action-Buttons gestalten.
• Formulare: Prüfung direkt beim Verlassen eines Feldes, ein Häkchen bei gültiger Eingabe, ein sichtbarer Hinweis bei Fehlern. Das spart den Frust, erst nach dem Absenden alle Fehler auf einmal zu sehen.
• Ladezustände: Ein Button, der nach dem Klick einen Ladeindikator zeigt, verhindert doppeltes Absenden. Bei längeren Vorgängen hilft ein Fortschrittsbalken mehr als ein endlos drehender Kreis.
• Schalter und Auswahl: Ein Umschalter, der in die neue Position gleitet, macht den Zustand eindeutiger als eine bloße Farbänderung.
• Bestätigungen: „In den Warenkorb gelegt“, „Gespeichert“ oder „Link kopiert“ als kurze Einblendung, die von selbst wieder verschwindet.
• Navigation: Ein Menü, das sich aufschiebt statt plötzlich zu erscheinen, zeigt, woher es kommt und wohin es wieder verschwindet. Mehr zum Aufbau im Artikel Website-Navigation gestalten.

Weniger sinnvoll sind Animationen, die bei jedem Scrollen Inhalte einfliegen lassen. Sie verzögern das Lesen und verlieren nach dem dritten Mal ihren Reiz.

Dauer und Easing

Die häufigste Schwäche von Animationen ist nicht ihr Aussehen, sondern ihr Timing. Als Orientierung:

Reaktionen unter etwa einer Zehntelsekunde nehmen Menschen als sofort wahr. Alles deutlich über einer halben Sekunde wirkt bei häufig genutzten Elementen träge. Legen Sie die Werte als wenige feste Stufen fest, etwa „kurz“, „mittel“ und „lang“, und verwenden Sie sie auf der ganzen Website. So wirken alle Bewegungen wie aus einem Guss.

Ebenso wichtig ist die Beschleunigungskurve (Easing). Bewegungen in der realen Welt starten und enden selten mit konstanter Geschwindigkeit. Für Elemente, die hereinkommen, wirkt ease-out natürlich: schneller Start, sanftes Abbremsen. Für Elemente, die verschwinden, passt ease-in. Lineare Bewegung eignet sich vor allem für Ladeindikatoren und Fortschrittsbalken.

Umsetzung mit CSS

Für die meisten Microinteractions genügt CSS, eine JavaScript-Bibliothek ist selten nötig. Ein Button mit Hover-, Fokus- und Klickzustand:

.button {
  transition: background-color 150ms ease-out, transform 150ms ease-out;
}
.button:hover {
  background-color: var(--farbe-akzent-dunkel);
}
.button:active {
  transform: scale(0.97);
}
.button:focus-visible {
  outline: 3px solid var(--farbe-fokus);
  outline-offset: 2px;
}

Drei Regeln halten Animationen flüssig:

1. Nur transform und opacity animieren. Diese Eigenschaften kann der Browser besonders effizient berechnen. Änderungen an width, height, top oder margin lösen dagegen bei jedem Bild eine neue Layoutberechnung aus und können ruckeln.
2. Kein Layoutsprung. Eine Fehlermeldung, die unter einem Feld auftaucht, sollte Platz bereits reserviert haben oder den Inhalt sanft verschieben, statt die Seite springen zu lassen.
3. Keine Animation als Voraussetzung. Die Funktion muss auch ohne Animation vollständig verständlich sein.

Barrierearm animieren

Bewegung kann für manche Menschen ein echtes Problem sein. Bei vestibulären Störungen können große Bewegungen, Parallax-Effekte oder Zooms Schwindel und Übelkeit auslösen. Ablenkende Animationen erschweren außerdem Menschen mit Konzentrationsschwierigkeiten das Lesen.

Betriebssysteme bieten deshalb eine Einstellung für reduzierte Bewegung, die Websites über die Media Query prefers-reduced-motion abfragen können:

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Dieses Beispiel schaltet Bewegung pauschal nahezu ab. Feiner ist es, nur große Bewegungen zu ersetzen, etwa ein Einschieben durch ein sanftes Einblenden, und dezente Farbwechsel beizubehalten.

Darüber hinaus enthalten die Web Content Accessibility Guidelines (WCAG) Anforderungen, die Animationen betreffen:

• Inhalte, die sich automatisch bewegen, blinken oder scrollen und länger als fünf Sekunden laufen, müssen sich pausieren, stoppen oder ausblenden lassen.
• Nichts darf häufiger als dreimal pro Sekunde aufblitzen, weil das Anfälle auslösen kann.
• Auf der höchsten Konformitätsstufe soll sich Bewegung, die durch Interaktion ausgelöst wird, abschalten lassen.

Außerdem müssen Zustandsänderungen auch für Screenreader verständlich sein. Eine Erfolgsmeldung, die nur visuell erscheint, erreicht blinde Nutzer nicht. Ein Bereich mit aria-live="polite" sorgt dafür, dass der Text vorgelesen wird. Mehr zu den Anforderungen steht im Ratgeber Barrierefreies Webdesign.

Microinteractions testen

Ob eine Microinteraction funktioniert, zeigt sich erst im Gebrauch. Vier einfache Tests decken die meisten Schwächen auf:

1. Wiederholungstest: Die Aktion zwanzigmal hintereinander ausführen. Was beim ersten Mal charmant wirkt, darf beim zwanzigsten Mal nicht stören oder bremsen.
2. Tastaturtest: Alle Elemente nur mit Tabulator, Eingabe- und Leertaste bedienen. Jeder Zustand muss auch ohne Maus sichtbar sein.
3. Bewegung reduzieren: Im Betriebssystem die Einstellung für reduzierte Bewegung aktivieren und die Seite erneut durchgehen. Bleibt alles verständlich?
4. Langsames Gerät: Die Seite auf einem älteren Smartphone oder mit gedrosselter Rechenleistung in den Entwicklerwerkzeugen des Browsers prüfen. Ruckelnde Animationen fallen hier sofort auf.

Ergänzend hilft ein Screenreader-Durchlauf, um zu prüfen, ob Bestätigungen und Fehlermeldungen vorgelesen werden. Die gängigen Betriebssysteme bringen dafür eigene Screenreader mit.

Typische Fehler

• Animation ohne Zweck: Bewegung, die nichts erklärt, lenkt nur ab.
• Zu lang: Eine Animation von einer Sekunde bei jedem Menüklick bremst Nutzer bei jeder Bedienung.
• Nur Farbe als Rückmeldung: Ein Feld, das bei Fehlern nur rot wird, ist für Menschen mit Farbsehschwäche schwer zu erkennen. Ein Symbol und ein Text gehören dazu.
• Fokus vergessen: Hover-Effekte sind gestaltet, der Tastaturfokus aber unsichtbar.
• Bewegung erzwingen: Die Einstellung für reduzierte Bewegung wird ignoriert.
• Schwere Bibliotheken: Für einen Hover-Effekt wird eine große Animationsbibliothek geladen.

Checkliste Microinteractions

• Jede Animation beantwortet eine Frage des Nutzers: Hat es geklappt, was passiert, wo bin ich?
• Dauer zwischen etwa 100 und 400 Millisekunden, je nach Größe der Veränderung
• Easing passend zur Richtung, keine lineare Bewegung bei Ein- und Ausblendungen
• Nur transform und opacity animiert, keine Layoutsprünge
• Hover-, Fokus- und Aktiv-Zustand für alle bedienbaren Elemente
• prefers-reduced-motion berücksichtigt
• Automatische Bewegung über fünf Sekunden lässt sich anhalten
• Statusmeldungen auch für Screenreader verfügbar

Microinteractions sind das Detail, das eine Website angenehm statt nur korrekt macht. Ihr Maßstab ist einfach: Merkt der Nutzer, dass etwas fehlt, wenn sie nicht da sind? Dann lohnen sie sich.