Projektowanie ze zredukowanym ruchem dla czułości ruchu

CSS dodał ostatnio funkcje, które pozwalają nam rozpoznać określone preferencje użytkownika i cechy jego aktualnego środowiska. Jedna z tych nowych funkcji, a konkretnie funkcja preferowania mediów z ograniczonym ruchem, może być szczególnie przydatna do projektowania bardziej inkluzywnego ruchu w sieci.

Kilka lat temu napisałem artykuł o projektowaniu bezpieczniejszej animacji w sieci pod kątem wrażliwości na ruch oraz o ograniczonych opcjach, jakie mieliśmy w tamtym czasie, aby projektować bezpieczny ruch w sieci. Niektóre rzeczy pozostały takie same od czasu tego oryginalnego artykułu, na przykład rodzaje efektów ruchu, które mogą być wyzwalane, oraz znaczenie kontekstu i oczekiwań użytkownika. Ale to, co się zmieniło, to istnienie i wsparcie funkcji medialnej preferującej zredukowany ruch. To robi dużą różnicę w sposobie, w jaki możemy zaprojektować ruch w naszej pracy, aby był inkluzywny i dostępny.

Dlaczego ograniczać ruch?

Wydanie iOS7 w 2013 roku wywołało w całym cyfrowym świecie projektowania uświadomienie sobie, że pewien ruch na ekranie – nawet jeśli był częścią interfejsu – może mieć fizyczne konsekwencje dla osób z wrażliwością na ruch. Od tamtej pory główne mobilne i komputerowe systemy operacyjne dodały funkcje dla ludzi, aby zmniejszyć ilość ruchu, z jakim stykają się w swoich systemach operacyjnych.

Artykuły takie jak „Twój interaktywny produkt doprowadza mnie do choroby” i „Dostępność w przypadku zaburzeń przedsionkowych” zawierają historie z pierwszej ręki o tym, jak nasze wybory projektowe, zwłaszcza dotyczące ruchu, mogą mieć fizyczne konsekwencje dla osób z wrażliwością na ruch. Pierwotne przyczyny tych wrażliwości na ruch mogą się znacznie różnić u poszczególnych osób. Dla niektórych jest zakorzeniony w zaburzeniach przedsionkowych, podczas gdy dla innych może wynikać z migreny lub innych czynników. To, co wywołuje, może się różnić w zależności od osoby, a dla niektórych nawet z dnia na dzień. Fizyczne objawy, jakich doświadczają ludzie w wyniku tego wyzwalającego ruchu, mogą obejmować lekkie zawroty głowy lub bóle głowy, nudności lub gorzej.

Wybory projektowe, których dokonujemy wokół animacji w naszej pracy, mają bezpośredni wpływ na to, jak nasza praca wpływa na osoby z wrażliwością na ruch. Wiedza o tym, jakie rodzaje ruchu są potencjalnie wyzwalane i jak możemy je złagodzić za pomocą naszych wyborów projektowych, pomaga nam projektować doświadczenia, które są bezpieczne dla naszych odbiorców i nie spowodują niezamierzonych szkód. Animacja nadal może mieć pozytywny wpływ na nasze wysiłki w zakresie UX, ale to od nas zależy, czy używamy jej w sposób odpowiedzialny, tak jak staramy się odpowiedzialnie korzystać z innych naszych narzędzi projektowych.

Preferuje zmniejszony ruch w sieci

Funkcja preferowania multimediów o zmniejszonej ilości ruchu ma teraz silną obsługę przeglądarek. Jest obsługiwany w aktualnych wersjach Edge, Firefox, Chrome, Safari, Opera, iOS Safari, a także w przeglądarkach Android i Chrome na Androida. Poziom wsparcia, jaki mamy dzisiaj, sprawia, że ​​jest to coś, co absolutnie można wykorzystać w produkcji. Ponadto, jeśli czyjaś przeglądarka nie obsługuje tej funkcji, nic złego się nie stanie, zostanie ona po prostu zignorowana i będzie działać tak, jak poprzednio.

Po stronie programistycznej możemy przetestować preferowany ruch zredukowany w taki sam sposób, w jaki używalibyśmy innych zapytań o media w CSS lub JavaScript, aby dowiedzieć się, czy zażądano zredukowanego ruchu.

