Animacja i ruchy

Czy zdarzyło Ci się kiedyś, że podczas jazdy samochodem, łodzią lub samolotem nagle poczułeś, że świat zaczyna wirować? Czy zdarzyło Ci się mieć tak silny atak migreny, że animacje na telefonie lub tablecie, które miały Cię „cieszyć”, nagle zaczęły Cię drażnić? A może zawsze byłaś/byłeś wrażliwa(-y) na wszelkiego rodzaju ruch? Oto przykłady różnych rodzajów zaburzeń przedsionkowych.

Do 40 roku życia ponad 35% dorosłych doświadczy jakiejś formy zaburzeń przedsionkowych. Może to prowadzić do tymczasowych zawrotów głowy, zawrotów wywołanych migreną lub trwalszych zaburzeń równowagi.

Oprócz wywoływania zawrotów głowy wiele osób uważa, że ruchome, migające lub przewijane treści rozpraszają uwagę. Osoby z ADHD i innymi zaburzeniami uwagi mogą być tak rozproszone przez animowane elementy, że zapomną, dlaczego w ogóle weszły na Twoją stronę lub do aplikacji.

W tym module przyjrzymy się niektórym sposobom, które mogą pomóc osobom z zaburzeniami wywołanymi przez ruch.

Migające i ruchome treści

Podczas tworzenia animacji i ruchu zastanów się, czy ruch elementu nie jest nadmierny. Na przykład migające kolory, szybkie ruchy na ekranie mogą wywołać napady u osób cierpiących na padaczkę fotogenną. Szacuje się, że 3% osób z epilepsją cierpi na nadwrażliwość na światło, która występuje częściej u kobiet i młodszych osób.

Wytyczne WCAG dotyczące migania odradzają:

• miga więcej niż 3 razy w ciągu sekundy;
• Błyski poniżej ogólnego progu błysku i progu czerwonego błysku.

W najlepszym wypadku mogą one uniemożliwić korzystanie ze strony internetowej, a w najgorszym – wywołać chorobę.

W przypadku wszelkich ekstremalnych ruchów konieczne jest przetestowanie ich za pomocą narzędzia do analizy epilepsji światłoczułej (PEAT). PEAT to bezpłatne narzędzie, które pomaga określić, czy treści na ekranie, filmy lub animacje mogą wywołać napady padaczkowe. Nie wszystkie treści muszą być oceniane przez PEAT, ale te, które zawierają migające lub szybko zmieniające się tło (od jasnego do ciemnego), powinny być oceniane dla bezpieczeństwa.

Kolejne pytanie, które warto sobie zadać w kontekście animacji i ruchu, to czy ruch elementu jest niezbędny do zrozumienia treści lub działań na ekranie. Jeśli nie jest to konieczne, rozważ usunięcie wszystkich ruchów, nawet mikroruchów, z elementu, który tworzysz lub projektujesz.

Załóżmy, że uważasz, że ruch elementu nie jest niezbędny, ale może poprawić ogólne wrażenia użytkownika, lub nie możesz usunąć ruchu z innego powodu. W takim przypadku postępuj zgodnie z wytycznymi WCAG dotyczącymi ruchu. Wytyczne stanowią, że musisz utworzyć opcję wstrzymywania, zatrzymywania lub ukrywania ruchu w przypadku nieistotnych elementów ruchomych, migających lub przewijanych, które uruchamiają się automatycznie, trwają dłużej niż 5 sekund i są częścią innych elementów strony.

Wstrzymywanie, zatrzymywanie i ukrywanie ruchu

Dodaj na stronie mechanizm wstrzymywania, zatrzymywania lub ukrywania, aby umożliwić użytkownikom wyłączanie potencjalnie problematycznych animacji. Możesz to zrobić na poziomie ekranu lub elementu.

Załóżmy na przykład, że Twój produkt cyfrowy zawiera wiele animacji. Rozważ dodanie dostępnego przełącznika JavaScript, aby umożliwić użytkownikom kontrolowanie ich wrażeń. Gdy przycisk jest przełączony na „Ruch wyłączony”, wszystkie animacje na tym i innych ekranach są zamrożone.

