Wie man Konfetti und Jubelanimationen dosiert einsetzt
Erfahren Sie, wie Sie Jubelanimationen gestalten: Canvas- vs. DOM-Leistung, wann Freude angebracht ist und wie Sie reduzierte Bewegung respektieren.
Kernaussage
Jubelanimationen sollten bedeutsamen Meilensteinen vorbehalten bleiben, etwa dem Abschluss eines Onboardings oder einem erfolgreichen Kauf. Sie sollten auf einem separaten Canvas- oder WebGL-Element laufen, um das DOM nicht zu belasten, nach maximal 2,5 Sekunden abklingen und Interaktionen niemals blockieren.
Wann Begeisterung verdient ist und wann sie stört
Konfetti bei banalen Aktionen wie dem Speichern eines Entwurfs nutzt den Effekt ab und nervt regelmäßige Nutzer. Heben Sie sich Feiereffekte für echte Erfolge auf, an denen der Nutzer einen spürbaren Abschluss erlebt.
Performance: Canvas vs. DOM-Partikel
Hunderte <div>-Elemente im DOM zu erzeugen verbraucht massiv Akkuleistung und senkt die Bildrate mobiler Geräte. Nutzen Sie ein <canvas> mit pointer-events: none, das Partikel zeichnet und wieder freigibt, sobald sie den Bildbereich verlassen.
- Rendern Sie auf einem temporären Canvas außerhalb des Dokumentflusses
- Nutzen Sie pointer-events: none, damit Klicks darunterliegende Elemente erreichen
- Begrenzen Sie die Partikelzahl auf mobilen Geräten auf 60–100
- Löschen Sie das Canvas und beenden Sie die Schleife nach Ablauf
Rücksicht auf reduzierte Bewegung
Manche Menschen reagieren empfindlich auf Partikelexplosionen am Bildschirm. Unter prefers-reduced-motion ersetzen Sie das Konfetti durch ein statisches Festtagssymbol oder eine hervorgehobene Glückwunschkarte.
Abstimmung mit Audio und Haptik
Kombinieren Sie Konfetti mit Sound oder Vibration auf Smartphones, bieten Sie stets eine Stummschaltung an und beschränken Sie die Vibration auf einen kurzen Impuls.
Wichtige Prinzipien
- Reservieren Sie Konfetti für echte Höhepunkte, nicht für Routineaufgaben
- Nutzen Sie Canvas mit pointer-events: none für hohe Rendering-Leistung
- Begrenzen Sie die Effektdauer auf maximal 2 bis 2,5 Sekunden
- Bieten Sie eine statische Alternative bei reduzierter Bewegung
Häufige Fragen
Quellen
- Designing for Delight — Nielsen Norman Group
- HTML Canvas 2D Context — W3C