Wie man einen Erfolgs-Haken animiert
Wie man einen Haken animiert, der eine Aktion bestätigt: Strichzeichnung, Timing, Abfolge mit der Umgebung und das barrierefreie Signal, das er nicht ersetzt.
Kernaussage
Ein Erfolgs-Haken soll eine abgeschlossene Aktion bestätigen, nicht feiern. Zeichne den Strich in einer fließenden Bewegung oder skaliere die Form aus ihrer Mitte und bleib kurz. Lass die Umgebung zuerst zur Ruhe kommen, dann spiele das Zeichen. Kombiniere es immer mit Text oder einer Live-Region, denn ein animierter Haken sagt einem Screenreader nichts.
Entscheide, was der Haken bestätigt
Ein Haken nach dem Speichern eines Formulars sagt, dass die Daten angenommen wurden; nach einer Zahlung sagt er, dass die Zahlung durch ist. Das sind unterschiedliche Versprechen, und die Animation darf nicht mehr Sicherheit andeuten, als das System hat. Ist das Ergebnis noch offen, zeige zuerst diesen Zustand.
Zeichne den Strich, statt die Form aufpoppen zu lassen
Am überzeugendsten ist eine Animation, die dem Pfad folgt. Setze in SVG stroke-dasharray und stroke-dashoffset auf die Pfadlänge und animiere den Versatz auf null: Die Linie scheint geschrieben zu werden. Das ganze Icon zu skalieren ist einfacher und funktioniert, wirkt aber wie ein Aufkleber.
Stimme die Abfolge mit dem Container ab
Das Zeichen sitzt oft in einem Button, einer Karte oder einem Dialog. Bewegt sich der Container noch, konkurriert der Haken mit ihm. Lass den Container zuerst zur Ruhe kommen, dann zeichne das Zeichen; wenige Frames Übergabe reichen, damit es als ein Ereignis gelesen wird.
Bleib kurz
Der Nutzer wartet auf die Erlaubnis weiterzumachen, und eine lange Erfolgsanimation wird zum Hindernis. Zeichne den Strich zügig und lass die Oberfläche weiterlaufen. Bleibt die App auf dem Bildschirm, darf das Zeichen ruhen; es braucht keine Schleife und kein Hüpfen.
Barrierefreiheit: sag es, zeig es nicht nur
Screenreader-Nutzer sehen den Strich nicht. Der Erfolgszustand braucht Text, ein aktualisiertes Label oder eine Live-Region-Ansage. Vermeide den Haken als einzigen Unterschied zwischen Erfolg und Fehler, denn Farbe und Form werden leicht übersehen.
Haptik und Ton sind optional
Auf dem Handy kann eine leichte Vibration das Zeichen verstärken, manche Apps fügen einen kurzen Ton hinzu. Beides sollte optional sein und die Systemeinstellungen respektieren. Lass die Animation niemals die einzige Bestätigung sein, dass die Aktion funktioniert hat.
Produktionsnahes Implementierungsbeispiel
/* Draw an SVG check by animating the dash offset */
.check path {
stroke-dasharray: 24;
stroke-dashoffset: 24;
animation: draw 320ms ease-out forwards;
}
@keyframes draw {
to { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
.check path {
animation: none;
stroke-dashoffset: 0;
}
}Wichtige Prinzipien
- Spiele das Erfolgszeichen nur, wenn das Ergebnis wirklich bestätigt ist
- Den SVG-Strich zu zeichnen liest sich besser als das Icon aufpoppen zu lassen
- Lass den Container zur Ruhe kommen, dann animiere das Zeichen
- Bleib kurz, denn der Nutzer wartet, um weiterzumachen
- Sag den Erfolg auch per Text oder Live-Region an
Häufige Fragen
Quellen
- stroke-dasharray — MDN Web Docs
- ARIA live regions — MDN Web Docs
- Understanding Success Criterion 2.3.3: Animation from Interactions — W3C WAI