Jak wykorzystać typografię kinetyczną, aby uczynić swoją witrynę interaktywną?

Typografia kinetyczna odnosi się do formy animacji. Tutaj sprawiamy, że słowa stają się żywe.

Mówię słowa, ale może to być wszystko – od jednej litery do całego akapitu. Zależy od tego, co chcesz osiągnąć dzięki temu ruchowi. Mając to na uwadze, twój typ poruszania się musi być przemyślany i celowy. Nie możesz tak po prostu sprawić, by twoje słowa skakały i bumały dla samego cholery.

Cóż, możesz – ale to powierzchowne użycie nie będzie miało takiego wpływu.

Ponieważ kiedy używasz języka ruchu w projektowaniu stron internetowych, czy to tworząc animację projektu logo, czy też typografię kinetyczną, sprawiasz, że projekt jest otwarty dla użytkowników.

Innymi słowy, pomagasz użytkownikom zapomnieć, że po prostu dotykają ekranu, a zamiast tego przedstawiasz swoją witrynę jako coś żywego, co może odpowiedzieć. Może się uśmiechać, mówić ci, co masz robić dalej, tańczyć, gdy klikniesz prawy przycisk, i rozbłysnąć gwiazdami, gdy ci się uda.

Kiedy użytkownicy mogą wchodzić w interakcję z Twoim projektem, mogą zdecydować, że poświęcą mu więcej czasu, poczują się nim zachwyceni, zrozumieją go pełniej i ostatecznie poczują z nim pokrewieństwo.

https://dribbble.com/shots/14187210-Behance

5 sposobów, w jakie elementy interaktywne poprawiają komfort korzystania ze strony

Podnieś estetykę

Estetyka jest wszystkim, co sprawia, że ​​Twoja witryna robi pierwsze wrażenie. Jeśli Twoja witryna wygląda na ponure i źle ułożoną, to wrażenie zostanie również przeniesione na Twoją markę, co ucierpi na wynikach.

Z drugiej strony, jeśli witryna wygląda pięknie i oferuje funkcje, których niewiele osób widziało wcześniej na większości witryn – na przykład typ kinetyczny – jest to ogromna wygrana.

Ponieważ typ kinetyczny również ożywia estetykę, siła uderzenia wzrasta. Masz teraz piękną witrynę, na którą ludzie mogą dotykać, rozmawiać, odpowiadać i otrzymywać informacje zwrotne.

To jest coś, czego stara dobra, statyczna strona internetowa po prostu nie może zrobić.

Pozwól się wyróżnić

Aby pozostawić niezatarty ślad w cyfrowym świecie, musisz mieć rzeczy, których nie mają inni.

Z jakichkolwiek niezrozumiałych powodów żadne duże marki nie korzystają z tego, co może zrobić typ kinetyczny. Zapomnij o wielkich markach, startupy też są ślepe na cuda tego pięknego cudu.

To jest miejsce, w którym możesz uderzyć.

Umieść w swojej witrynie subtelne, angażujące i markowe efekty kinetyczne, aby zapewnić, że wrażenia są wyjątkowe. Pokaż ludziom, co możesz zrobić.

Ludzie spojrzą na Twoją innowację, zobaczą, jak nienagannie sobie z nią poradziłeś i jak pomaga ona Twojej firmie przekazać jej przesłanie, i zaczną Ci ufać. Będą patrzeć na ciebie jak na kogoś, kto wie, co robi. Kiedy to zaufanie zostanie ustanowione, wkrótce nastąpi transakcja pieniężna.

Utrzymuj zaangażowanie użytkownika

Całe założenie internetu i mediów społecznościowych opiera się na zaangażowaniu. Twoje treści muszą dawać ludziom coś, co sprawi, że będą zaangażowani w treść, twórcę i platformę.

Wykorzystanie funkcji typografii kinetycznej na swojej stronie pozwala osiągnąć wskaźniki zaangażowania, o których możesz tylko pomarzyć.

Zamiast zmuszać ich do czytania statycznej kopii, dajesz im słowa akcji na żywo, które przekształcają się, zmieniają, dostosowują i wykonują, aby podróż użytkownika była bardziej zrozumiała i przyjemna.

Popraw hierarchię wizualną

Hierarchia wizualna odnosi się do porządku organizacyjnego, w jakim rzeczy są prezentowane użytkownikowi. Najważniejszy jest tekst z największą czcionką, potem mniejszy i tak dalej. Podobnie czcionki w jasnych kolorach przyciągają naszą uwagę szybciej niż na przykład czcionki w kolorze szarym lub jasnoniebieskim.

Korzystając z tych wizualnych wskazówek, pomagamy ludziom kierować ich uwagę na różne części strony w zorganizowanej kolejności.