Używanie zapytań o multimedia

Oprócz selektywnego stosowania animacji, dawania użytkownikom możliwości wstrzymywania, zatrzymywania i ukrywania ruchu oraz unikania nieskończonych pętli animacji możesz też rozważyć dodanie zapytania o media dotyczącego ruchu. Dzięki temu użytkownicy mają jeszcze większy wybór, jeśli chodzi o to, co jest wyświetlane na ekranie.

@prefers-reduced-motion

Podobnie jak zapytania o multimedia dotyczące kolorów w module kolorów, zapytanie @prefers-reduced-motion sprawdza ustawienia systemu operacyjnego użytkownika związane z animacją.

Użytkownik może ustawić preferencje wyświetlania, aby ograniczyć ruch. Te ustawienia różnią się w zależności od systemu operacyjnego i mogą być przedstawione w sposób pozytywny lub negatywny. Za pomocą @prefers-reduced-motion możesz zaprojektować witrynę, która uwzględnia te preferencje.

W systemach macOS i Android użytkownik włącza to ustawienie, aby ograniczyć ruch. W systemie macOS użytkownik może włączyć opcję Ogranicz ruch w sekcji Ustawienia > Dostępność > Wyświetlacz. Ustawienie Androida to Usuń animacje. W systemie Windows to ustawienie jest sformułowane w pozytywny sposób jako Pokazuj animacje i jest domyślnie włączone. Aby zmniejszyć ruch, użytkownik musi wyłączyć to ustawienie.

Aby zapewnić dostępność osobom, które mają problemy z ruchem, należy zachować ostrożność nawet w przypadku animacji krótszych niż 5-sekundowy próg określony w wytycznych WCAG 2.0 AA. Najbardziej niezawodną metodą jest umożliwienie użytkownikom, którzy wyrazili preferencje dotyczące ograniczenia ruchu, wyłącznej kontroli nad animacjami. Dzięki temu będą mogli uruchamiać i zatrzymywać animacje za pomocą specjalnych elementów sterujących, takich jak przycisk odtwarzania i przycisk wstrzymania.

Progresywne ulepszanie ruchu

Jako projektanci i deweloperzy mamy wiele decyzji do podjęcia, w tym domyślne stany ruchu i zakres ruchu do wyświetlenia. Przyjrzyj się jeszcze raz ostatniemu przykładowi dotyczącemu ruchu.

Załóżmy, że uznamy, że animacja nie jest niezbędna do zrozumienia treści na ekranie. W takim przypadku możemy ustawić domyślny stan na animację z ograniczonym ruchem zamiast wersji z pełnym ruchem. Animacje są wyłączone, chyba że użytkownicy wyraźnie o nie poproszą.

Nie jesteśmy w stanie przewidzieć, jaki poziom ruchu może powodować problemy u osób z padaczką, zaburzeniami równowagi i innymi zaburzeniami wzroku. Nawet niewielki ruch na ekranie może wywołać zawroty głowy, niewyraźne widzenie lub inne, poważniejsze objawy. W poniższym przykładzie domyślnie nie używamy animacji.

Warstwowe zapytania o multimedia

Możesz użyć wielu zapytań o multimedia, aby dać użytkownikom jeszcze więcej możliwości wyboru. Możesz używać @prefers-color-scheme, @prefers-contrast i @prefers-reduced-motion jednocześnie.

Pozwól użytkownikom wybrać

Dodawanie animacji do naszych usług cyfrowych może być świetnym sposobem na zachwycenie użytkowników, ale musimy pamiętać, że niektóre osoby mogą być wrażliwe na takie projekty. Czułość na ruch może dotknąć każdego, od lekkiego dyskomfortu po wywołanie wyniszczającej choroby lub napadu.

Możesz użyć różnych narzędzi, aby umożliwić użytkownikowi podjęcie decyzji, co jest dla niego najlepsze, zamiast zgadywać, ile ruchu to za dużo. Na przykład dodaj przełącznik, który włącza lub wyłącza animację w witrynie lub aplikacji internetowej. Rozważ ustawienie domyślnego stanu tego przełącznika na wyłączony.