Animacja internetowa w erze post-Flash

W tym niezwykle konkurencyjnym środowisku firmy gorączkowo szukają sposobów na przyciągnięcie i zatrzymanie uwagi ludzi. Kiedy zajmujemy się naszym codziennym życiem, niekończący się strumień wizualnej stymulacji tryskający na nas z animowanych reklam na ulicy, filmów w naszych telefonach komórkowych, nie wspominając o naszych kanałach w mediach społecznościowych, tworzy poczucie ciągłego ruchu, który walczy o naszą uwagę.

Reakcja w ułamku sekundy na ruch w naszym otoczeniu powstała z potrzeby przetrwania i została wywołana przez bodźce środowiskowe postrzegane jako potencjalnie zagrażające lub szkodliwe; ludzie zwracają szczególną uwagę na rzeczy, które się poruszają. Gdy kątem oka dostrzegamy coś szybko poruszającego się, mózg ostrzega nas w ułamku sekundy, ponieważ nasza podświadomość już zareagowała na niebezpieczeństwo, zanim nasz świadomy umysł zdążył przetworzyć informacje.

Reklamodawcy wiedzą o tym i dlatego mamy animowane reklamy uliczne na przystankach autobusowych i na peronach metra, reklamy wideo pojawiające się w mediach społecznościowych oraz elektroniczne billboardy z filmami w pełnym ruchu. Ta technika to efekt podwójnego stempla, który ma na celu dostarczanie wiadomości marketingowych. Po pierwsze, przykuwając naszą uwagę, a po drugie, wykorzystując wideo i animację, aby przekazać wiadomość.

Jeśli statyczny obraz jest wart tysiąca słów, ile warta jest animacja?

W tym miejscu pojawia się animacja internetowa. Projektanci stron internetowych mają nadzieję, że przyciągną i zatrzymają naszą uwagę, a być może dodają nieoczekiwanego zachwytu. Animacja internetowa może być używana do wizualizacji różnych etapów złożonego procesu lub pomysłu, do zilustrowania prostego komunikatu marketingowego lub do poruszania elementów na stronie internetowej w naturalny i płynny sposób, gdy ludzie przewijają — ponownie, aby zwrócić na coś uwagę.

Jak zaczęła się animacja internetowa, powstanie GIF-ów

Na początku istnienia sieci WWW rzeczy były raczej statyczne i nudne. Strony internetowe w większości opierały się na szacie graficznej i layoutach ze świata druku. Jednak niektórzy projektanci podjęli wspólny wysiłek — pomimo wyzwań technicznych i związanych z przepustowością — aby uwzględnić wczesne formy animacji internetowych, aby uczynić je bardziej dynamicznymi i atrakcyjnymi. Jednym z pierwszych dodatków animowanych GIF do strony internetowej był Batman Forever Jeffreya Zeldmana w 1995 roku. Odwiedzających powitał lot Batmana w ich kierunku, animowany jako sekwencja obrazów.

Strona promocyjna Batman Forever była wówczas jedną z najpopularniejszych witryn. Zainspirowało to innych projektantów i programistów stron internetowych do włączenia animacji internetowej GIF jako dziwacznego, przyciągającego wzrok elementu na swoich stronach internetowych.

20 lat do przodu i animowane GIF-y są teraz wszędzie. Są na Twitterze, Messengerze, iMessage, WhatsApp, Skype, Instagramie i Facebooku. GIF-y nadają się do animacji krótkich pętli, sekwencji obrazów, a nawet krótkich pętli wideo. Niefortunną wadą jest jednak to, że format pliku GIF nie ma zmiennej przezroczystości i nie obsługuje kanału alfa; dlatego wszystkie piksele są albo całkowicie nieprzezroczyste, albo całkowicie przezroczyste.

Animacje GIF były początkiem renesansu w projektowaniu stron internetowych, ale nie były idealne. Zwłaszcza we wczesnych dniach połączeń telefonicznych i wolnych prędkości Internetu GIF-y były świniami przepustowości. Rezultatem była pikselowa sekwencja o niskiej rozdzielczości. Wadą dla projektantów, którzy musieli kompresować GIF-y do najmniejszego możliwego rozmiaru, była ograniczona 8-bitowa paleta, co skutkowało dużym roztrząsaniem. Zmieniło się to, gdy szybki internet stał się bardziej powszechny w XXI wieku, w wyniku czego animacja internetowa stała się lepiej wyglądająca z milionami kolorów i płynniejsza przy wyższej liczbie klatek na sekundę.

Świt animacji internetowej Flash

Wielki boom na animacje internetowe nastąpił wraz z wprowadzeniem Flasha w 1996 roku, kiedy firma Macromedia ogłosiła swoją wtyczkę internetową i towarzyszące jej narzędzie do animacji oparte na klatkach: Macromedia Flash (po przejęciu FutureSplash Animator, programu do animacji wektorowych). Flash odegrał wiodącą rolę we wprowadzaniu nowych możliwości do sieci. Od dźwięku i animacji po interaktywność i wideo, Flash pomógł pchnąć Internet do przodu.

