Proiectarea tabloului de bord - Considerații și cele mai bune practici

Publicat: 2022-03-11

Ascultă versiunea audio a acestui articol

Tablourile de bord reprezintă o modalitate unică și puternică de a prezenta informații bazate pe date, folosind tehnici de vizualizare a datelor care afișează date relevante, acționabile, precum și urmărirea statisticilor și a indicatorilor cheie de performanță (KPI). Tablourile de bord ar trebui să prezinte aceste date într-un format rapid, ușor de scanat, cu cele mai relevante informații ușor de înțeles dintr-o privire.

Termenul s-a născut din tabloul de bord tradițional al automobilelor și au evoluat pentru a îndeplini aceeași funcție în lumea digitală. În cartea sa, Stephen Few a spus cel mai bine:

Un tablou de bord este o afișare vizuală a celor mai importante informații necesare atingerii unuia sau mai multor obiective; consolidate și aranjate pe un singur ecran, astfel încât informațiile să poată fi monitorizate dintr-o privire.

Design tablou de bord mobil
Design tablou de bord mobil de Mason Yarnell pentru Mixpanel

În acest articol, prezentăm exemple strategice, analitice, operaționale și informaționale, precum și principiile fundamentale care stau la baza oricărui design de succes al tabloului de bord, indiferent de tipul acestuia.

Abordarea corectă a vizualizării datelor este o caracteristică cheie în stabilirea bazei unui tablou de bord de succes. Vizualizarea datelor este prezentarea datelor prin grafice și imagini — obiectivul său principal este de a ajuta factorii de decizie să identifice modele sau să înțeleagă concepte dificile care pot rămâne nedetectate în aplicațiile bazate pe text.

În cartea lor, Data Visualization , Noah Iliinsky și Julie Steele afirmă:

Scopul designerului în proiectarea unei vizualizări de date este de a crea un livrabil care va fi bine primit și ușor de înțeles de către cititor. Toate alegerile de proiectare și implementările particulare trebuie să servească acestui scop.

Caracteristicile cheie ale tablourilor de bord excelente

Un tablou de bord eficient arată informații utile și utile dintr-o privire. Simplifică reprezentarea vizuală a datelor complexe și ajută părțile interesate să înțeleagă, să analizeze și să prezinte perspective cheie.

Elemente într-un design tablou de bord
Tabloul de bord al Contractbook de către designerul Toptal Wojciech Dobry

Tablourile de bord grozave sunt clare, intuitive și personalizabile.

  • Ei comunică rapid informații.
  • Ele afișează informații clar și eficient.
  • Acestea arată tendințe și modificări ale datelor de-a lungul timpului.
  • Sunt ușor de personalizat.
  • Cele mai importante widget-uri și componente de date sunt prezentate efectiv într-un spațiu limitat.

O personalizare inițială a datelor și informațiilor vizuale în funcție de cerințele cheie ale utilizatorilor va ajuta la îmbunătățirea gradului de utilizare și la eliminarea necesității diferitelor persoane de utilizator.

Reprezentarea elementelor de tablou de bord personalizabile
Elemente de tablou de bord personalizabile – Contractbook de Toptal Designer Wojciech Dobry

Tablourile de bord excelente oferă totul la un clic distanță.

  • Toate informațiile esențiale sunt imediat accesibile.
  • Datele sunt prioritizate.
  • Informațiile sunt afișate clar într-o ierarhie vizuală pe un singur ecran.
  • Designul oferă o imagine de ansamblu coerentă, care include date inițiale rare și clare, cu oportunități suplimentare de detaliere pentru mai multe.
  • Elementele (diagrama, tabelul, formularul) sunt afișate într-o vizualizare minimizată cu posibilitatea de a afișa mai multe detalii într-o fereastră modală sau de a merge la o pagină cu mai multe detalii.
  • Designul îmbunătățește gradul de utilizare cu filtre care permit utilizatorilor să personalizeze modul în care sunt afișate datele și filtrează conținutul folosind etichete, categorii și KPI.

Design tablou de bord pentru desktop
Date detaliate extrase dintr-un tablou de bord pe un modal, de designerul Toptal Miklos Philips

Complexitatea redusă oferă claritate

