Cum să utilizați tipografia cinetică pentru a vă face site-ul web interactiv?

Tipografia cinetică se referă la o formă de animație. Aici, facem cuvintele să treacă live.

Spun cuvinte, dar poate fi orice – de la o singură literă la un paragraf întreg. Depinde de ceea ce vrei să obții prin acea mișcare. Având în vedere acest lucru, tipul tău de mișcare trebuie să fie atent și intenționat. Nu poți să-ți faci cuvintele să sară și să explodeze pentru pur și simplu.

Ei bine, poți – dar această utilizare superficială nu va avea același impact.

Pentru că atunci când utilizați limbajul de mișcare în design web, fie prin crearea unei animații de design de logo sau prin tipografie cinetică, faceți ca designul să se deschidă utilizatorilor.

Cu alte cuvinte, îi ajutați pe utilizatori să uite că doar ating un ecran și, în schimb, vă prezentați site-ul web ca pe ceva viu care poate răspunde. Poate să zâmbească, să vă spună ce să faceți în continuare, să danseze când faceți clic pe butonul din dreapta și să explodeze în stele când reușiți.

Atunci când utilizatorii pot interacționa cu designul dvs., pot decide să petreacă mai mult timp cu acesta, să se simtă încântați de el, să îl înțeleagă mai pe deplin și, în cele din urmă, să simtă o afinitate cu acesta.

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

5 moduri în care elementele interactive îmbunătățesc experiența site-ului

Ridicați estetica

Estetica este totul când vine vorba de site-ul tău pentru a face prima impresie. Dacă site-ul dvs. arată monoton și prost aranjat, acea impresie va fi transmisă și brandului dvs., făcându-vă profitul.

Pe de altă parte, dacă un site arată frumos și oferă caracteristici pe care nu mulți le-au văzut până acum pe majoritatea site-urilor – de tip cinetic, de exemplu – este un câștig uriaș.

Deoarece tipul cinetic face și estetica mai vie, impactul crește. Acum aveți un site web frumos pe care oamenii îl pot atinge, să vorbească, să răspundă și de la care să primească feedback.

Acesta este ceva ce nu poate face un vechi site web static.

Permite-ți să ieși în evidență

Pentru a-ți pune amprenta de neșters în lumea digitală, trebuie să ai lucruri pe care alții nu le au.

Din orice motive de neînțeles, nicio marcă majoră nu beneficiază de ceea ce poate face tipul cinetic. Uitați de mărcile mari, startup-urile sunt și ele orb la minunile acestei minunate minuni.

Aici poți lovi.

Includeți efecte subtile, captivante și de tip cinetic al mărcii pe site-ul dvs. pentru a revendica experiența ca fiind unică a dvs. Arată-le oamenilor ce poți face.

Oamenii se vor uita la inovația dvs., vor vedea cât de impecabil ați gestionat-o și cum vă ajută afacerea să-și transmită mesajul și vor începe să aibă încredere în dvs. Te vor privi ca pe cineva care știe ce face. Când această încredere este stabilită, urmează în curând o tranzacție monetară.

Mențineți utilizatorul angajat

Întreaga premisă a internetului și a rețelelor sociale este construită pe implicare. Conținutul tău trebuie să ofere oamenilor ceva care îi poate menține implicați cu conținutul, creatorul și platforma.

Folosind funcțiile de tipografie cinetică pe site-ul dvs. web obțineți cotele de implicare la care puteți doar visa.

În loc să-i forțezi să citească prin copie statică, le oferiți cuvinte de acțiune live care se transformă, se schimbă, se adaptează și se performanță pentru a face călătoria utilizatorului mai ușor de înțeles și mai distractiv.

Îmbunătățiți ierarhia vizuală

Ierarhia vizuală se referă la ordinea organizațională în care lucrurile sunt prezentate utilizatorului. Textul cu cel mai mare font este cel mai important, apoi cel mai mic de atât, și așa mai departe. În mod similar, fonturile în culori strălucitoare ne atrag atenția mai repede decât fonturile în gri sau albastru deschis, de exemplu.

Folosind aceste indicii vizuale, îi ajutăm pe oameni să-și orienteze atenția către diferite părți ale paginii într-o ordine organizată.

Tipul de mutare poate fi de mare ajutor aici. În loc de indicii statice, putem folosi o tipografie fluidă și putem face ca literele și cuvintele noastre să se transforme în pictograme și forme care ajută la ghidarea atenției utilizatorului.

Educați utilizatorii

Când lansați un site web nou, poate fi greu pentru oameni să se înțeleagă. Dar funcțiile interactive pot ajuta.

Potrivit unui studiu de marketing de conținut, 93% dintre specialiști în marketing consideră că conținutul interactiv este „foarte eficient în educarea potențialilor clienți”.

Acum, acest conținut interactiv ar putea fi orice – o postare pe blog, un videoclip, un infografic, orice – dar atunci când introduci mișcare în diverse zone ale site-ului tău prin tipul de mișcare – navigare, meniu, bară de căutare, cum vrei să spui – mărești educația și înțelegerea unui nou aspect înzecit.

Iată cum tipul cinetic poate face site-ul dvs. interactiv

1. Faceți mai distractiv timpul de așteptare pentru încărcarea paginii

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

Niciunul dintre noi nu este fan al paginilor web care durează o veșnicie să se încarce. De fapt, potrivit Google, paginile de încărcare lentă sunt unul dintre principalele motive pentru care unele site-uri au o rată de respingere mai mare decât altele.

Dar activitatea fonturilor poate ajuta aici.

Gândiți-vă la o pagină în care modificările dimensiunii textului vă informează despre cât timp de așteptare a mai rămas.

Pe măsură ce tipul trece de la o dimensiune mai mică la una mai mare, poate alerta utilizatorii despre cât mai mult ar trebui să aștepte. Deși este posibil ca oamenii să nu răspundă pozitiv la timpii de încărcare a paginii, atunci când le spui cât de repede se poate termina așteptarea, este posibil să rămână mai mult timp.

Puteți face timpul de așteptare și mai distractiv făcând copia mai interesantă, animația mai atrăgătoare și efectele mai naturale.

2. Atrageți atenția utilizatorului și sugerați următorul pas

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

Pentru cei care nu sunt prea familiarizați cu site-ul dvs., găsirea următorului pas în călătoria utilizatorului poate fi puțin confuză.

Tipul de mutare vă poate ajuta să atrageți atenția utilizatorilor asupra zonei potrivite a site-ului, la momentul potrivit. De exemplu, mutarea tipului în meniul digital al unui restaurant vă poate ajuta să vă îndreptați atenția către dimensiunile porțiilor pe măsură ce vă finalizați felurile de mâncare. Sau, atunci când rezervați o călătorie, tipografia cinetică din calendarul încorporat vă poate ajuta să vă asigurați că ați ales datele potrivite.

Când faci călătoria utilizatorului ușor de urmărit și mai previzibil, este un semn că ai creat o interfață intuitivă pe care majoritatea oamenilor o vor înțelege cu ușurință.

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

3. Spune-le oamenilor pe ce să se concentreze

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

Un alt domeniu cheie în care tipul mobil poate îmbunătăți un site web este atunci când trebuie să le spui oamenilor pe ce să se concentreze.

Gândiți-vă la o pagină Serviciile mele. În timp ce o pagină tradițională, statică, își poate face treaba, prin tipul cinetic puteți spune oamenilor care serviciu este produsul dvs. principal, care este al doilea și așa mai departe. În acest fel, tipul cinetic vă ajută să vă stabiliți și să vă promovați nișa.

Pe lângă mișcare, puteți, de asemenea, transforma tipul în diferite forme relevante pentru serviciile dvs. pentru a face mesajul dvs. mai vizual. De exemplu, dacă sunteți scriitor, o pictogramă penă poate face referire la abilitățile dvs. de editor, în timp ce un simbol bec poate semnifica consultanță creativă.

Pe măsură ce diferitele litere din copia dvs. se transformă în aceste noi pictograme, nu numai că arată incredibil de jucăuș și captivant, dar vă arată și un pic din personalitatea dvs. - iar în marketing, acesta este (în mare parte) întotdeauna un plus.

https://dribbble.com/shots/13945869-My-Services

4. Pregătiți utilizatorii pentru o schimbare de stare sau o tranziție

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

Comerțul electronic sau o experiență de navigare pe web este inundată de tranziții. Mergeți mereu de la punctul A la B la C și așa mai departe. Tranzițiile dure creează o experiență neplăcută pentru utilizator. Nimănui nu-i place să se simtă zguduit dintr-un loc în altul. Tipografia fluidă, asemănătoare lichidului, ajută la menținerea totul neted.

