Animație web în era post-flash

În acest mediu extrem de competitiv, companiile caută frenetic modalități de a capta și reține atenția oamenilor. Pe măsură ce ne desfășurăm viața de zi cu zi, fluxul nesfârșit de stimulare vizuală care țâșnește la noi din reclamele animate de pe stradă, videoclipurile de pe telefoanele noastre mobile, ca să nu mai vorbim de fluxurile noastre de social media, creează un sentiment de mișcare constantă care luptă pentru atenția noastră.

Reacția de o fracțiune de secundă la mișcarea în mediul nostru a fost dezvoltată din nevoia de a supraviețui și declanșată de stimuli de mediu percepuți ca potențial amenințători sau dăunători; oamenii acordă o atenție sporită lucrurilor care se mișcă. Pe măsură ce surprindem ceva care se mișcă rapid cu coada ochiului, creierul ne alertează într-o fracțiune de secundă, deoarece creierul nostru subconștient a reacționat deja la pericol înainte ca mintea noastră conștientă să aibă timp să proceseze informația.

Agenții de publicitate știu acest lucru și de aceea avem reclame stradale animate la stațiile de autobuz și pe platformele de metrou, reclame video care apar în fluxurile rețelelor sociale și panouri electronice cu video în mișcare completă. Tehnica este un efect unu-două conceput pentru a transmite mesaje de marketing. În primul rând, prin captarea atenției noastre și, în al doilea rând, folosind videoclipuri și animații pentru a transmite mesajul.

Dacă o imagine statică valorează cât o mie de cuvinte, cât valorează o animație?

Aici intervine animația web. Designerii web speră să ne capteze și să ne rețină atenția și, poate, să adauge o zguduire neașteptată de încântare. Animația web poate fi folosită pentru a vizualiza diferiți pași dintr-un proces sau o idee complexă, pentru a ilustra un mesaj de marketing simplu sau pentru a muta lucrurile pe o pagină web într-un mod natural și fluid pe măsură ce oamenii derulează - din nou, pentru a atrage atenția asupra ceva.

Cum a început animația web, ascensiunea GIF-urilor

În primele zile ale World Wide Web, lucrurile erau destul de statice și plictisitoare. Paginile web s-au bazat în mare parte pe design grafic și machete din lumea tipăririi. Cu toate acestea, unii designeri au făcut un efort concertat – în ciuda provocărilor tehnice și de lățime de bandă – pentru a include forme timpurii de animație web pentru a le face mai dinamice și mai atractive. Una dintre primele adăugări ale unei animații GIF pe un site web a fost pe Batman Forever al lui Jeffrey Zeldman în 1995. Vizitatorii au fost întâmpinați de zborul lui Batman către ei, animat ca o secvență de imagini.

Site-ul promoțional Batman Forever a fost unul dintre cele mai populare site-uri la acea vreme. A inspirat alți designeri și dezvoltatori web să încorporeze animația web GIF ca element ciudat și atrăgător în site-urile lor web.

Derulați rapid 20 de ani și GIF-urile animate sunt acum peste tot. Sunt pe Twitter, Messenger, iMessage, WhatsApp, Skype, Instagram și Facebook. GIF-urile sunt potrivite pentru animații în bucle scurte, secvențe de imagini și chiar bucle video scurte. Un neajuns nefericit este că formatul de fișier GIF nu are transparență variabilă și nu acceptă un canal alfa; prin urmare, toți pixelii sunt fie complet opaci, fie complet transparenți.

Animațiile GIF au fost începutul unei renașteri în designul web, dar nu au fost ideale. Mai ales în primele zile ale accesului dial-up și vitezele reduse de internet, GIF-urile erau niște lățimi de bandă. Rezultatul a fost o secvență pixelată cu rezoluție scăzută. Dezavantajul pentru designeri care trebuie să comprima GIF-urile la cea mai mică dimensiune posibilă a fost o paletă limitată de 8 biți, care a dus la o mulțime de dithering. Acest lucru s-a schimbat odată cu internetul de mare viteză care a devenit mai obișnuit în secolul 21 și, în consecință, animația web a devenit mai bine aspectată cu milioane de culori și mai netedă cu rate de cadre mai mari.

Zorii animației web Flash

Marele boom al animației web a venit odată cu introducerea Flash în 1996, când Macromedia și-a anunțat pluginul web și instrumentul de animație bazat pe cadre însoțitor: Macromedia Flash (după ce au achiziționat FutureSplash Animator, un program de animație vectorială). Flash a jucat un rol principal în aducerea de noi capabilități pe web. De la sunet și animație până la interactivitate și video, Flash a ajutat la promovarea internetului.

