prefers-reduced-motion, redukcja ruchu na stronie
Tworząc nowoczesne strony internetowe chcemy, aby była ona przyjazna użytkownikowi. Chcemy także, aby treść na stronie była przedstawiona w atrakcyjny sposób, także w formie animacji. Nie można jednak przesadzić, bo wtedy uwaga użytkownika zostanie rozproszona i jest mniejsza szansa, że dotrze do informacji, której szukał. Dzisiejszy wpis poświęcę zagadnieniu, które pomoże w zmniejszeniu ruchu na stronie (redukcja ruchu), gdy użytkownik sobie tego życzy.
ŁukaszPodziel się artykułem:
Teoria
Możliwość kontrolowania animacji na stronie internetowej powiązana jest z funkcjami takimi jak powiększanie treści, włączanie wyświetlania o wysokim kontraście, ładowanie niestandardowych arkuszy stylów. Użytkownik ma wpływ na tę właściwość z poziomu własnej przeglądarki (np. Google Chrome) lub ustawień w systemie operacyjnym (np. macOS).
Jak tego użyć?
Redukcja ruchu na stronie odbywa się w bardzo prosty sposób. W CSS musimy napisać dodatkowy kod zawierający media-query, który obsłuży ograniczenie ruchu przez użytkownika strony.
Przykładem niech będzie przycisk, który w momencie najechania (:hover) nieco się zmieni:
dark
Powyższy przykład przedstawia przycisk, który po najechaniu nieco się podniesie i otrzyma cień. Domyślnie odbędzie się to płynnie, natomiast gdy użytkownik będzie miał włączoną redukcję ruchu nastąpi to „skokowo”.
To co się wydarzy po redukcji ruchu jesteśmy w stanie kontrolować. Możemy całkowicie wyłączyć płynność ruchu czy animację lub je po prostu ograniczyć. Zależy to już od potrzeb oraz od założeń UX.
Ciekawym przykładem również może być całkowita zmiana elementu w zależności od ustawień.
Podsumowanie
Powyższa teoria i przykłady pokazują, że jest można zapewnić użytkownikowi wybór czy chce ograniczyć ruch na stronie. Ma to szczególne zastosowanie w przypadku, gdy nasi użytkownicy nie są grupą docelową, w której liczy się ruch na stronie. Zatem warto korzystać z tej właściwości i umilić odwiedzającemu korzystanie ze strony, którą tworzymy.
