Cele mai bune exemple de vizualizare a datelor și modele de tablouri de bord

Publicat: 2022-03-11

Vizualizarea datelor și designul tabloului de bord sunt atât artă, cât și știință și nu sunt atât de ușor de creat pe cât ar părea la început. Cum ilustrează designerii UX de top și designerii vizuali informații complexe fără a deruta utilizatorii?

Trei moduri: o mai bună înțelegere a principiilor UX din spatele designului bun al tabloului de bord, aplicarea excelenței grafice și practică.

Designul tabloului de bord UX urmează principii și bune practici specifice. Excelența grafică, pe de altă parte, necesită o examinare mai amănunțită.

Cele mai bune practici pentru vizualizarea datelor și proiectarea tabloului de bord — Cele mai bune practici de vizualizare a datelor și de proiectare a tabloului de bord oferă utilizatorilor o modalitate eficientă și interesantă de a vedea și înțelege mai bine ideile complexe. (Ramotion)

Excelența grafică este definită ca:

O prezentare bine concepută și eficientă a datelor interesante.
Ideile complexe comunicate cu eficiență, claritate și precizie.
Oferirea spectatorului cel mai mare număr de idei care necesită cel mai mic timp într-un spațiu mic și folosind cea mai mică cantitate de cerneală.
Spune adevărul despre date.

O resursă excelentă pentru o mai bună înțelegere a excelenței grafice este opera lui Edward Tufte. El este considerat „Leonardo da Vinci al datelor” și are un număr mare de lucrări, cărți și prelegeri publicate. David McCandless, care a fondat information is beautiful, un site web care reprezintă cel mai bun în vizualizarea datelor și excelența grafică, este o altă resursă excelentă.

Principiile designului UX exemplar și excelenței grafice se aplică atât designului tabloului de bord, cât și vizualizărilor de date. Iată câteva dintre cele mai importante exemple de vizualizare a datelor și design de tablouri de bord.

Top Vizualizări de date

Martie 1812 a lui Napoleon

Vizualizarea de către Minard a marșului lui Napoleon din 1812 este considerată unul dintre „cele mai bune desene statistice create vreodată”: crearea unei vizualizări cu atâtea informații pe cât a făcut Minard ar fi fost imposibilă dacă nu ar fi fost aplicarea excelenței grafice.

Această vizualizare unică arată numărul de trupe ale lui Napoleon în funcție de locație, temperatura experimentată de trupe și calea pe care au luat-o trupele către și dinspre Moscova.

Un exemplu de bune practici de vizualizare a datelor — Martie 1812 a lui Napoleon este una dintre cele mai mari vizualizări ale lui Charles Minard din 1861, arătând mii de puncte de date folosind excelență grafică superioară.

Harta holerei a lui John Snow

Graficul lui John Snow din 1854 care arată locația celor 13 fântâni publice din Londra și a 578 de decese cauzate de holeră folosind bare stivuite perpendicular pe locația lor: este ușor de înțeles, dezvăluie adevărul în date și oferă utilizatorului toate informațiile de care au nevoie pentru a desena o imagine adecvată. concluzie privind decesele provocate de holeră.

Afișarea vizuală a datelor folosind bare stivuite și o hartă simplă — Vizualizarea datelor lui John Snow este unul dintre cele mai bune exemple de a spune o poveste cu mai multe puncte de date și de a o menține atât captivantă, cât și ușor de înțeles.

Istoria muzicii rock

Reprezentând doar o fracțiune din întreaga vizualizare a datelor, graficul de mai jos arată o parte din peste 30 de stiluri de muzică de la peste 700 de artiști în perioada 1955-1978.

Nu reprezintă doar artiști și stiluri, ci arată influențe, volumul vânzărilor de discuri, categorii stilistice și unde acestea s-au încheiat sau au continuat. Pentru a atinge acest tip de excelență grafică nu este o sarcină mică.

Un avantaj al vizualizării datelor este de a ajuta la afișarea unor informații extrem de complexe. — Unul dintre beneficiile vizualizării datelor este afișarea de informații extrem de complexe într-un mod care este atât de înțeles, cât și de benefic.

