Empathische Animation

Animation im Web ist oft ein kontroverses Thema. Ich glaube, teilweise liegt es daran, dass schlechte Animationen blendend offensichtlich sind, während gut ausgeführte Animationen nahtlos in den Hintergrund treten. Richtig eingesetzt, kann Animation eine Website wirklich aufwerten, sei es nur, um ihr etwas Persönlichkeit zu verleihen oder visuelle Hinweise zu geben und die kognitive Belastung zu verringern. Leider scheint es oft zwei Lager zu geben: **Barrierefreiheit** vs. **Animation**. Das ist sehr schade, denn wir können alles haben! Alles, was es braucht, ist ein wenig Nachdenken.

Hier sind ein paar wichtige Fragen, die Sie sich stellen sollten, wenn Sie Animationen erstellen.

Dient diese Animation einem Zweck?

Das klingt ernst, aber keine Sorge – der Zweck der Seite ist entscheidend. Wenn Sie ein persönliches Portfolio erstellen, können Sie sich austoben! Wenn jemand jedoch versucht, eine Steuererklärung einzureichen, werden skurrile Ladeanimationen wahrscheinlich nicht gut ankommen. Andererseits kann eine animierte Fortschrittsanzeige eine nette Geste sein und gleichzeitig visuelles Feedback zur Aktion des Benutzers geben.

Lenkt sie vom Fokus auf wichtige Informationen ab?

Es ist nur allzu leicht, sich vom Enthusiasmus, Dinge herumwirbeln zu lassen, mitreißen zu lassen, aber denken Sie daran, dass das Web in erster Linie ein Informationssystem ist. Wenn Menschen versuchen zu lesen, können animierter Text oder Schleifenanimationen in der Nähe sehr ablenkend sein, insbesondere für Menschen mit ADHS oder ADS. Großartige Animationen helfen beim Fokus; sie stören ihn nicht.

Also! Ihre Animation hat den Test bestanden, was nun? Hier sind ein paar Gedanken...

Haben wir den Benutzern erlaubt, sich abzumelden?

Es ist wichtig, dass unsere Animationen für Menschen mit Bewegungsempfindlichkeiten sicher sind. Menschen mit vestibulären (Innenohr-) Störungen können unter Schwindel, Kopfschmerzen oder sogar Übelkeit durch animierte Inhalte leiden.

Glücklicherweise können wir auf Betriebssystemeinstellungen mit der prefers-reduced-motion-Medienabfrage zugreifen. Diese Medienabfrage erkennt, ob der Benutzer angefordert hat, dass das Betriebssystem die Menge an Animationen oder Bewegungen minimiert.

Hier ist ein Beispiel:

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Dieser Code-Schnipsel greift auf diese Benutzereinstellung zu und entfernt bei Aktivierung **alle** Ihre CSS-Animationen und Übergänge. Es ist jedoch ein bisschen wie mit der Brechstange – denken Sie daran, dass das Schlüsselwort in dieser Medienabfrage *reduziert* ist. Stellen Sie sicher, dass die Funktionalität nicht beeinträchtigt wird und dass Benutzer keinen wichtigen Kontext verlieren, indem sie sich von der Animation abmelden. Ich bevorzuge es, Optionen für reduzierte Bewegungen für diese Benutzer anzupassen. Denken Sie an einfache Deckkraft-Übergänge anstelle von Zoom- oder Schwenkeffekten.

Was ist aber mit JavaScript?

Gut, dass Sie fragen! Wir können die Medienabfrage für reduzierte Bewegungen auch im JavaScript-Bereich nutzen!

let motionQuery = matchMedia('(prefers-reduced-motion)');

const handleReduceMotion = () => {
  if (motionQuery.matches) {
    // reduced motion options
  }
}

motionQuery.addListener(handleReduceMotion);
handleReduceMotion()

Die Nutzung von Systemeinstellungen ist nicht narrensicher. Es gibt schließlich keine Garantie dafür, dass jeder, der von Bewegungen betroffen ist, weiß, wie man seine Einstellungen ändert. Um ganz sicher zu gehen, ist es möglich, einen Umschalter für reduzierte Bewegungen in der Benutzeroberfläche hinzuzufügen und die Macht dem Benutzer zurückzugeben, selbst zu entscheiden. We {the collective} hat eine wirklich schöne Implementierung auf ihrer Website.

Hier ist ein einfaches Beispiel

Scroll-Animationen

Eines meiner liebsten Dinge beim Animieren im Web ist das Anknüpfen an Benutzerinteraktionen. Es eröffnet eine Welt voller kreativer Möglichkeiten und ermöglicht es Ihnen wirklich, Besucher einzubinden. Aber es ist wichtig zu bedenken, dass nicht alle Interaktionen eine Option sind – einige (wie Scrollen) sind untrennbar mit der Art und Weise verbunden, wie jemand Ihre Website durchforstet.

Die Nielson Norman Group hat einige großartige Recherchen zu Scroll-Interaktionen durchgeführt. Ein Teil hat mir besonders zugesagt. Sie stellten fest, dass viele aufgabenorientierte Benutzer keinen Unterschied zwischen langsamen Ladezeiten und scroll-gesteuerten Einstiegsanimationen erkennen konnten. Alles, was sie bemerkten, war eine frustrierende Verzögerung in der Reaktionszeit der Benutzeroberfläche. Das kann ich nachvollziehen; es ist ärgerlich, wenn man versucht, eine Website nach Informationen zu durchsuchen, und warten muss, bis die Seite langsam ein- und ausblendet.

Wenn Sie das ScrollTrigger-Plugin von GreenSock für Ihre Animationen verwenden, haben Sie Glück. Wir haben eine coole kleine Eigenschaft hinzugefügt, um diese Frustration zu vermeiden: fastScrollEnd.

fastScrollEnd erkennt die Scroll-Geschwindigkeit des Benutzers. ScrollTrigger überspringt die Einstiegsanimationen bis zu ihrem Endzustand, wenn der Benutzer super schnell scrollt, als ob er es eilig hätte. Schauen Sie es sich an!

Es gibt auch eine super einfache Möglichkeit, Ihre Scroll-Animationen mit ScrollTrigger.matchMedia() für reduzierte Bewegungen freundlich zu gestalten.

---

Ich hoffe, diese Code-Schnipsel und Erkenntnisse helfen. Denken Sie daran, den Zweck zu berücksichtigen, mit Empathie zu führen und Ihre Animationskräfte verantwortungsvoll einzusetzen!