Vizualizarea măsurătorilor

1) Obiective imagistice

Înțelegeți rapid: recunoașteți o tendință/anomalie/schimbare în 3-5 secunde.
Comparați corect: perioade, segmente, variante A/B.
Credeți datele: arată incertitudine, surse, prospețime.
Act: lângă grafic - CTA, filtre, link-uri către cărți de redare.

2) Tipuri metrice și cele mai bune forme

3) Cântare, axe și agregare

Scale: liniar în mod implicit; logaritmică - pentru mai multe intervale; procentaj - [0; 100].
Baza zero: bare - de la zero; linii - nici o cerință de zero (dar arată linia de bază).
Agregare: zi/oră/minut, p50/p95/p99; evitați media pentru distribuțiile „zgomotoase”.
Butoane Roll-up/Drill-down „D/N/H” (zi/săptămână/oră) și „↑/↓” în ierarhie (region→strana→gorod).
Puncte de eșantionare (sub-eșantionare): LTTB/MinMax pentru rânduri lungi, astfel încât să nu piardă extreme.

4) Context și comparații

Comparația perioadei: „Curent vs Anterior” (suprapunere cu linie punctată) și/sau multipli mici; semnează ∆ relativă și ∆ absolută.
Sezonalitate: benzi de weekend/vacanță, zone calde/reci cu ora.
Repere: normă orizontală/linii țintă (SLO/SLA), unități de semnalizare și orizont de timp.
Intervale de încredere: benzi/benzi ± CI; pentru A/B - bare de eroare și valoarea p/lift.

5) Incertitudine, omisiuni, revizuiri

Omisiuni: rupeți linia (nu vă conectați cu zero); gri „ceți” pentru fereastra incompletă.
Data lags: insigna „date este 12 minute în urmă”, tooltip cu timestamp ingera.
Revizii: zone subțiri ale trapei „recalculate”, referință la changelog.

6) Culoare, formă și disponibilitate (A11y)

Paletă: bază neutră; roșu - critic, portocaliu - avertizare, verde - pozitiv.
Independența culorilor: duplicat cu valoare/markeri/semnături; contrast ≥ WCAG AA.
Număr de rânduri: ≤5 pe grafic; în caz contrar, multipli mici/fațete.
Dimensiuni/clicuri: obiective interactive ≥ 32-40 px; inele de focalizare, navigare la tastatură.

7) Semnarea corectă

Axe: unități, format număr (1,234,56; 12. 3k; 5. 2%); etichete de date cu caracter local.
Legendă: În ordinea importanței vizuale; clicabil pentru a include/exclude serii.
Adnotări: pe scurt și în cazul („eliberare”, PSP_X „incident # 4217”), cu referire la eveniment.

8) Interactivitate: nu se supraîncarcă

Hover/Tooltip: compact, cu câmpuri cheie și ∆ vs linia de bază.
Zoom/Pensulă: selectarea mouse-ului/tastaturii; Butonul de resetare.
Drill-down: faceți clic pe segment → secțiune detaliată; pesmet pentru a reveni.
Selectori: presetări de intervale (24h/7d/30d), filtre de segment, comutator „Abs/Procent”.

9) Șabloane componente (exemplu API)

json
{
"type": "timeseries",
"title": "Payment authorizations,"
"metrics": [
{"id":"auth_rate_p50","label":"p50","agg":"p50"},
{"id":"auth_rate_p95","label":"p95","agg":"p95","style":{"dash":true}}
],
"x": {"field":"ts","granularity":"5m"},
"y": {"unit":"%","min":0,"max":100},
"baseline": {"value": 92. 0, "label": "SLO 92%"},
"ci": {"field_low":"ci_low","field_high":"ci_high"},
"badges": ["late_data","revised"]
}

10) Performanță de redare

Agregați pe server: returnați ferestrele/cantitățile deja „corecte”.
Canvas/WebGL: pentru zeci de mii de puncte și hărți de căldură; SVG - pentru ≤2 -3 mii de elemente și semnături clare.
Listă/Virtualizare tabel - Încărcați paginile pe măsură ce derulați.
Caching: gresie fierbinte, precompute „ieri/săptămână”.

11) Valabilitate și anti-modele

