Wierz lub nie, ale nie masz dużo czasu, aby przekonać odwiedzających Twoją witrynę do pozostania. Twoje okno jest w rzeczywistości znacznie krótsze, niż myślisz.
W zasadzie wystarczy 0.05 sekund po załadowaniu strony, aby odwiedzający mogli wyrobić sobie opinię. Dokładniej, przekłada się to na 50 milisekund. Zaskakująco krótkie, prawda?
OK, część z nich odejdzie. Ale inni mogą zdecydować się zostać.
Następnie następuje etap wrażenia, który w zasadzie trwa tylko 10 sekund. Jeśli Twoja witryna nie będzie w stanie zapewnić solidnego zarządzania, stracisz większość ruchu, zanim w ogóle rozpocznie się proces konwersji. Po prostu kontynuują naciskanie przycisków Wstecz lub Zamknij.
A jeśli miałeś nadzieję na ich odzyskanie, oto brutalna prawda. 88% z nich prawdopodobnie nie powrócą na stronę internetową po złym doświadczeniu.
Ale poczekaj chwilę. Czyim zadaniem jest utrzymanie ruchu internetowego po wejściu na witrynę?
OK, oczywiście, zrzucanie winy na menedżera treści witryny jest rzeczą naturalną. I możesz mieć rację. Ale tylko częściowo.
Okazuje się, że wszystko zaczyna się od projektanta stron internetowych. W rzeczywistości wykazało to badanie, w którym szeroko zakrojono na szeroką gamę opinii konsumentów 94% negatywnych były związane z projektowaniem.
Co to oznacza?
Na początek nie ma od tego ucieczki. Główna odpowiedzialność spoczywa na Tobie. Oprócz wdrożenia wszystkich najlepszych praktyk projektowych, które omówiliśmy w naszych poprzednich artykułach, musisz założyć czapkę PR i wziąć pod uwagę elementy, które skutecznie łączą się z ruchem.
Mówię o takich rzeczach jak animacje internetowe.
I dlaczego specjalnie to sugerujemy?
Cóż, to coś, co wkrótce ujawnię. Ten przewodnik przeprowadzi Cię przez wszystkie najważniejsze aspekty animacji internetowych. Ale najpierw poznajmy podstawy…
Podstawy animacji internetowych
Wyobraź sobie swoją ulubioną postać z kreskówki przechadzającą się po ekranie. A może logo Twojego telefonu tańczy na ekranie po ponownym uruchomieniu urządzenia. Co oni mają ze sobą wspólnego?
Cóż, oba są podstawowymi przykładami animacji.
Animacja zasadniczo ma miejsce, gdy nieruchomy element zostaje „ożywiony”. Następnie zaczyna wykazywać jakąś formę ruchu.
Nie wiemy dokładnie, kiedy zaczęła się ta praktyka. Mamy jednak pomysł, że pierwszy film animowany w historii miało miejsce ponad sto lat temu. Od tego czasu trend ten rozwinął się dość intensywnie, dzięki postępowemu postępowi technologicznemu.
Jedno jednak pozostało niezmienne – zasady animacji. W rzeczywistości Ollie Johnston i Frank Thomas z Disneya napisali później o nich w swojej książce: „Iluzja życia: animacja Disneya". Oto pełna lista:
- Odwołać się
- Solidny rysunek
- Przesada
- Chronometraż
- Akcja drugorzędna
- Łuk
- Zwolnij i zwolnij
- Kontynuacja i nakładanie się akcji
- Akcja na wprost i pozowanie do pozy
- Inscenizacja
- Przewidywanie
- Squash i rozciągnij
Dwunastka nadal zapewnia ramy do projektowania animacji, w tym publikowanych w Internecie jako filmy, WebGL, SVG, CSS i GIF.
Teraz animacje internetowe mogą być tak proste, jak podświetlenie pojawiające się po najechaniu kursorem na literę, czy też złożona, wielowarstwowa seria pełnoekranowych filmów. Innymi słowy, możesz zastosować subtelne podejście lub postawić na całość z dominującymi animacjami, które wołają o uwagę. Wszystko zależy od sytuacji.
I tu nasuwa się pytanie – kiedy w ogóle należy używać animacji?
Kiedy warto używać animacji internetowych?
Oczywiście, że są urocze. Z pewnością będą interesującym dodatkiem do układu Twojej witryny.
Ale wiesz co? Ich późniejsze poziomy skuteczności to zupełnie inna sprawa. Jest więc rzeczą oczywistą, że animacje nie nadają się do wszystkich projektów stron internetowych. A co najważniejsze, złym pomysłem byłoby adoptowanie ich przypadkowo.
Tak się składa, że 46% konsumentów online oceniaj wiarygodność witryny na podstawie jej ogólnej atrakcyjności wizualnej i estetyki. Po prostu nie możesz sobie pozwolić na to w źle zaprojektowanym środowisku animacji. Jednocześnie niefortunnym byłoby ciągłe marnowanie okazji do konwersji złota w wyniku niekorzystania z animacji.
Kiedy więc warto je wykorzystać?
Oto rzecz. Animacje internetowe są idealne, gdy trzeba zwiększyć użyteczność, na przykład przyciągając uwagę lub pomagając użytkownikom w procesie nawigacji.
W jaki sposób?
Generalnie to trwa 2.6 sekund aby wzrok odwiedzającego trafił na sekcję witryny, która przede wszystkim wpływa na jego pierwsze wrażenie. Umiejętne wykorzystanie animacji może jednak przyspieszyć sprawę, od razu skupiając uwagę na najbardziej newralgicznych obszarach serwisu.
Animacje przydadzą się także wtedy, gdy chcesz poprowadzić użytkowników przez ścieżkę konwersji. Na przykład animowany wyskakujący formularz byłby przemyślaną strategią tworzenia list mailingowych. Jeśli chodzi o proces zakupu, możesz rozważyć osadzanie filmów. Udowodniono, że przekonują 73% kupujących kontynuować i kupić produkt lub usługę.
Wreszcie możesz używać animacji internetowych wyłącznie w celach estetycznych. Dekoracyjna animacja, która jest płynna i płynna, może znacznie poprawić ogólną atrakcyjność wizualną, a w konsekwencji ustanowić emocjonalne połączenie między użytkownikami a interfejsem. W ten sposób możesz stopniowo zwiększać poziom zaangażowania użytkowników.
Narzędzia do animacji internetowej
Gotowy do rozpoczęcia tworzenia animacji internetowych? Doskonały! Ale od czego powinieneś zacząć?
A może szukasz solidnego narzędzia do przekształcania pomysłów w rzeczywiste animacje? Na szczęście w sieci dostępna jest szeroka gama ciekawych opcji, które są dobrze zoptymalizowane pod kątem różnych użytkowników i różnych typów animacji. To, co wybierzesz dla swoich projektów, zależy od Twoich umiejętności, głównych celów, budżetu i rodzaju witryny, nad którą pracujesz.
To powiedziawszy, oto kilka znaczących przykładów, każdy z własnym, unikalnym przypadkiem użycia:
- js
- Animacja linii 3D w Three.js
- js
- Flubber
- Animacja kolorów
- jqChmury
- Scrollissimo
- Animacja Cel
- js
- js
- Animacja CSS3
- Transformacja-kiedy
- js
- Zrelaksuj się
- TO
- js
- Wyzwalacz przewijania
- Przewijanie
- js
- js
- js
- js
- Lisowiec
- Animacja
- css
- Animista
- js
- CAAT
- AnimujMate
- js
- Stylia
- GFX
- js
- js
- js
- jQuery DrawSVG
- Ramjet
- Pobić
- Wymieszaj to
- css
- css
- js
- Cezar
- CSSynth
- Szafran
- CSShake
- css
- js
- Rakieta
- Tranzyt
- css
- js
- Popmotion
- GSAP firmy GreenSock
- js
- js
- Animacja CSS
- Jest wtorek
- chytry
- js
- js
- js
- js
- js
- Czekać! Animować
- Interfejs Motion
- js
- Lazy Line Painter
- js
- js
- js
- AnijS
- js
- Magiczne animacje
- css
Projektowanie animacji internetowych
Efekty hover p
Animacje po najechaniu myszką to niewątpliwie jedne z najprostszych w sieci. Ożywają i podświetlają wybrane elementy po najechaniu na nie wskaźnikiem. Sama animacja może przybierać różne formy, np. zmianę rozmiaru lub koloru.
Sztuka polega na tym, aby stosować efekty oszczędnie. Innywise, ryzykujesz podkreśleniem zbyt wielu elementów, co może później zdezorientować użytkowników.
Wskazane jest również zachowanie spójności z metodologią w całej witrynie. Jeśli na przykład przyciski na stronie głównej zmienią kolor z zielonego na czerwony, użyj tego samego schematu dla dodatkowych wyróżnień na innych stronach internetowych.
Animacje tła
Osadzanie animacji tła to skuteczna strategia dodania emocji i witalności Twojej stronie internetowej, bez konieczności zakłócania głównego akcentu. Możesz użyć wszystkiego, od filmów po subtelne obrazy, które zmieniają się sekwencyjnie.
Najlepszym podejściem jest utrzymanie struktury i prostoty. Jeśli zdecydujesz się zintegrować film, odpowiednio go skróć i zachowaj pętlę odpowiednią dla Twojej witryny. Następnie upewnij się, że ruchy są wystarczająco subtelne, aby przyciągnąć uwagę, nie przytłaczając użytkowników.
Animacje w stylu GIF
GIF warto rozważyć, jeśli szczególnie interesuje Cię animacja, która jest wyjątkowo łatwa w konfiguracji. Typowym może być coś w rodzaju przesuwającego się tekstu lub uśmiechniętego klauna osadzonego w układzie treści.
Wystarczy, że wpadniesz na solidny pomysł, uzyskasz odpowiedni film lub obraz, a następnie przekonwertujesz go na idealny GIF za pomocą odpowiedniego oprogramowania do edycji. Przesyłanie powstałej kreacji w formacie GIF format generuje animację przypominającą wideo, która ładuje się tak szybko, jak mały obraz.
Animacje przejściowe
Animacje przejściowe służą do dodania energii, gdy użytkownicy przechodzą z jednej sekcji witryny do drugiej. Są podobne do animacji pokazu slajdów pojawiających się podczas przechodzenia z jednego slajdu do drugiego.
Kredytów obrazka: Shutterstock
Aby uzyskać doskonały wynik, upewnij się, że animacje są płynne i spójne w całej witrynie. Powinny być również na tyle krótkie, aby nie opóźniać faktycznego procesu przejścia.
Ładowanie animacji
Faktem jest- 47% konsumentów online spodziewaj się, że Twoje strony internetowe załadują się w ciągu co najmniej 2 sekund. Jeśli tego nie osiągniesz, każda dodatkowa sekunda będzie oznaczać o 7% mniej konwersji.
Idąc przez obecny średni czas ładowania 22 sekundy, jest całkiem oczywiste, że spełnienie oczekiwania 2 sekund jest dość trudne. Możesz jednak zaoszczędzić znaczną część ruchu, zajmując go animacjami w trakcie ładowania innych elementów witryny.
Skoncentruj się na tworzeniu prostych, wystarczająco lekkich, aby wczytać ruch niemal natychmiastowo i przekierować go na Twoją witrynę. Powinny być zaprojektowane tak, aby systematycznie wprowadzać odwiedzających w markę i ogólną tematykę strony.
Animacje uruchamiane przewijaniem
Badania eyetrackingowe wykazały, że użytkownicy witryn internetowych wydają ok 57% czasu gry powyżej pasa. Okazuje się jednak, że wiele z nich chce przewinąć w dół – pod warunkiem, że zapewnisz korzystną strukturę i mechanizm projektu.
I właśnie w tym miejscu pojawiają się animacje uruchamiane przewijaniem. Rozpoczynają się natychmiast po rozpoczęciu przewijania, tworząc iluzję gładkiej, niekończącej się strony. To przemyślany sposób na wyeliminowanie przejść, które powodowałyby inne zmianywise zniechęcaj do przewijania.
Animacje nawigacji i menu
Bądźmy szczerzy. Opcje menu zajmują znacznie dużo miejsca na ekranie, szczególnie w witrynach o dużej dynamice, z wieloma poziomami wyboru. Na szczęście możesz wykorzystać animacje, aby ukryć opcje, a następnie ujawnić je dopiero, gdy użytkownik kliknie lub najedzie kursorem na odpowiednie przyciski.
Ten rodzaj animacji usprawnia i upraszcza proces nawigacji, kompresując całą strukturę w wizualnie połączone opcje menu. Struktura powinna być zaprojektowana z segmentami podmenu, które systematycznie pojawiają się za każdym razem, gdy użytkownik kliknie lub wskaże nakładające się opcje menu.
Galeria i pokazy slajdów
Być może nie jest to zaskakujące, średni czas trwania uwagi człowieka wynosi 8 sekund – przynajmniej według niedawnego badania przeprowadzonego przez Microsoft. Nawet złota rybka jest w stanie zachować uwagę dłużej niż typowa rybkadivipodwójny. Dlatego możesz się założyć, że większość odwiedzających Twoją witrynę nie będzie na tyle wytrwała, aby kliknąć wszystkie elementy Twojej galerii.
Ale zgadnij co? Możesz sprytnie wykorzystać animacje galerii i pokazów slajdów, aby automatycznie prezentować wiele obrazów, niekoniecznie zmuszając użytkowników do poruszania się po nich.
Najważniejszą rzeczą jest tutaj czas wyświetlania obrazu. Krótkie ekrany z szybkimi przejściami powodowałyby wrażenie pośpiechu, podczas gdy długie ekrany z wolnymi przejściami okazałyby się nudne i powolne. Mając to na uwadze, zaprojektuj ogólny układ tak, aby każdy obraz był wyświetlany przez około 5 do 8 sekund, zanim szybko przejdziesz do następnego.
Wnioski
Podsumowując, powinieneś analizować animacje pod kątem tego, jak bardzo poprawiają one później wygodę użytkownika. Świetny powinien albo wywołać więź emocjonalną u użytkowników, albo ułatwić proces nawigacji. Idealny natomiast powinien móc wygodnie osiągnąć oba jednocześnie.
Aby to osiągnąć, poświęć trochę czasu na krytyczną ocenę wszystkich istotnych parametrów podczas projektowania i osadzania animacji w swojej witrynie. I pamiętaj – niech będzie prosty, lekki i dobrze dopasowany do Twojej marki.
obraz nagłówka dzięki uprzejmości Alfrey Davilla | vaneltia
Komentarze Odpowiedzi 0