Animacje na stronach internetowych

Animacje na stronach www – Ile animacji na stronie internetowej?

Animacje na stronach www mimo swojej potencjalnej atrakcyjności wizualnej wymagają wyjątkowo dokładnej analizy przed podjęciem decyzji o ich wdrożeniu. Odpowiednio zaplanowane mogą znacznie poprawić poziom konwersji, wyeksponować ofertę lub uatrakcyjnić stronę wizualnie. Jeżeli natomiast zaprojektujemy animacje w miejscach i formie, które nie będą miały swojego wyraźnego celu, możemy odwrócić uwagę użytkownika od najważniejszych treści.

Zasady użyteczności stron internetowych (web usability) mówią między innymi o tym, aby na pierwszym miejscu podczas interakcji stawiać doświadczenia użytkownika. Powinien on w możliwie najkrótszy sposób dotrzeć do miejsca, na którym mu zależy i wykonać pożądaną przez nas akcje. Każdy element, który w pewien sposób będzie wydłużał jego drogę lub utrudni osiągnięcie celu może znacznie obniżać konwersję i szansę na dotarcie do jego świadomości z konkretną treścią.

Zastosowanie animacji na stronach internetowych – Najczęściej wykorzystywane rodzaje animacji

Choć animacji, jakie stworzyć można z wykwalifikowanym projektantem jest wiele, istnieje kilka najpopularniejszych przy budowie stron internetowych. Zyskały popularność dzięki skuteczności i estetyce, która jest niezmiernie ważna szczególnie przy nowoczesnych serwisach.

Slider – Najczęściej występuje na stronie głównej w sklepach internetowych i na stronach wizerunkowych. Pozwala on na widoczne wyeksponowanie najnowszej kampanii promocyjnej, konkretnych produktów, na których sprzedaży szczególnie nam zależy lub uwydatnienie konkretnej części oferty. Slider to z technicznego punktu widzenia zbiór materiałów graficznych, które naprzemiennie zmieniają się wykorzystując wybrany przez projektanta i developera mechanizm.

Hero image – Animacja widoczna zarówno na stronach internetowych firm z sektora małych i średnich przedsiębiorstw, jak serwisach największych korporacji. To pojedynczy baner umieszczony najczęściej w górnej części strony. Prezentowana w jednym momencie wraz z inną treścią np. tekstem, oferuje użytkownikowi możliwość interakcji np. poprzez guzik (Call to Action). Najczęściej w formie wideo lub animacji 3D.

Animowany baner – najczęściej taka forma animacji kojarzona jest z kreacjami reklamowymi jakie możemy spotkać w reklamach Google lub w sieciach afiliacyjnych. Jednak bardzo często banery animowane stosujemy na stronach internetowych, aby zwrócić uwagę użytkownika na przekaz i zachęcić go do kliknięcia i przejścia na podstronę serwisu. Często taka forma animacji stosowana jest także na profilach social media.

Film animowany – Jeżeli oferta firmy jest skomplikowana, a zapoznanie się z nią mogłoby zająć użytkownikowi zbyt dużo czasu, film animowany jest doskonałym rozwiązaniem. Najczęściej wykorzystywane właśnie w ten sposób, umożliwiają potencjalnemu konsumentowi zapoznanie się z całym procesem w kilka minut, gdy w innym przypadku mogłoby mu to zająć nawet do kilku godzin. Można wymienić wiele rodzajów filmów animowanych zaczynając od rysunkowych aż na zaawansowanych animacjach 3D kończąc.

Animowane mikro interakcje – Ruch wywoływany najczęściej przez samego użytkownika, podczas kliknięć, najechaniu myszką na jakiś element strony lub po prostu sytuacja kiedy elementy strony pojawiają się lub przechodzą jeden w drugi w atrakcyjny wizualnie sposób: wjeżdżają, przenikają się, pojawiają się płynnie na ekranie komputera.

Planowanie animacji w produktach interaktywnych – Na co zwrócić uwagę?

Nie ulega wątpliwościom fakt, że planowanie animacji oraz interakcji we wszelkich produktach interaktywnych wymaga ręki doświadczonego projektanta. Tylko w ten sposób możemy być pewni, że zastosowanie zaawansowanych animacji na stronie internetowej przyczyni się do osiągnięcia przez firmę jeszcze większych wyników finansowych i podniesienia wskaźnika konwersji. Istnieje jednak co najmniej kilka podstawowych zasad, na które należy zwrócić uwagę przy planowaniu animacji.