W CSS będzie to wyglądać mniej więcej tak:

 @media (prefers-reduced-motion: reduce) { /* reduced behaviour */ }

A w JavaScript:

 let motionQuery = matchMedia('(prefers-reduced-motion)'); const handleReduceMotionChanged = () => { if (motionQuery.matches) //reduced behaviour; } motionQuery.addListener(handleReduceMotionChanged); handleReduceMotionChanged()

Niezależnie od wybranego sposobu uzyskania dostępu to zapytanie o media zwróci jedną z dwóch wartości: brak preferencji (fałsz) lub zmniejszenie (prawda). Po pobraniu możesz użyć tych wartości do informowania o tym, co wyświetlasz w przeglądarce.

Z dwóch wartości, które mogą zostać zwrócone, jedyną, o której możemy być pewni, że została ustawiona celowo, jest wartość reduce (true) . Brak preferencji (fałsz) może oznaczać, że dana osoba jest w porządku ze wszystkimi rodzajami ruchu lub może oznaczać, że ta preferencja nie została jeszcze ustawiona. To sprawia, że ​​każde podejście, które przyrównuje wartość braku preferencji (fałsz) do osoby, której dotyczy wybór na wszystkie poziomy ruchu, jest niewiarygodne. Z tego powodu lepszym podejściem jest zmniejszenie potencjalnie wyzwalających efektów ruchu, gdy zostanie zwrócona wartość reduce (true) .

Na przykład tutaj animacja zapętlonego odbicia została zastąpiona animacją zanikania, gdy wymagana jest redukcja ruchu:

 /* A constant bouncing motion effect applied to the title */ h2 { animation: bouncing 1.5s linear infinite alternate; } /* Replace it with a safer effect when prefers-reduced-motion returns true */ @media (prefers-reduced-motion) { h2 { animation: fade 0.5s ease-in both; }

Zredukowany ruch z perspektywy użytkowników

Większość głównych systemów operacyjnych pozwala ludziom ustawić swoje preferencje w ustawieniach systemu. Dokładne sformułowanie i lokalizacja ustawień różnią się, ale preferencje można ustawić w systemach operacyjnych iOS, OSX, Windows i Android.

Preferuje funkcję nośników o zredukowanym ruchu w praktyce

Decydując o tym, jak wykorzystać funkcję preferowanych mediów o ograniczonej ilości ruchu, mamy miejsce na tworzenie rozwiązań, które najlepiej pasują do kontekstu naszych produktów i treści. W przypadku większości projektów internetowych należy najpierw zidentyfikować wszelkie potencjalnie wyzwalające efekty ruchu w witrynie, a następnie użyć funkcji preferowanych mediów z ograniczonym ruchem, aby zapewnić zmniejszoną wersję tego efektu.

Przyjrzyjmy się każdemu krokowi bardziej szczegółowo.

Identyfikowanie ruchu potencjalnie wyzwalającego

Aby znaleźć jakikolwiek potencjalnie wyzwalający ruch, który możesz mieć, przejrzyj typowe przepływy użytkowników dla swojej witryny lub produktu i przyjrzyj się bliżej zastosowanym efektom ruchu: Czy masz jakieś interakcje, które mają duże ruchy? Jakieś duże zoomy, efekty wirowania lub efekty paralaksy? Wszystkie te rodzaje animowanych efektów mogą być problematyczne dla osób z wrażliwością na ruch. W przeciwieństwie do tego efekty animowane, takie jak zanikanie kolorów, zmiany przezroczystości i niewielkie zmiany w skali, raczej nie będą problematyczne. W razie wątpliwości nie zaszkodzi dodać dany efekt do listy „do redukcji”, aby zachować ostrożność.

Wytyczne dotyczące dostępności treści internetowych zalecają zapewnienie skróconej wersji dla każdego „ruchu, który stwarza iluzję ruchu… nieistotnego dla znaczenia treści”. Myślę, że warto zobaczyć też kilka przykładów, zwłaszcza jeśli uważasz, że nie jesteś wrażliwy na ruch na ekranie. W poprzednim artykule opisałem przykłady potencjalnego wywoływania ruchu, a ten post na blogu Webkit też je zawiera. Są szanse, że jeśli Twoja witryna nie opiera się w dużym stopniu na ruchu, otrzymasz dość krótką listę efektów, na których należy się skupić.

Utwórz wersję o zredukowanym ruchu

Następnie chcesz określić najbardziej odpowiedni warunek ograniczenia ruchu dla tych potencjalnie wyzwalających efektów. Czy animację można łatwo dostosować, aby używać efektu bez ruchu, takiego jak zanikanie nieprzezroczystości lub przenikanie w celu zmniejszenia żądań ruchu? Czy wstrzymanie ruchu lub całkowite usunięcie efektu w celu zredukowania ruchu zachowa znaczenie treści?

Rola omawianego wniosku będzie ważnym czynnikiem przy podejmowaniu decyzji, jaka byłaby najbardziej odpowiednia wersja zredukowana. Nie chcesz przypadkowo usuwać treści ani pogarszać ogólnego wrażenia. Oto kilka przykładów tego, co może dobrze działać w przypadku potencjalnie wywoływanych efektów:

Przejścia dużych stron

Efekty przejścia dużych stron można prawdopodobnie zastąpić efektem przenikania dla trybu ograniczonego ruchu. To samo dotyczy zwykle dużych przejść z zoomowaniem lub obracaniem, które przechodzą między różnymi stanami lub widokami.

Animowane Ilustracje

Z drugiej strony animowane ilustracje najlepiej zastąpić wersją statyczną, aby ograniczyć ruch, jeśli służą głównie do podkreślania osobowości lub budowania marki. Upewnij się, że wersja statyczna nadal ma znaczenie, a układ, który ma największe znaczenie, nie zawsze może być początkiem lub końcem animacji. Dodanie funkcji do odtwarzania animowanych ilustracji na żądanie w celu zmniejszenia ruchu może być również przydatne, umożliwiając użytkownikom odtwarzanie animacji, gdy są na to gotowi.

Nie zapomnij również wziąć pod uwagę ruchu w animowanych gifach lub automatycznie odtwarzanych filmach. Mogą one również zawierać potencjalnie wyzwalający ruch i wymagałyby zmniejszonej wersji, jeśli to robią.

Efekty paralaksy

Efekty paralaksy i przesadzone efekty płynnego przewijania są powszechnie wyzwalane przez osoby z wrażliwością na ruch, więc należy je znacznie zmniejszyć lub całkowicie usunąć w celu zmniejszenia ruchu. (Każda osoba, z którą rozmawiałem w moich badaniach nad tym, określiła paralaksę jako problem dla nich.) Efekty płynnego przewijania można zastąpić domyślnym zachowaniem linku kotwiczącego przeglądarki, jak to opisał tutaj Eric Bailey. Usunięcie efektów paralaksy w celu zmniejszenia ruchu jest idealnym rozwiązaniem, ale upewnij się, że cała niezbędna zawartość jest nadal widoczna i użyteczna po usunięciu paralaksy.

W większości przypadków zastąpienie potencjalnie wyzwalającego efektu bezpieczniejszym efektem w celu zmniejszenia ruchu jest najlepszym sposobem na zachowanie jak największej części intencji i użyteczności treści. Na szczęście zastąpienie zmniejszonego efektu może być również całkiem proste.

Przykład redukcji ruchu

Załóżmy na przykład, że oznaczyłem tę animację nagłówka jako potencjalnie wyzwalającą, gdy przechodzę przez moją witrynę. Ruch jest wystarczająco duży, aby stworzyć iluzję ruchu, więc prawdopodobnie będzie wyzwalał, a wiele kierunków ruchu również może być problematyczne. To zdecydowanie jeden, który umieściłbym na mojej liście efektów, które wymagają zmniejszonej wersji podczas przeglądania mojej witryny.

Wszystkie zdjęcia roślin mają te same style zastosowane do końcowego stanu ich animacji, aby domyślnie umieścić je w miejscu, w którym byłyby w przepływie dokumentu:

 .active .plant1, .active .plant2, .active .plant3 { transform: translateY(0); opacity:1; }

I każdy ma stan początkowy z pozycjonowaniem, aby przetłumaczyć go nieco powyżej lub poniżej jego wewnętrznej pozycji, aby rozpocząć. Wraz z przejściem zdefiniowanym w celu wykonania animacji:

 .plant1 { transform: translateY(-100%); transition: $dur $ease-both; } .plant2 { transform: translateY(120%); transition: $dur $dur/6 $ease-both; } .plant3 { transform: translateY(-100%); transition: $dur $dur/3 $ease-both; }

Animacja tekstu działa w ten sam sposób, ale z poziomym tłumaczeniem każdego słowa zamiast tłumaczenia w pionie.

Mogę zmienić animację na nieprzezroczystość przejścia zamiast zmieniać pozycję transformacji, gdy zażądano zmniejszenia ruchu, zmieniając stan początkowy animacji w następujący sposób:

 @media (prefers-reduced-motion: reduce) { .plant1, .plant2, .plant3 { transform: translateX(0); opacity:0; } }

Teraz, gdy funkcja preferuje media o zmniejszonym ruchu zwraca wartość true, stan początkowy każdej animacji ze zdjęciami roślin zostanie ustawiony tak, aby był już ustawiony w stanie końcowym z kryciem równym 0. Oznacza to, że może używać tych samych właściwości przejścia — to samo wygładzanie, czas trwania i przesunięcia — ale przezroczystość będzie teraz animowana zamiast pozycji poprzez transformację:

Zwróć uwagę, że nie musiałem wprowadzać żadnych zmian w czasie trwania, łagodzeniu lub opóźnieniu animacji, aby to zrobić. Zamiana właściwości animacji, ale nadal przy użyciu tych samych szczegółów animacji, wystarczyła, aby zredukować ruch. Ten konkretny przykład został napisany w CSS, ale zamiana właściwości animowania może być równie prosta w przypadku JavaScript lub przy użyciu bibliotek animacji.

Przykłady ograniczonego ruchu na wolności

Możesz zobaczyć to podejście w akcji na viljamisdesign.com, która jest jedną z pierwszych stron poza apple.com, w których zauważyłem pracę ze zredukowanym ruchem. Po przejściu do witryny z żądaniem ograniczonego ruchu animacja wirującego pola gwiezdnego jest zatrzymywana, a większe ruchy nagłówka są usuwane. Ale animacje, takie jak różne efekty najechania kursorem, nadal istnieją. Skutkuje to wrażeniami, które mają nienaruszone afordancje UX i szczegóły projektu, a jednocześnie są bezpieczniejsze dla osoby, która poprosiła o ograniczenie ruchu. (Oto wideo z Viljamisdesign.com zarówno z włączonym ograniczeniem ruchu, jak i bez niego w celach informacyjnych: https://vimeo.com/399979166/1bd41d1919)

Strona Airpods Pro reaguje również na zmniejszone preferencje ruchu, ale w zupełnie inny sposób ze względu na użyte treści i efekty. Prawie cały ruch na stronie może być potencjalnie wyzwalany, ponieważ ma wiele dużych ruchów powiększania i efektów w stylu paralaksy. Gdy żądane jest zredukowanie ruchu, wszystkie paralaksy i duże efekty ruchu są usuwane, ale robią coś więcej niż tylko wstrzymywanie lub usuwanie animacji. Wersja, którą widzisz z wybranym zredukowanym ruchem, została zaprojektowana z dbałością o zachowanie tej samej treści i znaczenia z pełnego doświadczenia ruchu. (Oto film przedstawiający witrynę Airpods Pro, zarówno ze zredukowanym ruchem, jak i bez niego, wybraną w celach informacyjnych.)

Dodaj niestandardowe przełączniki, aby uzyskać intensywne wrażenia ruchowe

Wspomniałem powyżej, że większość witryn „zadaniowych” prawdopodobnie ma tylko kilka animacji, które mogą się uruchamiać i wymagają zmniejszonej wersji. Ale nie są to jedyne rodzaje witryn internetowych w sieci. Projekty wymagające dużej ilości ruchu, takie jak witryny przeznaczone bardziej do opowiadania historii lub tworzenia doświadczeń, mogą skorzystać na nieco innym podejściu.

W przypadku takich projektów trudno byłoby sporządzić listę potencjalnie wyzwalających ruchów i zapewnić zredukowaną alternatywę dla każdego z nich, ponieważ prawie cały używany ruch może być potencjalnie wyzwalany. Ponadto ruch jest w dużej mierze częścią treści i jej znaczenia. Zaprojektowanie trybu ograniczonego ruchu dla tego typu witryn wymaga bardziej globalnego podejścia i większego wysiłku, aby zapewnić zachowanie znaczenia treści, nawet gdy ruch jest zmniejszony.

W przypadku tych wysoce animowanych witryn z doświadczeniem przydatne jest dodanie widocznego niestandardowego przełącznika ruchu. Umożliwi to osobom, które mogą jeszcze nie wiedzieć o zmniejszonych ustawieniach ruchu lub które w danym momencie odczuwają pewną wrażliwość na ruch, szybko dostosować wrażenia. Przełącznik ruchu umożliwia osobom wrażliwym na ruch możliwość uczestniczenia w Twoich treściach w sposób, który nie sprawi, że będą chorzy. To zdecydowanie lepsze dla wszystkich zaangażowanych niż konieczność całkowitego unikania Twojej witryny.

Kontekst jest kluczowym czynnikiem

Pamiętaj, że kontekst również odgrywa tu dużą rolę. Nikt nie chce być zaskoczony dużą ilością ruchu tam, gdzie się tego nie spodziewa. Jeśli odwiedzasz witrynę rozliczaną jako wysoce interaktywna narracja, będziesz mieć zupełnie inne oczekiwania niż w przypadku odwiedzania witryny internetowej banku. Obie te strony z pewnością mogłyby zawierać duże ilości animacji, ale byłaby to nieoczekiwana niespodzianka na stronie banku.

Tworzenie niestandardowego przełącznika ruchu

Pomysł niestandardowego przełącznika jest czymś, o czym wspomniałem w moim artykule z 2015 roku, ale dziś jest to znacznie bardziej opłacalna opcja. W dzisiejszej sieci możemy stworzyć taki przełącznik z większą łatwością, a nawet stworzyć inteligentniejszy przełącznik, niż mogliśmy to zrobić jeszcze kilka lat temu.

Marcy Sutton ma świetny przykład na to, jak nowoczesny niestandardowy przełącznik ruchu może działać w tym CodePen. (Ten przykład jest częścią jej kursu na temat tworzenia dostępnych aplikacji internetowych, co jest również bardzo warte sprawdzenia). Jej przykład używa przełącznika, aby usunąć cały ruch, ponieważ zawiera tylko jedną animację, ale to podejście może być wykorzystane do zapewnienia ograniczonego ruchu skutki w całej aplikacji lub witrynie również zgodnie z tą samą logiką.

Kluczową cechą tego podejścia jest to, jak dobrze Marcy łączy go z nowoczesną technologią sieciową, tj. preferuje ograniczony ruch i lokalną pamięć masową. Korzystając z tego podejścia, jeśli ktoś przyjdzie do Twojej witryny z żądaniem ograniczonego ruchu, automatycznie otrzyma wersję z ograniczonym ruchem bez konieczności ręcznego włączania przełącznika. A jeśli ktoś wywoła przełącznik w celu zmniejszenia ruchu, ta preferencja zostanie zapisana w pamięci lokalnej, dzięki czemu nie będzie musiał wielokrotnie dokonywać tego wyboru przy każdej wizycie.

Oficjalna strona Animal Crossing jest wspaniałym przykładem w świecie rzeczywistym niestandardowego przełącznika redukcji ruchu w połączeniu z funkcją mediów preferuje zredukowany ruch. To jeden z moich ulubionych przykładów radzenia sobie ze zredukowanym ruchem. Wybory projektowe, których dokonali, dotyczące tego, jak zmniejszyć potencjalny ruch wyzwalający, zachowując jednocześnie wierność ogólnemu odczuciu witryny i treści, są świetne. Więcej o tym, jak to zrobili, napisałem w tym poście na blogu. Istnieje wiele witryn, których odbiorcy mogliby skorzystać na podobnym podejściu.

Inne sposoby korzystania z przełączników ruchu

Jeśli masz już panel preferencji lub ustawień, dodanie przełącznika żądającego ograniczenia ruchu może być cenną rzeczą do dodania do tych ustawień, tak jak robi to Twitter na swojej stronie. W tym przypadku nie ma dużej ilości ruchu od razu podczas odwiedzania witryny i jest już panel ustawień, więc zaimplementowanie przełącznika jako części preferencji ustawień dobrze pasuje. Przełącznik Twittera uwzględnia również ustawienia na poziomie systemu operacyjnego poprzez preferowane zredukowane zapytanie o ruch i jest ustawiony na włączenie lub wyłączenie w zależności od tego, co użytkownik ustawił na poziomie systemu operacyjnego. Zaprojektowanie przełącznika ruchu w taki sposób, aby respektował ustawienia systemu operacyjnego, jest zdecydowanie mądrym podejściem do ich dobrego wdrożenia, bez względu na to, gdzie przełącznik może się pojawić.

Przełączniki kontekstowe to kolejne podejście, które można zastosować w celu zmniejszenia ruchu na określonych animowanych ilustracjach lub innych obszarach treści, które pojawiają się w witrynie. Artykuł „Ciemna strona siatki” robi to dobrze, dodając kontekstowe przyciski przełączania do każdej animowanej postaci, aby umożliwić czytelnikowi odtworzenie animacji, kiedy chce ją zobaczyć, ale nie ma jej nieskończonej pętli podczas czytania.

W tym samym duchu Dave Rupert podzielił się techniką łączenia preferowanych zmniejszonego ruchu z elementem obrazu, aby pokazywać elementy statyczne zamiast animowanych gifów, gdy zażądano zmniejszonego ruchu. Chris Coyier poszedł o krok dalej i zasugerował zaprezentowanie przełącznika odtwarzania dla tych animowanych gifów opartych na tym samym podejściu. Przydatnym podejściem może być również przykład deanimatora gifów Steve'a Faulknera.

Wszystkie te lub coś podobnego mogą być dobrymi opcjami łagodzenia wszelkich potencjalnie wyzwalających ruch w sieci. Przytaczam te przykłady z dwóch powodów. Pierwszym z nich jest pokazanie, że istnieje wiele sposobów podejścia zapewniających ograniczone wariacje ruchu i masz dużą elastyczność, aby znaleźć podejście, które najlepiej pasuje do twoich treści. Po drugie, w miarę upływu czasu i coraz większej liczby osób budujących witryny z ograniczonymi opcjami ruchu, społeczność udostępnia bardziej innowacyjne rozwiązania.

Istnieje wiele kreatywnych sposobów dodawania przełączników i ustawień w sposób zgodny z kontekstem projektu. Ciekawe jest to, że coraz więcej witryn internetowych zawiera panele ustawień lub opcje ustawiania preferencji, takie jak tryb ciemny. Naturalnym kolejnym krokiem może być uwzględnienie opcji ograniczenia ruchu.

Im częściej go używamy, tym lepiej dla wszystkich

Myślę, że dla nas, ludzi projektujących i budujących rzeczy dla sieci, ważne jest, abyśmy skorzystali z funkcji preferowanych mediów z ograniczonym ruchem, aby nasza praca była bardziej inkluzywna. Podejmując kroki w celu poszanowania preferencji ruchu, sprawiamy, że sieć jest bezpieczniejsza dla większej liczby osób, a to może być tylko dobrą rzeczą. Absolutnie możemy być ekspresywni i kreatywni w ruchu w sieci, będąc jednocześnie odpowiedzialnym i włączającym.

Ale poziom świadomości jest wciąż czymś, czego musimy być, no cóż, świadomi. Nie każdy, kto może potrzebować ograniczonego ruchu, jest świadomy tej opcji w ustawieniach systemu operacyjnego. Być może jeszcze mniej osób wie, że może to również wpływać na zawartość w ich przeglądarce, ponieważ obecnie tak niewiele witryn korzysta z tego. Im bardziej korzystamy z funkcji preferowanych mediów o ograniczonej ilości ruchu i zapewniamy jakość z obniżoną prędkością ruchu, tym bardziej istotna będzie funkcja dla tych, którzy jej potrzebują.