Viața în mișcare: un ghid pentru animarea vizualizărilor de date mobile

Publicat: 2022-07-22

În zilele noastre, cu tehnologia care conduce la colectarea și producerea de cantități masive de date, este relativ ușor să puneți mâna pe informații care vă pot ghida deciziile zilnice. Aplicațiile mobile se bazează pe ritmul cardiac și alte date biometrice pentru a urmări obiectivele de sănătate și exerciții fizice. Ele oferă date în timp real despre investiții, cheltuieli personale și bugetare. Ei pot chiar ajuta părinții să evalueze modelele de hrănire și somn ale nou-născuților.

Pentru a înțelege volumul imens de date disponibile, nu căutați mai departe decât rapoartele anuale ale designerului Nicholas Felton, construite din propriile sale date personale. Cu atât de multe informații la îndemână, partea grea este să le înțelegi.

Aici poate ajuta animația. Animarea datelor le face mai inteligibile, captivante și mai utile, în special pe ecranele mici ale dispozitivelor mobile. Cu animație, numerele devin mai ușor de digerat și devin evidente tendințele, modelele și narațiunile trecute cu vederea. Interactivitatea în timp real cu aceste elemente vizuale promovează implicarea și permite utilizatorilor să exploreze datele mai profund.

În același timp, animația excesivă sau greșită își poate înfrânge scopul, mai degrabă ascundând decât luminând perspectivele. La animarea vizualizărilor de date mobile, designerii ar trebui să utilizeze principiile de proiectare în mișcare și să evite capcanele comune.

Beneficiile animarii vizualizărilor de date mobile

Animația nu este o simplă înfrumusețare a vizualizărilor de date. Mișcarea oferă nenumărate beneficii și ar trebui aplicată cu scopul de a obține un rezultat specific.

Ajutarea utilizatorilor să perceapă tendințele și schimbările este un avantaj cheie al utilizării mișcării în vizualizările de date. Defunctul universitar Hans Rosling este cunoscut pentru o animație în care a trasat datele privind durata de viață și veniturile pentru a arăta schimbările în sănătate și bogăție pentru zeci de țări de-a lungul deceniilor. Este o animație captivantă care clarifică tendințele de-a lungul timpului și contracarează percepțiile comune despre dezvoltarea globală.

Un clip din „Cele 200 de țări ale lui Hans Rosling, 200 de ani, 4 minute – Bucuria statisticilor” prin intermediul BBC Four.

Cercetările sugerează că animarea diagramelor statice poate îmbunătăți percepția grafică și poate crește interesul privitorului. În loc să afișeze o diagramă dintr-o dată, de exemplu, elementele pot intra cu viteze diferite pentru a nu copleși privitorul cu prea multe informații. Mișcările „ajută să arate sau să îmbunătățească ierarhia vizuală a elementelor, sau orientarea axelor și modul în care sunt afișate datele”, spune Tetiana Donska, un designer UI/UX din Londra din rețeaua Toptal.

De asemenea, animația îi ajută pe designeri să folosească eficient ecranele dispozitivelor mobile. „Mișcarea în vizualizările datelor ajută la conștientizarea tranzițiilor între diferite stări și oferă mai multe informații fără a aglomera experiența utilizatorului”, spune Donska. Interactivitatea în timp real poate menține în continuare o interfață curată, deoarece utilizatorii pot explora datele prin gesturi precum atingerea, glisarea, derularea și mărirea. De exemplu, utilizatorii pot glisa un deget de-a lungul unei axe pentru a dezvălui diferite valori sau pot atinge pentru a dezvălui numere.

Încorporarea actualizărilor în timp real în vizualizările de date animate le poate face și mai atractive pentru utilizatori. Olajide Akinpelu, un designer Toptal UI/UX cu sediul în Nigeria, spune că vedea actualizarea datelor în fața ochilor noștri ajută la cunoașterea umană. Un utilizator care reîmprospătează date statice va avea mai greu să detecteze modificările; mișcarea în timp real îi ajută să identifice perspective pe care altfel le-ar putea rata.

Desigur, este mai ușor de spus decât de făcut ca tranzițiile și mișcările să pară naturale fără a distrage atenția utilizatorului.

