Convingător și în mișcare – Un ghid pentru principiile de proiectare a mișcării

Mișcarea are un impact profund asupra experienței utilizatorilor a produselor digitale, dar dacă elementele de interfață nu prezintă principiile de bază ale designului de mișcare, capacitatea de utilizare este subminată. În contextul interfețelor cu utilizatorul, mișcarea este mai mult decât o garnitură vizuală. Este o forță convingătoare care întărește angajamentul cu produsul și extinde raza de comunicare a designului.

Lumea noastră este una a mișcării. Chiar și în momentele nemișcate, frunzele tremură, iar plămânii se extind. În domeniul designului de produse digitale, s-ar părea că mișcarea este a doua natură, o extensie a cotidianului care trebuie valorificată cu puțin efort. De-ar fi adevărat.

Întrebați pe oricine care are elemente animate de UI pentru prima dată. Ore de efort dau rezultate amatori. Ceva la fel de simplu ca alunecarea unui card pe ecran pare ciudat. De ce este asta?

În teorie, a face mișcarea elementelor UI este ușor. Definiți puncte pe o cale predeterminată, iar software-ul interpola golurile. În realitate, nu funcționează așa. Instrumentele și tehnicile sunt esențiale, dar își derivă puterea din principii. Dacă mișcarea urmărește să sporească capacitatea de utilizare a produselor digitale, ea trebuie să se bazeze pe reguli de comportament neschimbate care se aplică unui număr infinit de cazuri de utilizare.

Originile designului în mișcare

Căsătoria dintre motion design și UX este relativ nouă, dar rădăcinile sale sunt în Disney. Frank Thomas și Ollie Johnston s-au numărat printre cei mai apreciați animatori ai Walt Disney și contribuitori cheie la clasici precum Pinnochio , Bambi și Fantasia . Cele 12 principii de bază ale animației rămân influente în grafica în mișcare pentru film, televiziune și conținut digital.

Principiile Disney distilează legile esențiale ale mișcării fizice de dragul povestirii animate. Acestea permit personajelor desenate să se miște și să emoționeze, dar nu răspund în mod adecvat nevoilor de mișcare interactivă ale interfețelor moderne de utilizator.

Designerii contemporani au încercat să reducă acest decalaj. Unul dintre exemplele mai ilustrative este Cele 10 principii ale designului în mișcare , o adaptare Disney realizată de expertul în animație Jorge R. Canedo Estrada. Totuși, concluziile necesită traducere dacă urmează să fie aplicate holistic în designul produselor digitale.

Cea mai ambițioasă încercare de a reorienta principiile mișcării în jurul elementelor UI interactive (și semnificația lor UX) este Manifestul UX în mișcare al Issarei Willenskomer. Adâncimea sa este uluitoare, dar nu este o lectură ușoară.

În stabilirea celor 12 principii ale UX în mișcare , Willenskomer:

• Distinge designul în mișcare de animația UI
• Articulează modul în care mișcarea ajută la utilizare
• Desface funcționarea interioară a comportamentelor de mișcare de bază

Motion Design și UX: distincții importante

Înainte de a aborda principiile designului în mișcare, este important să evidențiem distincțiile cheie care apar în manifestul lui Willenskomer.

Mișcarea este mai mult decât ornamentație

Motion Design nu este sinonim cu animația UI. Acest lucru este crucial, deoarece animația UI este aproape întotdeauna tratată ca o idee cosmetică ulterioară, fără nicio influență asupra UX (cu excepția faptului că adaugă farmec). Mișcarea nu este ornamentație, este comportament, iar comportamentele pot doar să ajute sau să împiedice experiența utilizatorului.

Două tipuri de interacțiuni: în timp real vs. în timp nereal

Motion Design se referă la două interacțiuni fundamentale: în timp real și în timp non-real.

• Interacțiunile în timp real oferă feedback imediat atunci când utilizatorii manipulează elementele UI de pe ecran. Cu alte cuvinte, comportamentele de mișcare răspund instantaneu la intrarea utilizatorului.
• Interacțiunile care nu sunt în timp real apar după introducerea utilizatorului, ceea ce înseamnă că utilizatorii trebuie să întrerupă o scurtă pauză și să urmărească comportamentul de mișcare rezultat înainte de a continua.

Mișcarea permite utilizarea

Motion Design trebuie să susțină utilizarea în patru moduri distincte.

