Animowana strona
internetowa

Animacje na stronie, które sprzedają, a nie tylko zdobią

    Ruch przyciąga wzrok szybciej niż kolor czy rozmiar. To mocne narzędzie, więc trzeba nim rozsądnie gospodarować. Jeśli na ekranie rusza się pięć rzeczy naraz, klient nie wie, na co patrzeć, i często nie zauważa najważniejszego: ceny albo przycisku kontaktu.

    Dlatego każdą animację zaczynam od pytania, do czego ma doprowadzić. Licznik zrealizowanych zleceń ma zbudować zaufanie. Delikatne pojawianie się sekcji ma ułatwić czytanie. Wyróżniony przycisk na końcu oferty ma przypomnieć o kontakcie. Efekt, który nie ma takiego zadania, zwykle wylatuje z projektu jeszcze przed wdrożeniem.

    ## Animacje pisane w kodzie zamiast gotowych efektów

    Kreatory stron dają zwykle zestaw gotowych efektów do wyklikania. To wygodne, ale każdy efekt ciągnie za sobą skrypty, które przeglądarka musi pobrać, nawet jeśli na stronie rusza się jeden przycisk. Ja animacje piszę ręcznie, w CSS albo krótkim JavaScripcie. Strona dostaje tylko ten ruch, który naprawdę wykorzystuje.

    Robię je razem z resztą [strony w czystym kodzie](/strony-internetowe/strona-w-kodzie/), więc projektuję je przy układzie sekcji, a nie dokładam na koniec. Efekt wymyślony przy projekcie zwykle lepiej pasuje do treści niż ozdobnik doklejony w ostatnim tygodniu przed startem. Przy okazji mogę uszanować systemowe ustawienie ograniczania ruchu, co w gotowych efektach bywa trudne.

    ## Ruch przy przewijaniu w większych serwisach

    W serwisach, w których ruch opowiada historię, czyli jak powstaje produkt albo co klient dostaje na kolejnych etapach współpracy, buduję animacje sterowane przewijaniem, krok po kroku. Każdy etap ma swój scenariusz na komputer i osobny, prostszy na telefon.

    Gdy taki serwis stoi na [własnym CMS z panelem do edycji](/strony-internetowe/wlasny-cms/), animacja jest częścią szablonu sekcji. Ty zmieniasz w panelu tekst i zdjęcie, a ruch zostaje nietknięty. Nie ma tu pośredników: scenariusz, kod i testy robię sam, umowę podpisujesz ze mną i to ja odpowiadam za termin.

    ## Animowana strona internetowa na telefonie

    Większość ludzi zobaczy Twoją stronę na komórce, często w autobusie albo w kolejce, przy słabym zasięgu. Animacja, która na komputerze wygląda płynnie, na starszym telefonie potrafi szarpać i opóźniać pojawienie się tekstu. Dlatego wersję mobilną animuję osobno i oszczędniej niż komputerową.

    Każdą animowaną stronę testuję na przeciętnym telefonie i przy spowolnionym internecie. Jeśli efekt psuje płynność albo zasłania treść, upraszczam go albo wyłączam na komórce. Jak ruch wpływa na wyniki szybkości w Google, opisuję przy [przyspieszeniu strony internetowej](/strony-internetowe/optymalizacja-szybkosci/).

    ## Interaktywna strona www: kalkulator zamiast formularza

    Interakcja to nie tylko ruch. Czasem największą robotę robi prosty kalkulator: klient wybiera metraż, rodzaj usługi i termin, a strona pokazuje orientacyjną cenę. Albo quiz, który po trzech pytaniach podpowiada pakiet. Ludzie chętniej klikają niż czytają długie cenniki z gwiazdkami.

    Na końcu takiego narzędzia stoi formularz, który przekazuje Ci wybrane opcje. Dostajesz zgłoszenie z konkretami, a nie tylko „proszę o kontakt”, więc pierwsza rozmowa jest krótsza i bardziej rzeczowa. Takie elementy dobrze sprawdzają się na [landing page](/strony-internetowe/landing-page/) pod kampanię reklamową.

    ## Typowe błędy, które widzę na animowanych stronach

Najczęstszy to animacja intro: pełnoekranowe logo, które obraca się przez trzy sekundy, zanim pokaże się cokolwiek. Klient z reklamy zapłacił za kliknięcie i chce zobaczyć ofertę, a nie pokaz. Drugi błąd to tekst, który wjeżdża litera po literze w nagłówku: wygląda efektownie w prezentacji, ale czytanie go po raz trzeci męczy.

Jest też ruch, który ukrywa treść. Oferta schowana w karcie, którą trzeba najechać kursorem, na telefonie nie istnieje, bo kursora tam nie ma. Dlatego projektując efekt, sprawdzam, czy tę samą informację da się odczytać palcem, bez najeżdżania i bez czekania.

Ile ruchu to za dużo

    Prosty test: wyobraź sobie stronę bez żadnej animacji i sprawdź, czy nadal mówi wszystko, co trzeba. Jeśli tak, ruch jest dodatkiem i możesz go dawkować. Jeśli bez animacji klient nie zrozumie oferty, coś poszło nie tak już na etapie projektu, a efekty tylko to maskują.

    W praktyce na jednej stronie stosuję jeden główny efekt i kilka drobnych. Resztę robią treść, zdjęcia i układ. Taka strona wygląda nowocześnie, a jednocześnie ładuje się szybko i nie męczy oczu po drugim ekranie.