Micro-interaction

Das Produktbild schrumpft und fliegt im Bogen in das Warenkorb-Symbol.

Füge bei [wo] eine „Add to Cart Fly“-Animation hinzu (auch fly to cart oder add-to-cart animation genannt).
Beim Drücken des Hinzufügen-Buttons soll eine kleine Kopie des Produktbilds schrumpfen, während sie in einem weichen, schnellen Bogen in das Warenkorb-Symbol fliegt, und der Warenkorb soll kurz anstupsen, während sich seine Anzahl aktualisiert.
Spiele sie einmal pro Klick ab, ohne die ursprüngliche Produktkarte zu bewegen, und lass den Flug bei reduzierter Bewegung (prefers-reduced-motion) weg, aktualisiere den Warenkorb aber trotzdem.

Beim Ankreuzen wird im Kästchen ein Häkchen Strich für Strich gezeichnet.

Füge bei [wo] eine „Checkbox Check Draw“-Animation hinzu (auch animated checkbox oder checkmark draw genannt).
Beim Ankreuzen soll sich das Kästchen mit Farbe füllen und das Häkchen sich in einem schnellen, weichen Strich selbst zeichnen; beim Abwählen wird es auf dieselbe Weise wieder gelöscht.
Lass es eine echte Checkbox mit ihrem checked-Zustand bleiben, die mit der Tastatur funktioniert und einen sichtbaren Fokusring hat.

Bunte Papierschnipsel schießen heraus und fallen herab, um einen Erfolg zu feiern.

Füge bei [wo] eine Konfetti-Feier (Confetti) hinzu, auch confetti burst genannt.
Kleine bunte Papierschnipsel sollen schnell aus dem Button herausschießen, dann taumelnd herabschweben und dabei ausblenden – ein kurzer, lebhafter Regen.
Löse sie einmal pro Erfolg aus statt in Schleife, lass sie keine Klicks auf der Seite blockieren und lass sie bei reduzierter Bewegung (prefers-reduced-motion) weg.

Das Kopieren-Symbol verwandelt sich in ein Häkchen, und die Beschriftung zeigt kurz Kopiert.

Füge bei [wo] eine „Copy-to-Clipboard Feedback“-Animation hinzu (auch copied state oder copy icon to checkmark genannt).
Beim Drücken des Kopieren-Buttons soll das Kopieren-Symbol schnell wegschrumpfen, während sich ein Häkchen einzeichnet und die Beschriftung zu „Kopiert“ wechselt; nach einem kurzen Moment kehrt alles weich zurück.
Halte den Button während des Wechsels gleich groß, damit sich nichts verschiebt, und gib den Kopiert-Zustand an Screenreader aus.

Ein Element folgt beim Ziehen dem Zeiger und lässt sich auf einen Bereich oder eine Achse begrenzen.

Füge bei [wo] eine „Drag“-Interaktion hinzu (auch draggable oder drag constraints genannt).
Das Element soll beim Ziehen direkt dem Zeiger folgen, an den Rändern seines erlaubten Bereichs anhalten und beim Loslassen mit einem kleinen Nachfedern an seinen Ruheplatz zurückspringen.
Sorge dafür, dass es mit Touch ebenso wie mit der Maus funktioniert, ohne dass die Seite darunter scrollt, und biete eine Möglichkeit, es mit der Tastatur zu bewegen.

Das Platzhalter-Label wandert nach oben und wird kleiner, sobald das Feld fokussiert oder ausgefüllt ist.

Füge bei [wo] ein „Floating Label“ hinzu (auch float label oder animated placeholder genannt).
Wenn das Feld fokussiert ist oder einen Wert hat, soll das Label, das darin sitzt, weich und schnell nach oben an die Oberkante des Felds gleiten und kleiner werden, und nur dann zurückwandern, wenn das Feld leer und nicht fokussiert ist.
Lass es ein echtes Label bleiben, das mit dem Input verknüpft ist, und sorge dafür, dass sich die Feldhöhe nicht ändert, damit das Formular nie springt.

Ein Herzsymbol füllt sich beim Klicken mit Farbe und sprüht kleine Partikel aus oder pulsiert.

Füge bei [wo] eine „Like / Heart Burst“-Animation hinzu (auch heart animation oder favorite toggle genannt).
Beim Liken soll sich das Herz mit Farbe füllen und federnd aufploppen, während ein Ring und kleine Punkte nach außen springen und verblassen, alles schnell und verspielt; beim Entliken leert sich das Herz einfach still.
Mach es zu einem echten Umschalt-Button mit gedrücktem Zustand und spiele den Burst nur beim Einschalten ab.

Hält man ein Element kurz gedrückt, löst das zusätzliche Aktionen oder eine Fortschrittsfüllung aus.

Füge bei [wo] eine „Long Press“-Interaktion hinzu (auch press and hold oder touch and hold genannt).
Solange das Element gedrückt gehalten wird, soll es leicht einsinken, während eine Fortschrittsfüllung gleichmäßig darüberläuft; ist sie voll, federt es zurück und öffnet sein Menü, und frühes Loslassen bricht ab und setzt die Füllung zurück.
Gib Tastatur- und Screenreader-Nutzern einen anderen Weg zu denselben Aktionen und verhindere, dass das Halten Text markiert oder das Kontextmenü des Browsers öffnet.

Ein Zähler-Badge ploppt auf, hüpft oder pulsiert, wenn eine neue Benachrichtigung eintrifft.

