Sugestii practice pentru îmbunătățirea gradului de utilizare a paginilor de destinație cu animație din diapozitive

(Acesta este o postare sponsorizată.) Pentru o lungă perioadă de timp, animația UI a fost o idee ulterioară pentru designeri. Chiar și astăzi, mulți designeri cred că animația este ceva care aduce încântare, dar nu îmbunătățește neapărat capacitatea de utilizare. Dacă împărtășiți acest punct de vedere, atunci acest articol este pentru dvs. Voi discuta despre modul în care animația poate îmbunătăți experiența utilizatorului a paginilor de destinație și voi oferi cele mai bune exemple de animație creată folosind cadrul Slides.

Cadrul Slides este un instrument ușor de utilizat pentru crearea de site-uri web. Permite oricui să creeze o pagină de destinație elegantă în câteva minute. Tot ce trebuie să faceți este să alegeți un design adecvat din lista de diapozitive predefinite.

Animația în patru moduri permite utilizarea paginilor de destinație

Designul paginii de destinație este mai mult decât o simplă prezentare vizuală; este vorba de interactiune. Detaliile de design de interacțiune fac o diferență fundamentală pe site-urile web moderne. Iar efectele animate pot întări interacțiunile. Pentru a îmbunătăți gradul de utilizare a unei pagini de destinație, o animație trebuie să fie un element funcțional, nu doar decor. Ar trebui să servească un scop funcțional clar. Mai jos sunt câteva modalități comune prin care animația poate îmbunătăți gradul de utilizare.

1. Creați o narațiune

Fiecare designer este un povestitor. Când creăm un site web, le spunem o poveste vizitatorilor noștri. Și este posibil să spui o poveste mult mai captivantă folosind animație.

Animația poate ajuta la aducerea conținutului la viață. Un exemplu bun de astfel de animație poate fi găsit pe Ikonet. Animația de acolo menține utilizatorii implicați în timp ce derulează pagina și învață despre companie.

Animația poate fi, de asemenea, folosită pentru a atrage atenția vizitatorului asupra ceva ce ar trebui să observe și asupra căruia ar trebui să acționeze. De exemplu, dacă aveți o secțiune importantă de text sau un îndemn, introducerea lor (în loc să apară) poate ajuta vizitatorii să înțeleagă unde ar trebui să se concentreze. Aruncă o privire la exemplul Preston Zeller de mai jos. Modul în care apar elementele pe pagini conduce utilizatorul să se concentreze asupra acestor zone. Lucrul grozav la această animație este că atrage atenția asupra informațiilor importante fără a fi perturbatoare.

2. Oferiți feedback

Interacțiunea om-calculator se bazează pe două elemente fundamentale: intrarea utilizatorului și feedback-ul sistemului. Toate obiectele interactive ar trebui să reacționeze la intrarea utilizatorului cu feedback vizual sau audio adecvat.

Mai jos puteți vedea efectul Casetă de selectare personalizată creat folosind cadrul Slides. Animația subtilă de sărituri pe care utilizatorul o vede atunci când schimbă starea comutatorului întărește sentimentul de interactivitate.

Cu Slides, puteți crea animații frumoase de trecere cu mouse-ul și puteți încuraja utilizatorii să interacționeze cu obiectele. Aruncă o privire la Berry Visual. Când treceți mouse-ul pe „Trimiteți mesaj” sau pe meniul hamburger din colțul din dreapta sus, apare un efect animat frumos. Se creează un sentiment că aceste elemente sunt interactive.

Buf Antwerp este un alt exemplu excelent al modului în care feedback-ul animat la hover poate îmbunătăți experiența utilizatorului. Când vizitatorii trec cu mouse-ul peste o placă, apare o suprapunere semi-transparentă, iar textul oferă informații suplimentare despre articol.

3. Creați relații

Un loc minunat pentru a adăuga animație la o pagină de destinație este în momentele de schimbare. Prea des, momentele de schimbare sunt abrupte &mdahs; de exemplu, când utilizatorii dau clic pe un link, apare brusc un nou ecran. Deoarece schimbările bruște sunt greu de procesat de către utilizatori, astfel de modificări duc de obicei la o pierdere a contextului - creierul trebuie să scaneze noua pagină pentru a înțelege modul în care noul context este conectat la cel precedent.

Luați în considerare acest exemplu de schimbare bruscă:

Comparați asta cu următorul exemplu, în care o tranziție animată lină ghidează utilizatorul către diferitele părți ale ecranului:

Este clar că în al doilea exemplu, animația previne schimbarea bruscă - umple golul și conectează două etape. Drept urmare, vizitatorii înțeleg că cele două etape aparțin împreună. Acest principiu se aplică în mod egal atunci când aveți o relație părinte-copil între două obiecte:

Se aplică și atunci când creați o tranziție între etape. Tranzițiile line între diapozitive din exemplul de mai jos creează un sentiment de secvență, mai degrabă decât părți separate ale paginii care nu au legătură.

4. A face sarcini plictisitoare distractive

