Ruch powinien mieć zadanie
Animacja może pokazać, że przycisk został naciśnięty, formularz wysyła dane albo menu właśnie się otwiera. W takich sytuacjach krótki efekt pomaga zrozumieć zmianę na stronie. Ruch bywa też elementem opowieści wizualnej, na przykład w prezentacji projektu. Nie oznacza to jednak, że każdy nagłówek, zdjęcie i kafelek potrzebują osobnego wejścia na ekran.
Przy planowaniu efektu zadaj sobie pytanie: co użytkownik straci, jeśli animacja zniknie? Jeśli odpowiedź brzmi „nic”, prawdopodobnie jest to ozdoba. Ozdoby nie muszą być zakazane, lecz warto traktować je oszczędnie. Na stronie firmowej najważniejsze może być szybkie znalezienie oferty i kontaktu, na blogu spokojne czytanie, a w katalogu porównanie pozycji. Efekt, który odciąga uwagę od tych zadań, nie pomaga stronie.
Kiedy animacje utrudniają korzystanie ze strony
Najbardziej męczący bywa ruch, który uruchamia się sam, powtarza bez końca lub obejmuje dużą część ekranu. Przesuwające się tła, automatyczne karuzele i nagłe powiększenia mogą utrudniać czytanie. U części osób intensywny ruch może wywoływać dyskomfort. Nie trzeba przewidywać reakcji każdego odbiorcy, aby przyjąć prostą zasadę: użytkownik powinien móc skupić się na treści bez walki z efektami.
Problemem może być również animacja opóźniająca dostęp do informacji. Jeśli akapit staje się widoczny dopiero po przewinięciu i odczekaniu, czytelnik traci kontrolę nad tempem lektury. Podobnie działa przycisk, który przemieszcza się w chwili kliknięcia. Szczególną ostrożność zachowaj przy miganiu oraz gwałtownych zmianach obrazu. Jeśli efekt nie jest niezbędny, spokojniejsza wersja zwykle będzie łatwiejsza w odbiorze.
Daj użytkownikowi wpływ na ruch
Jeżeli na stronie działa automatycznie odtwarzana animacja lub pokaz slajdów, rozważ widoczne sterowanie pozwalające zatrzymać i ponownie uruchomić ruch. Przycisk powinien być zrozumiale nazwany, dostępny z klawiatury i łatwy do znalezienia. Nie zakładaj, że samo zatrzymanie po najechaniu kursorem wystarczy: osoba korzystająca z ekranu dotykowego albo klawiatury może nie mieć takiej możliwości.
Warto też uwzględnić ustawienie ograniczenia ruchu dostępne w wielu systemach. Strona może odczytać tę preferencję i zamiast przesuwania, przybliżania czy efektów paralaksy zastosować wersję statyczną albo znacznie spokojniejszą. To zadanie dla osoby wdrażającej witrynę lub konfigurującej jej szablon. Jeśli używasz gotowego motywu, sprawdź w jego ustawieniach, czy animacje można wyłączyć, a potem przetestuj rezultat. Sama nazwa opcji nie gwarantuje, że obejmuje wszystkie efekty.
Ograniczenie ruchu nie powinno usuwać potrzebnych informacji. Po wyłączeniu animacji menu nadal ma się otwierać, komunikat o błędzie formularza ma pozostać widoczny, a zmiana stanu przycisku powinna być czytelna. Zamiast polegać wyłącznie na efekcie wizualnym, dodaj jasny tekst lub trwałą zmianę wyglądu elementu.
Prosty przegląd przed publikacją
Przejdź przez stronę tak, jak zrobi to odwiedzający: otwórz menu, przewiń długi artykuł, użyj wyszukiwarki katalogu i wyślij próbny formularz. Zwróć uwagę, czy coś rusza się bez Twojej decyzji, czy tekst pozostaje czytelny podczas przewijania i czy można zatrzymać powtarzające się efekty. Sprawdź również węższy ekran telefonu, gdzie nawet niewielka animacja może zająć znaczną część widoku.
Następnie włącz w systemie ograniczenie ruchu i wykonaj te same czynności. Porównaj nie tylko wygląd, ale też dostęp do treści i działanie przycisków. Na koniec przejdź stronę klawiaturą: czy sterowanie pokazem da się osiągnąć i obsłużyć, a informacja zwrotna nie znika zbyt szybko? Taki przegląd warto powtórzyć po zmianie motywu, instalacji wtyczki lub dodaniu nowego bloku treści, bo każdy z tych elementów może wprowadzić własne animacje.
Spokojny projekt to nadal ciekawy projekt
Ograniczenie animacji nie oznacza rezygnacji z atrakcyjnej strony. Czytelna hierarchia nagłówków, dobre odstępy, wyraźne przyciski i trafnie dobrane obrazy często lepiej prowadzą użytkownika niż ciągły ruch. Jeśli chcesz dodać efekt, zacznij od jednego konkretnego zastosowania i sprawdź, czy pomaga wykonać zadanie. Pozostaw też drogę do korzystania ze strony bez tego efektu. Dzięki temu wygląd może wspierać treść, zamiast z nią konkurować.