Într-o lume copleșită de date, furnizarea de informații clare este unul dintre cele mai dificile lucruri de realizat. Prezentarea doar a celor mai relevante date pe tablouri de bord este esențială - cu cât afișăm mai multe informații, cu atât este mai greu pentru utilizatori să găsească ceea ce au nevoie.

Când se confruntă cu prea multe date din care să aleagă, designerii ar trebui să afișeze doar subsetul cel mai relevant. Trebuie să stabilim priorități și să eliminăm cu atenție valorile înșelătoare și neclare.

Deciziile eficiente de proiectare a tabloului de bord ar trebui ghidate de:

  • obiectivele proiectului
  • natura datelor
  • nevoile utilizatorilor

Elemente de design tablou de bord
Design tablou de bord de către designerul Toptal Stelian Subotin

Când citiți o vizualizare (sau orice alt tip de comunicare), cititorul dvs. are o cantitate limitată de putere mentală pentru a se dedica problemei. O parte din această putere cerebrală va fi dedicată decodării vizualizării; orice putere a creierului rămasă poate fi folosită apoi pentru a înțelege mesajul (dacă cititorul nu a renunțat încă în frustrare). Noah Iliinsky și Julie Steele (Vizualizarea datelor)

Obiectivul principal al unui tablou de bord este de a face informațiile complexe accesibile și ușor de digerat. Prin urmare, interfața care prezintă datele ar trebui să fie curată și simplă pentru a minimiza încărcarea cognitivă a utilizatorilor și timpul petrecut căutând.

Arhitectura informațională ar trebui să prezinte mai întâi datele esențiale, permițând în același timp accesul la metrici auxiliare sau secundare. Ar trebui proiectat un sistem progresiv de detaliere care să înceapă cu o imagine generală și apoi să intre în mai multe detalii – facilitează prioritizarea datelor și creează claritate.

Design tablou de bord mobil pentru iOS
Design tablou de bord mobil de Jan Losert

Determinarea obiectivelor tabloului de bord și afișarea datelor corespunzătoare

Atunci când proiectează tablouri de bord, designerii de tablouri de bord de succes încep cu un set bine definit de obiective, concentrându-se pe problema de rezolvat și pe perspectivele cheie, acționabile, pe care oamenii trebuie să le ia din date.

Obiectivele bune de proiectare promovează execuția eficientă și precisă. Utilizarea cadrului SMART pentru stabilirea obiectivelor pune accent pe obiective specifice , măsurabile , acționabile , realiste și bazate pe timp .

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

Câteva întrebări cheie de adresat atunci când stabiliți obiectivele de proiectare a tabloului de bord:

  • Câți pași trebuie să facă utilizatorii pentru a atinge un anumit obiectiv?
  • Este interfața suficient de intuitivă pentru ca utilizatorul să-și atingă singur obiectivul?
  • De ce informații are nevoie utilizatorul pentru a-și atinge cu succes scopul?

Pentru a determina care ar putea fi scopul unui anumit design de tablou de bord, definiți-l întrebând: „Ce problemă specifică va rezolva acest design pentru utilizator?” Răspunsul va oferi informații despre valorile, proprietățile, valorile, elementele vizuale și datele care au consecințe.

Folosirea graficelor gogoși într-un design de tablou de bord
Design tablou de bord realizat de designerul Toptal Miklos Philips

Designul centrat pe obiective se concentrează pe soluții la probleme reale și reprezintă fundamentul tuturor designului grozav al tabloului de bord. Începeți cu o înțelegere clară a obiectivelor de afaceri, luați în considerare obiectivele utilizatorilor și apoi transmiteți informațiile cheie care trebuie comunicate.

Context în proiectarea tabloului de bord

Una dintre cele mai mari provocări ale designului tabloului de bord este deservirea mai multor persoane. Odată ce fiecare rol de utilizator este definit, devine esențial să înțelegem unde se suprapun nevoile lor și unde diferă.

Comunicarea eficientă este principiul de bază al oricărui design de tablou de bord de succes. Prevederea unor posibile scenarii în care utilizatorii se pot afla va contribui la o mai bună înțelegere a circumstanțelor utilizatorului.

