Animacje na stronie internetowej — kiedy i w jaki sposób je stosować?

Żyjemy w czasach, w których Internet przepełniony jest mnóstwem witryn, a każda z nich walczy o uwagę użytkowników i jak najwyższe pozycje w wynikach wyszukiwania. Czas, kiedy sama treść w połączeniu z obrazem wystarczyły, aby utrzymać zainteresowanie internautów, powoli mija, a w ich miejscu pojawiają się animacje na stronie.

Po co stosować animacje na stronie?

Wraz z rozwojem Internetu użytkownicy stają się coraz bardziej wymagający, a wśród dużej konkurencji firmom coraz trudniej jest zdobyć ich atencje, skłonić do pozostania dłużej na witrynie i wykonania określonych czynności. Jednym z dobrych sposobów na zdobycie potencjalnego klienta jest atrakcyjna szata graficzna w tym ciekawe animacje na stronie. Witryna z animacją jest dynamiczna i intrygująca, wzbudza ciekawość, a przy tym stanowi pewne urozmaicenie przekazu i poprawia jego czytelności. Często też obrazuje funkcjonowanie firmy, objaśnia dane na wykresach czy tłumaczy, jak korzystać z oprogramowania lub aplikacji, dzięki czemu pozwala użytkownikom zrozumieć skomplikowane procesy w o wiele prostszy i bardziej przystępny sposób niż sam tekst lub obrazy statyczne. Dodatkowo taka forma prezentacji sprawia, że istnieje duża szansa, iż użytkownik po obejrzeniu animacji chętniej wykona określone działanie, które stanowi cel witryny, a zatem stosowanie animacji zwiększa konwersję na stronie.

Czy szukasz wykonawcy projektów IT ?

Sprawdź case studies

Kiedy stosować animacje na stronie, a kiedy z nich zrezygnować?

Choć animacje na stronie pozwalają przykuć uwagę użytkowników, wyróżnić się na tle konkurencji oraz zwiększyć konwersję, nie na każdej witrynie będą one uzasadnione. Warto je stosować jedynie wtedy, gdy służą realizacji określonego celu, nie zaś stanowią sztukę samą w sobie. Warto korzystać z nich z umiarem, aby nie przeładować nimi witryny, ponieważ animacje na stronie mogą skutecznie spowolnić jej ładowanie się, a to oznacza wzrost współczynnika odrzuceń oraz niższe pozycje w wynikach wyszukiwania. Każda animacja powinna zachować odpowiedni format pliku, który został  skonwertowany do jak najmniejszego rozmiaru, aby niepotrzebnie nie zużywać zasobów serwera. Dodatkowo animacja powinna dawać użytkownikowi możliwość jej wstrzymania lub ukrycia – nie tylko będą mogli sami decydować, czy chcą się z nią zapoznać, ale i w przypadku szybko zmieniających się, migocących i jaskrawych obrazów witryna będzie przyjazna także dla osób z epilepsją i zaburzeniami kognitywnymi.  

Najczęściej spotykane animacje na stronie to:

• animowane mikro interakcje – tego rodzaju animacje na stronie polegają na tym, że niewielkie elementy strony w momencie ich pojawienia się płynnie wjeżdżają, wibrują czy przenikają się w trakcie scrollowania; animacja może zostać wywołana także podczas kliknięcia w dany element lub po najechaniu na niego kursorem.
• hero image – animacja znajdująca się tuż pod menu głównym jako pojedynczy baner, z którym użytkownicy mogą wejść w interakcję np. klikając w przycisk;
• slider – to inaczej karuzela zdjęć lub grafik, które przewijają się co kilka sekund, prezentując najważniejsze treści lub najnowszą ofertę witryny;
• film wideo – pozwala w kilka minut zapoznać się użytkownikowi ze skomplikowanym procesem, obsługą oprogramowania czy rozbudowaną ofertą;
• animowany baner – czyli animacje na stronie w formie reklamy, które pojawiają się na witrynach internetowych i mają na celu skłonić użytkownika do kliknięcia i zapoznania się z tym, co oferuje reklama; animowany baner często występuje na profilach social media, zachęcając do przejścia na witrynę docelową.