Możliwość budowania prostych, szczupłych, opartych na wektorach animacji internetowych w całych witrynach, które zawierały interakcje, stworzyła coś, co można nazwać „barokowym” okresem projektowania stron internetowych z (zbyt) wieloma animowanymi elementami wypełniającymi krajobraz. Niemniej jednak Flash dał wgląd w możliwości dynamicznego projektowania stron internetowych, uwalniając projektantów do eksperymentowania i wyzwalając okres szybkiej ewolucji w projektowaniu stron internetowych.

Animacje Flash są lekkie i stosunkowo łatwe do wykonania. Zaledwie kilka kilobajtów, są one dystrybuowane w formacie pliku SWF i pliku z dźwiękiem z wyraźną grafiką wektorową. Tworzenie animacji internetowych stało się uproszczonym procesem, który nie wpłynął zbytnio na czas wczytywania strony internetowej. Ale mimo wszystko pozostała znacząca wada — do jej uruchomienia wymagana była wtyczka przeglądarki.

Dodatkowo zaawansowaną interakcję we Flashu umożliwił ActionScript (AS), obiektowy język programowania podobny do JavaScript. ActionScript został początkowo zaprojektowany do kontrolowania prostych animacji wektorowych 2D, ale później przekształcił się w zaawansowane narzędzie.

Niestety animacja Flash nie miała być responsywna, nie działała dobrze na wszystkich urządzeniach i ostatecznie została usunięta ze wszystkich popularnych urządzeń mobilnych. Chociaż rozmiar pliku był stosunkowo mały, Flash nie był dobrze zoptymalizowany i skończył z brakiem mocy obliczeniowej, co również stanowiło problem na telefonach komórkowych. Koniec ery Flasha nastąpił po tym, jak Steve Jobs zdecydował się nie obsługiwać Flasha na urządzeniach mobilnych Apple.

Flash powstał w erze PC — dla komputerów PC i myszy. Ale era mobilna dotyczy urządzeń o niskim poborze mocy, interfejsów dotykowych i otwartych standardów internetowych — wszystkich obszarów, w których Flash nie spełnia swoich oczekiwań.

Steve Jobs

Animacja internetowa dzisiaj

Obecnie, ponieważ Flash jest przestarzały, mamy różne potrzeby w zakresie animacji internetowych. Narzędzia muszą być elastyczne i lekkie. Projektanci stron internetowych muszą tworzyć responsywne i dostosowywalne treści dla różnych urządzeń (komputer stacjonarny, tablet i telefon komórkowy), biorąc pod uwagę różne wymiary ekranu, przeglądarki, proporcje, gęstość pikseli i inne. Nasze arcydzieła animacji internetowych muszą działać na 5-calowym telefonie komórkowym 720 pikseli, przez 9,7-calowy tablet QXGA, aż po 32-calowy wyświetlacz Retina 6K.

Technologia dojrzała do punktu, w którym nawet słabe urządzenia mobilne mają przepustowość i moc obliczeniową, aby obsłużyć bardzo wymagające animacje internetowe i treści wideo w wysokiej rozdzielczości. Nie oznacza to, że strony internetowe powinny być bardzo „zajęte”. Jak zawsze, chodzi o zachowanie odpowiedniej równowagi między animacją, dynamiczną interakcją i elementami statycznymi. Fakt, że dziś możemy zaimplementować wiele wymyślnych animacji internetowych, nie oznacza, że ​​powinniśmy.

Projektanci stron internetowych/animatorzy muszą również rozważyć obsługę wielu platform. Dziesięć lat temu projektanci nie musieli dbać o to, aby ich kreacje dobrze prezentowały się na tak szerokiej gamie urządzeń. Należy wziąć pod uwagę różne proporcje, orientację pionową i poziomą, a także różne gęstości pikseli i odległości oglądania. Ta zagadka przedstawia projektantom stron internetowych zestaw nowych wyzwań i potencjalnych pułapek. Testowanie użytkowników pochłania cenny czas, więcej rzeczy może pójść nie tak na wielu platformach, a animacje internetowe muszą być bardziej szczegółowe niż kiedykolwiek.

HTML5, CSS3, JavaScript i SVG (grafika skalowalna) wydają się być najlepszymi rozwiązaniami dla animacji internetowych. Korzystanie z tych nowoczesnych technologii internetowych i języków pomoże rozwiązać większość, ale nie wszystkie z powyższych problemów. Ale zawsze dobrze jest stąpać ostrożnie, zwłaszcza na niezbadanym terenie, a obszerna kontrola jakości i testy są koniecznością.

Dlaczego warto korzystać z animacji internetowej?