Țineți întotdeauna cont de contextul utilizatorilor atunci când proiectați - identificați cunoștințele lor tehnice, familiaritatea cu sistemul general, obiectivele lor și așa mai departe.

Elemente contextuale într-un design tablou de bord
Design tablou de bord realizat de designerul Toptal Miklos Philips

Asigurați-vă că puneți următoarele întrebări atunci când încercați să determinați comportamentul și contextul utilizatorului:

  • Designul ia în considerare direcția în care este obișnuit să citească vizitatorul?
  • Interacțiunea cu tabloul de bord necesită cunoștințe tehnice?
  • Vor reuși utilizatorii să realizeze majoritatea acțiunilor în doar câteva clicuri?
  • Se aliniază designul cu contextul utilizatorului prin crearea de meniuri de detaliere; folosește iconografie sugestivă și palete de culori?

Paleta de culori utilizată în designul unui tablou de bord ar trebui, de asemenea, considerată ca un context. Multe tablouri de bord pentru produse SaaS business-to-business sunt proiectate într-o interfață de utilizare cu tematică întunecată, deoarece sunt utilizate timp de câteva ore consecutiv.

Interfețele de utilizare cu tematică întunecată pot ajuta la reducerea oboselii ochilor și pot sprijini claritatea vizuală în interfață. Cu toate acestea, adoptarea acestei abordări necesită o evaluare atentă a direcției de proiectare - avantajele, dezavantajele și potențialele capcane, așa cum a fost subliniat într-un articol anterior de blog de design: Dark UI Dos și Don't.

Proiectarea interfeței de utilizare a tabloului de bord Analytics
Design-urile, analiza și infograficele pentru tabloul de bord funcționează bine pe o interfață întunecată, dar totuși ar trebui să fie „manipulate cu grijă” pentru a asigura un contrast suficient (de Alex Gilev).

Design mai bun al tabloului de bord cu cercetarea utilizatorilor

Cercetarea utilizatorilor ajută la crearea unui mediu în care utilizatorilor li se prezintă date relevante, clare și concise. Acest lucru îi ajută să se gândească la conținutul și datele pe care le caută, mai degrabă decât la cum să le folosească și să le acceseze.

Unele tablouri de bord trebuie să funcționeze sau să fie personalizabile fără efort pentru utilizatorii cu roluri diferite care se uită la același tablou de bord de bază. Cercetarea utilizatorilor este importantă deoarece ajută la determinarea obiectivelor utilizatorului, modelelor mentale, contextului de mediu și punctelor dureroase. Aceștia sunt factori care influențează foarte mult designul tabloului de bord final.

Prezentare generală a designului unui tablou de bord
Design tablou de bord de către designerul Toptal Stelian Subotin

Designerul, cercetătorul și autorul pentru experiența utilizatorului Mike Kuniavsky notează că este „procesul de înțelegere a impactului designului asupra unui public”.

Un designer trebuie să definească diferitele tipuri de utilizatori și să înțeleagă unde obiectivele lor sunt aceleași și unde diferă. Ce informații sunt cele mai utile pentru un tip de utilizator față de altul? Ei trebuie să ia în considerare dacă trebuie să existe un aspect diferit de la un tip de utilizator la altul sau dacă există o soluție pentru un caz de utilizare mai general.

Ținând cont de acest lucru, este o idee bună să începeți cu wireframes rudimentare și să treceți la prototipuri care pot fi testate cu utilizatori reali în timpul unei faze de cercetare a utilizatorilor. O perspectivă cu adevărat valoroasă poate rezulta dintr-o fază scurtă de cercetare a utilizatorilor cu doar cinci utilizatori – și va economisi o cantitate enormă de timp pe linie.

Design tablou de bord, cadru fir de joasă fidelitate
Wireframe pentru tabloul de bord de Aaron Sananes

Dezvăluirea progresivă în designul tabloului de bord

Dezvăluirea progresivă este o tehnică folosită pentru a menține atenția unui utilizator prin reducerea dezordinei. Crearea unui sistem de dezvăluire progresivă ajută la crearea unui mediu centrat pe utilizator, care ajută la prioritizarea atenției utilizatorului, la evitarea greșelilor și la economisirea de timp. De asemenea, permite utilizatorilor să se concentreze pe caracteristicile cheie care contează pentru ei și să nu fie forțați să parcurgă toate funcțiile, inclusiv pe cele de care nu au nevoie sau de care nu sunt interesați.

