Animacja i ruchy

Czy zdarzyło Ci się kiedyś jechać samochodem, płynąć łodzią lub lecieć samolotem i nagle poczuć, że świat wiruje? A może miałeś tak silny atak migreny, że animacje na telefonie lub tablecie, które miały Cię "zachwycić", nagle zaczęły Cię drażnić? A może zawsze byłeś wrażliwy na ruch? To 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 głowy wywołanych migreną lub trwałej niepełnosprawności przedsionkowej.

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

W tym module omówimy niektóre sposoby, które pomogą lepiej wspierać osoby z różnymi rodzajami zaburzeń wywołanych ruchem.

Migające i ruchome treści

Tworząc animację i ruch, zastanów się, czy ruch elementu nie jest nadmierny. Na przykład miganie kolorów od ciemnego do jasnego lub szybkie ruchy na ekranie mogą powodować napady padaczkowe u osób z padaczką fotogenną. Szacuje się, że 3% osób z padaczką cierpi na nadwrażliwość na światło, a jest ona częstsza u kobiet i osób młodszych.

Wytyczne WCAG dotyczące migotania zalecają unikanie:

• migania więcej niż 3 razy w ciągu sekundy,
• migania poniżej ogólnego progu migania i progu migania czerwonego.

W najlepszym razie takie miganie może uniemożliwić korzystanie ze strony internetowej, a w najgorszym – spowodować chorobę.

W przypadku każdego ekstremalnego ruchu konieczne jest przetestowanie go za pomocą narzędzia do analizy padaczki fotogennej (PEAT). PEAT to bezpłatne narzędzie, które pozwala sprawdzić, czy treści, filmy lub animacje na ekranie mogą powodować napady padaczkowe. Nie wszystkie treści muszą być oceniane przez PEAT, ale dla bezpieczeństwa należy ocenić treści, które zawierają miganie lub szybkie przejścia między jasnymi i ciemnymi kolorami tła.

Kolejne pytanie, które należy sobie zadać w związku z animacją i ruchem, to czy ruch elementu jest niezbędny do zrozumienia treści lub działań na ekranie. Jeśli nie jest niezbędny, rozważ usunięcie z tworzonego lub projektowanego elementu wszystkich ruchów, nawet mikroruchów.

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 należy postępować zgodnie z wytycznymi WCAG's dotyczącymi ruchu. Wytyczne te mówią, że musisz utworzyć opcję, która umożliwi użytkownikom wstrzymanie, zatrzymanie lub ukrycie ruchu w przypadku nieistotnych ruchomych, migających lub przewijanych elementów, które uruchamiają się automatycznie, trwają dłużej niż 5 sekund i są częścią innych elementów strony.

Wstrzymywanie, zatrzymywanie lub ukrywanie ruchu

Dodaj do strony mechanizm wstrzymywania, zatrzymywania lub ukrywania, aby umożliwić użytkownikom wyłączenie potencjalnie problematycznej animacji ruchu. 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 umożliwiającego użytkownikom kontrolowanie ich wrażeń. Gdy przycisk jest przełączony na „ruch wyłączony”, wszystkie animacje są zamrożone na tym i wszystkich innych ekranach.

Korzystanie z zapytań o media

Oprócz selektywnego stosowania animacji, udostępniania użytkownikom opcji wstrzymywania, zatrzymywania i ukrywania ruchu oraz unikania nieskończonych pętli animacji możesz też rozważyć dodanie zapytania o media skupionego na 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 media skupione na kolorach w module kolorów, zapytanie o media @prefers-reduced-motion sprawdza ustawienia systemu operacyjnego użytkownika związane z animacją.

Użytkownik może ustawić preferencje wyświetlania, aby zmniejszyć ruch. Te ustawienia różnią się w zależności od systemu operacyjnego i mogą być sformułowane pozytywnie lub negatywnie. Dzięki `@prefers-reduced-motion` możesz zaprojektować witrynę, która będzie uwzględniać te preferencje.

W systemach macOS i Android użytkownik włącza to ustawienie, aby zmniejszyć ruch. W systemie macOS użytkownik może ustawić Zmniejsz ruch w Ustawienia > Dostępność > Wyświetlanie. Ustawienie w Androidzie to Usuń animacje. W systemie Windows ustawienie jest sformułowane pozytywnie jako Pokaż animacje, które 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, nawet animacje krótsze niż 5 sekund, o których mowa w wytycznych WCAG 2.0 AA, należy traktować z ostrożnością. Najbardziej niezawodną metodą jest umożliwienie użytkownikom, którzy wskazali preferencje dotyczące zmniejszenia ruchu, wyłącznej kontroli nad animacjami, co pozwoli im uruchamiać i zatrzymywać animacje za pomocą specjalnych elementów sterujących, takich jak odpowiednio przycisk odtwarzania i przycisk wstrzymywania.

Progresywne ulepszanie ruchu

Jako projektanci i programiści mamy wiele wyborów, w tym domyślne stany ruchu i ilość ruchu do wyświetlenia. Przyjrzyj się jeszcze raz ostatniemu przykładowi dotyczącemu ruchu.

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

Nie możemy przewidzieć, jaki poziom ruchu spowoduje problemy u osób z napadami padaczkowymi, zaburzeniami przedsionkowymi i innymi zaburzeniami wzroku. Nawet niewielka ilość ruchu na ekranie może powodować zawroty głowy, niewyraźne widzenie lub inne problemy. Dlatego w poniższym przykładzie domyślnie nie używamy animacji.

Zapytania o media warstwowe

Aby dać użytkownikom jeszcze więcej możliwości wyboru, możesz użyć kilku zapytań o media. Użyjmy razem @prefers-color-scheme, @prefers-contrast i @prefers-reduced-motion.

Umożliwianie użytkownikom wyboru

Dodawanie animacji do naszych produktów cyfrowych może być zabawne i sprawiać użytkownikom przyjemność, ale musimy pamiętać, że niektóre osoby będą miały problemy z tymi projektami. Wrażliwość na ruch może dotyczyć każdego – od lekkiego dyskomfortu po poważną chorobę lub napad padaczkowy.

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