Tehnici de animație și vizualizare a datelor pentru mobil

Vizualizarea datelor nu se limitează la seturi de date complexe reprezentate de diagrame și grafice tradiționale. Chiar și un buton „like” care reflectă sentimentele utilizatorilor pe o aplicație socială este o modalitate de a vizualiza datele.

Indiferent de complexitate, un set comun de principii și tehnici intră în joc la animarea vizualizărilor de date. Cele patru tehnici asupra cărora ne concentrăm în acest articol — schimbarea valorii; relaxarea, compensarea și întârzierea; parenting; și zoom - urmărește să îmbunătățească mișcarea în mediul UX cu naturalețea mișcării în lumea reală, conformându-se așteptărilor înnăscute ale utilizatorilor și simțurilor de continuitate și narațiune. Scopul, la urma urmei, este de a ajuta utilizatorii să înțeleagă datele abstracte, nu doar de a-i implica sau de a-i încânta.

Patru tehnici de proiectare a mișcării aranjate într-o grilă. Sub „Modificarea valorii”, barele dintr-un grafic cresc și scad. Sub „Ușurare, compensare și întârziere”, două cercuri sunt umbrite în procente diferite, care cresc și descresc la viteze diferite. În „Parenting”, mutarea unui punct pe un grafic liniare dezvăluie modificările valorii. Sub „Mărire”, o lupă mărește pe un punct de pe o hartă. — Aceste patru tehnici comune de proiectare a mișcării pot fi aplicate vizualizărilor de date animate pe mobil.

Schimbarea valorii

Când se afișează modificările valorii cu animație, în loc să se afișeze un număr static, un numărător numeric bifează în sus sau o bară se ridică înainte de a ateriza pe o cifră finală. Aceasta poate fi o modalitate puternică de a transmite progresul sau creșterea – sau lipsa acestora. De asemenea, înseamnă că datele sunt supuse modificării și, în unele cazuri, valorile animate indică interactivitate.

Un tablou de bord cu scorul de credit pe care scrie „Top of the Charts”. Un contor circular este animat să crească de la 300 la 850, care este scorul de credit curent al utilizatorului. Pe măsură ce numerele cresc, acestea trec de la roșu la verde. — Schimbările de valoare permit utilizatorilor să vadă impactul comportamentului lor. Asiwal aspru

Vizualizările schimbării valorii sunt predominante în peisajul mobil, inclusiv în aplicațiile de fitness, educație și finanțe. Într-o aplicație de învățare a limbilor străine, de exemplu, o bară se poate ridica treptat până la obținerea unui scor final la un test. Schimbarea valorii arată progres și poate oferi utilizatorului un sentiment de realizare, încurajându-l să continue o cale de învățare.

Aplicarea modificării valorii liniilor dintr-o diagramă este o altă modalitate de a demonstra schimbările în timp. Într-o diagramă cu bare care arată produsul intern brut (PIB) al diferitelor țări, de exemplu, mișcarea poate dezvălui traiectorii economiilor naționale una față de alta. Astfel de elemente vizuale sunt numite curse cu diagrame cu bare.

Ușurare, compensare și întârziere

În lumea fizică, un obiect nu poate trece instantaneu de la zero la 20 mph. În lumea digitală, totuși, puteți crea mișcare fără accelerare sau decelerare. Dar asta nu înseamnă că ar trebui. Pentru ochiul uman, o astfel de mișcare pare nenaturală, motiv pentru care este benefic să oferim elementelor grafice viteze naturale de intrare și ieșire - cunoscute sub numele de relaxare.

Compensarea introducerii diferitelor elemente de UI și amânarea vitezei acestora poate semnala și mai mult utilizatorilor că sunt afișate variabile distincte și poate ajuta la stabilirea unei ierarhii între ele. Într-o aplicație de tranzacționare cu acțiuni, de exemplu, valoarea acțiunilor unui utilizator poate apărea mai întâi urmată de cele ale indicilor generali. Compensarea și întârzierea facilitează pentru utilizatori să înțeleagă numerele și diagramele decât dacă ar fi prezentate toate odată.

