5 ključnih obrazaca animacije i kako ih koristiti

Animacija može biti vrlo moćna alat za web dizajn . Ali prije animiranja svakog elementa našeg dizajna, moramo naučiti kada i kako koristiti ovaj novi alat. S velikom moći dolazi velika odgovornost, i tako dalje. A kako se animacija mora boriti s mnogim drugim brigama za vrijeme razvoja i dizajna, logično je trošiti naše resurse tamo gdje će oni ići najdalje.

Ovaj vam članak postavlja neke temeljne uzorke animacije i pokazuje vam kako se animacija odnosi na veći sustav. Tada ćete naučiti kako uočiti kognitivna uska grla i slabo viseće voće, maksimalizirajući učinak animacija u koje ulažete da biste poboljšali korisničko iskustvo .

  • Ovo je isječak iz animacije Rachel Nabors na poslu - kupi ovdje

Ako ste pogledali onoliko primjera animacije na webu i u sučeljima unutar aplikacija, koliko se i ja, počinju se pojavljivati ​​određeni obrasci. Ti su obrasci korisni za prepoznavanje i jezgrovitu verbalizaciju svrhe animacije drugima.



Evo kategorija u kojima sam se najviše koristio: prijelazi, dodaci, povratne informacije, demonstracije i ukrasi. Pogledajmo svakog od njih i vidjet ćemo kako utječu na korisničko iskustvo.

pokaži mi sliku Mickeyja Mousea

01. Prijelazi

Prijelazi odvesti korisnike s mjesta na mjesto u informacijskom prostoru ili ih prebaciti iz jednog zadatka u drugi. Oni imaju velik utjecaj na sadržaj stranice, zamjenjujući velike dijelove informacija.

Web je izvorno zamišljen kao niz povezanih dokumenata. Klikom na vezu preglednik je obrisao zaslon, često uzrokujući kontrolni bljesak bijele boje, prije nego što je sljedeću stranicu obojao ispočetka. Iako je to imalo smisla u kontekstu povezanih dokumenata zasnovanih na tekstu, manje je smisla u eri u kojoj stranice dijele mnoge bogate elemente dizajna i pripadaju istoj domeni. Ne samo da je rasipanje resursa preglednika ponovnim stvaranjem istog izgleda stranice, već također povećava kognitivno opterećenje korisnika kada moraju preusmjeriti i preispitati sadržaj stranice.

Animacija, posebno pokret, može olakšati korisnikovu orijentaciju u informacijskom prostoru rasterećujući taj napor u vizualni korteks mozga. Korištenje prijelaza između promjena u tijeku zadataka ili lokacijama u informacijskoj arhitekturi idealno pojačava gdje je korisnik bio, kamo ide i gdje je sada u jednom naletu.

Na primjer, na Nikeovoj stranici SB Dunk (prikazano gore), kada korisnik klikne strelicu za navigaciju, trenutna tenisica pomakne se s puta, dok se sljedeća tenisica pomakne iz suprotnog smjera. Ti prijelazi jasno pokazuju korisniku kako se kreću linearnim kontinuumom tenisica, pomažući im da prate svoje mjesto i ojačavajući prostorni model pregledavanja stvarnog reda tenisica.

Na drugom mjestu cipela, John Fluevog, prijelazi premještaju korisnika od zadatka do zadatka (vidi gore). Nakon što korisnik počne tipkati u polje za pretraživanje, rezultati se animiraju na vrhu tamnije pozadine. To korisnika prebacuje iz konteksta pregledavanja u pročišćavanje rezultata pretraživanja, usmjeravajući mu fokus, a istovremeno ga uvjerava da se pregledavanju može vratiti bez puno napora.

02. Dodaci

Dodaci donose informacije na stranici ili izvan nje, ali ne mijenjaju korisnikovu 'lokaciju' ili zadatak. Oni obično dodaju ili ažuriraju dijelove dodatnog sadržaja na stranici.

Dok prijelazi korisnika premještaju iz stanja u stanje, dodatne animacije korisniku donose pomoćne informacije. Sjetite se kada se informacije koje se dopunjuju glavnom sadržaju stranice pojave ili nestanu na vidiku: upozorenja, padajući padajući i opisi alata dobri su kandidati za dodatnu animaciju na ulazu i izlasku.

Imajte na umu da ove animacije moraju poštivati ​​korisnikov Cone of Vision: hoće li gledati izravno opis koji se pojavljuje pored kursora ili će im pozornost trebati biti usmjerena na upozorenje na bočnoj strani tableta?

Kada korisnik doda proizvod u svoju košaricu na glossier.com, umjesto da ga odvede na potpuno novu stranicu košarice, web mjesto samo ažurira korisnika o sadržaju svoje košarice iskačući ga kao bočnu traku (gore). Iako bi prijelaz korisnika izbacio iz načina pregledavanja, ova dodatna animacija omogućuje korisniku da odbaci košaricu i nastavi s kupnjom.

