Auch genannt Bounce (attention)
Das Element hüpft auf und ab, wobei die Sprünge immer kleiner werden.
Einsatz
Scroll-Hinweise, Call-to-Action-Buttons
Füge bei [wo] einen „Bounce“-Aufmerksamkeitseffekt hinzu.
Das Element soll in ein paar schnellen, jedes Mal kleineren Sprüngen hochhüpfen und wieder herunterfallen und sich beim Aufkommen leicht stauchen.
Spiele ihn beim Auslösen nur einmal ab statt in Schleife, und lass ihn bei reduzierter Bewegung weg.
Das Element blinkt, indem es seine Deckkraft schnell wechselt.
Einsatz
Hinweis auf neue Inhalte
Füge bei [wo] einen „Flash“-Aufmerksamkeitseffekt hinzu (auch blink genannt).
Das Element soll zweimal schnell aus- und wieder einblenden und danach voll sichtbar bleiben.
Spiele ihn nur einmal ab statt als endloses Blinken, und lass ihn bei reduzierter Bewegung weg, weil schnelles Blinken unangenehm sein kann.
Die Deckkraft des Elements flackert unregelmäßig wie eine defekte Lampe.
Einsatz
Neon- und Glitch-Effekte
Füge bei [wo] einen „Flicker“-Effekt hinzu (auch flickering genannt).
Das Element soll die meiste Zeit ruhig bleiben und in kurzen, unregelmäßigen Aussetzern dunkler werden wie eine defekte Neonröhre.
Halte das Timing unregelmäßig statt gleichmäßig, vermeide schnelles Blitzen in voller Stärke und stoppe ihn bei reduzierter Bewegung.
Auch genannt Headshake, No Shake
Das Element pendelt mit leichter Drehung hin und her wie ein verneinendes Kopfschütteln.
Einsatz
Ungültige Eingaben oder Ablehnungen
Füge bei [wo] einen „Head Shake“-Aufmerksamkeitseffekt hinzu (auch headshake oder no shake genannt).
Das Element soll sich schnell mit einer leichten Drehung hin und her wenden wie ein verneinendes Kopfschütteln, jede Bewegung kleiner als die vorige, bis es zur Ruhe kommt.
Spiele ihn bei jedem Auslösen einmal ab, etwa bei einer abgelehnten Aktion, und sorge dafür, dass sich das umliegende Layout nicht bewegt.
Das Element pulsiert im Doppelschlag-Rhythmus wie ein schlagendes Herz.
Einsatz
Like- und Favoriten-Icons, Live-Anzeigen
Füge bei [wo] einen „Heartbeat“-Effekt hinzu (auch heart beat genannt).
Das Element soll in einem schnellen Doppelschlag anschwellen und wieder entspannen und vor dem nächsten Schlag kurz ruhen, wie ein schlagendes Herz.
Lass ihn nahtlos in Schleife laufen, mit der Pause zwischen den Schlägen, und stoppe ihn bei reduzierter Bewegung (prefers-reduced-motion).
Das Element verzerrt sich mit abklingender Stärke hin und her wie wackelnder Wackelpudding.
Einsatz
Verspielte Betonung von Buttons oder Logos
Füge bei [wo] einen „Jello“-Aufmerksamkeitseffekt hinzu (auch jelly genannt).
Das Element soll sich wie wackelnder Wackelpudding hin und her verzerren: anfangs kräftig, dann schnell zur Ruhe kommend.
Spiele ihn beim Auslösen einmal ab und behalte den Platzbedarf des Elements bei, damit sich benachbarte Inhalte nicht verschieben.
Auch genannt Radar Ping, Ripple Ping, Ping (Radar Pulse), Pulse ring, Notification ping, Pulsating Button
Eine Kopie des Elements wächst wiederholt und blendet dabei aus, wie ein Radarsignal.
Einsatz
Benachrichtigungspunkte, Live-Status
Füge bei [wo] einen „Ping“-Effekt hinzu (auch radar ping oder pulse ring genannt).
Eine Kopie des Elements soll nach außen wachsen und ausblenden, immer wieder in gleichmäßigem Takt, während das Element selbst stillsteht.
Zeichne den Ring auf einer eigenen Ebene, damit er nie das Layout verändert, und stoppe die Schleife bei reduzierter Bewegung (prefers-reduced-motion).
Das Element skaliert oder blendet sanft und wiederholt ein und aus.
Einsatz
Skeleton-Loader, Live-Anzeigen, CTAs
Füge bei [wo] einen „Pulse“-Effekt hinzu (auch pulsing genannt).
Das Element soll in einem langsamen, gleichmäßigen Rhythmus sanft anschwellen und wieder zurückgehen: dezent, ohne Nachfedern.
Lass ihn nahtlos in Schleife laufen, ohne das umliegende Layout zu verschieben, und stoppe ihn bei reduzierter Bewegung (prefers-reduced-motion).
Das Element dehnt sich in elastischen Stufen in die Breite und staucht sich in der Höhe, bevor es zur normalen Form zurückkehrt.
Einsatz
Button-Feedback, Aufmerksamkeit wecken
Füge bei [wo] einen „Rubber Band“-Aufmerksamkeitseffekt hinzu (auch rubberband genannt).
Das Element soll sich in die Breite ziehen und in der Höhe stauchen, dann über ein paar kleinere elastische Schritte zurückfedern, bis es in normaler Größe ruht.
Spiele ihn beim Auslösen einmal ab und sorge dafür, dass sich das umliegende Layout beim Dehnen nicht verschiebt.
Auch genannt Shake X, Shake Y, Shake Horizontal, Shake Vertical, shakeX, Error shake, Wiggle, Invalid input shake, Headshake
Das Element ruckelt schnell entlang einer Achse hin und her.
Einsatz
Fehlerrückmeldung in Formularen
Füge bei [wo] einen „Shake“-Effekt hinzu (auch error shake oder invalid input shake genannt).
Das Element soll ein paarmal schnell nach links und rechts ruckeln und genau dort stoppen, wo es angefangen hat: schnell und bestimmt.
Spiele ihn bei jedem Fehler einmal ab statt in Schleife und kombiniere ihn mit einer sichtbaren Fehlermeldung, damit die Bedeutung nicht allein von der Bewegung abhängt.
Auch genannt Rotate Loop, Spinner
Das Element dreht sich fortlaufend mit gleichbleibender Geschwindigkeit.
Füge bei [wo] einen „Spin“-Effekt hinzu (auch spinner oder rotate loop genannt).
Das Element soll sich fortlaufend mit konstanter, gleichmäßiger Geschwindigkeit drehen, ohne Easing zwischen den Umdrehungen.
Mach die Schleife nahtlos, gib dem Spinner ein barrierefreies Lade-Label und verlangsame oder stoppe ihn bei reduzierter Bewegung (prefers-reduced-motion).
Das Element schwingt von seiner Oberkante aus hin und her wie ein Pendel mit abklingendem Ausschlag.
Einsatz
Hängeschilder, Benachrichtigungs-Icons
Füge bei [wo] einen „Swing“-Aufmerksamkeitseffekt hinzu.
Das Element soll wie ein hängendes Schild hin und her schwingen, zuerst weit ausholend und dann schnell abklingend.
Lass es um seine Oberkante statt um die Mitte schwingen und spiele den Effekt beim Auslösen einmal ab.
Das Element wird größer, wackelt mit leichter Drehung und kehrt mit feierlichem Schwung zur Ausgangsgröße zurück.
Einsatz
Erfolgszustände, Feiermomente
Füge bei [wo] einen „Tada“-Aufmerksamkeitseffekt hinzu.
Das Element soll kurz etwas kleiner werden, dann wachsen und mit schneller Neigung hin und her wackeln, bevor es zur normalen Größe zurückkehrt, wie eine kleine Feier.
Spiele ihn einmal ab, etwa direkt nach einem Erfolg, und lass ihn bei reduzierter Bewegung (prefers-reduced-motion) weg.
Auch genannt Vibration, Buzz
Das Element zittert schnell in winzigen Stößen in verschiedene Richtungen wie ein vibrierendes Handy.
Einsatz
Warnhinweise, Signale wie bei einem eingehenden Anruf
Füge bei [wo] einen „Vibrate“-Aufmerksamkeitseffekt hinzu (auch buzz oder vibration genannt).
Das Element soll einen kurzen Moment in winzigen, schnellen Stößen in verschiedene Richtungen zittern wie ein vibrierendes Handy und dann zur Ruhe kommen.
Halte die Bewegung sehr klein, damit der Inhalt lesbar bleibt, und spiele sie einmal pro Hinweis ab statt in Schleife.
Das Element schaukelt mit Neigung hin und her wie ein wackeliger Gegenstand.
Einsatz
Aufmerksamkeit auf Icons oder Buttons lenken
Füge bei [wo] einen „Wobble“-Aufmerksamkeitseffekt hinzu.
Das Element soll mit Neigung hin und her schaukeln, zuerst mit großem Ausschlag, der mit jedem Schwung kleiner wird, bis es zur Ruhe kommt.
Spiele ihn beim Auslösen einmal ab und sorge dafür, dass sich benachbarte Inhalte nicht verschieben.