Oportunitatea de a construi animații web simple, simple, bazate pe vectori pe site-uri întregi care au inclus interacțiuni, a creat ceea ce s-ar putea numi perioada „baroc” a designului web, cu (prea) multe elemente animate înghesuind peisajul. Cu toate acestea, Flash a oferit o privire asupra posibilităților de design web dinamic, eliberând designerilor să experimenteze și declanșând o perioadă de evoluție rapidă a designului web.

Animațiile flash sunt ușoare și relativ ușor de realizat. Cu o dimensiune de doar câțiva kiloocteți, acestea sunt distribuite în format de fișier SWF și un fișier care utilizează sunet cu grafică vectorială clară. Crearea de animații web a devenit un proces simplificat care nu a adăugat prea mult timpilor de încărcare a paginii web. Dar, cu toate acestea, a rămas un dezavantaj semnificativ - era necesar un plugin de browser pentru ca acesta să ruleze.

În plus, interacțiunea sofisticată în Flash a fost activată de ActionScript (AS), un limbaj de programare orientat pe obiecte similar cu JavaScript. ActionScript a fost conceput inițial pentru a controla animațiile vectoriale 2D simple, dar ulterior a evoluat într-un instrument sofisticat.

Din păcate, animația Flash nu a fost concepută pentru a răspunde, nu a funcționat bine pe toate dispozitivele și, în cele din urmă, a fost abandonată de pe toate dispozitivele mobile populare. În timp ce dimensiunea fișierului a fost relativ mică, Flash nu a fost bine optimizat și a ajuns să fie înfometat de procesor, ceea ce a fost o problemă și pe telefoanele mobile. Sfârșitul erei Flash a venit după ce Steve Jobs a decis să nu accepte Flash pe dispozitivele mobile Apple.

Flash a fost creat în epoca PC-ului - pentru computere și șoareci. Dar era mobilă se referă la dispozitive cu putere redusă, interfețe tactile și standarde web deschise - toate domeniile în care Flash nu este insuficient.

Steve Jobs

Animație web astăzi

Astăzi, deoarece Flash este învechit, avem nevoi diferite pentru animația web. Uneltele trebuie să fie flexibile și ușoare. Designerii web trebuie să creeze conținut receptiv și adaptabil pentru diferite dispozitive (desktop, tabletă și mobil), ținând cont de diferite dimensiuni ale ecranului, browsere, raporturi de aspect, densități de pixeli și multe altele. Capodoperele noastre de animație web trebuie să funcționeze pe un dispozitiv mobil de 5 inchi, 720 pixeli, până la o tabletă QXGA de 9,7 inchi și un ecran Retina 6K de 32 inchi.

Tehnologia a ajuns la un punct în care chiar și dispozitivele mobile cu putere redusă au lățimea de bandă și puterea de procesare pentru a gestiona animații web foarte solicitante și conținut video de înaltă rezoluție. Acest lucru nu înseamnă că site-urile ar trebui să fie foarte „ocupate”. Ca întotdeauna, este vorba despre atingerea echilibrului potrivit între animație, interacțiune dinamică și elemente statice. Faptul că putem implementa o mulțime de animații web de lux astăzi nu înseamnă că ar trebui.

Designerii/animatorii web trebuie să ia în considerare și suportul pe mai multe platforme. În urmă cu zece ani, designerii nu trebuiau să se asigure că creațiile lor vor arăta bine pe o gamă atât de largă de dispozitive. Trebuie luate în considerare diferitele rapoarte de aspect, orientări portret și peisaj, precum și diferite densități de pixeli și distanțe de vizualizare. Această enigma le prezintă designerilor web un set de noi provocări și potențiale capcane. Testarea utilizatorilor consumă timp prețios, mai multe lucruri ar putea merge prost pe o multitudine de platforme, iar animațiile web trebuie să fie mai detaliate ca niciodată.

HTML5, CSS3, JavaScript și SVG (grafică scalabilă) par a fi cele mai bune soluții pentru animația web. Utilizarea acestor tehnologii și limbi web moderne va ajuta la rezolvarea celor mai multe, dar nu a tuturor, problemelor de mai sus. Dar este întotdeauna o idee bună să călcați cu atenție, mai ales atunci când vă aflați pe un teritoriu neexplorat, iar QA și testarea extinse sunt obligatorii.

De ce să folosiți animația web?

