Conţinut
Animația poate fi un instrument de design web foarte puternic. Dar, înainte de a anima fiecare element al proiectelor noastre, trebuie să învățăm când și cum să folosim acest nou instrument. Cu o mare putere vine o mare responsabilitate și așa mai departe. Și întrucât animația trebuie să concureze cu multe alte preocupări pentru timp de dezvoltare și proiectare, este logic să ne cheltuim resursele acolo unde vor merge cel mai departe.
Acest articol vă configurează câteva modele de animație de bază și vă arată cum se aplică animația la un sistem mai mare. Apoi veți învăța cum să identificați blocajele cognitive și fructele cu agățare redusă, maximizând impactul animațiilor în care investiți pentru a îmbunătăți experiența utilizatorului.
- Acesta este un extras din animația la locul de muncă a lui Rachel Nabors - cumpără-l aici
Dacă ați analizat la fel de multe exemple de animație pe web și în interfețele în aplicație ca și mine, anumite modele încep să apară. Aceste tipare sunt utile pentru identificarea și verbalizarea succintă a scopului unei animații către ceilalți.
Iată categoriile pe care le-am găsit folosind cel mai mult: tranziții, suplimente, feedback, demonstrații și decorațiuni.Să aruncăm o privire la fiecare dintre ele și să vedem cum au impact asupra experienței utilizatorului.
01. Tranziții
Treceți utilizatorii din loc în loc în spațiul informațional sau treceți-i dintr-o sarcină în alta. Acestea tind să aibă un impact masiv asupra conținutului de pe pagină, înlocuind porțiuni mari de informații.
Web-ul a fost inițial conceput ca o serie de documente legate. Dacă faceți clic pe un link, browserul a șters ecranul, provocând adesea un fulger revelator de alb, înainte de a picta pagina următoare de la zero. Deși acest lucru a avut sens în contextul documentelor legate de text legate, are mai puțin sens într-o eră în care paginile au multe elemente de design bogate și aparțin aceluiași domeniu. Nu numai că risipește resursele browserului pentru a recrea același aspect al paginii, dar crește și încărcarea cognitivă a utilizatorilor atunci când trebuie să reorienteze și să reevalueze conținutul paginii.
Animația, în special mișcarea, poate facilita orientarea utilizatorului într-un spațiu informațional, descărcând acest efort către cortexul vizual al creierului. Folosirea unei tranziții între schimbările în fluxul de sarcini sau locațiile în arhitectura informațională întărește în mod ideal unde a fost utilizatorul, unde se îndreaptă și unde se află acum dintr-o dată.
De exemplu, pe pagina SB Dunk de la Nike (prezentată mai sus), atunci când un utilizator face clic pe o săgeată de navigare, adidașul curent se deplasează din drum, în timp ce următorul adidaș se deplasează din direcția opusă. Aceste tranziții arată în mod clar utilizatorului cum navighează de-a lungul unui continuu liniar de adidași, ajutându-i să-și țină evidența locului și întărind modelul spațial de parcurgere a unui rând real de adidași.
Pe un alt site de pantofi, John Fluevog, tranzițiile mută utilizatorul din sarcină în sarcină (vezi mai sus). După ce un utilizator începe să tasteze în câmpul de căutare, rezultatele sunt animate deasupra unui fundal mai întunecat. Aceasta trece utilizatorul din contextul de navigare la rafinarea rezultatelor căutării, simplificându-și atenția, asigurându-i, de asemenea, că poate reveni la navigare fără eforturi mari.
02. Suplimente
Suplimentele aduc informații pe sau din pagină, dar nu modifică „locația” sau sarcina utilizatorului. În general, adaugă sau actualizează biți de conținut suplimentar pe pagină.
În timp ce tranzițiile mută utilizatorul de la stat la stat, animațiile suplimentare aduc utilizatorului informații auxiliare. Gândiți-vă la momente în care informațiile complementare conținutului principal al paginii apar sau dispar în vizualizare: alertele, meniurile derulante și sfaturile de instrumente sunt toți candidați buni pentru o animație suplimentară la intrare și ieșire.
Amintiți-vă că aceste animații trebuie să respecte Conul de viziune al utilizatorului: se vor uita direct la un sfat de instrumente care apare lângă cursorul lor sau va trebui ca atenția lor să fie direcționată către o alertă pe partea laterală a tabletei?
Când un utilizator adaugă un produs în coșul de cumpărături de pe glossier.com, mai degrabă decât să îl ducă la o pagină cu totul nouă a coșului de cumpărături, site-ul doar îl actualizează pe utilizator în ceea ce privește conținutul coșului de cumpărături, afișându-l ca o bară laterală (deasupra). În timp ce o tranziție ar scoate utilizatorul din modul de navigare, această animație suplimentară îi permite utilizatorului să renunțe la coșul de cumpărături și să continue să cumpere.
Bara laterală a coșului de cumpărături folosește o animație suplimentară suplimentară pentru a atrage rapid și subtil atenția utilizatorului: un contor de progres se umple treptat pentru a arăta cât trebuie să cheltuiască utilizatorul pentru a primi transport gratuit.
Acest proces de coș de cumpărături are un al treilea model de animație în desfășurare: butonul Adăugare la geantă câștigă o pictogramă rotativă atunci când faceți clic, ceea ce oferă utilizatorului feedback despre starea sa de încărcare. Apropo de feedback ...
03. Feedback
Feedback-ul indică cauzalitatea dintre două sau mai multe evenimente, adesea folosite pentru a conecta interacțiunea unui utilizator cu reacția interfeței.
Animația poate oferi utilizatorilor feedback direct despre interacțiunile lor. Un buton apăsat, un gest de glisare - ambele leagă o acțiune umană de reacția unei interfețe. Sau partea inversă: o rotire de încărcare pe o pagină indică faptul că așteptăm pe computer. Fără feedback vizual, oamenii se întreabă dacă au dat clic pe butonul „Plătește acum” sau dacă pagina se încarcă într-adevăr.
Pe site-ul acvariului Monterey Bay, plutirea deasupra unui buton face ca culoarea acestuia să se estompeze de la roșu la albastru, indicând faptul că elementul este interactiv și gata să reacționeze la intrarea utilizatorului. Comutarea butoanelor este un exemplu clasic pentru acest tip de animație, în parte deoarece câștigul oferit utilizatorilor feedback vizual asupra butoanelor este atât de măsurabil și important pentru afaceri.
Site-ul studioului de design Animal folosește o bară de culoare în partea de sus a paginii, precum și o versiune animată a siglei sale pentru a indica stările de încărcare și încărcare a paginii, oferind în același timp interes și consolidând brandul său „sălbatic”.
04. Demonstrații
Demonstrațiile explică modul în care funcționează ceva sau își expun detaliile arătând în loc să spună. Acestea sunt utilizarea mea personală preferată de animație. Ele pot fi atât distractive, cât și perspicace.
Aceste animații pun informațiile în perspectivă, arată ce se întâmplă sau cum funcționează ceva. Acest lucru face ca animațiile demonstrative să fie parteneri perfecti pentru infografie. Un lucru pe care îl fac toate animațiile demonstrative este să spui o poveste, după cum vei vedea.
Paginile „Procesarea ...” reprezintă o oportunitate de a explica ce se întâmplă utilizatorilor în timp ce așteaptă. TurboTax folosește bine aceste pagini de procesare. După ce utilizatorii își trimit formularele de impozitare din SUA, elimină orice anxietate rămasă, arătându-le unde se îndreaptă informațiile și la ce se pot aștepta - toate acestea consolidând prietenia și accesibilitatea mărcii lor. (De asemenea, ajută ca animația să-i distragă atenția utilizatorilor de la o încărcare destul de lungă a paginii cu ceva captivant vizual!).
Moneda folosește în mod renumit animații demonstrative pentru a explica propunerea de valoare a cardului de consolidare vizitatorilor curioși în timp ce navighează pe site - nu este nevoie să apăsați redare și să stați printr-un anunț video sau să parcurgeți paragrafe de conținut expozitiv. Această pagină este însăși esența „arată, nu spune”.
05. Decorațiuni
Nu este greu să confundați animațiile decorative cu animațiile demonstrative. Dar există o diferență cheie: în cazul în care demonstrațiile aduc informații noi în sistem, animațiile decorative nu. Acestea sunt grăsimile și zaharurile din piramida alimentară de animație: produc mari potențatori de aromă, dar moderarea este esențială.
Cea mai bună modalitate de a identifica o animație pur decorativă este de a întreba: „Ce poate învăța un utilizator din această animație? Îi îndrumă sau le arată ceva ce nu ar ști altfel? " Dacă răspunsul este nu, este posibil să aveți o animație decorativă pe mâini.
Chiar dacă au un rap rău, animațiile decorative pot ajuta la transformarea obișnuitului în extraordinar. Site-ul Revisionist History folosește în mod judicios animații decorative pentru a da viață ilustrațiilor plate. Animațiile adaugă suficient interes pentru a permite conținutului vizual de pe pagină să fie mai auster, permițând utilizatorilor să se concentreze pe podcast.
Polygon.com a folosit în mod epic ilustrații animate pentru a crea piese centrale pentru o serie de recenzii ale consolei. Este posibil ca aceste animații decorative să nu fi adăugat informații noi, dar au întărit în mod crucial marca Polygon. De asemenea, au ajutat fiecare recenzie a consolelor să iasă în evidență față de competiție, care la acea vreme avea fotografii nedistinguibile ale acelorași dispozitive.
Acest articol este un extras din Animation at Work - Rachel Nabors - o carte electronică A Book Apart Briefs care vă ghidează prin anatomia animațiilor web, a modelelor și a deciziilor de comunicare între echipe. Cumpără-l aici.