Ar putea fi dificil de imaginat cum să introduci elemente jucăușe în experiențele de zi cu zi. Dar adăugând un pic de surpriză acolo unde este cel mai neașteptat, putem transforma o interacțiune familiară în ceva neașteptat și, astfel, memorabil.

Când vizitați Expoziția 3D Room a lui Tympanus, arată ca orice alt site web de galerie pe care l-ați vizitat înainte. Dar impresia ta despre site se schimbă imediat odată ce interacționezi cu o pagină. Pe măsură ce mutați cursorul, pagina se mișcă și acest efect creează o senzație de spațiu 3D. Acest sentiment este întărit atunci când treci de la o pagină la alta; se pare că călătoriți dintr-o cameră în alta într-un spațiu 3D.

Acum să vorbim despre ceva mult mai familiar decât efectele 3D: formularele web. Cui îi place să completeze formulare? Probabil nimeni. Cu toate acestea, completarea formularelor este una dintre cele mai comune sarcini de pe web. Și este posibil să transformi această activitate plictisitoare într-un exercițiu distractiv. Aruncă o privire la personajul Yeti al lui Darin Senneff, care este folosit într-o formă. Când utilizatorul începe să-și tasteze parola, mascota își acoperă ochii. Un astfel de efect animat aduce multă încântare când îl vezi pentru prima dată.

Nu în ultimul rând, este posibil să faceți experiența de defilare nu doar mai interesantă din punct de vedere vizual, ci și utilă pentru cititori. Mai jos este Storytelling Map, o călătorie interactivă în care o cale de-a lungul unei hărți este animată în funcție de conținutul derulat pe pagină. Ideea leagă textul, imaginile și locațiile împreună; vizitatorii citesc informațiile și o văd în contextul hărții).

Șase bune practici pentru animația paginii de destinație

Identificarea locurilor în care animația are utilitate este doar jumătate din poveste. De asemenea, designerii trebuie să implementeze animația în mod corespunzător. În această secțiune, vom afla cum să animați ca un profesionist.

1. Nu animați mai multe elemente deodată

Când câteva obiecte sunt animate simultan, devine distragerea atenției utilizatorilor. Deoarece creierul și ochiul uman sunt cablate pentru a acorda atenție obiectelor în mișcare, focalizarea utilizatorului va sări de la un element la altul, iar creierul va avea nevoie de timp suplimentar pentru a-și da seama ce tocmai s-a întâmplat (mai ales dacă mișcarea are loc foarte repede). Prin urmare, este important să programați animațiile corect.

Este vital să înțelegem conceptul de coregrafie de tranziție: succesiunea coordonată de mișcări care mențin concentrarea vizitatorului pe măsură ce interfața se schimbă. Minimizați numărul de elemente care se mișcă independent; doar câteva lucruri ar trebui să se întâmple în același timp (de obicei, nu mai mult de două sau trei). Astfel, dacă doriți să mutați mai mult de trei obiecte, grupați unele obiecte împreună și transformați-le ca o singură unitate, în loc să le animați independent.

Slide-urile oferă un avantaj excelent designerilor web: îi împiedică să utilizeze excesiv mișcarea în design. Fiecare efect animat disponibil în Slides a fost proiectat cu atenție pentru a oferi conținut în cel mai bun mod posibil.

2. Animația nu ar trebui să intre în conflict cu personalitatea paginii de destinație

De fiecare dată când adăugați animație unui design, introduceți personalitate. Această personalitate va depinde în mare măsură de efectul animat pe care alegeți să îl utilizați.

Când oamenii interacționează cu un produs, au anumite așteptări. Imaginați-vă că proiectați o pagină de destinație pentru un serviciu bancar și vă decideți să utilizați o animație care să revină pentru a introduce un formular care colectează informațiile personale ale utilizatorului. Mulți utilizatori vor ezita să furnizeze detaliile lor, deoarece formularul intră în conflict cu așteptările lor.

Cadrul Slides vă permite să alegeți dintre 10 stiluri animate, cum ar fi Stack, Zen, Film, Cards și Zoom. Experimentați cu diferite efecte și alegeți ceea ce este mai potrivit pentru cazul dvs.

3. Urmăriți Timpul

Când vine vorba de proiectarea animației, sincronizarea este totul. Momentul animației dvs. poate însemna diferența dintre o interacțiune bună și una proastă. Când lucrați la animație, veți petrece de obicei o treime din timp găsind efectele animate potrivite, iar celelalte două treimi găsind momentul potrivit pentru a face animația să se simtă netedă.

În general, păstrați animația scurtă. Animația nu ar trebui să împiedice utilizatorul să finalizeze o sarcină, deoarece chiar și cea mai frumos executată animație ar fi cu adevărat enervantă dacă îi încetinește pe utilizatori. Viteza optimă pentru o animație UI este între 200 și 500 de milisecunde. O animație care durează mai puțin de 1 secundă este considerată instantanee, în timp ce o animație mai lungă de 5 secunde poate transmite un sentiment de întârziere.

Când vine vorba de crearea unui efect animat, un parametru are un impact direct asupra modului în care este percepută animația: funcția de relaxare sau sincronizare în termeni CSS. Ușurarea îi ajută pe designeri să facă mișcarea mai naturală.

Cadrul Slides permite designerilor web să personalizeze facilitarea. Veți găsi relaxare împreună cu alte efecte în secțiunea „Setări efecte”.

4. Gândiți-vă la accesibilitate

Animația este o sabie cu două tăișuri. Poate îmbunătăți gradul de utilizare pentru un grup de utilizatori, provocând în același timp probleme pentru alt grup. Lansarea de către Apple a iOS 7 a fost un exemplu recent al acestuia din urmă. iOS 7 era plin de efecte animate, iar la scurt timp după lansare, utilizatorii de iPhone au raportat că tranzițiile animate îi făceau să se simtă amețiți.

Responsabilitatea ta ca designer este să te gândești la modul în care oamenii cu tulburări de vedere vor interacționa cu designul tău. Verificați regulile WCAG privind animația și asigurați-vă că designul dvs. se aliniază cu acestea. Urmăriți dacă un utilizator dorește să minimizeze cantitatea de animație sau mișcare. O caracteristică media CSS specială, „prefers-reduced-motion”, detectează dacă utilizatorul a cerut ca sistemul să minimizeze cantitatea de animație sau mișcare utilizată. Când este setat la „reduce”, atunci este mai bine să minimizați cantitatea de mișcare și animație (de exemplu, prin eliminarea tuturor mișcărilor neesențiale).

De asemenea, efectuați teste de utilizare pentru a verifica dacă utilizatorii vor avea toate abilitățile, inclusiv persoanele cu tulburări de vedere, nu vor avea nicio problemă în a interacționa cu designul dvs.

5. Prototipați și testați-vă deciziile de proiectare

Este distractiv de jucat cu animația. Este ușor să treceți peste bord și să ajungeți la un design care copleșește utilizatorii cu prea multă mișcare. Din păcate, nu există niciun glonț de argint pentru o animație grozavă; este greu de stabilit criterii clare pentru ceea ce este „doar suficient”. Fiți gata să petreceți timp pentru prototiparea, testarea și optimizarea efectelor animate.

Iată câteva sfaturi care merită luate în considerare în timpul testării:

• Testați pe hardware diferit.
  Mulți factori hardware pot afecta drastic performanța animației: dimensiunea ecranului, densitatea ecranului, performanța GPU-ului, pentru a numi doar câțiva. Ca rezultat, un utilizator de pe un ecran de înaltă definiție poate avea o experiență complet diferită de un utilizator de pe un ecran mai vechi. Luați în considerare astfel de factori atunci când proiectați animația pentru a preveni blocajele de performanță. Nu da vina pe hardware-ul lent; optimizați-vă animația pentru a funcționa excelent pe tot felul de dispozitive.
• Testează pe mobil.
  Majoritatea site-urilor web sunt construite și testate pe un desktop; experiența mobilă și performanța animației sunt adesea tratate ca o idee ulterioară. Lipsa testării pe mobil ar putea cauza o mulțime de probleme utilizatorilor de telefonie mobilă, deoarece unele tehnici animate funcționează excelent pe desktop, dar nu la fel de bine pe mobil. Pentru a evita o experiență negativă, confirmați că designul dvs. funcționează bine atât pe desktop, cât și pe mobil. Testați devreme și des pe mobil.
• Urmăriți animația cu o viteză mică.
  Ar putea fi greu de observat probleme atunci când o animație (în special una complexă) rulează la viteză maximă. Când încetiniți animația (să zicem, cu o zecime din viteză), astfel de probleme devin evidente. Puteți, de asemenea, să înregistrați videoclipuri cu încetinitorul animațiilor dvs. și să le arătați altor persoane pentru a obține alte perspective.

Cu cadrul Slides, puteți crea un prototip interactiv de înaltă fidelitate în câteva minute. Puteți folosi un editor WYSIWYG pentru a crea efecte animate, a publica designul și a vedea cum funcționează atât pe desktop, cât și pe dispozitive mobile.

6. Animația nu ar trebui să fie o idee ulterioară

Există un motiv pentru care atât de mulți designeri cred că animația este o caracteristică inutilă care supraîncărcă interfața cu utilizatorul și o face mai complicată. În cele mai multe cazuri, acest lucru este adevărat atunci când designerii introduc animația la sfârșitul procesului de proiectare, ca ruj pentru design - cu alte cuvinte, animație de dragul animației. Mișcarea aleatorie fără niciun scop nu va aduce prea mult beneficii vizitatorilor și poate distrage și enerva cu ușurință atenția.

Pentru a face o animație semnificativă, acordați-vă timp la începutul proiectului pentru a vă gândi la zonele în care animația s-ar potrivi în mod natural. Numai în acest fel animația va fi naturală pentru fluxul utilizatorului.

Concluzie

O animație funcțională bună face o pagină de destinație nu doar mai atrăgătoare, ci și mai utilizabilă. Când este realizată corect, animația poate transforma o pagină de destinație dintr-o secvență de secțiuni într-o experiență memorabilă atent coregrafiată. Cadrul Slides îi ajută pe designerii web să folosească animația pentru a comunica clar.