• Manipulaţi scara (tăiaţi axa coloanelor de deasupra zero).
• Se amestecă diferite unități fără axa secundară și semnături explicite.
• Construiți o „pădure” stivuită cu 8-10 rânduri.
• Înlocuiți golurile cu zerouri.
• Foloseşte 3D/shadow de dragul „frumuseţii”.

12) Formule, unități și formatare

Bani: unități minore/șiruri zecimale; specificați în mod explicit moneda.
Conversii/fracții: procente cu o zecimală (dacă este necesar - p.).
Tarife/tarife: „pe oră/zi” - semnează perioada.
Rotunjire: la cifre semnificative, fără a ascunde ordinea valorilor.

13) Specificitatea calității și metrica SLO

Arată eroare-buget arde și niveluri de avertizare.
Pentru uptime - stivuite bare de stare „OK/Degradat/Jos” + ferestre incidente.
Pentru latență - distribuții (p50/p95/p99), „vioară/boxplot” prin clustere/puncte finale.

14) Storytelling și auto-sammari

Blocul narativ: 2-4 propoziții „ce sa întâmplat” + „de ce” + „ce să faci”.
Diapozitive/export: PDF/PNG/SVG cu fonturi și culori; filigrane și data de tăiere.

15) Planul de testare pentru vizualizări

Unitate: formatul axei, calculul coșului, banda CI.
Integrare: filtre/intervale/locale, găurire și navigare inversă.
E2E: scenariu alert-to-action: faceți clic pe o anomalie → playbook.
A11y/i18n: cititoare de ecran, tastatură, traducere de semnături.
Perf: randare de randuri mari, cache rece/cald, stres la 10 puncte ×.

16) Măsurători ale calității vizualizării

Time-to-Insight (TTI): Timpul median până la primul clic/perspectivă.
Rata explicată - cota de grafice cu Explicate disponibile.
Rata de acțiune: în cazul în care acțiunile din widget au fost efectuate.
Eroare/zgomot: semnături incorecte, reclamații ale utilizatorilor.
Perf p95: timpul până la primul conținut și la interactivitate.

17) Lista de verificare a proiectării programului

• Tipul de program corect pentru sarcina
• Goliți axele, unitățile, numărul și formatul datei
• Context: referință/SLO, perioadă de comparație, adnotări
• Arată lacune/lag-uri/revizuiri
• Culoare și contrast (WCAG), 5 rânduri max
• Interactivitate fără supraîncărcare: hover, zoom, drill-down
• Performanță: Agregare, sub-eșantionare, Canvas/WebGL la cerere
• CTA cot la cot: raport deschis/playbook/create alert
• Export/partajare cu data feliei și setările filtrului

18) Încorporarea în tablouri de bord

Kit de consistență: jetoane uniforme (fonturi, dimensiuni, palete), comportament uniform al fonturilor.
Șabloane widget: KPI, timeseries, distribuție, comparație, hartă, tabel.
Sloturi pentru „inteligent” solicită: „anomalie” insignă, explicații șofer, butoane de acțiune.

19) Planul de implementare (3 iterații)

• Tipuri de grafice, scale/formate unificate, baseline/SLO, lacune/ecusoane lag, export.

• Comparații de perioadă, benzi CI, multipli mici, anomalii/insigne, navigare la tastatură.

• Sub-eşantionare/WebGL, Explicaţi panoul, auto-sammari, presetări tablou de bord şi CTA.

20) Mini-Întrebări frecvente

Ar trebui ca axa y să înceapă întotdeauna de la zero?
Pentru coloane - da. Pentru linii - nu este necesar, dar specificați linia de bază și nu „înșelați” după scară.

Cum se arată p95/p99 și nu se supraîncarcă?
Percentile de bandă sau multipli mici cu aceleași axe.

Cum de a înlocui „plăcintă” cu 8 segmente?
100% stivuite baruri sau bar-in-cell + sortare.

Total

Vizualizarea metrică eficientă este alegerea corectă a formei + context onest + acțiuni convenabile. Păstrați standarde uniforme pentru cântare și formate, arătați incertitudine și omisiuni, dați un burghiu rapid și CTA, aveți grijă de performanță și disponibilitate. Apoi graficele vor înceta să fie „imagini” și să devină un instrument de decizie.