Przenoszenie tekstu może być tutaj ogromną pomocą. Zamiast statycznych wskazówek, możemy użyć płynnej typografii i sprawić, by nasze litery i słowa przekształciły się w ikony i kształty, które pomogą kierować uwagę użytkownika.

Edukuj użytkowników

Kiedy uruchamiasz nową stronę internetową, ludziom może być trudno zrozumieć. Pomocne mogą być jednak funkcje interaktywne.

Według badania content marketingu 93% marketerów uważa, że ​​treści interaktywne są „wysoce skuteczne w edukowaniu potencjalnych klientów”.

Teraz ta interaktywna treść może być wszystkim – postem na blogu, filmem, infografiką, cokolwiek – ale kiedy wprowadzasz ruch w różnych obszarach swojej witryny poprzez typ ruchomy – nawigacja, menu, pasek wyszukiwania, jak to nazywasz – zwiększasz edukację i dziesięciokrotne zrozumienie nowego układu.

Oto, jak typ kinetyczny może sprawić, że Twoja witryna będzie interaktywna

1. Spraw, aby czas oczekiwania na wczytanie strony był przyjemniejszy

https://dribbble.com/shots/6189182-Counter-01

Nikt z nas nie jest fanem stron internetowych, które ładują się w nieskończoność. W rzeczywistości, według Google, wolno ładujące się strony są jednym z głównych powodów, dla których niektóre witryny mają wyższy współczynnik odrzuceń niż inne.

Ale aktywność czcionek może tutaj pomóc.

Pomyśl o stronie, na której zmiany rozmiaru tekstu informują o tym, ile czasu pozostało do oczekiwania.

Gdy typ zmienia się z mniejszego na większy, może ostrzegać użytkowników o tym, jak długo będą musieli czekać. Chociaż ludzie mogą nie reagować pozytywnie na czasy wczytywania strony, gdy powiesz im, jak szybko może się skończyć oczekiwanie, prawdopodobnie zostaną dłużej.

Możesz sprawić, że czas oczekiwania będzie jeszcze przyjemniejszy, dzięki czemu kopia będzie ciekawsza, animacja bardziej atrakcyjna, a efekty bardziej naturalne.

2. Przyciągnij uwagę użytkownika i podpowiedz na następny krok

https://dribbble.com/shots/18058873-Internet-Speed-Test-App

Dla tych, którzy mogą nie być zbyt zaznajomieni z Twoją witryną, znalezienie następnego kroku w ścieżce użytkownika może być nieco mylące.

Moving type może pomóc przyciągnąć uwagę użytkowników do odpowiedniego obszaru witryny we właściwym czasie. Na przykład przesuwanie tekstu w cyfrowym menu restauracji może pomóc w skierowaniu uwagi na rozmiary serwowania podczas finalizowania potraw. Lub, gdy rezerwujesz podróż, typografia kinetyczna we wbudowanym kalendarzu może pomóc Ci upewnić się, że wybrałeś właściwe daty.

Kiedy sprawiasz, że podróż użytkownika jest łatwa do naśladowania i bardziej przewidywalna, jest to znak, że stworzyłeś intuicyjny interfejs, który większość ludzi z łatwością zrozumie.

https://dribbble.com/shots/17559699-Move-On-Up

3. Powiedz ludziom, na czym mają się skupić

https://dribbble.com/shots/9287077-hop

Innym kluczowym obszarem, w którym ruchoma czcionka może ulepszyć witrynę, jest sytuacja, w której musisz powiedzieć ludziom, na czym mają się skupić.

Pomyśl o stronie Moje usługi. Podczas gdy tradycyjna, statyczna strona może wykonać swoje zadanie, poprzez typ kinetyczny możesz powiedzieć ludziom, która usługa jest Twoim głównym produktem, a która jest drugim i tak dalej. W ten sposób typ kinetyczny pomaga ci ustanowić i promować twoją niszę.

Oprócz ruchu możesz również przekształcić tekst w różne kształty odpowiednie dla Twoich usług, aby Twoja wiadomość była bardziej wizualna. Na przykład, jeśli jesteś pisarzem, ikona pióra może odnosić się do twoich umiejętności jako edytora, a symbol żarówki może oznaczać kreatywne doradztwo.

Ponieważ różne litery w Twojej kopii przekształcają się w nowe ikony, nie tylko wygląda niesamowicie zabawnie i angażująco, ale także pokazuje trochę Twojej osobowości – a w marketingu jest to (w większości) zawsze plus.

https://dribbble.com/shots/13945869-Moje-Usługi

4. Przygotuj użytkowników na zmianę stanu lub przejście

https://dribbble.com/shots/11258557-Creative-Coding-5

Handel elektroniczny lub przeglądanie stron internetowych są zalewane przejściami. Zawsze idziesz z punktu A do B do C i tak dalej. Twarde przejścia sprawiają, że użytkownik jest irytujący. Nikt nie lubi czuć się popychany z jednego miejsca do drugiego. Płynna, przypominająca płyn typografia pomaga zachować gładkość.

