Animationen und Mikro-Interaktionen im Menü: Charme oder Störung?

Ein Café-Besitzer in Istanbul-Galata mit 18 Tischen fragt: "Wenn ich Animationen ins Menü einbaue, bleiben die Gäste länger?" Die Antwort liegt in Millisekunden. UX Movement 2023 zeigt klar: 200-300ms wirken flüssig, über 500ms wird zäh. Nach Einführung scroll-getriggerter Fade-Animationen stieg die Verweildauer um 19%, die Absprungrate sank um 12%.

Optimale Dauer und Easing-Kurven

Die Dauer ist an die menschliche Wahrnehmung gekoppelt. Unter 100ms bleibt unbemerkt; 200-300ms fühlt sich richtig an; 500ms+ ist träge. Für Easing eignet sich cubic-bezier(0.4, 0, 0.2, 1) — Materials Standard.

Ein 60ms-Stagger beim Laden erzeugt Premium-Feeling, wird aber ab 8 Karten zu viel. Auf Mobilgeräten sind 200ms ideal — längere Werte kollidieren mit Touch-Interaktionen.

Was Funktioniert und Was Nicht

Funktioniert: Kategorie-Tab mit gleitendem Underline (250ms), "In den Warenkorb"-Button mit 1,05x-Skala plus Häkchen-Icon, Herz-Pulse beim Favorisieren, Scroll-Fade-in.

• Hover-Skala 1,02x für "tippbares" Gefühl
• Warenkorb-Badge-Bounce lenkt Aufmerksamkeit
• Skeleton-Loader setzt Erwartungen

Übertreibung und Barrierefreiheit

Zu viel Animation ist ein Barrierefreiheitsproblem. Unterstützen Sie prefers-reduced-motion — WCAG-2.1-Pflicht.

Parallax, Autoplay-Video und Endlosspin-Icons sind klar Störung. Das Galata-Café stoppte einen pulsierenden Badge nach 2 Sekunden — CTR stieg 23%.

FAQ

Wie lang sollte eine Animation sein? 200-300ms für Mikro-Interaktionen, maximal 400ms für Übergänge.

Welche Animationen sind schädlich? width/height per JS verursacht Reflow; CSS transform/opacity sind GPU-beschleunigt.

Animationen für ältere Nutzer abschalten? Nur via prefers-reduced-motion, nicht automatisch.

Hilfreich? Teilen Sie es.