• Așteptări: când utilizatorii interacționează cu elementele UI, ce comportamente de mișcare se așteaptă să vadă? Mișcarea satisface așteptările sau provoacă confuzie?
• Continuitate: Interacțiunile produc comportamente consistente de mișcare pe parcursul experienței utilizatorului?
• Narațiune: Interacțiunile și comportamentele de mișcare pe care le declanșează sunt legate de o progresie logică a evenimentelor care satisface intenția utilizatorului?
• Relație: cum se leagă între ele atributele spațiale, estetice și ierarhice ale elementelor UI și influențează luarea deciziilor utilizatorilor? Cum afectează mișcarea diferitele relații de elemente care există?

12 Principii Motion Design pentru produse digitale

1. Ușurarea

Ușurarea imită modul în care obiectele din lumea reală accelerează și încetinesc în timp. Se aplică tuturor elementelor UI care prezintă mișcare.

Opusul relaxării este mișcarea liniară. Elementele UI care afișează mișcare liniară trec de la staționar la viteză maximă și de la viteză maximă la staționare, instantaneu. Un astfel de comportament nu există nicăieri în lumea fizică și pare opritor pentru utilizatori.

2. Offset și Întârziere

Când mai multe elemente ale UI se mișcă în același timp și viteză, utilizatorii tind să le grupeze și să treacă cu vederea posibilitatea ca fiecare element să aibă propria sa funcționalitate.

Offset și întârziere creează ierarhie între elementele UI care se mișcă în același timp și comunică faptul că sunt legate, dar distincte. În loc de sincronizare completă, sincronizarea, viteza și distanța dintre elemente sunt eșalonate, rezultând un efect subtil „unul după altul”.

Pe măsură ce utilizatorii călătoresc între ecrane, compensarea și întârzierea semnalează că există mai multe opțiuni de interacțiune.

3. Părinte

Parenting leagă proprietățile unui element UI de proprietățile altora. Când o proprietate din elementul părinte se modifică, se schimbă și proprietățile legate ale elementelor copil. Toate proprietățile elementelor pot fi legate între ele.

De exemplu, poziția unui element părinte poate fi legată de scara unui element copil. Când elementul părinte se mișcă, elementul copil crește sau scade în dimensiune.

Parenting creează relații între elementele UI, stabilește ierarhia și permite mai multor elemente să comunice cu utilizatorii simultan. Din acest motiv, parentingul are cel mai mare impact atunci când este utilizat în interacțiuni în timp real.

4. Transformare

Transformarea are loc atunci când un element UI se transformă în altul. De exemplu, un buton de descărcare se transformă într-o bară de progres, care se transformă într-o pictogramă de finalizare.

Din perspectiva UX, transformarea este o modalitate eficientă de a arăta utilizatorilor statutul lor în raport cu un obiectiv (Vizibilitatea stării sistemului). Acest lucru este util în special atunci când progresia dintre elementele UI este legată de un proces cu un început și o sfârșit (de exemplu, descărcarea unui fișier).

5. Schimbarea valorii

Reprezentările valorii (numerice, bazate pe text sau grafice) sunt abundente în interfețele digitale, apărând în produse, de la aplicații bancare la calendare personale până la site-uri de comerț electronic. Deoarece aceste reprezentări sunt legate de seturi de date care există în realitate, ele pot fi modificate.

Schimbarea valorii comunică natura dinamică a reprezentărilor datelor și informează utilizatorii că datele sunt interactive și pot fi influențate într-o oarecare măsură. Când valorile sunt introduse fără mișcare, dorința utilizatorilor de a se implica cu datele scade.

6. Mascarea

Mascarea este dezvăluirea și ascunderea strategică a unor părți ale unui element UI. Alterând forma și scara perimetrului unui element, mascarea semnalează o schimbare a utilității, permițând în același timp elementului în sine să rămână identificabil. Din acest motiv, imaginile detaliate precum fotografiile și ilustrațiile sunt candidații ideali.

Din perspectiva utilizabilității, designerii pot implementa mascarea pentru a le arăta utilizatorilor că progresează printr-o serie de interacțiuni.

7. Suprapunere

În spațiul 2D, nu există adâncime, iar elementele UI se pot deplasa doar de-a lungul axei X sau Y. Suprapunerea creează iluzia distincției prim-plan/fond în spațiul 2D al interfețelor de utilizare. Prin simularea adâncimii, suprapunerea permite ca elementele să fie ascunse și dezvăluite în funcție de nevoile utilizatorului.

