Animacja i ruch

Czy kiedykolwiek zdarzyło Ci się jeździć samochodem, łodzią lub samolotem i nagle poczuć, że świat się obraca? Albo masz tak silne migreny, że animacje na telefonie lub tablecie sprawiają Ci przyjemność, a nagle nie możesz się doczekać? A może zawsze odczuwasz wrażliwość na każdy rodzaj ruchu? To przykłady różnych typów zaburzeń układu przedsionkowego.

W wieku 40 lat u ponad 35% dorosłych zaobserwuje się pewną formę nieprawidłowości przedsionków. Może to wywołać tymczasowe zawroty głowy, zawroty głowy spowodowane migreną lub długotrwałą niepełnosprawność przedsionków.

Wiele osób nie tylko wywołuje zawroty głowy, ruch i przewijanie treści, a także rozprasza. Osoby z ADHD i innymi zaburzeniami skupienia uwagi mogą być tak rozproszone, że zapominają, dlaczego w ogóle trafili do Twojej witryny lub aplikacji.

W tym module opowiemy, jak możesz pomóc osobom ze wszystkimi zaburzeniami spowodowanymi ruchem.

Miganie i przenoszenie treści

Tworząc animację i ruch, zadaj sobie pytanie, czy ruch elementu nie jest nadmierne. Na przykład u osób z padaczką fotogenną mogą występować napady padaczkowe. Szacuje się, że 3% osób z padaczką cierpi na fotowrażliwość. Częściej występuje u kobiet i młodszych osób.

Wytyczne WCAG dotyczące flashowania zalecają:

• Miganie więcej niż 3 razy w ciągu każdej sekundy
• migają poniżej ogólnego progu lampy błyskowej i czerwonej;

Takie błyski mogą w najbezpieczniejszym przypadku doprowadzić do braku możliwości korzystania ze strony internetowej, a w najgorszym razie do choroby.

W przypadku ekstremalnych ruchów koniecznie przetestuj je za pomocą narzędzia do analizy fotowrażliwej Epilepsy Analysis Tool (PEAT). PEAT to bezpłatne narzędzie do sprawdzania, czy zawartość ekranu, film lub animacje mogą powodować napady. Nie wszystkie treści muszą być oceniane przez PEAT, ale dla bezpieczeństwa treści, które zawierają migoczące lub szybkie przejścia między jasnymi i ciemnym tłem, należy ocenić je dla własnego bezpieczeństwa.

W przypadku animacji i ruchu warto sobie zadać też pytanie, czy ruch elementu jest niezbędny dla zrozumienia treści lub działań na ekranie. Jeśli to nie jest niezbędne, rozważ usunięcie całego ruchu – 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 go usunąć z innego powodu. W takim przypadku musisz zastosować się do wytycznych WCAG. Zgodnie z wytycznymi należy utworzyć opcję umożliwiającą użytkownikom wstrzymywanie, zatrzymywanie lub ukrywanie ruchu w przypadku mniej ważnych elementów, takich jak poruszanie się, miganie czy przewijanie, które uruchamiają się automatycznie, trwają ponad 5 sekund i są częścią innych elementów strony.

Wstrzymaj, zatrzymaj lub ukryj ruch

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

Załóżmy, że Twój produkt cyfrowy zawiera wiele animacji. Rozważ dodanie przełącznika JavaScriptu z ułatwieniami dostępu, aby użytkownicy mieli wpływ na wygodę korzystania z usługi. Gdy przycisk jest wyłączony, wszystkie animacje są zablokowane na tym ekranie i na wszystkich pozostałych.

Użyj zapytań o multimedia

Oprócz selektywnego wybierania animacji, zapewniania użytkownikom opcji wstrzymywania, zatrzymywania i ukrywania ruchu oraz unikania nieskończonych zapętleń animacji możesz też dodać zapytanie o media związane z ruchem. Daje to użytkownikom jeszcze większy wybór tego, co ma się wyświetlać na ekranie.

@prefers-reduced-motion

Podobnie jak w przypadku skoncentrowanych na kolorach zapytań o media w module kolorów, zapytanie o multimedia @prefers-reduced-motion sprawdza ustawienia systemu operacyjnego użytkownika związane z animacją.

Użytkownik może dostosować ustawienia wyświetlania, aby zmniejszyć ruch. Ustawienia te różnią się w zależności od systemu operacyjnego i mogą być przedstawione w sposób pozytywny lub negatywny. Dzięki funkcji @prefers-reduced-motion możesz projektować witrynę, która uwzględnia te preferencje.

W systemach macOS i Android użytkownik włącza to ustawienie, aby zmniejszyć ruch. W macOS użytkownik może wybrać opcję Ogranicz ruch, wybierając Ustawienia > Ułatwienia dostępu > Wyświetlacz. Ustawienie Androida to Usuń animacje. W systemie Windows to ustawienie jest domyślnie włączone i jest wyświetlane jako Pokaż animacje. Użytkownik musi wyłączyć to ustawienie, aby zmniejszyć ruch.

Z kolei, jak pokazano w następnym zestawie przykładów, możesz zakodować wszystkie animacje w taki sposób, aby przestały się poruszać w ciągu maksymalnie 5 sekund, zamiast odtwarzać je w nieskończonej pętli.

Stopniowe ulepszanie ruchu

Jako projektanci i deweloperzy mamy wiele możliwości wyboru, w tym domyślne stany ruchu i ilość ruchu do wyświetlenia. Spójrzmy jeszcze raz na ostatni przykład z ruchem.

Załóżmy, że uznamy, że animacja nie jest potrzebna do zrozumienia zawartości ekranu. W takim przypadku możemy zmienić domyślny stan na animację z ograniczonym ruchem, a nie na wersję pełną animacji. Jeśli użytkownik nie poprosi o odtworzenie animacji, jest ona wyłączona.

Nie jesteśmy w stanie przewidzieć, jaki poziom ruchu wywoła problemy u osób z napadami, zaburzeniami widzenia i innymi zaburzeniami wzroku. Nawet niewielki ruch na ekranie może wywołać zawroty głowy, niewyraźne widzenie lub jeszcze gorsze widzenie. W tym przykładzie domyślnie ustawiamy brak animacji.

Zapytania o multimedia w warstwach

Aby dać użytkownikom jeszcze większy wybór, możesz stosować kilka zapytań o multimedia. Użyjmy razem elementów @prefers-color-scheme, @prefers-contrast i @prefers-reduced-motion.

Pozwól użytkownikom wybrać

Wbudowanie animacji w nasze produkty cyfrowe z myślą o użytkownikach może być ciekawe, ale trzeba pamiętać, że te projekty wpłynęłyby na niektórych. Czułość ruchu może wpływać na każdego – od nieznacznego dyskomfortu po wyniszczającą chorobę lub napad.

Możesz użyć wielu różnych narzędzi, aby umożliwić użytkownikowi podjęcie decyzji, co będzie dla niego najlepsze, zamiast zgadywać, jak dużo ruchu. Dodaj na przykład przełącznik, aby włączyć lub wyłączyć animację w witrynie lub aplikacji internetowej. Możesz ustawić taki przełącznik w pozycji wyłączonej.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o ułatwieniach dostępu do animacji i animacji.