Przygotowuje ludzi na nadchodzącą zmianę. Mówi im, żeby się na to przygotowali. Pomaga im przyzwyczaić się do kolejnego etapu zakupów, pobierania lub zwykłego przeglądania.

Płynne przejście jest również skuteczne w utrzymaniu uwagi użytkownika. Zamiast statycznej strony wyświetlającej sygnał oczekiwania, jakiś ładny egzemplarz z symbolicznym ruchem zostanie bardzo dobrze odebrany przez wszystkich i poprawi klimat marki.

5. Podkreśl słowa kluczowe, frazy lub obszary witryny

https://dribbble.com/shots/11138509-Prawda-jest-warta-tego

Tak duża część witryny składa się z tekstu. Treść internetowa, opisy i wezwania do działania to tylko kilka przykładów. Decydując się na użycie typu kinetycznego, możesz pozwolić, aby te elementy tekstowe były animowane. Podkreślanie głównego przesłania staje się łatwiejsze.

Pomyśl o CTA, które zmienia się w ikonę koszyka na zakupy, gdy finalizujesz zamówienie online. Lub komunikat o błędzie, który pokazuje rozczarowanie, zmieniając się w smutną minę. Lub listę odcinków podcastu, w której każdy tytuł staje się większy, gdy najedziesz kursorem na jego nazwę.

W ramach projektowania ruchu, typ kinetyczny pomaga zaakcentować to, co chcesz powiedzieć. Podwój siłę twoich słów. Więc używaj go z intencją i myślą.

6. Przekaż wizualną informację zwrotną po pomyślnym zakończeniu zadania

https://dribbble.com/shots/16174668-KEEP-IT-UP

Kiedy użytkownik wchodzi w interakcję z Twoim interfejsem, pomaga, gdy wie, że robi to dobrze. Komunikaty o błędach, potwierdzenia i inne formy wizualnej informacji zwrotnej pomagają użytkownikom zrozumieć, co muszą zrobić. Wzmocnienie działań użytkowników pomaga im pozostać zaangażowanym i zwiększa prawdopodobieństwo, że zrealizują to, co mają do zrobienia.

Typografia animowana to skuteczna forma wizualnej informacji zwrotnej. Jest szybki, utrzymuje emocje związane z doświadczeniem i zachęca użytkownika do podjęcia dalszych działań.

Szczególnie odgrywa kluczową rolę, gdy używasz go do wyświetlania komunikatów o błędach. Chcesz, aby ludzie spróbowali jeszcze raz, nie czuli się sfrustrowani i powiedzieli dokładnie, co poszło nie tak. Na przykład, gdy użytkownik dwa razy wprowadzi niepoprawne hasło, a za trzecim razem zablokuje mu dostęp do aplikacji, możesz dołączyć animowany komunikat o błędzie, ostrzegający go o tym fakcie, aby teraz byli bardziej ostrożni.

Jak widzisz, nie musisz zalewać swojej witryny typem ruchomym. Całość będzie wyglądać szczerze, dziwacznie i zbyt przytłaczająco. Jak powtarzam, pracuj z dowolną animacją, bądź subtelniejszy i bardziej rozważny. Zrób to, gdy poprawi to doznania, a nawet wtedy zachowaj lekki i gładki efekt.

7. Pomóż ustawić ton marki

https://dribbble.com/shots/17070314-PROSTE

Chociaż tekst animowany może pomóc wszystkim i każdej branży, w niektórych jest bardziej wydajny niż w innych. Weźmy na przykład bankowość lub ubezpieczenie. Możesz tam animować swoją typografię, ale musisz być bardzo dyskretny. Ponieważ jeśli przesadzisz jeszcze trochę, może to sprawić, że charakter Twojej marki zostanie uderzony.

Ale pomyśl o modzie, stylu życia, handlu detalicznym, nieruchomościach, dziecięcym sprzęcie / ubraniach / zabawkach i wielu innych, a zdrowa dawka typu kinetycznego, aby interfejs był bardziej interesujący, wydaje się mieć o wiele więcej sensu.

Chociaż sam nie może stworzyć całej marki, ale z pewnością może działać jako wielki atut wraz z innymi narzędziami.

Na wynos

Są trzy:

1. Bądź celowy . Nie rób tego tylko dlatego, że wygląda ładnie. Zrób to, bo to służy celowi, a potem spraw, by było piękne.
2. Bądź oszczędny ze swoim ruchomym typem . To może być dużo. Tak więc dodawaj go tylko w obszarach interfejsu użytkownika, w których masz miejsce i gdzie osiągnie najwięcej wyników.
3. Bądź jasny . Używaj stylów czcionek, które nie stracą czytelności po dodaniu animacji. Unikaj również stylów animacji, które mogą zepsuć doskonale czytelne style pisma.