Blocco Scorecard di KPI
Un grande numero in evidenza per la metrica su cui riporta un'email — fatturato, iscrizioni, NPS, qualunque cosa il destinatario debba vedere per prima. È il blocco con cui iniziano la maggior parte delle email di digest e dashboard, di solito tre in fila sopra un grafico.
Come funziona
Una scorecard è un'etichetta, un valore grande, un indicatore di tendenza facoltativo e uno sparkline facoltativo — in quest'ordine visivo, dall'alto verso il basso. Il valore e l'etichetta vengono sempre renderizzati come vero testo HTML, nella dimensione carattere e nel colore che hai impostato; niente nella lettura del numero in evidenza dipende dal caricamento di un'immagine. Solo lo sparkline è una PNG renderizzata, e anche in quel caso è una decorazione sopra un numero già leggibile senza di essa.
L'indicatore di tendenza (il "Δ") compare solo quando sono impostati sia un valore precedente sia una direzione della tendenza. Il blocco li tratta come un'unica unità autorata, non come due campi facoltativi indipendenti, così non esiste mai uno stato ambiguo in cui una percentuale Δ compare senza una freccia che spieghi quale direzione sia positiva. La percentuale stessa viene sempre calcolata da value rispetto a previousValue; la direzione (su/giù/stabile) non viene dedotta dal fatto che il numero sia salito — la imposti tu stesso.
Questo è importante perché "è salito" non è sempre una buona notizia. Un conteggio di ticket di supporto o un tasso di abbandono che sale è una brutta notizia, e una scorecard che riporta su uno dei due deve segnalarlo con una freccia colorata verso il basso anche se il numero grezzo è aumentato. Il colore della freccia segue la direzione che hai scelto (verde per su, rosso per giù, ambra per stabile) usando i colori di stato propri del progetto, non una palette fissa.
Lo sparkline è una piccola immagine a linea di tendenza che traccia i valori che digiti nel campo Sparkline values — oppure, in modalità associata, i valori per riga del campo associato, con un limite di 60 punti. Viene renderizzato solo quando ci sono almeno due punti tra cui tracciare una linea. Il suo colore della linea segue il colore del Δ quando ce n'è uno, così una tendenza discendente e allarmante si legge letteralmente in rosso a colpo d'occhio; senza un Δ configurato, ricade sul colore del brand del progetto.
Campi configurabili:
- Label — il nome della metrica, più il proprio colore e dimensione carattere.
- Value — il numero in evidenza, come stringa letterale (così può contenere anche un tag di personalizzazione).
- Format — Number, Currency (USD, senza decimali) o Percent — controlla come vengono formattati
valueepreviousValueper la visualizzazione, non come vengono memorizzati. - Previous value — il punto di confronto per il Δ. Richiesto insieme a Trend direction perché un Δ venga mostrato.
- Trend direction — None / Up / Down / Flat. Determina sia il glifo della freccia sia il suo colore.
- Sparkline values — un elenco di numeri digitato manualmente, tracciato da sinistra a destra.
- Background color, padding, border, border radius della card.
- Coppie indipendenti di colore/dimensione carattere per il testo del valore e per il testo dell'etichetta.
Oltre ai valori inseriti manualmente, una scorecard di KPI può associare il proprio valore a una fonte dati connessa o ai risultati delle risposte di una campagna passata. Un'associazione a fonte dati abbina un campo Value a un aggregato (Sum, Average, Count o Latest row) che riduce ogni riga associata all'unico numero in evidenza. L'associazione sostituisce solo value e i dati sorgente dello sparkline; previousValue e trendDirection restano sempre digitati dall'autore, poiché un numero "precedente" associato richiederebbe snapshot storici che questo schema non conserva. Vedi Associare i grafici a dati reali per i dettagli completi di entrambe le modalità.
Esempi
Subject
Your July performance summary
Il modo più rapido per vedere questo blocco in contesto è avviare un progetto con lo scopo Dashboard. Genera un titolo "Weekly performance" e tre scorecard di KPI affiancate in colonne: Revenue come valuta con un Δ verso l'alto, New signups come numero semplice con un Δ verso l'alto, Conversion rate come percentuale con un Δ stabile. Segue un grafico a barre (il preset a griglia Dashboard). È un punto di partenza con numeri d'esempio plausibili, non associato a nulla finché non lo colleghi.
Un digest operativo settimanale potrebbe iniziare con tre scorecard (ticket aperti, tempo medio di risposta, CSAT), ciascuna con un Δ rispetto alla settimana precedente, offrendo al lettore il titolo prima ancora di scorrere fino a un grafico. Un report post-campagna può usare un'unica grande scorecard per "Total revenue" associata agli ordini del blocco prodotto di quella campagna tramite un aggregato di fonte dati, con uno sparkline che mostra la crescita giorno per giorno fino all'invio. Il riepilogo mensile di un'azienda in abbonamento potrebbe visualizzare insieme MRR, account persi e nuovi account netti: tre card, tre direzioni Δ diverse, ciascuna colorata correttamente perché la direzione è autorata per ogni card anziché dedotta dal segno della variazione.
Come appare il fallback statico
<div style="margin:12px 0;padding:16px;background-color:#ffffff;border-radius:8px">
<p style="margin:0 0 4px;font-weight:600;font-size:13px;color:#6b7280">Revenue</p>
<p style="margin:0 0 6px;font-weight:700;font-size:32px;color:#111827">
$24,800
<span style="font-size:14px;font-weight:600;color:#16a34a">▲ +18.1%</span>
</p>
<img src="https://mailinapp.com/api/analytics/chart?d=eyJ0eXBlIjoi...&s=3f9a2b1c..." width="160" height="40"
alt="Trend sparkline, upward: 18000, 19500, 21000, 24800"
style="display:block;max-width:100%;height:auto;margin:4px 0" />
<p style="margin:4px 0 0;font-size:11px;color:#9ca3af">Revenue — $24,800 — ▲ +18.1% vs previous</p>
</div>
Il valore, l'etichetta e il Δ sono tutti vero testo prima ancora che compaia l'<img> dello sparkline; la piccola linea grigia sottostante ripete gli stessi tre fatti come testo semplice, così la card resta pienamente leggibile con le immagini disattivate.