Micro-Interactions im UI Design

Micro-Interactions sind kurze, fokussierte Animationen in einer Benutzeroberfläche, die auf eine einzelne Nutzeraktion oder einen Systemzustand reagieren und so unmittelbares, verständliches Feedback geben.

Was sind Micro-Interactions?

Der Begriff wurde 2015 von Dan Saffer in seinem Buch „Microinteractions: Designing with Details" geprägt. Saffer definiert eine Micro-Interaction als eine Interaktion mit vier Teilen: Trigger (Auslöser), Regeln (was passiert), Feedback (wie es kommuniziert wird) und Schleifen/Modi (Wiederholung und Variationen).

Micro-Interactions sind überall: das Vibrationsfeedback beim Entsperren eines Smartphones, das Like-Herz auf Instagram, das Shake einer Login-Maske bei falschem Passwort, der Toggle-Schalter für Dunkelmodus. Sie sind klein, aber sie summieren sich zur gefühlten Qualität eines Produkts.

Erklärung

Die vier Bestandteile (nach Saffer, 2015)

1. Trigger: Was löst die Interaction aus? Nutzeraktion (Klick, Hover, Tippen) oder Systemzustand (Laden abgeschlossen, Fehler aufgetreten)
2. Regeln: Was passiert als Reaktion? Welcher Zustand ändert sich?
3. Feedback: Wie wird die Aktion kommuniziert? Visual, haptisch, auditiv
4. Schleifen & Modi: Wiederholt sich die Animation? Gibt es Variationen?

Typische Micro-Interaction Kategorien

State-Feedback: Zustandsänderungen visuell kommunizieren ```css / Toggle-Schalter / .toggle { background: #ccc; border-radius: 20px; transition: background 0.25s ease; }

.toggle.aktiv { background: #0078ff; }

.toggle-daumen { transform: translateX(0); transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); }

.toggle.aktiv .toggle-daumen { transform: translateX(24px); } ```

Error-Feedback: Fehlerzustand klar kommunizieren ```css @keyframes schütteln { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }

.eingabefeld.fehler { border-color: #ff3b30; animation: schütteln 0.4s ease-out; } ```

Success-Feedback: Erfolg mit Freude kommunizieren ```javascript // Confetti-Effekt bei Formular-Absenden import confetti from 'canvas-confetti';

function zeigeErfolg() { confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 } }); } ```

Loading-States: Warten erträglich machen (siehe auch Loading Animationen & Skeleton Screens)

Hover-Micro-Interactions

```css / Button mit mehreren Hover-Layern / .btn { position: relative; overflow: hidden; background: #0078ff; color: white; border: none; padding: 12px 24px; border-radius: 6px; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; }

/ Ripple-Effekt Layer / .btn::after { content: ''; position: absolute; inset: 0; background: rgba(255,255,255,0); transition: background 0.3s ease; }

.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,120,255,0.3); }

.btn:hover::after { background: rgba(255,255,255,0.1); }

.btn:active { transform: translateY(0); box-shadow: none; } ```

Like/Heart-Animation (Instagram-Muster)

```javascript const herzBtn = document.querySelector('.herz-btn');

herzBtn.addEventListener('click', () => { herzBtn.classList.toggle('aktiv');

if (herzBtn.classList.contains('aktiv')) { // Einmalige Burst-Animation herzBtn.animate([ { transform: 'scale(1)' }, { transform: 'scale(1.4)', offset: 0.3 }, { transform: 'scale(0.9)', offset: 0.6 }, { transform: 'scale(1)' } ], { duration: 400, easing: 'ease-out' }); } }); ```

```css .herz-btn svg path { fill: transparent; stroke: #666; transition: fill 0.2s ease, stroke 0.2s ease; }

.herz-btn.aktiv svg path { fill: #ff3b30; stroke: #ff3b30; } ```

Ripple-Effekt (Material Design)

```javascript document.querySelectorAll('.ripple').forEach(btn => { btn.addEventListener('click', (e) => { const rect = btn.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top;

const ripple = document.createElement('span'); ripple.className = 'ripple-welle'; ripple.style.cssText = left: ${x}px; top: ${y}px;;

btn.appendChild(ripple); ripple.addEventListener('animationend', () => ripple.remove()); }); }); ```

```css .ripple { position: relative; overflow: hidden; }

.ripple-welle { position: absolute; transform: translate(-50%, -50%) scale(0); width: 200px; height: 200px; border-radius: 50%; background: rgba(255,255,255,0.3); animation: rippleAusbreiten 0.6s ease-out forwards; }

@keyframes rippleAusbreiten { to { transform: translate(-50%, -50%) scale(4); opacity: 0; } } ```

In der Praxis

Timing-Richtlinien (nach Google Material Design, 2022):

• Direkte Benutzer-Reaktionen: 100–200 ms (sofort wahrnehmbar)
• Zustandsänderungen: 200–300 ms
• Komplexe Animationen: 300–500 ms (maximal, sonst wird's langsam)
• Verzögerungen vermeiden bei direkt ausgelösten Animationen

Motion-Prinzipien für Micro-Interactions:

• Naturgetreu: Ease-out für eintretende Elemente, Ease-in für austretende
• Proportional: Große Objekte bewegen sich langsamer als kleine
• Bedeutungsvoll: Jede Animation transportiert Information
• Dezent: Micro-Interactions sollen auffordern, nicht ablenken

Barrierefreiheit: Micro-Interactions müssen auch ohne Animation funktionieren: ``css @media (prefers-reduced-motion: reduce) { .btn, .toggle, .herz-btn, .ripple-welle { transition: none !important; animation: none !important; } } ``

Vergleich & Abgrenzung

Häufige Fragen (FAQ)

Wie entscheide ich, welche Interaktionen Micro-Animations verdienen? Regel: Jede Zustandsänderung, die der Nutzer ausgelöst hat oder die Information trägt, ist ein Kandidat. Entscheidungshilfe: „Würde Fehlen dieser Animation zu Verwirrung führen?"

Können zu viele Micro-Interactions schaden? Ja. Interface-Animation-Experte Val Head (2019) warnt vor „animation overload" – wenn zu viele simultane Animationen die kognitive Last erhöhen. Priorisieren Sie High-Impact-Momente.

Wie teste ich Micro-Interactions? Nutzer-Tests mit und ohne Animation. Auch: Timing variieren und beobachten, ab wann Animationen als „langsam" wahrgenommen werden.

Verwandte Einträge

• CSS Transitions – Technische Basis der meisten Micro-Interactions
• Hover-Effekte & CSS-States – Verwandte Kategorie der Hover-States
• Loading Animationen & Skeleton Screens – Spezifische Kategorie von Micro-Interactions
• CSS Animationen (@keyframes) – Für komplexere Feedback-Animationen

Weiterführend

• Dan Saffer: Microinteractions: Designing with Details (2015) – O'Reilly Media
• Val Head: Designing Interface Animation (2nd Ed., 2019) – Rosenfeld Media
• Google Material Design: Motion – Transitions (2022) – m3.material.io
• Smashing Magazine: Designing Micro-Interactions (2023)
• Nick Babich: Best Practices for Animated Progress Indicators – uxplanet.org (2016)