Czytając różne blogi na temat użyteczności i dobrych praktyk na stronach internetowych, często można się natknąć na uwagi mówiące o tym, że animacje, filmy i tzw. wodotryski są szkodliwe lub niepotrzebne na stronach internetowych. Wychwalany w trendach minimalizm i preferowanie przez niektórych twórców stron, mówiąc kolokwialnie, łatwizny powoduje, że niektóre strony wygląda jak statyczny dokument PDF.

W tym wpisie nie będę ucinał problemu na na zasadzie, że „wszystko trzeba robić z umiarem” bo animacja animacji nierówna.

Twórcy po to wprowadzili w CSS instrukcje odpowiedzialne za animacje aby z nich korzystać. To, że można się natknąć na sytuacje gdzie animacje są całkowicie zbędne i nie wnoszą niczego pożytecznego, nie oznacza, że w rękach profesjonalistów nie są w stanie zwiększyć użyteczności strony czy aplikacji webowej. To samo można powiedzieć o multimediach na stronach internetowych. Przecież jest to świetne rozszerzenie przeglądarek, o którym kiedyś mogliśmy tylko pomarzyć.

Ruch jest przyczyną wszelkiego życia.

Leonardo da Vinci

Animacje nieinteraktywne

Animacje nieinteraktywne to wszelkiego rodzaju filmy i grafiki, w których animacja sama w sobie jest treścią. Niektóre procesy i transformacje dużo łatwiej jest pokazać w animacji niż za pomocą serii ilustracji z opisem co się dzieje krok po kroku. Przykładem może być krótki filmik na temat tego jak wygląda współpraca z daną firmą lub wszelkiego rodzaju instrukcje obsługi:

https://kpir50.pl

Prezentacja produktu w obrocie 360 to też jedno z lepszych rozwiązań, które może zastąpić wiele zdjęć:

https://audiovisualart.com

Animacje takie mogą być plikami graficznymi, takimi jak GIF i WEBP oraz plikami wideo. Zaletą tych pierwszych jest to, że są szeroko wspierane i nie wymagają użycia odtwarzacza HTML. Zaletą drugiego rozwiązania jest możliwość odtwarzania animacji bez konieczności wczytania całego pliku. To oszczędza transfer i przy długich animacjach pozwala przeskakiwać do wybranego przez użytkownika momentu animacji. W filmie można użyć także ścieżki dźwiękowej.

Pliki z ruchomą grafiką można jeszcze podzielić na wektorowe i rastrowe. W cale nie jest tak, że pliki wektorowe to zawsze lepsze rozwiązanie. Co prawda mogą one zapewniać większą płynność i rozdzielczość animacji przy bardzo małym zużyciu transferu, jednak skomplikowane kompozycje mogą obciążać procesor i powodować zacinanie się strony. W takiej sytuacji lepiej zapisać animację w pliku wideo, zużyć nieco więcej transferu i poświęcić jakość wizualną, ponieważ w kontekście urządzeń mobilnych, (które, jak pamiętamy ze statystyk Internetu dominują w ruchu internetowym) deficytowym zasobem jest moc obliczeniowa.

Pliki wideo o zbyt dużym rozmiarze (rozdzielczości, FPS i bitrate) też mogą powodować „zacinanie się” strony a do tego zmarnować bardzo dużo transferu. Czytaj więcej w poradniku o optymalizacji wideo na stronach internetowych.

Animacje interaktywne

Animacje interaktywne to wszelkiego rodzaju efekty hover, przesunięcia i przewinięcia. Animacje takie zwiększają komfort i użyteczność. Animacje interaktywne powodują efekt ożywienia strony i kontrastują ze statycznymi stronami na których mówiąc kolokwialnie nic się nie dzieje.

Efekt rozjaśniania lub przyciemniania przy najechaniu myszą na element powoduje, że użytkownik wie, że coś można kliknąć. Nie trzeba wtedy dodawać podpowiedzi tekstowej w stylu „kliknij na link”.

Kiedy czekamy na załadowanie się pliku, dużo lepszym rozwiązaniem jest dodać animowany loader, niż liczyć na to że użytkownik sam się zorientuje, że ma czekać.

See the Pen Lazy Box by Chris Gannon (@chrisgannon) on CodePen.

Rozwiązaniem, które ma całkiem inny cel jest efekt „WOW”, który powoduje pojawienie się kolejnych elementów w miarę przewijania strony. Tutaj istotna jest synchronizacja, aby elementy pojawiały się na za szybko ale też nie za wolno:

Jest to efekt, który ma na celu uatrakcyjnić przeglądanie strony i choć trudno doszukać się tutaj filozofii lub zalet jego stosowania, nie oznacza, że jego stosowanie nie może być korzystne. Ludzkie oko lubi ruch i animacje. Tak samo można uzasadnić stosowanie efektu particles lub innej niż hover reakcji na ruch myszą:

https://linkd.pl

Takie efekty uzyskuję się za pomocą CSS i JavaScript. Istnieje wiele bibliotek i frameworków, które upraszczają stosowanie zaawansowanych animacji na stronie internetowej:

Kiedyś używaliśmy technologii Flash. Obecnie jej użycie jest zabronione i wycofywane ze standardów Internetowych.

Domyślnie blokowany Flash w przeglądarce Google Chrome

Dlaczego? Podpowiedź jest wyżej – były one zbyt zasobożerne od jednostki obliczeniowej i były potencjalnie niebezpieczne. We Flashu można było pisać prawdziwe wirusy.

Podsumowanie

To, że nadmiar animacji na stronach internetowych może zrujnować doświadczenia użytkowników nie oznacza, że zawsze trzeba ich unikać. Stosowanie filmów i animacji pozwala przekazać dużo więcej informacji od wielu zdjęć i skomplikowanych opisów – które jak pamiętamy ciężej się czyta na telefonie.

Stosowanie właściwych animacji może wzbogacić i uatrakcyjnić doświadczenia użytkowników. Wprowadzenie kreatywnej interakcji ma szansę ułatwić nawigację i współtworzyć architekturę informacji, która jak wiadomo jest kluczem do dobrego user experience i choćby tak powierzchownych celów jak wyróżnienia się na tle konkurencji.

Źródła

Oceń artykuł na temat: Po co są animacje na stronach internetowych?
Średnia : 4.6 , Maksymalnie : 5 , Głosów : 24