Wie man Toast-Benachrichtigungen ein- und ausblenden animiert
Wie man Toasts und Snackbars animiert: von welcher Kante sie kommen, wie lange sie bleiben, wie sie stapeln, und warum Bewegung allein die Nachricht nicht trägt.
Kernaussage
Ein Toast sollte von der Kante kommen, zu der er gehört, lange genug bleiben, um gelesen zu werden, und schneller gehen, als er kam. Animiere Transformation und Opazität, halte den Ausgang kurz und pausiere den Timer bei Hover und Fokus. Bewegung ist nicht die Nachricht: Screenreader-Nutzer brauchen eine Live-Region, und ein Fehler darf nicht verschwinden, bevor er gelesen werden kann.
Komm von der Kante, zu der der Toast gehört
Ein Toast, der unten erscheint, sollte von unten hereingleiten; eine oben rechts verankerte Meldung von dort. Das gibt der Nachricht einen physischen Ort und verhindert, dass das Auge sie sucht. Vermeide Animationen aus der Bildschirmmitte, die kurze Meldungen wie Alarme wirken lassen.
Eingang, Verweilen und Ausgang sind drei Zeiten
Der Eingang muss bemerkt werden; das Verweilen ist keine Animation, sondern Lesezeit; der Ausgang soll schnell sein, weil die Nachricht schon angekommen ist. Ein langes Ausblenden lässt die Oberfläche genau dann träge wirken, wenn der Nutzer weiterwill.
Stapeln ohne Sprünge
Wenn mehrere Toasts kommen, entscheide, ob neue den Stapel schieben, darüber erscheinen oder den ältesten ersetzen. Wie auch immer: Animiere das Nachrücken. Toasts, die in eine neue Position springen, während ein anderer animiert, wirken kaputt.
Gib Zeit und Kontrolle
Pausiere den Timer bei Hover und bei Tastaturfokus. Schließe Fehler nicht automatisch und nichts, was eine Aktion enthält, die der Nutzer ausführen muss. Ein Toast, der vor dem Lesen verschwindet, ist schlechter als keiner.
Bewegung ist nicht die Ankündigung
Die Animation zeigt sehenden Nutzern, dass etwas erschienen ist. Screenreader brauchen eine Live-Region mit passender Höflichkeit. Wichtige Meldungen müssen lange genug im DOM bleiben. Nutze die Rolle status für Routinebestätigungen und alert sparsam, weil sie unterbricht.
Reduzierte Bewegung
Ersetze das Gleiten durch ein kurzes Ausblenden und lass den Positionswechsel sofort geschehen. Die Nachricht muss weiter an einem vorhersehbaren Ort erscheinen, entferne also nicht die Layoutbewegung, die beim Finden hilft.
Wichtige Prinzipien
- Komm von der Kante, an der der Toast verankert ist
- Bleib für die Lesezeit und geh schneller, als du gekommen bist
- Animiere das Nachrücken des Stapels, damit nichts springt
- Pausiere das Schließen bei Hover und Fokus, Fehler nie automatisch schließen
- Kombiniere die Bewegung mit einer Live-Region für Screenreader
Häufige Fragen
Quellen
- ARIA live regions — MDN Web Docs
- Motion — Apple Human Interface Guidelines
- prefers-reduced-motion — MDN Web Docs