Animacje na stronie – kiedy pomagają, a kiedy przeszkadzają

Dobra animacja przypomina skinienie głową recepcjonistki: jest krótka, potwierdza, że coś zostało zauważone, i nie odciąga uwagi od rozmowy. Zła przypomina recepcjonistkę, która przy każdym pytaniu wstaje, obchodzi ladę dookoła i dopiero wtedy odpowiada. Efektowne, ale męczące.

Ruch na stronie zawsze przyciąga wzrok. To jego siła i jednocześnie największe ryzyko. Animacja, która przyciąga uwagę do niewłaściwej rzeczy albo w niewłaściwym momencie, przeszkadza w tym, po co klient przyszedł: w znalezieniu informacji i kontakcie z Tobą.

Animacje, które pomagają

Najbardziej użyteczne animacje są tak subtelne, że wiele osób ich świadomie nie zauważa. Ich zadaniem jest informować, a nie zachwycać:

• Potwierdzenie działania. Przycisk lekko zmienia kolor po najechaniu i po kliknięciu, a po wysłaniu formularza pojawia się komunikat „Wysyłanie…”, zanim pojawi się potwierdzenie.
• Płynne rozwinięcie. Odpowiedź w sekcji pytań i odpowiedzi rozwija się w ułamku sekundy, dzięki czemu widać, skąd się wzięła.
• Otwarcie menu na telefonie. Menu wysuwa się z boku lub z góry, więc użytkownik rozumie, gdzie się podziało i jak je zamknąć.
• Wskazanie błędu. Pole formularza z błędem zostaje wyraźnie oznaczone, a strona przewija się do niego.
• Przejście do sekcji. Po kliknięciu w menu strony one-page treść płynnie przewija się do wybranego miejsca, zamiast nagle „przeskoczyć”.

Wszystkie te przykłady mają wspólny mianownik: odpowiadają na działanie użytkownika i pomagają mu zrozumieć, co się stało.

Animacje, które przeszkadzają

• Teksty i zdjęcia wjeżdżające przy przewijaniu. Każda sekcja pojawia się z opóźnieniem, a czytelnik musi czekać, aż treść „dojedzie” na miejsce. Przy szybkim przewijaniu część treści przez chwilę jest pusta.
• Automatyczne karuzele. Slajdy zmieniają się, zanim ktoś zdąży przeczytać hasło, a przycisk na slajdzie znika w chwili, gdy klient chce w niego kliknąć.
• Ekrany ładowania z logo. Kilka sekund animowanego logo przed pokazaniem strony to kilka sekund, w których klient może zrezygnować.
• Animowane liczniki. Cyfry „biegnące” do wartości typu „15 lat doświadczenia” spowalniają odczytanie informacji, którą można podać od razu.
• Wideo w tle i efekt paralaksy. Tło przesuwające się w innym tempie niż treść potrafi wywołać dyskomfort, a na telefonie często działa nierówno.
• Migające i pulsujące elementy. Pulsujący przycisk „Zadzwoń teraz” bardziej irytuje, niż zachęca.

Ruch a dostępność

Dla części osób ruch na ekranie to coś więcej niż kwestia gustu. Duże, płynne animacje i paralaksa mogą wywoływać zawroty głowy lub mdłości, a migające elementy – utrudniać skupienie. Dlatego systemy operacyjne telefonów i komputerów mają w ustawieniach dostępności opcję ograniczenia ruchu. Dobrze zaprojektowana strona tę opcję respektuje: przy włączonym ograniczeniu animacje są wyłączane albo zastępowane spokojnym pojawieniem się treści.

Wytyczne dostępności WCAG 2.2 zawierają kilka wymagań dotyczących ruchu:

• treści, które poruszają się, przewijają lub migają, startują automatycznie i trwają dłużej niż pięć sekund, muszą dać się zatrzymać, wstrzymać lub ukryć (poziom A),
• nic na stronie nie może migać częściej niż trzy razy na sekundę, z wąskimi wyjątkami (poziom A),
• na najwyższym poziomie AAA animacje uruchamiane interakcją, np. przewijaniem, powinny dać się wyłączyć, chyba że są niezbędne.

Automatyczna karuzela bez przycisku pauzy narusza więc nie tylko dobre praktyki, ale i podstawowy poziom wytycznych.

Animacje a szybkość strony

Każdy efekt to kod, który przeglądarka musi pobrać i wykonać. Rozbudowane biblioteki animacji, wideo w tle czy duże pliki z animowaną grafiką potrafią wyraźnie spowolnić stronę, zwłaszcza na starszych telefonach i słabym zasięgu. Dodatkowo animacje „wjeżdżające” często ukrywają treść do czasu, aż wykona się skrypt, więc pierwszy ekran wydaje się pusty dłużej, niż musi.

Szybkość wpływa na wygodę klientów i jest jednym z sygnałów branych pod uwagę przez Google. Więcej na ten temat piszemy we wpisie o szybkości strony.

Przykład: sekcja usług z animacją i bez

Weźmy sekcję z czterema usługami gabinetu fizjoterapii. W wersji „efektownej” każda karta wjeżdża z innej strony ekranu, z opóźnieniem względem poprzedniej, a ikony obracają się przy najechaniu kursorem. Klient, który szybko przewija stronę na telefonie, przez moment widzi pustą przestrzeń, a potem ruch w czterech miejscach naraz.

W wersji spokojnej wszystkie cztery usługi są widoczne od razu. Ruch pojawia się dopiero wtedy, gdy klient najedzie na kartę lub jej dotknie: tło lekko się przyciemnia, a strzałka przy „Czytaj więcej” przesuwa się o kilka pikseli. Informacja jest dostępna natychmiast, a animacja potwierdza tylko, że element da się kliknąć.

Zasady dobrej animacji

1. Krótko. Animacje interfejsu zwykle trwają ułamek sekundy, mniej więcej 0,2–0,3 sekundy. Dłuższe zaczynają być odczuwalne jako czekanie.
2. Jeden cel. Każda animacja powinna coś komunikować: zmianę stanu, kierunek, potwierdzenie. Jeśli nie umiesz powiedzieć, co komunikuje, prawdopodobnie jest zbędna.
3. Treść bez czekania. Tekst i przyciski muszą być dostępne natychmiast, a animacja może je co najwyżej delikatnie uzupełnić.
4. Spójność. Te same elementy zachowują się tak samo w całej stronie – wszystkie rozwijane sekcje otwierają się w ten sam sposób.
5. Szacunek dla ustawień. Strona respektuje systemową opcję ograniczenia ruchu.

Charakter branży ma znaczenie

Strona gabinetu psychoterapii, hospicjum domowego czy kancelarii zajmującej się sprawami rodzinnymi powinna być spokojna. Tam każdy zbędny ruch kłóci się z tym, czego szuka odwiedzający. Fotograf może pozwolić sobie na płynne przejścia w galerii, bo wspierają oglądanie zdjęć. Firma remontowa może skorzystać z interaktywnego suwaka „przed i po”, który klient sam przesuwa – to animacja pod kontrolą użytkownika, a nie narzucona z góry.

Zanim dodasz jakikolwiek efekt na pierwszym ekranie strony, zadaj sobie trzy pytania: co ta animacja mówi klientowi, czy bez niej czegoś by nie zrozumiał i czy nie opóźnia dostępu do najważniejszej informacji. Jeśli na żadne z nich nie masz przekonującej odpowiedzi, strona będzie lepsza bez niej.