Animacja internetowa może angażować i utrzymywać uwagę ludzi dłużej niż statyczna strona internetowa oraz wyraźniej i skuteczniej komunikować pomysł lub koncepcję. Doskonała animacja internetowa przekazuje historię za każdym ruchem. Chodzi o to, by ożywić animację ze znaczeniem i „duszą” (łac. anima).

Animacja internetowa powinna być płynna, znacząca i wspierać podróż użytkownika. Projektant stron internetowych/animator musi być świadomy tego, jak animacja pasuje do środowiska użytkownika, starać się przewidzieć prawdopodobne przepływy użytkowników, a następnie wspierać ją w znaczący sposób.

Projektanci stron internetowych nie mogą patrzeć na animację internetową z czysto technicznej perspektywy; muszą spojrzeć na to z perspektywy użytkownika.

Jedną z podstawowych rzeczy związanych z animacją jest wyczucie czasu. Właściwe wyczucie czasu nadaje animacji fizyczne i emocjonalne znaczenie. Doświadczenie powinno być płynne i logiczne. Jeśli animacja nie jest płynna (ma problem z synchronizacją), ludzie mogą postrzegać to jako błąd i stracić wszelką motywację do dalszego eksplorowania witryny.

Animator musi użyć odpowiedniego czasu, aby uzyskać zamierzony efekt. Ile klatek kluczowych należy użyć w animacji? Jaki rodzaj dynamicznej zmiany w animacji wynika z interakcji odwiedzających i jak szybko pojawia się odpowiedź po interakcji? Czy animacja jest kapryśna, poważna, zabawna?

Z logicznego punktu widzenia animację internetową możemy podzielić na dwa podstawowe typy:

• Statyczna, nieinteraktywna animacja internetowa, na przykład animacja GIF.
• Dynamiczna animacja internetowa z zaangażowaniem i interaktywnością użytkownika, która zmienia się po wejściu użytkownika.

Najlepszym przykładem animacji dynamicznej jest gra, w której użytkownicy manipulują treścią na ekranie. Innym prostym przykładem może być zmiana pozycji niektórych elementów, gdy odwiedzający witrynę przewija stronę przewijaną paralaksy. Animacja nie jest pasywna, zmienia się w zależności od działań użytkownika.

Dynamiczna animacja internetowa jest często używana do prezentowania animowanych infografik na stronie internetowej, dzięki czemu ludzie zwracają większą uwagę na określone obszary podczas przewijania strony — to potężny sposób na podkreślenie istotnych informacji.

Plusy i minusy animacji internetowej

Oto kilka zalet i wad technik animacji internetowych, w tym starszych rozwiązań, które nie są już używane.

A co ogólnie z zaletami i wadami animacji internetowej? Dobrze wykonana animacja internetowa może nadal wyglądać nie na miejscu, więc zawsze dobrze jest zadać kilka kluczowych pytań (a także klientom quizu i innym członkom zespołu) przed przystąpieniem do integracji animacji z projektem witryny.

Najpierw musimy sprawdzić , jak animacja wpłynie na wrażenia użytkownika. Czy poprawi to UX strony? Projektanci powinni:

• Sprawdź istniejący projekt strony internetowej (jeśli jest dostępny)
• Sprawdź grupę docelową i platformy sprzętowe, z których korzystają
• Sprawdź czasy ładowania strony i obciążenie procesora
• Poznaj inne alternatywy
• Miej oko na użyteczność

Nie jest dobrym pomysłem używanie animacji internetowych w witrynie, aby po prostu podążać za trendami.

Decyzję o zastosowaniu animacji internetowej należy traktować jak każdą inną decyzję projektową; projektanci stron internetowych muszą rozważyć zalety i wady i upewnić się, że wrażenia użytkownika nie są zagrożone. Powinni również współpracować z programistami, aby ustalić wymagania dotyczące kodu i upewnić się, że nie utkną z nieefektywnym kodem, który może wymagać dopracowania w przyszłości.

Nowoczesna technologia animacji internetowych znacznie dojrzała w ciągu ostatnich 20 lat — wzrosła wydajność, dostępna przepustowość i jakość renderowania. Jednak projektanci powinni postępować ostrożnie i dodawać animacje do witryny tylko wtedy, gdy znacząco poprawia to wrażenia użytkownika.

Dalsza lektura na blogu Toptal Design:

• Jak tworzyć niestandardowe animacje ładowania, aby zmniejszyć współczynniki odrzuceń?
• Tworzenie oszałamiających ilustracji za pomocą Sketch and Looper w mgnieniu oka
• Przewodnik krok po kroku dotyczący animacji interfejsu użytkownika z zasadami i szkicem
• Inspiracje do animacji logo, aby Twoja marka była bardziej rozpoznawalna
• Przewodnik krok po kroku dotyczący tworzenia animowanych filmów wyjaśniających produkt