Gauge Chart – Element UI

Ce este un Gauge UI?

Gauge (sau gauge chart) este un element UI utilizat in metrici pentru a arata progresul in atingerea unui obiectiv. Acest component UI are rolul de a vizualiza datele si indicatorii pentru ca utilizatorii sa-si finalizeze actiunile dorite.

Gauge charts sunt elemente comune folosite in dashboards – atat in designul de website-uri, software-uri, cat si in aplicatii mobile. Graficele UI gauge se diferentiaza de alte elemente de progres prin prezenta unui indicator de tip ac. In UI UX design, gauge indica vizual o valoare specifica intr-un interval definit. Aceste valori sunt afisate fie printr-un arc, fie printr-o valoare numerica sau procentaj, impreuna cu anumite culori specifice relevante pentru gauge sau intervalul sau.

‍

Tipuri de Gauge Charts

1. Speedometer (Indicator de Viteza)

Acesta este cel mai popular tip de gauge chart in UI UX design si este folosit in dashboards pentru a afisa metrici de performanta. Asemanator cu tabloul de bord al unui vehicul, acesta consta intr-un arc circulara cu un indicator care arata valoarea. Datorita formei sale circulare, UI gauge chart este folosit si pentru a compara diferite intervale de valori. in functie de intervalul de valori, culoarea se schimba.

2. Gauge Liniar

Diferenta dintre gauge-urile lineare si cele de tip speedometer este ca datele sunt prezentate pe orizontala sau verticala. Ele indica valorile numerice intr-un interval de date definit pe o scara liniara. Cu gauge-urile liniare, UI design arata valoarea specifica indicata printr-un indicator pe scara.

3. Gauge Angular

Gauge-urile angulare sunt similare cu cele de tip speedometer, dar afiseaza doar o parte din arca. Zona afisata reprezinta valoarea graficului de progres si este de obicei umpluta cu culoare, lasand restul intervalului neumplut.

Cand sa folosesti Gauge Charts?

• Graficele gauge sunt populare in dashboards si sunt folosite pentru a afisa perspective mai adanci asupra unui business.
• Este util atunci cand un dashboard are KPI-uri specifice bazate pe un obiectiv anume. Astfel, UI UX designers includ aceste elemente pentru a arata vizual unde se afla utilizatorul si cat timp mai este pana cand se atinge un obiectiv.
• Acest element UI este util pentru a tine pasul cu termenele limita.
• Este util cand un dashboard este folosit pentru a observa schimbarile si a monitoriza metricile pe o perioada de timp.

Cum se folosesc un Gauge Chart?

• Intervale

in functie de nevoile unui UI UX designer, imparte un gauge UI in segmente pentru a reprezenta diferite intervale de date. Foloseste culori contrastante, modele sau umbrire pentru a diferentia aceste intervale. Intervalul recomandat pentru un speedometer sau gauge liniar este intre unu si patru. Este recomandat ca sa includem mai putin de patru, caci altfel va coplesi utilizatorul si va aglomera vizual designul – in special daca ai culori complet diferite.

• Indicator

Acul sau indicatorul unui gauge se va misca automat cand valoarea se schimba. Functia de animatie permite utilizatorilor sa vada activ progresul lor. Daca optezi sa nu ai un ac sau indicator, asigura-te totusi ca scrii valoarea numerica sau procentajul in loc.

• Grosimea Seriilor

Vizual, un gauge poate fi de doua feluri: gros sau subtire.

‍

Inscrie-te acum la Cursul de UI UX Design de la Traction Keys

Parcurge cursul nostru de UI/UX design pentru a invata totul despre user interface si user experience. La cursul de UI UX design de la Traction Keys vei invata cum se creaza un sistem de design, cat si cum se creeaza UI UX Design Gauges. Stapanirea tuturor elementelor cat si a practicilor de design UI UX te vor ajuta sa devii un designer UI UX complet si iti va asigura urmatorul tau job si viitoarea cariera.

‍