Folosirea graficelor în dashboard

Cel mai bun mod de a afişa date va depinde întotdeauna de tipul de informaţii, natură mesajului, nevoile şi preferinţele privitorului. Un dashboard afişează, de obicei, multe informaţii şi necesită diverse artefacte pentru a le afişa.

Inventory-Large

Acolo unde sunt multe informaţii , textul (în special cel structurat în tabel) este de preferat graficelor. Dacă foloseşti grafice căutarea unor date/valori exacte este mai dificilă. Pe de altă parte, dacă vrei să obţii o imagine de ansamblu, sau pentru a compara mai multe măsuri, textul nu mai este suficient, este nevoie şi de grafice.

În cadrul unui dasboard se pot folosi următoarele elemente:

1. Grafice:

1.1. Tables

1.2. Line charts

1.3. Bar charts

1.4. Pie charts

1.5. Scatter plots

1.6. Sparklines

1.7. Speedometers şi bullet graphs

2. Gauges: pentru a arată măsuri simple şi pentru a le compara cu valori predefinite

3. Icons: pentru a indica alerte, sus/jos, sau închis/deschis.

4. Text: etichete şi numere.

5. Organizers: tabele, hărţi.

6. Images: poze, ilustraţii, diagrame.

7. Drawings: care pot arată ierarhia sau fluxul.

Dacă spaţiul permite, indicat ar fi să se pună etichete în interiorul graficelor, aproape de informaţii, că privitorul să nu fie nevoit să se deplaseze înainte şi înapoi între grafic şi legendă. Dacă nu este posibil, o altă soluţie ar fi să se pună legenda aproape, sub grafic.

Foloseşte culorile altfel: joacă-te la saturaţia acestora pentru a diferenţia elementele.

Foloseşte pe lângă culori de asemenea şi simbolurile pentru a separa zonele.

Menţine un stil unitar, este de preferat să foloseşti acelaşi font de la un grafic la altul.

Textul ce compune eticheta graficului de asemenea ar fi bine să fie dispus pe orizontală, cel dispus pe verticală este mai greu de citit.

Sunt de evitat culorile prea stridente sau modelele încărcate.

Tables

Textul structurat pe rânduri şi coloane va fi mereu mai uşor de parcurs. Sunt cel mai des folosite pentru a furniza informaţii mai detaliate, facilitează compararea şi analiza datelor dar nu sunt potrivite pentru o imagine de ansamblu asupra acestora.

1a

Vertical bar charts

Sunt folosite atunci când privitorul trebuie să compare anumite valori. Poate de asemenea să pună în valoare tendinţe de-a lungul timpului.

1

Horizontal bar charts

Se folosesc tot pentru a compara valori, etichetele acestora sunt mai uşor de citit.

2

Diagramele verticale sau orizontale sunt folosite cel mai des pentru a arăta frecvenţe, sume şi medii. Afişând valorile individual putem face mult mai uşor o comparaţie între acestea.

3a

Pie Charts

Se folosesc pentru a arată distribuţia proporţională, procentuală.

4a

Linear Graphs

Este folosit pentru a vedea valori şi tendinţe de-a lungul timpului sau pentru a determina relaţia dintre variabile.

4

Scatter plots

Arată relaţia dintre variabile, amploarea, direcţia, formă, şi viteză de schimbare pentru valori în timp, însă când sunt prea multe informaţii este bine sa le evităm pentru că devin aglomerate, punctele se suprapun şi sunt greu de citit.

6a

Sparklines

Cel mai simplu şi restrâns grafic, este folost pentru a compara tendinţele a mai multor elemente, pentru o vedere de ansamblu a acestora.

7a

Speedometers şi bullet graphs

Speedometrele nu sunt foarte des folosite, atâta timp cât dasboard-urile în general nu afişează date în timp real nu-şi au rostul.

8a

Graficul “bullet” pe de altă parte, este o alternativă mai bună la vitezometru, este mai compact, valorile sunt indicate clar, se poate face comparaţia între elemente foarte uşor.

9a

Concluzii

Este uşor să faci un dasboard slab din punct de vedere al designului, să aglomerezi multe informaţii, nu neapărat folositoare şi să le dispui prost. Dasboardul trebuie să fie conceput în aşa fel, folosindu-se grafice, ierarhizări şi prioritizari de informaţii încât să-i fie uşor utilizatorului să-l descifreze.

Surse:

http://ux-guidelines.visma.com/printItem?document=c0ac3c37-cfee-4ea1-8452-a6da50834fb0&itemUUID=bd1cfb22-4d37-44df-828b-58653e592861

http://www.uxmatters.com/mt/archives/2010/11/dashboard-design-101.php

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s