Bočna traka košarice koristi dodatnu dodatnu animaciju za brzo i suptilno privlačenje pogleda korisnika: mjerač napretka postupno se puni kako bi pokazao koliko korisnik treba potrošiti da bi dobio besplatnu dostavu.

Ovaj postupak košarice ima treći uzorak animacije: gumb Dodaj u vrećicu klikom dobiva ikonu za okretanje koja daje povratne informacije o stanju učitavanja. Kad smo već kod povratnih informacija ...

03. Povratne informacije

Povratne informacije ukazuju na uzročno-posljedičnu vezu između dva ili više događaja, koja se često koristi za povezivanje interakcije korisnika s reakcijom sučelja.

Animacija korisnicima može dati izravne povratne informacije o njihovim interakcijama. Pritisnuti gumb, gesta prevlačenja - oboje povezuju ljudsku radnju s reakcijom sučelja. Ili obrnuta strana: okretač za učitavanje stranice označava da čekamo na računalu. Bez vizualnih povratnih informacija, ljudi se pitaju jesu li stvarno kliknuli taj gumb 'plati odmah' ili se stranica ipak zaista učitava.

Na web mjestu akvarija u Monterey Bayu, zadržavanje pokazivača iznad gumba uzrokuje da njegova boja pređe iz crvene u plavu, što ukazuje na to da je element interaktivan i spreman za reakciju na unos korisnika. Lebdenje gumba klasični je primjer za ovu vrstu animacije, dijelom i zato što je dobitak vizualnih povratnih informacija o gumbima korisnicima toliko mjerljiv i važan za poslovanje.

Web stranica dizajnerskog studija Animal koristi traku u boji na vrhu stranice, kao i animiranu verziju njegovog logotipa kako bi ukazala na stanje učitavanja i učitavanja stranice, istovremeno pružajući interes i pojačavajući svoj 'divlji' brand.

04. Demonstracije

Demonstracije objašnjavaju kako nešto funkcionira ili izlažu njegove detalje pokazujući umjesto kazivanja. Ovo je moja osobna omiljena uporaba animacije. Mogu biti zabavni i pronicljivi.

Te animacije stavljaju informacije u perspektivu, pokazuju što se događa ili kako nešto funkcionira. To demonstrativne animacije čini savršenim partnerima za infografiku. Sve što demonstrativne animacije rade je ispričati priču, kao što ćete vidjeti.

Stranice 'Obrada ...' prilika su da objasnite što se događa korisnicima dok čekaju. TurboTax dobro koristi ove stranice za obradu. Nakon što korisnici predaju američke porezne obrasce, on odagnava preostalu anksioznost pokazujući im kamo vode njihove informacije i što mogu očekivati ​​- a sve to jačajući prijateljski odnos i dostupnost njihove marke. (Također pomaže da animacija odvrati korisnike od prilično dugog učitavanja stranice nečim vizualno zanimljivim!).

Coin slavno koristi demonstrativne animacije kako bi znatiželjnim posjetiteljima objasnio vrijednost prijedloga svoje konsolidacijske kartice dok se kreću po web mjestu - nije potrebno pritisnuti tipku za reprodukciju i prolaziti kroz video oglas ili prolaziti kroz odlomke sadržaja izlagača. Ova je stranica suština suštine 'pokaži, ne govori'.

05. Ukrasi

Nije teško zamijeniti dekorativne animacije s demonstrativnim animacijama. No, postoji ključna razlika: tamo gdje demonstracije u sustav unose nove informacije, dekorativne animacije to ne čine. Oni su masti i šećeri animacijske prehrambene piramide: čine izvrsne pojačivače okusa, ali umjerenost je ključna.

Najbolji način da uočite čisto dekorativnu animaciju je pitati: „Što korisnik može naučiti iz ove animacije? Vodi li ih ovo ili im pokazuje nešto što inače ne bi znali? ' Ako je odgovor negativan, možda ćete na rukama imati ukrasnu animaciju.

Iako dobivaju loš rap, ukrasne animacije mogu pomoći da se obično pretvori u izvanredno. Web stranica revizionističke povijesti razborito koristi ukrasne animacije kako bi oživjela ravne ilustracije. Animacije dodaju taman toliko zanimanja da vizualni sadržaj na stranici bude strožiji, dopuštajući korisnicima da se usredotoče na podcast.

Polygon.com epski je koristio animirane ilustracije za stvaranje središnjih dijelova za seriju pregleda konzola. Ove ukrasne animacije možda nisu dodale nove informacije, ali presudno su ojačale marku Polygon. Također su pomogli da se svaki pregled konzole izdvoji od konkurencije koja je u to vrijeme imala nerazlučive fotografije istih uređaja.

Ovaj je članak isječak iz knjige Animacija na poslu Rachel Nabors - knjige s kratkim informacijama o knjizi koja vas vodi kroz anatomiju web animacija, uzoraka i komunikacijskih odluka među timovima. Kupite ga ovdje.

Čitaj više: