Mikrointeraktionen: Wann sie helfen, wann sie nur stören
Ein Button, der leicht wächst, oder eine Karte, die sanft einschiebt, verdient ihren Platz; Bewegung in jeder Ecke einer Seite nicht. Wo die Grenze liegt.
rabbitclip-TeamVeröffentlicht: 5 Min. Lesezeit
Kurz gesagt
Eine Mikrointeraktion ist die kleine Antwort, die eine Seite auf eine Handlung eines Besuchers gibt, einen Klick, ein Hover, ein Scrollen: ein Button, der leicht wächst, ein kurzes Signal, dass ein Formular erfolgreich abgesendet wurde, ein Menü, das sich sanft öffnet. Sie verdient ihren Platz in dem Moment, in dem sie eine Information trägt: das wurde geklickt, das war erfolgreich, das ist jetzt geöffnet.
Dieselbe Bewegung, rein als Dekoration ohne jede Information hinzugefügt, wird zu Störgeräusch. Jede Karte, die sich beim Erscheinen der Seite hereindreht, jede Überschrift, die sich Buchstabe für Buchstabe selbst tippt, lässt den Besucher warten statt ihn zu unterhalten; solche wenigen Sekunden Verzögerung summieren sich und lassen eine Seite langsam wirken, unabhängig von ihrer tatsächlichen Ladezeit.
Im Folgenden drei Themen: welche Bewegung ihren Platz verdient, wo die Grenze liegt und wie eine reduzierte Bewegungspräferenz respektiert wird.
Welche Bewegung eine Information trägt
Eine funktionale Mikrointeraktion beantwortet eine Frage, die der Besucher stellt: Hat das, worauf ich geklickt habe, tatsächlich funktioniert, habe ich das Formular richtig abgesendet, ist dieses Menü offen oder geschlossen. Ein kurzer Ladeindikator, der beim Klick auf den Absenden-Button eines Bestellformulars erscheint, sagt dem Besucher, dass die Aktion läuft; ohne ihn klickt ein Besucher womöglich ein zweites Mal, was ein echtes Problem wie eine doppelte Einsendung verursachen kann.
Ein kleines grünes Häkchen, das erscheint, sobald ein Feld im Mitgliedsformular eines Sportvereins korrekt ausgefüllt ist, fällt in dieselbe Kategorie; es zeigt dem Besucher, dass er auf dem richtigen Weg ist, und verringert den Drang, vor dem Abschluss noch einmal alles zu kontrollieren.
Wo die Grenze liegt
Eine Bewegung hat die Grenze überschritten, sobald sie länger als ein paar Sekunden dauert, sobald in jeder Ecke der Seite eine andere Animation läuft oder sobald sie die Aufmerksamkeit vom eigentlichen Inhalt abzieht. Auf der Landingpage eines Spielestudios kann jedes visuelle Element, das aus einer anderen Richtung hereingleitet, beim ersten Mal beeindruckend wirken, beim zweiten Besuch aber als Trägheit empfunden werden.
Ein praktisches Maß: Bewegung sollte enden, bevor Inhalt gelesen wird. Gleitet oder flimmert ein Element noch, während ein Besucher bereits mit dem Lesen eines Satzes begonnen hat, muss die Dauer gekürzt oder die Bewegung ganz entfernt werden.
Eine reduzierte Bewegungspräferenz respektieren
Manche Besucher lassen die Einstellung «Bewegung reduzieren» auf Betriebssystemebene aktiviert; das ist meist eine Barrierefreiheitseinstellung für Menschen, die durch Bewegung ausgelöste Schwindel- oder Übelkeitsgefühle erleben. Der Browser gibt diese Präferenz über ein Signal namens prefers-reduced-motion an die Seite weiter (MDN Web Docs, prefers-reduced-motion); eine Seite kann dieses Signal lesen und große Gleit- und Drehanimationen abschalten, während sie nur die funktional nötigen Übergänge behält, etwa einen Farbwechsel.
Auch der WCAG-Standard empfiehlt, dass durch eine Interaktion ausgelöste Bewegung abschaltbar sein muss; das gehört in die Kategorie Barrierefreiheitsanforderung, nicht Designvorliebe (W3C WCAG 2.1, Animation from Interactions). Wird diese Einstellung auf der Landingpage einer App übersprungen, kann ein bewegungsempfindlicher Besucher die Seite womöglich gar nicht nutzen.
Wie sich das in der Praxis testen lässt
Bevor eine Seite live geht, sollte sie sowohl im normalen als auch im reduzierten Bewegungsmodus durchgeklickt werden, wobei in beiden Modi geprüft wird, dass zentrale Funktionen, ein Formular absenden, ein Menü öffnen, zwischen Seiten wechseln, weiterhin fehlerfrei funktionieren.
- «Bewegung reduzieren» auf Systemebene einschalten und die Seite erneut testen
- Für jede einzelne Bewegung fragen, ob sie überhaupt eine Information trägt
- Bewegungsdauer unter einer Sekunde halten, sich wiederholende Schleifen entfernen
- Sicherstellen, dass Eingangsanimationen enden, bevor der Inhalt gelesen wird
Bewegung kann auch eine Markenentscheidung sein
Für manche Marken ist gemessene Bewegung Teil der Identität; die Seite einer Kreativagentur oder eines Spielestudios kann eine verspieltere Bewegungssprache tragen als die meisten. Für eine Facility-Management-Firma oder eine Anwaltskanzlei kann dieselbe Bewegungsintensität gegen die angestrebte Seriosität der Marke arbeiten. Die richtige Menge hängt von der Branche und dem Ton ab, den ein Besucher erwartet.
Ladezustände: Skeleton Screens oder Spinner
Was auf dem Bildschirm erscheint, während Inhalt lädt, ist selbst eine Mikrointeraktions-Entscheidung. Ein Spinner sagt nur «warten»; ein Skeleton Screen zeigt eine blasse Umrisslinie dessen, wie der Inhalt aussehen wird, was einem Besucher ein besseres Gefühl dafür gibt, worauf er wartet.
Blassgraue, kartenförmige Platzhalter, die erscheinen, während eine Produktliste lädt, erzeugen weniger Wartegefühl als ein leerer Bildschirm oder ein einzelner Spinner; der Unterschied zeigt sich am deutlichsten, sobald ein Ladevorgang länger als eine Sekunde dauert.
Wann Ton und Vibration als Feedback genutzt werden
Eine leichte Vibration auf einem Mobilgerät kann bestätigen, dass eine Aktion abgeschlossen wurde, noch klarer als es eine visuelle Bewegung könnte; wird dieses Feedback aber übertrieben eingesetzt, wird es lästig. Es funktioniert am besten, wenn es wirklich wichtigen Momenten vorbehalten bleibt, statt bei jeder einzelnen Berührung ausgelöst zu werden.
Ton-Feedback ist auf Websites eine seltenere und riskantere Wahl; ein unerwarteter Ton kann einen Besucher erschrecken, besonders in einer ruhigen Umgebung. Wird Ton überhaupt eingesetzt, braucht er unbedingt eine klare Möglichkeit, ihn abzuschalten.
Auf der Landingpage einer App ist es meist eine sicherere und wirksamere Wahl, das echte Vibrations- oder Tonfeedback des Produkts in einem Video zu zeigen, als denselben Effekt auf der Seite selbst nachzubilden.
Bewegung hilft, wenn sie eine Information trägt, und ermüdet, wenn sie sich als Dekoration anhäuft. rabbitclip begrenzt Bewegung in jedem Projekt auf ihre Funktion und unterstützt eine reduzierte Bewegungspräferenz standardmäßig; wie Ihre aktuelle Seite Bewegung einsetzt, lässt sich gemeinsam durchgehen.
Häufige Fragen
Was ist prefers-reduced-motion?
Eine Präferenz, die ein Besucher auf Betriebssystemebene aktiviert; der Browser gibt sie an die Seite weiter, die große Bewegungen entsprechend zurückfahren kann.
Sollte jede Animation im reduzierten Modus entfernt werden?
Nein, nur große wie Gleiten, Drehen, Zoomen; kleine Übergänge wie ein Farbwechsel können bleiben.
Ist eine Eingangsanimation beim Laden der Seite ein Problem?
Nicht, wenn sie endet, bevor Inhalt gelesen wird; dauert sie mehrere Sekunden, lässt sie die Seite langsam wirken.
Hängt die richtige Menge an Bewegung von der Branche ab?
Ja, eine verspielte Bewegungssprache passt gut zu einer Kreativagentur, kann aber bei derselben Intensität gegen den Ton einer Anwaltskanzlei arbeiten.
Sollte ein Skeleton Screen bei jedem Ladevorgang verwendet werden?
Nein, bei sehr kurzen Ladevorgängen (unter einer halben Sekunde) bringt er wenig; der eigentliche Nutzen zeigt sich erst ab einer Sekunde.
