Wie man eine Empty-State-Illustration animiert
Erfahren Sie, wie Sie Empty States animieren: Einladende Eingangs-Animation, dezente Ruheschleifen, geringe Dateigröße und klare Call-to-Action.
Kernaussage
Eine animierte Empty-State-Illustration verwandelt einen leeren Bildschirm in eine Einladung zur Interaktion. Sie sollte aus einer kurzen Aufbau-Animation beim Öffnen bestehen, gefolgt von einem dezenten oder statischen Ruhezustand. Ihr Hauptziel ist es, den Blick des Nutzers direkt auf die wichtigste Handlungsschaltfläche zu lenken.
Die Psychologie des leeren Bildschirms
Eine leere Seite wirkt verlassen oder unvollständig. Ein durchdachter Empty State mit einer animierten Illustration nimmt Erstnutzern die Hemmung, erklärt den Nutzen und zeigt, welche Inhalte dort bald entstehen werden.
Eingangs-Animation vs. Dauerschleife
Trennen Sie Aufbau und Ruhephase. Spielen Sie beim Öffnen eine 500 bis 800 ms lange Aufbau-Animation ab. Danach verharrt das Bild im Stillstand oder geht in ein extrem langsames, unaufdringliches Schweben über.
- Bauen Sie die Illustration beim Erscheinen sanft per Feder auf
- Vermeiden Sie hektische Endlosschleifen, die den Blick dauernd ablenken
- Richten Sie Bildkomposition und Blickrichtung auf den Haupt-Button aus
- Verfassen Sie klaren Text mit Handlungsanweisung
Dateiformat und Bundle-Leistung
Vermeiden Sie schwere GIFs oder MP4-Videos, die mobiles Datenvolumen belasten. Setzen Sie auf interaktive SVG-Grafiken, optimierte Lottie-Dateien oder ExodeUI-Szenen, die selten mehr als wenige Kilobyte wiegen.
Rücksicht auf reduzierte Bewegung
Bei prefers-reduced-motion zeigen Sie die fertige Illustration direkt in ihrer Endposition an – ohne Aufbau-Effekt oder Schweben.
Wichtige Prinzipien
- Nutzen Sie eine Aufbau-Animation und verzichten Sie auf nervige Endlosschleifen
- Führen Sie den Blick des Nutzers zum Haupt-Button
- Wählen Sie sparsame Vektorformate statt schwerer GIFs
- Zeigen Sie unter reduzierter Bewegung die statische Illustration
Häufige Fragen
Quellen
- Empty States Best Practices — Nielsen Norman Group
- Empty State Design — Material Design 3