Według mnie animacje poprawiają UX, a dokładniej dobrze zastosowane animacje powodują, że nawigacja na stronie internetowej oraz zależności pomiędzy różnymi elementami strony są lepiej rozumiane przez użytkowników. Dla przykładu, czy wysuwane animowane menu powinno zostać usunięte, aby strona była bardziej zgodna z WCAG? Uważam, że nie - ale wyjaśnijmy to od początku.
Animacje na stronie vs. WCAG – porady
Web Content Accessibility Guidelines (WCAG), którego celem jest poprawienie dostępności stron określa między innymi braki limitów czasowych oraz to aby mrugające, wyskakujące informacje nie znikały zbyt szybko. Nie ma wyraźnych zapisów na temat animacji, jednak znajdują się związane pośrednio różne inne zapisy, które wylistowałem poniżej. Konsekwencją tych zapisów jest prosta interpretacja: otóż wszelkie treści na stronie internetowej powinny być tak wyświetlane, aby użytkownik miał nielimitowaną ilość czasu na ich przeczytanie.
Zatem już na wstępie należy wziąć pod lupę wszelkie bannery z animującymi się obrazkami oraz paski z przesuwającymi się bloczkami, zwane często karuzelami. Dla bezpieczeństwa można w ogóle zrezygnować z takich elementów na stronie. Ale czy na pewno chcemy usuwać i aż tak upraszczać naszą piękną i nowoczesną stronę?! Osobiście, bardzo lubię lekkie animacje powodujące, że strona jest bardziej interaktywna i przyjemna dla oka. W związku z tym przygotowałem kilka porad jak bez utraty zgodności z WCAG stosować animowane elementy na stronie:
- Animowany Banner
- Do bannera dodaj ręczną nawigację w postaci strzałek „poprzedni” i „następny” slajd.
- Pomocne będą też kropki pod bannerem pokazujące ilość slajdów, aktywny slajd i możliwość przełączenia się pomiędzy slajdami.
- Dodaj w belce WCAG funkcje „zatrzymaj animacje”, która wyłączy lub spauzuje na stronie wszelkie ruchome elementy. Większość skryptów JS ma funkcje pauzowania w swoim API. Dzięki temu użytkownik za pomocą ręcznej nawigacji sam może przełączać slajdy.
- Dodaj dla slajdera funkcje „stop on mouse over”, która powoduje, że animacje automatycznie się pauzują, gdy kursor myszy znajduje się na bannerze. Dzięki temu czytelnik nie musi się martwić, że slajd ucieknie mu z przed oczu, gdy go czyta.
Inne wskazówki o banerach na stronie niebezpośrednio związane z WCAG:
- Ustawiaj czas animacji nie mniejszy niż 6 sekund pomiędzy slajdami.
- Nie umieszczaj na banerze dużej ilości tekstu – możesz umieścić dosłownie od 5 do 10 wyrazów pisanych dużą czcionka, jak nagłówek strony. Banner to w gruncie rzeczy miejsce tylko na slogan reklamowy.
- Jeżeli musisz na bannerze mieć dużą ilość treści lub nawet formularz do konwersji to zrezygnuj ze slajdów i animacji. Banner jedno slajdowy to również dobre rozwiązanie.
- Karuzela – czyli przesuwające się paski z contentem
- Podobnie jak w przypadku bannera pozwól na ręczne przewijanie karuzeli.
- Zadbaj o prawidłowe zachowanie karuzeli na ekranach z dotykowym ekranem.
- Dodaj funkcje wyłączającą lub pauzującą ruch na stronie w belce WCAG.
- Stosuj wolne animacje, aby użytkownik z wadą wzroku zorientował się, że w tym miejscu jest animacja. Użytkownik nie może odczuć, że zgubił się na stronie z powodu gwałtownie zmieniającej się treści – taka sytuacja może wprawić w osłupienie i niezadowolenie czytelnika.
- Jeśli to możliwe – nie stosuj karuzeli do wyświetlania ważnych informacji. Lepiej zastosuj kafelkowy układ RWD w kilku rzędach, zamiast animowanych karuzel.
- Rozwijane treści – dają bardzo ładne i przyjemne efekty. Uzyskiwane są za pomocą rozwijania częściowo ukrytych akapitów, ale niestety nieprawidłowa ich implementacja może być niezgodna z intencją standardów WCAG.
- Pamiętaj, aby dodatkowe treści na stronie pokazywały się dopiero po kliknięciu, a nie po najechaniu myszką. Wolno przejeżdżający kursor nie zawsze kierowany jest tam gdzie Ty tego chcesz, a zasłaniająca lub przesuwająca się treść bez zgody użytkownika może go rozgniewać i utrudnić korzystanie ze strony.
- Podobnie wygląda sytuacja z chowaniem się treści już raz wysuniętej – nie rób tego automatycznie, ani po żadnym czasie, ani po zjechaniu myszką. Zastosuj na przykład krzyżyk po kliknięciu, którego treść się chowa na wyraźne żądanie użytkownika.
- Filmy i animowane Gify
- Nie włączaj ich automatycznie po wejściu na stronę. Pozostaw tą kwestię do decyzji samego użytkownika. Niech filmy i animacje włączają się na wyraźne żądanie (kliknięcie play) czytelnika Twojej strony internetowej.
- Tło w formie paralaxy
- Jeżeli na stronie masz funkcje szablonu o wysokim kontraście to rzecz jasna, że takie tło trzeba całkowicie wyłączyć w szablonie o wysokim kontraście.
- Gdy animacje są wyłączone przez użytkownika to powinieneś zmienić sposób powiązania tła do strony w blokach z paralaxą na taki aby skrolował się zgodnie z intencją użytkownika (background-attachment: scroll;)
- Pomocny link: https://www.w3schools.com/csSref/pr_background-attachment.asp
Animacje na stronie, gdzie umieszczać?
Jednak to nie wszystko w tym temacie. Tworząc strony internetowe lubię dodawać do nich delikatne i subtelne animacje podkreślające interaktywność strony WWW. Polepszają one odbiór strony (UX) oraz pomagają w lepszym i bardziej intuicyjnym zrozumieniu działania witryny. Animacje te mogą być zgodne z WCAG, a nawet mogą poprawiać zgodność strony z tym standardem – pod warunkiem dobrej i nienachlanej implementacji. Oto miejsca i animacje na stronie, gdzie delikatny ruch zdecydowanie polepszy jej odbiór:
- Efekt Hover po najechaniu myszką na link, element menu, button
- Animacja powinna być rozumiana jako podświetlenie elementu aktywnego, na którym jest obecnie kursor.
- W czasie animacji efektu Hover nie zmieniaj wielkości elementów, kroju czcionki, ani jego układu względem innych elementów strony. Strona powinna być statyczna, a zmianie ma ulegać wyłącznie kolor.
- Zalecam użyć funkcji transition (animacja w CSS), która powoduje wydłużenie animacji w czasie, na przykład od 300-500 mili sekund. Aby zniwelować efekt gwałtownego pojawiania się czy mrugnięcia. Ostro pojawiające się i znikające efekty Hover i fokus nie są przyjemne dla oka. Dzięki krótkiej animacji można zmiękczyć dla oka efekt podświetlania elementu.
- Efekt fokus dla aktywnych linków w menu, w treści i buttonów
- Uważam, że powinien on działać dokładnie tak samo jak „Hover”, gdy użytkownik nawiguje po stronie internetowej klawiaturą (najczęściej klawiszem TAB).
- Standard WCAG zaleca, aby wyraźnie było wskazane, gdzie aktualnie jest kursor użytkownika - mówi o tym punkt 2.1.3 standardu WCAG 2.1.
- Wysuwane menu - znany na całym świecie sposób na rozbudowanie menu, które po najechaniu myszką wyświetla dodatkowe (ukryte wcześniej) linki w zaznaczonej kategorii lub sekcji.
- Pojawianie się takiego podmenu w mgnieniu oka jest zbyt agresywne i nieprzyjazne.
- Zalecam zastosować animację krótką, która trwa np.: pół sekundy (500 milisekund), zmiękczy to efekt pojawiania się nowego elementu.
- Oprócz pojawiania się menu warto zastosować efekty rozwijania menu od góry w dół. Da to użytkownikowi do zrozumienia, że wysunięty element był schowany w podświetlonym linku i jest z nim związany semantycznie.
- Problem stanowi jednak to czy takie menu chować automatycznie, kiedy kursor z niego zjedzie. Najlepszym rozwiązaniem jest pozostawiać menu otwarte z krzyżykiem w rogu, który pozwoli zamknąć wysunięte menu na wyraźne żądanie użytkownika. Taką funkcjonalność posiadają duże rozbudowane menu, często znane pod nazwą „mega menu”. Jednak dla wygody programisty najczęściej stosuje się menu automatycznie chowane po zjechaniu kursora.
- Do zamykania menu można też zastosować efekt „togle”, który powoduje, że ponowne klikniecie tego samego elementu zmienia stan menu z otwartego na zamknięte i w druga stronę.
- Przy zamykaniu menu można też zastosować krótką animacje zwijania menu ku górze.
Na koniec jeszcze inne moje przemyślenia na temat menu.
Nie należy zapominać o tym, że menu na stronie może być przedstawione na 2 dodatkowe sposoby:
- Menu mobilne – które dla zainteresowanych może być wyświetlane na żądanie, nawet w wersji desktopowej layoutu przez znaną z telefonów komórkowych ikonkę „burgera” w jednym z rogów strony.
- Indeks strony internetowej, który też jest swego rodzaju rozbudowanym menu strony.
W obu wersjach warto zrezygnować z menu wysuwanego i wszelkich animacji, a pod elementy zagnieżdżone wyświetlać w formie całkowicie rozwiniętej zagnieżdżonej listy (ul, li) – często też kojarzonej z układem w stylu „drzewka”.
Czego nie należy animować na stronie
Pod żadnym pozorem nie próbuj animować tekstów na stronie internetowej. Ruchome, pływające teksty, automatycznie przesuwający się scrool, przesuwające się paski informacyjne są całkowicie niezgodne z WCAG. Raz wyświetlona strona bez ingerencji użytkownika powinna być przez cały czas czytania statyczna i nieruchoma.
Zapisy standardu WCAG 2.1 związane z animacjami
Poniżej wylistowałem zapisy WCAG 2.1, które są odpowiedzialne za wyżej poruszany temat:
1.4.13 - [poziom AA] – Zawartość strony która jest pokazywana "on hover" lub „on fokus”, czyli aktualnie wskazana przez kursor musi:
- dać się wyłączyć na żądanie użytkownika (ponownie zniknąć na przykład po zjechaniu kursora),
- musi być trwała, czyli dopóki użytkownik nie chce to nie powinna samoczynnie znikać (brak limitów czasowych),
- może powodować automatyczne przenoszenie aktywnego kursora do nowej aktywnej treści bez znikania wyskakującej treści.
2.2. Wystarczająca ilość czasu
2.2.1 – [poziom A] – Możliwość dopasowania czasu wszelkich animacji na stronie.
2.2.2 – [poziom A] – Możliwość zatrzymania i ponownego uruchomienia animacji przez użytkownika
2.2.3 – [poziom AAA] – Całkowity brak jakichkolwiek limitów czasowych i brak animacji na stronie
2.3.1 – [poziom A] - Nie należy tworzyć treści, które migają częściej niż trzy razy na sekundę oraz nie zawierają zadnego błysku
2.3.2 – [poziom AAA] – Strona nie może zawierać niczego co mruga szybciej niż 3 razy na sekundę.
2.3.3 – [poziom AAA] – Należy wyłączyć wszelkie animacje wywołujące interakcje użytkownika, chyba że animacja ma istotne znaczenie dla funkcjonalności lub przekazywania informacji.
CEO w WEBimpuls.pl od 2010 roku, specjalista ds. marketingu w sieci oraz aplikacji WEB. Wspiera firmy w rozwoju w internecie.
Autor Artykułu:
Konrad Ogar
Napisz do autora!