Unde populația Europei crește și scade

O vizualizare a datelor de top care arată cum să gestionați o cantitate imensă de date într-un mod simplu, bine conceput și veridic. Există, de asemenea, filtre incluse în versiunea interactivă care permit și mai multă explorare a datelor, cum ar fi rata natalității.

Un exemplu de vizualizare a datelor de top care arată mii de puncte de date într-un grafic necomplex — Vizualizarea datelor care arată excelența grafică cu mii de puncte complexe de date.

Rutinele zilnice ale oamenilor celebri emblematici

Nu numai că această vizualizare a datelor este interesantă, ci este un exemplu clasic de excelență grafică. Într-un singur grafic, putem vedea o descriere detaliată a obiceiurilor zilnice, ritualurilor, activităților și priorităților oamenilor celebri emblematici.

Folosind o diagramă simplă cu coduri de culori, această vizualizare este ușor de înțeles, simplă, eficientă și, mai presus de toate, informațională.

Design tablou de bord pentru vizualizarea datelor care afișează multe puncte de date — Vizualizarea datelor care arată mai multe puncte de date fără a copleși utilizatorul. (Podio)

Grafica limbilor lumii

Această vizualizare clasică a datelor descrie numărul de limbi care există pe planetă, unde sunt vorbite și cine le vorbește în diferite buzunare ale lumii.

Fără un nivel ridicat de excelență grafică, ar fi greu să arăți atât de multe date într-un mod atât de elegant, care este, de asemenea, informativ și ușor de înțeles.

Una dintre tehnicile de vizualizare a datelor este utilizarea graficelor care descriu datele. — O vizualizare de date iconică care arată mii de puncte de date într-un mod elegant și ușor de înțeles.

Top modele de tablouri de bord

Pentru ca un tablou de bord să fie considerat superior, acesta trebuie să îndeplinească un set de criterii specifice UX:

Convenții de denumire clare și consecvente
Fluxul și aspectul datelor prioritizate
Marjele sunt adecvate pentru lizibilitate
Datele nu sunt nici ascunse, nici supraîncărcate
De înțeles și ușor de citit

Sunt căutați designeri UX independenți cu normă întreagă din SUA

Tabloul de bord KPI de marketing

Exemplul de mai jos este un exemplu excelent de a face informațiile complexe de afaceri ușor de înțeles. Schema de culori restrânsă este plăcută, iar utilizarea cardurilor separate este moale pentru ochi.

Unul dintre motivele pentru care acest tablou de bord are un design excelent este raportul de date-cerneală. Datele și spațiul se completează reciproc. În loc să umpleți ecranul cu mai multe grafice, sunt folosite carduri separate cu file mici. Acesta este un mod ingenios de a păstra informațiile critice disponibile (adică, nu le ascunde), oferind în același timp utilizatorului un mod ușor și instructiv de a le vizualiza în propriile condiții.

O bună practică de proiectare a tabloului de bord este utilizarea culorii pentru a îmbunătăți sensul informațiilor. — Culorile rare și afișarea informațiilor care sunt relevante pentru utilizator sunt principiile unui design bun al tabloului de bord. (Artyom Sokolov)

Tabloul de bord Stripe

Tabloul de bord Stripe este un exemplu excelent de bune practici de proiectare a tabloului de bord. Este simplu, răspunde la cele mai pertinente întrebări ale utilizatorilor și are marje aproape perfecte în fiecare card.

Un tablou de bord pentru utilizator care arată o afișare vizuală excelentă a datelor — Tabloul de bord Stripe arată o afișare vizuală excelentă a datelor într-un mod ușor de văzut și de înțeles de către utilizatori, rapid și ușor. (Michael Villar)

Tabloul de bord al telemedicinei

Analizele de telemedicină sunt cunoscute pentru că furnizează o mulțime de date brute. Organizarea acestor date într-un tablou de bord semnificativ și informativ poate fi o provocare. Acest exemplu utilizează cele mai bune practici UX pentru proiectarea tabloului de bord. Marjele sunt dublate, informațiile sunt prezentate cu întrebări și răspunsuri, iar datele nu sunt ascunse vederii.

