Animacja i ruch

Czy kiedykolwiek zdarzyło Ci się jeździć samochodem, łodzią lub samolotem i nagle poczułeś, że świat zakręcić? Albo miała tak poważną migrenę, że na telefonie lub tablecie pojawiły się animacje, stworzony, aby „zachwycać” nagle zrobiło Ci się mdrze? A może zawsze jesteś lub wrażliwe na wszystkie rodzaje ruchu? Są to przykłady różnych rodzajów wady przedsionkowe.

Przed 40. rokiem życia u ponad 35% dorosłych pojawi się dysfunkcja przedsionków. Może to spowodować tymczasowe zawroty głowy, zawroty głowy spowodowane migreną lub inne trwała niepełnosprawność przedsionków.

Oprócz wyzwalania zawrotów głowy wiele osób rusza się, mruga lub przewija które rozpraszają uwagę. Osoby z ADHD i innych zaburzeń koncentracji uwagi mogą rozpraszać uwagę zapomina, po co odwiedzili Twoją witrynę lub aplikację. .

W tym module przyjrzymy się niektórym sposobom zapewniania użytkownikom lepszego wspierania, ze wszystkimi rodzajami zaburzeń spowodowanych ruchem.

Miganie i przenoszenie treści

Tworząc animację i ruch, zadaj sobie pytanie, czy ruch elementu nie jest zbyt duży. Na przykład migotanie kolorów z ciemnego do jasnego lub szybkie ruchy ekranu mogą powodować napady u osób cierpiących na padaczkę fotogenną. Szacuje się, że 3% osób cierpiących na padaczkę cierpi na fotowrażliwość, a częściej występuje u kobiet i młodszych osób.

Wytyczne WCAG dotyczące flashowania zalecają przestrzeganie tych zaleceń:

• Miga ponad 3 razy na każdą sekundę
• Miga pod ogólny próg błysku i czerwonego błysku.

Mogą one w najdogodniejszym stopniu uniemożliwić korzystanie ze strony internetowej lub, w najgorszym przypadku, prowadzą do choroby.

Wszelkie ekstremalne ruchy koniecznie trzeba przetestować za pomocą Narzędzie Epilepsy Analysis Tool (PEAT). PEAT to bezpłatne narzędzie do określania, czy zawartość ekranu, film i animacje mogą powodować napady. Nie wszystkie treści muszą być oceniane przez PEAT, ale treści zawierające błyski lub szybkie przejścia między światłem a ciemnością. ze względów bezpieczeństwa należy sprawdzić kolory tła.

Kolejnym pytaniem o animację i ruch jest 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 całego ruchu – nawet niewielkich – z elementu, który tworzysz lub projektujesz.

Załóżmy, że ruch elementu nie jest istotny, ale może wzbogacić ogólne wrażenia użytkownika. Nie można też usunąć ruchu w przypadku innego . W takim przypadku postępuj zgodnie z wytycznych dotyczących ruchu. Zgodnie z wytycznymi należy utworzyć opcję umożliwiającą użytkownikom wstrzymywanie, zatrzymywanie ukryj ruch w przypadku mniej istotnych elementów w ruchu, miganiu lub przewijaniu, które uruchamiają się automatycznie, trwają dłużej niż pięć sekund i są częścią innej strony .

Wstrzymywanie, zatrzymywanie lub ukrywanie ruchu

Dodawanie opcji wstrzymywania, zatrzymywania lub ukrywania do strony, która umożliwia użytkownikom wyłączenie potencjalnie problematycznych informacji animację 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 JavaScriptu które pozwalają użytkownikom kontrolować ich wrażenia. Gdy przycisk jest przełączony na „Ruch wyłączony”, wszystkie animacje są zablokowane na tym ekranie i na wszystkich innych ekranach.

Używaj zapytań o multimedia

Oprócz wyboru animacji dajemy użytkownikom wiele możliwości do wstrzymywania, zatrzymywania, ukrywania ruchu i unikania nieskończonej pętli animacji, możesz warto też dodać zapytanie o media skłaniające do ruchu. Dzięki temu użytkownicy będą mieli mają większy wybór pod względem wyświetlanych na ekranie.

@prefers-reduced-motion

Podobnie jak w przypadku zapytań o multimedia w module kolorów, zapytanie o multimedia @prefers-reduced-motion sprawdza ustawienia systemu operacyjnego użytkownika pod kątem animacji.

Użytkownik może dostosować ustawienia wyświetlania, aby ograniczyć ruch. Te ustawienia są różnią się w zależności od systemu operacyjnego i mogą być prezentowane pozytywnie lub negatywnie. @prefers-reduced-motion pozwala zaprojektować stronę uwzględniających te preferencje.

W systemie macOS i Android użytkownik włącza to ustawienie, aby ograniczyć ruch. W systemie macOS: Użytkownik może ustawić Ogranicz ruch w Ustawieniach > Ułatwienia dostępu > Displayowe. Ustawienie Androida to Usuń animacje. W systemie Windows ustawienie jest wyświetlane w ramce. jako opcja Pokaż animacje, która jest domyślnie włączona. Użytkownik musi włączyć wyłączyć to ustawienie, aby ograniczyć ruch.

Alternatywnie, jak pokazano w następnym zestawie przykładów, możesz tak zaprogramować wszystkie animacje, by przestały się ruszać w ciągu maksymalnie 5 sekund, zamiast odtwarzać je w nieskończonej pętli.

Stopniowe ulepszanie ruchu

Projektanci i deweloperzy mają do wyboru wiele możliwości, m.in. domyślne stany ruchu i zakres ruchu. Wróćmy do ostatniego przykładu dotyczącego ruchu.

Załóżmy, że dochodzimy do wniosku, że animacja jest niepotrzebna do zrozumienia zawartości ekranu. W takim przypadku możemy ustawić domyślny stan z zmniejszoną animacją ruchu zamiast z pełnej wersji. Animacje są wyłączone, o ile użytkownicy nie proszą o zgodę na ich wyświetlanie.

Nie jesteśmy w stanie przewidzieć, jaki poziom ruchu spowoduje problemy u osób, napad, schorzenie przedsionków i inne zaburzenia wzroku. Nawet niewielki ruch mogą powodować zawroty głowy, niewyraźne widzenie lub pogorszenie stanu. W W tym przykładzie domyślnie ustawiamy brak animacji.

Warstwowe zapytania o multimedia

Możesz używać wielu zapytań o media, aby dać użytkownikom jeszcze większy wybór. Zacznijmy użyj zasad @prefers-color-scheme, @prefers-contrast i @prefers-reduced-motion wszystko w jednym miejscu.

Pozwól użytkownikom wybrać

Choć wbudowanie w nasze produkty cyfrowe animacje może być zabawą, użytkowników, ważne jest, aby pamiętać, że zmiany te będą miały wpływ na niektórych użytkowników. Czułość ruchu może dotknąć każdego: od nieznacznego dyskomfortu po wyniszczającą chorobę czy napad.

Możesz skorzystać z wielu różnych narzędzi, aby pozwolić użytkownikom zdecydować, co jest najlepsze. zamiast zgadywać, ile ruchu jest za duże. Na przykład dodaj atrybut użyj przełącznika, aby włączyć lub wyłączyć animację w witrynie lub aplikacji internetowej. Rozważ wyłączyć taki przełącznik,

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę na temat ułatwień dostępu w zakresie ruchu i animacji.