Ierarhia informațiilor este un aspect important atunci când se utilizează suprapunerea. De exemplu, primul lucru pe care utilizatorii ar trebui să-l vadă într-o aplicație de luare de note este o listă cu notele lor. Apoi, suprapunerea ar putea fi folosită pentru a dezvălui opțiuni secundare pentru fiecare mesaj, cum ar fi Ștergerea sau Arhivarea .

8. Clonarea

Clonarea este un comportament de mișcare în care un element UI se împarte în altele. Este o modalitate inteligentă de a evidenția informații importante sau opțiuni de interacțiune.

Atunci când elementele UI se materializează într-o interfață, au nevoie de un punct de origine clar care să se conecteze la un element deja pe ecran. Dacă elementele pur și simplu izbucnesc sau dispar în existență de nicăieri, utilizatorilor le lipsește contextul necesar pentru interacțiuni încrezătoare.

9. Întunecare

Imaginează-ți o ușă din sticlă mată. Este nevoie de interacțiune pentru a se deschide, dar este posibil să discerneți (într-o oarecare măsură) ce așteaptă de cealaltă parte.

Obturarea funcționează în același mod. Prezintă utilizatorilor o interfață care solicită interacțiune, dezvăluind simultan un indiciu al ecranului de urmat. Meniurile de navigare, ecranele cu coduri de acces și ferestrele de foldere/fișier sunt exemple comune.

10. Paralaxa

Paralaxa este afișată atunci când două (sau mai multe) elemente UI se mișcă în același timp, dar cu viteze diferite. Din nou, intenția este stabilirea ierarhiei.

• Elementele interactive se mișcă mai repede și apar în prim-plan.
• Elementele non-interactive se mișcă mai încet și se retrag în fundal.

Parallax îndreaptă utilizatorii către elementele interactive de utilizare, permițând în același timp elementelor neinteractive să rămână pe ecran și să păstreze unitatea designului.

11. Dimensionalitatea

Dimensionalitatea face să pară că elementele UI au mai multe laturi interactive, la fel ca obiectele din lumea fizică. Comportamentul se realizează făcând elementele să pară ca și cum ar fi pliabile, răsturnabile, plutitoare sau conferite cu proprietăți realiste de adâncime.

Ca dispozitiv narativ, dimensionalitatea implică faptul că diferitele părți ale unui element de interfață de utilizare sunt legate și asigură tranziții fără întreruperi ale ecranului.

12. Dolly și Zoom

Dolly și zoom le permit utilizatorilor să „călătorească” prin elementele UI în spațiu sau să își mărească scara pentru a dezvălui niveluri mai mari de detalii.

• Dolly: Dolly apare atunci când punctul de vedere al utilizatorului se apropie mai mult de (sau mai departe de) un element UI. Imaginați-vă o persoană cu o cameră care se apropie de o floare pentru a obține o fotografie mai aproape.
• Zoom: Cu zoom, punctul de vedere al utilizatorului și elementul UI rămân fixe, dar elementul crește (sau scade) în dimensiune în ecranul utilizatorului. Acum imaginați-vă că persoana rămâne pe loc și folosește funcția de zoom a camerei pentru a face floarea să pară mai mare.

Mișcarea este comunicare

Experiențele interactive necesită mișcare în toate formele sale subtile și subtile. Când sunt susținute principiile designului în mișcare, chiar și cele mai rudimentare elemente ale UI devin agenți sofisticați ai comunicării umane. Când principiile sunt ignorate, mișcarea întruchipează caracteristici care nu se găsesc în lumea naturală. Nici o cantitate de splendoare estetică nu poate învinge stângăcia rezultată.

Relația dintre designul în mișcare și UX-ul produselor digitale se maturizează rapid. O abordare bazată pe principii a mișcării previne dependența excesivă de utilitatea trecătoare a tendințelor, instrumentelor și tehnicilor. Mai bine, se întinde diferența dintre mișcarea abstractă a elementelor pe ecranele 2D și percepția mișcării într-o lume 3D.

Spune-ne ce crezi! Vă rugăm să lăsați mai jos gândurile, comentariile și feedback-ul dvs.

• • •

Citiri suplimentare pe Blogul Toptal Design:

• Animație web în era post-flash
• The Designer's Edge – O prezentare generală a pluginurilor Photoshop
• UX Design Trends Retrospectiva 2019
• Familiarizarea – Un ghid pentru fluxurile de integrare a utilizatorilor
• Principii Mobile UX Design