Visualizzazione delle metriche

1) Obiettivi di visualizzazione

Capire rapidamente: in 3-5 secondi riconoscere trend/anomalia/spostamento.
Confronta correttamente: periodi, segmenti, varianti A/B.
Credere ai dati, mostrare incertezza, fonti, freschezza.
Attiva: accanto al grafico - CTA, filtri, collegamenti alle playbook.

2) Tipi di metriche e forme migliori

3) Scala, assi e aggregazione

Scala predefinita: lineare logaritmico - per intervalli multipli % - [0; 100].
Base zero: colonne da zero; linee - senza richiedere zero (ma visualizzare baseline).
Aggregazione: diurna/orologio/minuto, p50/p95/p99; Evitare la media per la distribuzione «rumorosa».
Roll-up/Drill-down: pulsanti D/H (giorno/settimana/ora) e ↑/↓ nella gerarchia (region→strana→gorod).
Selezione punti (downsampling) - LTTB/MinMax per le righe lunghe per non perdere estremi.

4) Contesto e confronto

Confronto tra i periodi corrente vs precedente (overlay tratteggiato) e/o small multiples; Firmate la ∆ relativa e la ∆ assoluta.
Stagionalità: strisce di fondo weekend/festività, zone calde/fredde per ore.
Benchmark: linee orizzontali di norme/obiettivi (SLO/SLA), firma unità e orizzonte temporale.
Intervalli di fiducia: barre/nastri © CI; per A/B - error bars e p-value/ascensore.

5) Incertezza, omissioni, revisioni

Passaggi: interrompi la linea (non collegare lo zero); nebbia grigia per una finestra incompleta.
Lazzi di dati: dati in ritardo di 12 minuti, tooltip con timestamp ingest.
Revisioni: campitura sottile «conteggio», riferimento a changelog.

6) Colore, forma e disponibilità (A11y)

Tavolozza - Base neutra rosso è critico, arancione è un avvertimento, verde è positivo.
Indipendenza colore: duplicate con/marcatori/firme; contrasto al ≥ WCAG AA.
Numero di righe: ≤5 per grafico; altrimenti: small multiples/sfaccettature.
Dimensioni/clic: obiettivi interattivi 32-40 px; anelli di attacco, navigazione a tastiera.

7) Firmiamo correttamente

Assi: unità, formato dei numeri (1 234,56; 12. 3k; 5. 2%); Le etichette locali.
Leggenda: in ordine di importanza visiva; cliccabile per includere/escludere le serie.
Annotazioni: breve e per caso («comunicato PSP _ X», «incidente # 4217»), con riferimento all'evento.

8) Interattività: non sovraccaricare

Hover/Tooltip è compatto, con campi chiave e ∆ vs baseline.
Zoom/Brush: selezione dell'intervallo con il mouse/tastiera; il pulsante Reimposta.
Drill-down: click per segmento, taglio dettagliato; breadcrumb da restituire.
Selettori: preimpostatori di intervalli (24h/7d/30d), filtri di segmenti, interruttore Abs/Percentuale.

9) Modelli di componente (esempio 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) Prestazioni di rendering

Aggregare sul server: restituisci le finestre/quantili già corrette.
Canvas/WebGL per decine di migliaia di punti e mappe termiche; SVG - per ≤2 - 3.000 elementi e firme chiare.
Virtualizzare elenchi/tabelle - Allinea le pagine mentre si scorre.
Cache: hot times, precompute «ieri/settimana».

11) Attendibilità e anti-pattern

• Manipola la scala (ritaglia l'asse delle colonne sopra zero).
• Mescolare unità diverse senza asse secondario e firme esplicite.
• Costruire una «foresta» stacked-area con 8-10 righe.
• Sostituisci i pass con zero.
• Usare le ombre 3D per «bellezza».

12) Formule, unità e formattazione

Denaro: minor units/righe decimali; indicare chiaramente la valuta.
Conversione/quota: interessi con un decimale (se necessario - p. p.) .
Velocità/puntata: «ore/giorno» - firma il periodo.
Arrotondamento: fino a cifre significative senza nascondere l'ordine di grandezza.

13) Specificità delle metriche di qualità e SLO

Mostra error-budget burn (rimanente% del budget) e livelli di avviso.
Per la farmacia - stacked status bar «OK/Degraded/Down» + finestre di incidenti.
Per latency - distribuzione (p50/p95/p99), «violin/boxplot» per cluster/endpoint.

14) Storytelling e sammari auto

Blocco narrativo: 2-4 frasi «che è successo» + «perché» + «cosa fare».
Diapositive/esportazioni: PDF/PNG/SVG, mantenendo caratteri e colori; filigrana e data di taglio.

15) Piano di prova per la visualizzazione

Unità: formato assi, calcolo bin, nastri CI.
Integrazione: filtri/intervalli/locale, drill-down e navigazione inversa.
Lo script «da alert a azione» E2E è un click per l'anomalia del playbook.
A11y/i18n: lettori di schermo, tastiera, traduzione di firme.
Perf: render grandi righe, cold/warm cache, stress su 10 x punti.

16) Metriche di qualità di visualizzazione

Time-to-Insight (TTI) - Tempo medio per il primo clic/comprensione.
Esplained Rate - Quota di grafici con Explorer disponibile.
Action Rate - Dove sono state eseguite le azioni dal widget.
Errore/Noise - Firme errate, lamentele degli utenti.
Perf p95: tempo fino al primo contenuto e fino all'interattività.

17) Assegno-foglio di disegno grafico

• Tipo di grafico corretto per l'attività
• Assi chiari, unità, formato di numeri e date
• Contesto baseline/SLO, periodo di confronto, annotazioni
• Mostra omissioni/scorie/revisioni
• Colori e contrasto (WCAG), non più di 5 righe
• Interattività senza sovraccarico: hover, zoom, drill-down
• Prestazioni: aggregazione, downsampling, Canvas/WebGL in caso di necessità
• CTA accanto: apri report/playbook/crea alert
• Esporta/sharing con la data di taglio e le impostazioni dei filtri

18) Incorporazione in dashboard

Consistency-kit - Un unico token (caratteri, dimensioni, tavolozza), un unico comportamento di tultipo.
Modelli di widget: KPI, timeserie, distribuzione, comparison, map, table.
Slot per suggerimenti «intelligenti»: il badge «anomalia», le spiegazioni dei driver, i pulsanti di azione.

19) Piano di implementazione (3 iterazioni)

• Tipo di grafico, scala/formato unificato, baseline/sLO, omissioni/badge, esportazione.

• Confronto tra periodi, nastri CI, small multiples, anomalie/badge, navigazione tastiera.

• Downsampling/WebGL, pannello Esplain, sammari auto, preset dashboard e CTA.

20) Mini FAQ

Dobbiamo sempre iniziare l'asse Y da zero?
Per le colonne, sì. Non obbligatorio per le linee, ma specificare baseline e non ingannare.

Come faccio a mostrare p95/p99 senza sovraccaricare?
Nastro percentiles o small multiples con gli stessi assi.

Come si sostituisce una torta con 8 segmenti?
100% stacked bars o tabella con bar all'interno di righe (bar-in-cell) + ordinamento.

Totale

La visualizzazione efficiente delle metriche è una scelta corretta della forma + un contesto onesto e le azioni più semplici. Mantenere standard uniformi di scala e formati, mostrare incertezza e omissioni, brell down veloce e CTA, mantenere le prestazioni e la disponibilità. Così i grafici non saranno più «immagini» e diventeranno uno strumento decisionale.