Pregătește oamenii pentru o schimbare care urmează să vină. Le spune să se pregătească pentru asta. Îi ajută să intre în mentalitatea de a se pregăti pentru următoarea etapă de cumpărături, descărcare sau pur și simplu navigare.

O tranziție lină este eficientă și pentru a reține atenția utilizatorului. În loc de o pagină statică care afișează un semnal de așteptare, o copie drăguță cu mișcare simbolică va fi mult primită de toată lumea și va ajuta vibrația mărcii.

5. Subliniați cuvintele cheie, frazele sau zonele site-ului web

https://dribbble.com/shots/11138509-The-Truth-is-Worth-It

O mare parte din site-ul web este compus din text. Copiere web, descrieri și CTA sunt câteva exemple. Când decideți să utilizați tipul cinetic, puteți permite acestor elemente textuale să devină animate. Evidențierea mesajului principal devine mai ușor.

Gândiți-vă la un CTA care se transformă într-o pictogramă coș de cumpărături pe măsură ce finalizați comanda online. Sau un mesaj de eroare care arată dezamăgirea transformându-se într-o încruntătură tristă. Sau, o listă de episoade de podcast în care fiecare titlu devine mai mare pe măsură ce treceți cu mouse-ul peste numele său.

Ca parte a designului în mișcare, tipul cinetic vă ajută să accentuați ceea ce doriți să spuneți. Dubla puterea cuvintelor tale. Deci, folosește-l cu intenție și gândire.

6. Oferiți feedback vizual atunci când o sarcină este finalizată cu succes

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

Când un utilizator interacționează cu interfața dvs. de utilizare, este de ajutor atunci când știe că o face corect. Mesajele de eroare, confirmările și alte forme de feedback vizual îi ajută pe utilizatori să înțeleagă ce trebuie să facă. Întărirea acțiunii utilizatorilor îi ajută să rămână implicați și crește probabilitatea ca aceștia să urmeze ceea ce au de făcut.

Tipografia animată este o formă eficientă de feedback vizual. Este rapid, păstrează intactă entuziasmul experienței și încurajează utilizatorul să ia măsuri suplimentare.

În special, joacă un rol cheie atunci când îl utilizați pentru mesajele dvs. de eroare. Vrei ca oamenii să încerce din nou, să nu se simtă frustrați și să le spui exact ce a mers prost. Deci, de exemplu, atunci când un utilizator își introduce parola incorect de două ori și a treia oară îl va bloca din aplicație, puteți include un mesaj de eroare animat care să-l avertizeze despre acest fapt, astfel încât să poată fi mai atenți acum.

După cum puteți vedea, nu trebuie să vă inundați site-ul web cu tipul de mutare. Întregul lucru va arăta, sincer, bizar și prea copleșitor. După cum tot spun, fiți mai subtil și mai atent când lucrați cu orice fel de animație. Fă-o atunci când îmbunătățește experiența și, chiar și atunci, păstrează efectul ușor și neted.

7. Ajută la stabilirea tonului mărcii

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

În timp ce textul animat poate ajuta toate industriile, este mai eficient în unele decât altele. Luați banca sau asigurările, de exemplu. Puteți să vă animați tipografia acolo, dar va trebui să fiți foarte subestimat. Pentru că dacă treci peste partea de sus chiar și puțin mai mult, poate face ca caracterul tău de marcă să fie lovit.

Dar gândiți-vă la modă, stil de viață, comerț cu amănuntul, imobiliare, echipament/haine/jucării pentru copii și multe altele și o doză sănătoasă de tip cinetic pentru a face interfața de utilizare mai interesantă pare să aibă mult mai mult sens.

În timp ce, singur, nu poate stabili întregul branding, dar poate funcționa cu siguranță ca un bun excelent alături de alte instrumente.

The Takeaway

Se află trei:

1. Fii intenționat . Nu o face doar pentru că arată frumos. Fă-o pentru că servește unui scop și apoi fă-o frumoasă.
2. Fii cumpătat cu tipul tău de mișcare . Poate fi mult de luat. Așadar, adăugați-l doar în zonele UI unde aveți spațiu și unde va obține cele mai multe rezultate.
3. Fii clar . Utilizați stiluri de font care nu vor pierde lizibilitatea atunci când adăugați animație. De asemenea, stai departe de stilurile de animație care vor încurca stilurile perfect lizibile.