Dezvăluirea progresivă este o bună practică de proiectare a tabloului de bord care va reduce, de asemenea, ratele de eroare considerabil; va îmbunătăți eficiența și va ajuta utilizatorii să își îmbunătățească înțelegerea tablourilor de bord atunci când un sistem se bazează pe prioritizarea funcțiilor.

Proiectarea interfeței de utilizare a tabloului de bord și vizualizarea datelor
Design tablou de bord de Jan Losert

Dezvăluirea progresivă amână funcțiile avansate sau utilizate rar la un ecran secundar, făcând aplicațiile mai ușor de învățat și mai puțin predispuse la erori. – Jakob Nielsen

Animația este o modalitate excelentă de a satisface o varietate de nevoi ale utilizatorilor, îndeplinind și mai multe funcții. Este o opțiune excelentă de utilizat în timp ce datele și imaginile sunt încărcate și este o soluție avansată de dezvăluire progresivă.

Animația este procesul de creare a iluziei de mișcare; este o dinamică care creează un sentiment de progres și feedback constant, reducând astfel incertitudinea utilizatorului și crescând performanța percepută.

Animație cu interfața de bord pentru tabloul de bord
Tabloul de bord de Virgil Pana

Avantajele utilizării dezvăluirii progresive în tablouri de bord:

  • Reducerea incertitudinii și anxietății utilizatorilor (prin afișarea semnelor de progres, utilizatorii sunt asigurați că totul funcționează conform intenției)
  • Oferirea utilizatorilor cu ceva la care să se uite (afișare parțială a datelor), mai degrabă decât să-i facă să aștepte
  • Oferirea utilizatorilor cu o așteptare clară a pașilor următori și crearea unei înțelegeri a modului în care informațiile sunt prezentate ierarhic

Problemele potențiale cu dezvăluirile progresive și încărcarea datelor includ:

  • Utilizarea indicatorilor și a dezvăluirilor într-o manieră necorespunzătoare. Timpii scurti de încărcare și pașii inutili vor crea distragere a atenției și vor funcționa împotriva principiilor de utilizare.
  • O întârziere în preluarea datelor fără un indicator clar al progresului poate duce la incertitudinea utilizatorului și la rate de respingere mai mari.
  • Utilizarea indicatorilor statici de progres este o soluție cu puțină semnificație și nu oferă suficiente informații despre progres, ceea ce poate duce, de asemenea, la incertitudinea utilizatorului și la rate de respingere mai mari.

Design UI și UX tablou de bord
Design tablou de bord de Mason Yarnell

rezumat

Tablourile de bord sunt o modalitate puternică de a comunica date și alte informații, în special cu un design centrat pe utilizator, centrat pe obiective, care urmează cele mai bune practici de proiectare a tabloului de bord și vizualizarea corectă a datelor. Deși fiecare tablou de bord este diferit și are propriile obiective, cerințe și limitări, respectarea acestor principii fundamentale va ajuta la crearea unor designuri remarcabile, indiferent de specific:

  • În primul rând, empatizați cu tipurile dvs. de utilizatori și înțelegeți obiectivele acestora.
  • Transmiteți o poveste clară utilizatorilor utilizând imagini sugestive, etichete, tehnici de dezvăluire progresivă și animație.
  • Ușurați lucrurile complexe prin aplicarea tehnicilor de cercetare a utilizatorilor.
  • Dezvăluie datele și informațiile la momentul potrivit, într-un sistem de detaliere.
  • Utilizați vizualizarea datelor pentru a exprima informații într-un mod semnificativ.

• • •

Citiri suplimentare pe Blogul Toptal Design:

  • eCommerce UX – O privire de ansamblu asupra celor mai bune practici (cu infografic)
  • Importanța designului centrat pe om în proiectarea produsului
  • Cele mai bune portofolii de designeri UX – Studii de caz și exemple inspiratoare
  • Principii euristice pentru interfețele mobile
  • Design anticipator: Cum să creați experiențe magice pentru utilizator