Füge bei [wo] eine „Notification Badge Bounce“-Animation hinzu (auch badge pop oder ping genannt).
Trifft eine neue Benachrichtigung ein, soll das Zähler-Badge aus dem Nichts aufploppen und sich mit ein paar schnellen, federnden Hüpfern setzen, während einmal ein weicher Ring von ihm ausstrahlt.
Spiele sie einmal pro neuer Benachrichtigung ab statt in einer Schleife und gib die neue Anzahl an Screenreader aus.

Ein Augensymbol wechselt zwischen offen und durchgestrichen, wenn das Passwort ein- oder ausgeblendet wird.

Füge bei [wo] einen „Password Reveal Toggle“ hinzu (auch show/hide password oder eye icon toggle genannt).
Ein Druck auf das Auge soll den Schrägstrich schnell wegwischen, während die verdeckten Punkte in die echten Zeichen überblenden, und ein erneuter Druck zeichnet den Strich zurück und verbirgt sie wieder: weich und schnell, ohne Nachfedern.
Halte die Feldbreite stabil, damit der Text nicht springt, und mach den Schalter zu einem echten Button, dessen Beschriftung sagt, ob das Passwort sichtbar ist.

Ein Zeigerpfeil zeichnet einen Markierungsrahmen um ein Wort, sobald der Text ins Bild scrollt.

Füge bei [wo] einen „Pointer Highlight“-Effekt hinzu.
Wenn der Text ins Bild scrollt, soll sich ein Rahmen von links nach rechts um das Schlüsselwort zeichnen, während ein kleiner Zeigerpfeil an seiner Ecke entlangfährt, weich und gleichmäßig, als würde jemand das Wort von Hand markieren.
Zeichne ihn nur beim ersten Erscheinen, ohne den Text zu verschieben, und zeige den fertigen Rahmen bei reduzierter Bewegung (prefers-reduced-motion) sofort an.

Das Element schrumpft beim Drücken leicht und federt beim Loslassen zurück.

Füge bei [wo] einen „Press (Button Tap Scale)“-Effekt hinzu (auch tap feedback oder press state genannt).
Solange es gedrückt wird, soll das Element leicht schrumpfen und etwas dunkler werden und beim Loslassen mit einem kleinen Federn auf volle Größe zurückspringen: schnell und dezent.
Zeige dasselbe Feedback bei Tastatur und Touch und verhindere, dass sich das umgebende Layout verschiebt.

Zieht man eine Liste nach unten, erscheint ein Ladekreisel, und beim Loslassen wird der Inhalt neu geladen.

Füge bei [wo] eine „Pull to Refresh“-Interaktion hinzu (auch swipe to refresh genannt).
Wird die Liste oben nach unten gezogen, soll sie dem Finger mit etwas Widerstand folgen und einen Ladekreisel zeigen, der sich beim Ziehen dreht; nach dem Loslassen dreht er sich weiter, während der Inhalt neu lädt, dann gleitet die Liste sanft wieder nach oben.
Starte es nur, wenn die Liste schon ganz oben ist, und biete Tastatur- und Screenreader-Nutzern zusätzlich einen normalen Aktualisieren-Button.

Eine kreisförmige Welle breitet sich vom genauen Klick- oder Tippunkt aus und verblasst.

Füge bei [wo] einen „Ripple“-Effekt hinzu (auch material ripple oder ink ripple genannt).
Bei jedem Klick oder Tippen soll sich eine weiche, kreisförmige Welle vom genauen Druckpunkt ausbreiten, bis sie das Element bedeckt, und dabei verblassen: schnell und leicht.
Beschneide die Welle auf die Form des Elements, lass jeden schnellen Druck seine eigene Welle starten und starte sie bei Tastatureingaben aus der Mitte.

Ein Kreis und ein Häkchen zeichnen sich selbst, um zu bestätigen, dass eine Aktion geklappt hat.

Füge bei [wo] eine „Success Checkmark“-Animation hinzu (auch animated success tick genannt).
Ein Kreis soll sich in einem weichen Strich selbst zeichnen, dann erscheint das Häkchen darin, und das ganze Zeichen ploppt sanft ein wenig auf: ruhig und selbstsicher.
Spiele sie einmal ab, wenn die Aktion gelingt, ergänze eine Textmeldung, die Screenreader vorlesen können, und zeige bei reduzierter Bewegung (prefers-reduced-motion) sofort das fertige Zeichen.

Wischt man eine Listenzeile zur Seite, erscheinen Aktionsbuttons wie Löschen oder Archivieren.

Füge bei [wo] eine „Swipe to Delete“-Interaktion hinzu (auch swipe actions oder swipe to reveal genannt).
Wird eine Zeile zur Seite gezogen, soll sie direkt dem Finger folgen und dahinter Aktionsbuttons wie Archivieren und Löschen freilegen, bis diese ganz sichtbar sind, und beim Loslassen weich ohne Nachfedern an ihren Platz gleiten.
Halte vertikales Scrollen beim horizontalen Wischen funktionsfähig und mach dieselben Aktionen ohne Wischen per Tastatur und Screenreader erreichbar.

Ein runder Knopf gleitet über eine Schiene, und die Farbe der Schiene wechselt zwischen aus und an.

Füge bei [wo] eine „Toggle Switch“-Animation hinzu (auch switch genannt).
Beim Ein- oder Ausschalten soll der runde Knopf weich ans andere Ende der Schiene gleiten, während die Farbe der Schiene wechselt: schnell und knackig, ohne Nachfedern.
Mach ihn zu einem echten barrierefreien Schalter (role="switch" mit seinem checked-Zustand), der auch mit der Tastatur funktioniert.