Animația web poate capta și reține atenția oamenilor mai mult decât o pagină web statică și comunică o idee sau un concept mai clar și mai eficient. O animație web excelentă transmite o poveste în spatele fiecărei mișcări. Totul este să aduci o animație la viață cu sens și „suflet” (lat. anima).

Animația web ar trebui să fie fluidă, semnificativă și să sprijine călătoria vizitatorului. Designerul/animatorul web trebuie să fie conștient de modul în care animația se potrivește în experiența utilizatorului, să încerce să prezică fluxurile probabile de utilizatori și apoi să o susțină într-un mod semnificativ.

Designerii web nu trebuie să privească animația web dintr-o perspectivă pur tehnică; trebuie să-l privească din perspectiva utilizatorului.

Unul dintre lucrurile esențiale despre animație este sincronizarea. Timpul adecvat dă sens fizic și emoțional unei animații. Experiența ar trebui să fie perfectă și logică. Dacă animația nu este fluidă (are o problemă de sincronizare), oamenii ar putea să o perceapă ca un bug și să-și piardă toată motivația de a explora site-ul în continuare.

Animatorul trebuie să folosească sincronizarea adecvată pentru a oferi efectul dorit. Câte cadre cheie ar trebui folosite în animație? Ce fel de schimbare dinamică în animație se datorează interacțiunii vizitatorilor și cât de repede vine răspunsul după interacțiune? Este animația capricioasă, serioasă, distractivă?

Din punct de vedere logic, putem împărți animația web în două tipuri de bază:

• O animație web statică, neinteractivă, de exemplu, o animație GIF.
• O animație web dinamică, cu implicarea utilizatorului și interactivitate, care se modifică la intrarea utilizatorului.

Cel mai bun exemplu de animație dinamică este un joc, în care utilizatorii manipulează conținutul de pe ecran. Un alt exemplu simplu ar fi schimbarea poziției anumitor elemente pe măsură ce un vizitator al site-ului web defilează printr-un site web cu defilare paralaxă. Animația nu este pasivă, variază în funcție de acțiunile utilizatorului.

Animația web dinamică este adesea folosită pentru a prezenta infografice animate pe un site web, astfel încât oamenii să acorde mai multă atenție zonelor specifice în timp ce derulează pagina - este o modalitate puternică de a evidenția informații relevante.

Avantajele și dezavantajele animației web

Iată câteva avantaje și dezavantaje ale tehnicilor de animație web, inclusiv soluții vechi care nu mai sunt utilizate.

Ce zici de avantajele și dezavantajele animației web în general? Animația web bine executată poate părea în continuare deplasată, așa că este întotdeauna o idee bună să puneți câteva întrebări esențiale (precum și clienții testului și alți membri ai echipei) înainte de a continua să integrați animația în designul unui site web.

În primul rând, trebuie să verificăm modul în care animația va afecta experiența utilizatorului. Va îmbunătăți UX-ul site-ului? Designerii ar trebui să:

• Examinați designul site-ului web existent (dacă este disponibil)
• Verificați publicul țintă și platformele hardware pe care le folosesc
• Verificați timpii de încărcare a site-ului și încărcarea procesorului
• Explorați alte alternative
• Fii cu ochii pe uzabilitate

Nu este o idee bună să folosiți animația web pe un site pentru a urmări pur și simplu tendințele.

Decizia de a utiliza animația web ar trebui tratată ca orice altă decizie de proiectare; designerii web trebuie să cântărească argumentele pro și contra și să se asigure că experiența utilizatorului nu este compromisă. De asemenea, ar trebui să colaboreze cu dezvoltatorii pentru a stabili cerințele de cod și pentru a se asigura că nu vor rămâne blocați cu cod ineficient care ar putea trebui modificat ulterior.

Tehnologia modernă de animație web s-a maturizat semnificativ în ultimii 20 de ani – performanța, lățimea de bandă disponibilă și calitatea redării au crescut. Cu toate acestea, designerii ar trebui să meargă cu atenție și să adauge animație pe un site web numai dacă îmbunătățește semnificativ experiența utilizatorului.

Citiri suplimentare pe Blogul Toptal Design:

• Cum să creați animații personalizate de încărcare pentru a reduce ratele de respingere
• Crearea de ilustrații atrăgătoare cu Sketch și Looper în cel mai scurt timp
• Un ghid pas cu pas pentru animația UI cu principiu și schiță
• Inspirații de animație de logo pentru a face marca dvs. mai apropiată
• Un ghid pas cu pas pentru crearea de videoclipuri animate explicative de produs