Umiar – Pamiętajmy, że nawet w sytuacji, gdy użytkownik mógłby dobrze bawić się korzystając z zaprojektowanej animacji, w nadmiarze ona może przyczynić się do wydłużenia czasu ładowania strony. To kolejno powoduje, że potencjalny konsument może stracić możliwość wykorzystania witryny w przyjazny sposób przy mniej zaawansowanym technicznie sprzęcie lub wolniejszej przeglądarce. Wyjściem z podobnych sytuacji jest takie rozplanowanie animacji, aby większość użytkowników z grupy docelowej mogła swobodnie korzystać z rozwiązań nawet z wolniejszym łączem internetowym.

Możliwość wstrzymania lub ukrycia animacji – Obowiązkowy element przy planowaniu witryny internetowej. Szczególnie ważny w sytuacjach, gdy nasza animacja zawiera intensywnie migoczące materiały graficzne. Powinniśmy mieć na uwadze zarówno odczucia większości użytkowników, jak tych z epilepsją.

Najważniejsze są treści – Oferta, cennik, posty na blogu lub opis usług to zazwyczaj najważniejsze elementy, do których użytkownik powinien dotrzeć bez żadnego problemu. Projektując jakiegokolwiek rodzaju animacje i interakcje na pierwszym miejscu powinniśmy postawić cel wyeksponowania konkretnych treści, na których najbardziej nam zależy. Tylko zapoznanie się z nimi pozwoli potencjalnemu klientowi rozważyć ofertę i zdecydować się, jeżeli będzie dla niego wystarczająco atrakcyjna.

Programy do tworzenia animacji – Jak tworzyć niezwykłe wizualizacje?

Istnieje wiele programów do tworzenia animacji, których używają doświadczeni projektanci. Zazwyczaj dzieli się je na płatne i bezpłatne. Bezpłatnie można wykorzystywać takie oprogramowania jak Synfig Studio, Blender, Google Web Designer i Vectorian Giotto. Zdecydowanie większą popularnością wśród profesjonalistów cieszą się programy płatne, do których zaliczamy Adobe Animate, Adobe After Effects, 3ds Max i Autodesk Softimage.

Ciekawe efekty animowane można uzyskać, budując strony za pomocą platform no-code takich jak Webflow. Na stronie Webflow, warto sprawdzić jakie możliwości daje ta platforma z wykorzystaniem jej natywnych narzędzi do animacji.

Jeśli chodzi o animacje, Webflow posiada dedykowany panel do zarządzania animacjami, który umożliwia dodawanie, edytowanie i sterowanie animacjami elementów na stronie. Możemy tworzyć różne efekty, takie jak przesuwanie, pojawianie się, znikanie, obracanie itp. Dodatkowo, Webflow obsługuje interakcje na bazie stanów, co pozwala na tworzenie bardziej zaawansowanych animacji, reagujących na interakcje użytkownika, jak np. po najechaniu myszką czy przewinięciu strony.

Dla osób, które nie są programistami, ale chcą uzyskać zaawansowane efekty animacyjne na swoich stronach internetowych, Webflow może być świetnym narzędziem do projektowania z interakcjami.

Warto w tym miejscu wspomnieć o animacjach tworzonych za pomocą języka programowania do tworzenia stron internetowych HTML5. HTML5 dał możliwość twórcom, wykorzystania kodu w tworzeniu animowanych elementów stron i aplikacji www. Za pomocą kodu możemy animować zdjęcia, teksty, obiekty wektorowe czy tworzyć wspomniane wyżej mikro interakcje. Zaletą wykorzystania HTML5 jest mniejsze obciążenie procesora oraz stosunkowo niska waga takiej animacji. HTML5 wykorzystywany do tworzenia banerów reklamowych wspierany jest przez Google w swoim systemie reklamowym Google Adwords.

Mimo, że animacje można wykorzystywać do zwiększania atrakcyjności i użyteczności stron internetowych pamiętajmy, że w projektowaniu produktów cyfrowych często “mniej znaczy więcej”. Oznacza to, że czasem warto dokładnie przemyśleć wykorzystanie każdej animacji.

Karol Połubiński

Head of Design

Kiedy chęć stworzenia „efektu woow” zaczyna brać górę nad rozsądkiem, może okazać się, że nadmiar animowanych wodotrysków niepotrzebnie obciąża zarówno stronę jak i uwagę użytkownika. Łącząc estetykę z wyważonym minimalizmem mamy duże szanse na osiągnięcie lepszych rezultatów.

Chcesz stworzyć stronę internetową z animacjami podobnymi do tych, które widziałeś powyżej? Porozmawiajmy o Twoich potrzebach i razem zrealizujmy wyznaczone cele.