O animație care arată diferite tablouri de bord într-o aplicație de finanțe personale. Primul tablou de bord arată soldul total al utilizatorului, suma cheltuită pe zi și o diagramă circulară care evidențiază o categorie („Divertisment”) în raport cu cheltuielile totale. Următorul ecran arată ofertele în tendințe și achizițiile de acțiuni recomandate. Al treilea tablou de bord arată cheltuielile și cheltuielile lunare totale ale utilizatorului în trei categorii majore: chirie, îmbrăcăminte și produse alimentare. Un grafic cu bare arată procentul din cheltuielile totale pentru fiecare categorie, procentele fiind dezvăluite la viteze diferite. — În această animație de finanțe personale, elemente precum categoria și procentul bugetului lunar sunt introduse la viteze diferite pentru a oferi utilizatorilor o înțelegere mai clară a cheltuielilor lor. thrc.eth

Părinte

Parenting creează relații între componentele UI. Când o proprietate (cum ar fi poziția, scara sau culoarea) din elementul părinte se modifică, o proprietate din elementul copil se modifică. De exemplu, pe o diagramă cu linii, dacă un punct de pe o linie este părintele, pe măsură ce utilizatorul trage punctul, ar putea vedea modificarea valorii (obiectul copil).

Parentingul este o modalitate eficientă de a crește interactivitatea și de a crea ierarhie.

Un ecran animat de telefon pe care scrie „Cum a fost călătoria ta?” în vârf. În centrul ecranului este fața unui personaj. Mai jos este un glisor care, atunci când este mutat, schimbă expresia personajului și răspunsul la întrebare („Fericiți”, „Super”, „Bine”, „Trist” sau „Supărat”). — Când utilizatorul își evaluează cursa cu glisorul (obiectul părinte), expresia personajului (obiectul copil) se schimbă. Sachin Das

Zoom

Mișcarea permite utilizatorilor să treacă cu ușurință de la o vizualizare a datelor la una mai granulară. Poate fi o tehnică utilă atunci când se prezintă seturi mari de date, de tipul care ar putea fi de obicei vizualizat pe desktop. O aplicație de urmărire a stocurilor, de exemplu, poate încărca o vizualizare săptămânală a prețurilor pentru un anumit stoc și permite utilizatorilor să mărească sau să micșoreze pentru a dezvălui date zilnice sau anuale.

Una dintre cele mai comune forme de vizualizare a datelor sunt hărțile, care sunt utilizate pe scară largă în aplicațiile de fitness, partajarea de biciclete și de transport. Mărirea este un instrument critic în acest context, deoarece limitele ecranului mobil limitează foarte mult ceea ce poate fi prezentat într-o singură imagine.

O aplicație de fitness animată care arată tabloul de bord al utilizatorului. Când se atinge „bicicletă”, ecranul comută la o hartă și mărește pe un punct reprezentând utilizatorul, care se deplasează de-a lungul traseului. Sub hartă sunt informații despre ritmul cardiac, un cronometru de antrenament și un tracker pentru distanța parcursă cu bicicleta. — Utilizatorii pot mări pentru a vedea traseul detaliat al antrenamentului în această aplicație de fitness. Rizal Ramadhan

Capcanele de proiectare a mișcării de evitat

Edward Tufte, omul căruia i se atribuie literalmente cartea despre vizualizarea modernă a datelor, avea o maximă simplă: „Mai presus de orice altceva, arată datele”.

Concentrați-vă pe transmiterea informațiilor. Atributele precum culoarea, forma și mișcarea ar trebui folosite numai pentru a îmbunătăți înțelegerea datelor. Elementele vizuale străine – sau „junk de diagramă”, așa cum a numit-o Tufte – diminuează acest scop.

Pe mobil, unde utilizatorii de ecran pot fi predispuși la distragerea atenției, prea multe părți mobile dintr-o vizualizare de date pot fi copleșitoare.

„În cazul mobilului, aveți deja un factor de formă mic care necesită concentrare”, spune designerul veteran Darrell Estabrook, care s-a alăturat rețelei Toptal în 2019. Pentru orice flux de lucru mobil, fără pași bine proiectați, „utilizatorul se cam dezordine”.

