CUSTOM METRICS
Redesign di Custom Metrics: creare, etichettare e visualizzare dati personalizzati con input flessibili, aggregazioni e trend.
INTRODUZIONE
La funzionalità Custom Metrics permette agli utenti di creare metriche su misura tramite formule basate su dati predefiniti (es. fatturato, impression, costo del servizio), aiutandoli a monitorare le performance in linea con i propri obiettivi di business. Sebbene la funzionalità fosse già live, alcuni problemi di usabilità ne limitavano l'adozione e l'efficienza. Questo progetto ha migliorato l'esperienza risolvendo questi problemi, mantenendo invariata la funzionalità di base delle custom metrics.
PROGETTO
Il progetto si è concentrato sul ridisegnare il modo in cui gli utenti creano, sfogliano e gestiscono le Custom Metrics all'interno del dashboard builder di Swydo — spostando il flusso da una pagina di impostazioni a schermo intero e disorientante a un drawer contestuale, con un nuovo editor di formule, una tabella riepilogativa più leggera e punti di accesso più chiari per aggiungere o modificare una metrica.
SFIDA
La ricerca ha fatto emergere alcuni pain point ricorrenti:
Perdita di contesto: la pagina di impostazioni a schermo intero disorientava gli utenti che arrivavano da un widget.
Ripartire da zero: gli utenti dovevano ricostruire la selezione dei dati anche quando arrivavano già con un contesto definito.
Nessun punto di accesso chiaro: non era chiaro dove aggiungere o modificare una metrica, e il pulsante per aggiungerla era facile da non notare.
Tabelle dense e confuse: la tabella delle metriche mostrava righe troppo grandi, con informazioni per lo più irrilevanti.
IL MIO RUOLO
Ho lavorato come Product Designer su questo progetto end-to-end — conducendo la ricerca di usabilità, definendo i casi d'uso e i criteri di accettazione, e progettando il nuovo flusso di creazione basato su drawer, l'editor di formule e la tabella delle metriche, in stretta collaborazione con product management ed engineering.
PROBLEMI CHIAVE
Modalità a schermo intero
La modalità a schermo intero causa perdita di contesto: gli utenti si sentono disorientati quando entrano nella pagina di impostazioni delle custom metric perché perdono il contesto del flusso di lavoro precedente.
Gli utenti faticano a trovare i dati giusti
Gli utenti devono ripartire da zero nella selezione dei data point, anche quando arrivano dalle impostazioni di un widget.
Nessuna chiarezza su dove aggiungere/modificare le metriche
Gli utenti si trovano confusi al primo accesso alla pagina di impostazioni, perché non è chiaro da dove iniziare.
Posizione del pulsante custom metric
Gli utenti si trovano confusi al primo accesso alla pagina di impostazioni, perché non è chiaro da dove iniziare.
Opzione di scorrimento e selezione delle categorie
L'elenco delle categorie nella modale di Custom Metrics può risultare confuso — gli utenti possono aggiungere metriche a qualsiasi categoria, ma le vedono solo nei widget che usano quella categoria. Limitare le categorie visibili in base al punto di accesso potrebbe migliorare la chiarezza.
Opzione per aggiungere una categoria
Gli utenti possono aggiungere una categoria da questa vista, ma il pulsante è nascosto e privo di contesto. È probabilmente superfluo e può confondere chi lo scambia per 'Add Custom Metric'.
Tabella delle custom metric
Le righe della tabella Custom Metric sono troppo grandi e mostrano troppe informazioni irrilevanti. Gli utenti vogliono principalmente una panoramica rapida per vedere la formula di ogni metrica creata. Gran parte dei dettagli mostrati per riga non è necessaria in questa fase, oppure viene generata automaticamente durante la creazione della formula, e potrebbe restare nascosta fino ad allora.
SOLUZIONE DI DESIGN
Creazione di una nuova Custom Metric
Dalle impostazioni del widget, gli utenti possono raggiungere la funzionalità Custom Metrics dalla sezione Dimension and Metrics.
Gli utenti possono cercare Custom Metrics già esistenti tramite il menu a tendina oppure aggiungerne una nuova con il pulsante "Add Custom Metric" accanto all'etichetta. Cliccandolo si apre il drawer direttamente al livello Custom Metrics.
Il drawer mostra un'intestazione con nome dell'integrazione, data source e categoria — coerente con la vista delle impostazioni del widget. Ora gli utenti possono creare metriche solo per la categoria del widget.
Cliccando su "Add Custom Metric" o trascinando verso l'alto la maniglia, si apre il pannello dell'editor di formule. Gli utenti inseriscono un nome, costruiscono la formula digitando o selezionando metriche e operatori, impostano il tipo (rilevato automaticamente per le metriche singole o selezionabile per quelle multiple) e definiscono l'impact.
Cliccando "Save" la metrica viene aggiunta; chiudendo il pannello le modifiche vengono scartate. Gli utenti possono digitare il nome della custom metric nel campo apposito: comparirà nella prima cella della relativa riga.
Gli utenti possono accedere all'elenco delle metriche cliccando sul pulsante Add metric oppure direttamente nel campo formula — in questa demo viene mostrata solo la prima opzione.
Dopo aver selezionato una metrica, il menu si chiude, appare un chip di validazione, il chip della metrica viene aggiunto all'editor, Type e Impact vengono compilati automaticamente e il pulsante Save si attiva.
Dopo aver aggiunto la prima metrica, gli utenti possono digitare o selezionare operatori dal menu (alcune icone sono ancora in lavorazione nel design system). Le formule non valide generano messaggi di errore e devono terminare con una metrica o una parentesi di chiusura: il salvataggio resta disabilitato finché la formula non viene corretta.
Gli utenti possono digitare numeri direttamente nel campo: se l'input non corrisponde a una metrica, non appare alcun menu a tendina, e premendo Invio il numero si trasforma in un chip.
Una volta completata la formula, appare un messaggio di validazione. Se la formula include due metriche, gli utenti possono selezionare manualmente il Type da un set limitato di opzioni valide; per le metriche singole, il Type viene assegnato automaticamente.
L'Impact viene ora impostato direttamente nell'editor di formule, invece che nella riga della tabella.
Se una custom metric include metriche dinamiche, viene salvata a livello di data source: un messaggio sopra il campo di input informa l'utente di questa condizione.
Panoramica delle custom metric nella nuova tabella
Una volta salvata la nuova custom metric, gli utenti la vedono nella tabella. Da questa panoramica potranno solo leggere le informazioni: per modificarle, cliccano sui tre puntini e selezionano "Modifica".
Gli utenti potrebbero creare formule molto lunghe in ogni cella di riga, quindi parte del testo potrebbe risultare nascosta.
Passando il mouse sopra la formula, comparirà un tooltip che ne riassume l'intero contenuto.
Poiché ora il type è diventato un'icona, chi non ha familiarità con l'elemento può passarci sopra con il mouse e ottenere un tooltip che ne spiega il tipo.
Allo stesso modo, ora che Impact (ex Comparison Change) è diventato un'icona, un tooltip al passaggio del mouse ne spiega il significato.
Cliccando sull'icona dei tre puntini si apre un menu con due opzioni: Edit per modificare la custom metric e Delete per rimuoverla dall'elenco.
Per eliminare una custom metric, gli utenti cliccano sul menu dei tre puntini, selezionano Delete e confermano l'azione in una finestra di dialogo standard.
Quando il numero di righe supera l'altezza massima della lista, il contenuto diventa scorrevole: gli utenti possono scorrere all'interno della lista per raggiungere la custom metric desiderata. Questa scelta serve a mantenere la lista in posizione e a lasciare sempre visibile il pulsante di aggiunta.
Applicare la nuova custom metric al widget
Quando gli utenti cercano tra le metriche disponibili, trovano le custom metric nel menu a tendina che appare sotto il selettore Custom Metric.
Durante la ricerca, gli utenti trovano le Custom Metrics disponibili nel menu a tendina sotto il selettore Custom Metric.
Quando selezionano una custom metric, sotto l'etichetta delle metriche compare un chip.
Una volta definite e applicate, le custom metric sono visibili a livello di impostazioni del widget, nell'etichetta sotto dimensions and metrics.