Cele mai bune practici de proiectare a tabloului de bord cu silozuri de informații bine aranjate și un flux de informații bun — Acest design de tablou de bord urmează cele mai bune practici de vizualizare a datelor: marje generoase, aspect echilibrat și contrast bun de culoare, toate contribuind la capacitatea de a interpreta datele în mod eficient.

Tabloul de bord stoc

Stocurile pot fi greu de conceptualizat pe un singur tablou de bord din cauza numărului de puncte de date care concurează pentru spațiu. Acest exemplu de design al tabloului de bord a reușit să realizeze un aspect curat, minimal, cu toate informațiile pertinente în față și în centru.

Un exemplu de design de tablou de bord de top care arată pur și simplu informații complexe — Un tablou de bord stoc care arată o mulțime de puncte de date și informații complexe într-un mod simplificat, dar informativ. (WhiteonWhite Digital)

Tabloul de bord al audienței web

Google Analytics face o treabă grozavă cu tablourile de bord; cu toate acestea, poate fi nevoie de multă personalizare pentru a atinge un obiectiv specific. Acest tablou de bord a dus analiza la un nou nivel, oferind o vizualizare simplă, ușor de înțeles, ușor de citit și util, fără a crește încărcătura cognitivă.

UX de proiectare a tabloului de bord aplicat în ceea ce privește lizibilitatea și înțelegerea datelor — Un exemplu de design de tablou de bord care arată analiza web într-un mod atent, aliniat cu ceea ce utilizatorii doresc să vadă cel mai mult.

Tabloul de bord pentru managementul documentației

Gestionarea documentelor este dificilă, dar menținerea lor organizată și ușor de navigat poate fi și mai dificilă. O soluție excelentă este acest tablou de bord care menține lucrurile simple, ușor de înțeles și surprinzător de rare.

Chiar și cu o abordare minimalistă, acest exemplu excelent de design al tabloului de bord oferă utilizatorului tot ceea ce are nevoie pentru a înțelege și a naviga prin sistemul de documente.

Un exemplu excelent de design de tablou de bord pentru un sistem de gestionare a documentelor — Un exemplu de design excelent al tabloului de bord cu o abordare minimalistă a unui sistem complex de documente. (Jan Losert)

Aplicația Meteo Semănat plante – Tabloul de bord mobil

Acest tablou de bord mobil este informativ și ușor de înțeles. Breadcrumb-urile ajută la navigare, iar pictogramele cu descrieri în limbaj comune ajută la crearea unui design UX excelent.

Afișare vizuală mobilă a datelor — O aplicație meteo pentru însămânțarea plantelor, care prezintă un tablou de bord mobil care nu este aglomerat cu „deseuri de diagramă”. (Tomasz Zych)

Tabloul de bord card de credit – Tabloul de bord mobil

La fel ca în domeniul bancar, tablourile de bord ale cărților de credit sunt renumite pentru UX prost, în special pe un dispozitiv mobil. Acest design al tabloului de bord mobil se îndreaptă într-o nouă direcție. Informațiile nu sunt doar bine organizate, ci și ușor de înțeles și bogate în caracteristici, fără a fi copleșitoare.

Cele mai bune practici de proiectare a tabloului de bord mobil — Tablourile de bord pentru carduri de credit și bancare sunt complexe, cu excepția cazului în care principiile UX sunt aplicate împreună cu cele mai bune practici de vizualizare a datelor. (Raj Lal)

Vizualizarea superioară a datelor și designul tabloului de bord necesită excelență grafică și înțelegerea și aplicarea principiilor de proiectare a tabloului de bord. Aplicați în mod congruent, utilizatorii vor beneficia de vizualizări de date care sunt informative și de tablouri de bord care oferă o experiență de înaltă calitate pentru utilizator.

• • •

Citiri suplimentare pe Blogul Toptal Design:

Proiectarea tabloului de bord – Considerații și cele mai bune practici
Vizualizarea datelor – Cele mai bune practici și baze
Inspirați-vă cu aceste vizualizări de date
Actualizați-vă statisticile cu aceste inspirații pentru designul tabloului de bord