Estabrook adaugă: „Pentru toate vizualizarea datelor, trebuie să întrebați ce informații îi oferiți utilizatorului pentru ca acesta să poată lua următoarea decizie... să apese un buton sau să scrie un e-mail sau să aprofundeze. Ce trebuie să faceți pentru a le oferi acele [informații]?”

Puteți proiecta vizualizări de date mobile concentrate și eficiente, evitând aceste capcane:

Elemente vizuale care consumă mult resurse, care nu adaugă prea multă valoare

Redarea mișcării în imagini poate consuma multe resurse în partea din spate și ar putea avea un impact negativ asupra performanței și experienței utilizatorului pe partea frontală. Seturile mari de date sau datele care necesită codare extinsă cresc acest risc. Înainte de a pune resurse în construirea unor astfel de imagini, echipele de proiectare și clienții ar trebui să fie clari cu privire la rezultatul dorit – și că va merita efortul.

Animație strălucitoare sau superfluă

Vizualizările de date animate ar trebui să sprijine scopul unei aplicații. O aplicație de învățare a limbilor străine poate folosi mișcarea pentru a sublinia progresul utilizatorilor, în timp ce o aplicație de investiții ar putea evidenția în mod subtil datele acționabile. Indiferent de natura aplicației, totuși, în majoritatea cazurilor, designerii ar trebui să evite animațiile strălucitoare, cum ar fi confetti care cad sau artificii. Ei nu numai că riscă să joace elementele vizuale, ceea ce ar putea duce la o interacțiune nesănătoasă cu o aplicație, dar pot ascunde sau exagera ceea ce transmit de fapt datele.

Elemente vizuale prea interactive

Lucrul cu date necesită un anumit grad de precizie, iar utilizatorii vor avea nevoie de o porțiune decentă a ecranului smartphone-ului lor - 7 până la 10 mm este în general considerată cea mai bună practică - pentru a executa cu succes gesturi. Prea multă interactivitate s-ar putea dovedi greoaie și frustrantă. Este benefic să prioritizați o acțiune la un moment dat.

Stil inconsecvent

Vizualizările datelor ar trebui să se integreze cu stilul și funcționalitatea generală a unei aplicații, lucru la care Apple se referă în Ghidurile sale privind interfața umană drept integritate estetică.

Potrivit lui Akinpelu, designerul UX/UI din Nigeria, menținerea coerenței stilistice „în tipul de tranziție pe care o utilizați, tipul de animație, amestecul de culori” îi ajută pe utilizatori să navigheze în seturile de date.

O listă de verificare intitulată „Vizualizările eficiente ale datelor ar trebui” cu patru elemente bifate: „Aveți obiective clare”, „Fiți potrivite pentru scopul unei aplicații”, „Prioritizați o acțiune principală la un moment dat” și „Mențineți tranziții, animații și culori coerente. ." — Evitați capcanele comune ale animației datelor cu aceste bune practici.

Ține pasul cu datele în creștere

Datele au devenit un element fix în viețile noastre, de la muncă și școală până la sănătate și finanțe. Cu smartphone-uri din ce în ce mai sofisticate și răspândirea conectivității 5G, volumul de date și potențialul de aplicare a acestora vor crește cu siguranță.

Animația poate fi un instrument important pentru a-i ajuta pe oameni să dea sens tuturor acestor informații. Mișcarea permite utilizatorilor să înțeleagă mai ușor valorile, tendințele și relațiile cheie. Cu toate acestea, ca și în cazul oricărei caracteristici UX, animația poate fi suprautilizată sau utilizată greșit, ceea ce ar putea face datele mai puțin inteligibile. Utilizând principiile și tehnicile de proiectare în mișcare, designerii pot crea vizualizări de date mobile animate, care sunt captivante și perspicace.

Citiți suplimentare pe blogul Toptal Design

Convingător și în mișcare: un ghid pentru principiile de proiectare a mișcării
Impactul în creștere al industriei Motion Design
Încântați utilizatorii cu aceste bune practici de proiectare a aplicațiilor mobile