Semplificare l’azione più frequente
Come ridurre il carico cognitivo e migliorare la comprensione dell’esito di creare una clip in Segno
Sommario:
Risultati ottenuti:
- Creazione delle clip più lineare e prevedibile, con maggiore consapevolezza dell’esito prima della conferma.
- Riduzione del carico cognitivo nella configurazione delle clip, in particolare per gli elementi BPMN.
- Migliore leggibilità del comportamento della clip una volta inserita nel flusso.
- Riduzione misurata del tempo di completamento delle azioni chiave (−19% per utenti nuovi, −22% per utenti esperti).
Tipo di lavoro:
Analisi UX della modale esistente, osservazione di utilizzo reale, ridefinizione dei flussi di creazione, interaction design e prototipazione iterativa.
Consegna:
Redesign completo della modale di creazione delle clip, introduzione di anteprime orientate all’esito, flussi progressivi per le diverse tipologie di clip e prototipi validati tramite test.
Team:
Giacomo Dalia, confronto continuo con stakeholder interni e team di sviluppo di Segno.
Il mio ruolo:
Product Designer Consultant — analisi delle frizioni nella creazione delle clip, definizione dei principi di progressività e outcome awareness, progettazione delle nuove interazioni e validazione tramite test qualitativi e quantitativi.
Curiosità:
Il redesign della modale ha evidenziato differenze significative tra utenti nuovi ed esperti, mostrando come un’interazione più esplicita richieda un breve periodo di adattamento, ma produca benefici maggiori nel medio periodo.
Introduzione
Il precedente case study, "Quando la crescita del prodotto mette in crisi la navigazione", si concludeva mettendo in evidenza un punto chiave: una volta chiariti dove e come avvengono le azioni immediate sulla griglia, emergeva con forza un’altra criticità. L’azione più frequente e strategica di Segno — la creazione di una clip — risultava ancora pesante, frammentata e poco comunicativa rispetto al risultato finale.
In Segno, le clip rappresentano l’unità fondamentale di lavoro: sono elementi concettuali che permettono di tradurre idee, decisioni, passaggi logici o riferimenti esterni in nodi operativi all’interno della griglia. Ogni clip non è un contenuto isolato, ma un punto attivo di un sistema più ampio, pensato per essere collegato, attraversato e riorganizzato all’interno di flussi di senso. Creare una clip significa quindi dare forma a un concetto e inserirlo consapevolmente in una rete di relazioni che ne determina il ruolo e il comportamento.
Questo secondo intervento progettuale nasce proprio dal bisogno di rendere la creazione di una clip più fluida, più leggibile e più orientata all’esito.
Contesto
Prima dell’avvio formale della consulenza, la modale di creazione della clip aveva già ricevuto una prima ottimizzazione a seguito dei miei feedback come beta tester. In origine, infatti, le priorità di compilazione non erano rispettate:
- La prima scelta proposta all’utente era la selezione dell’icona, l’elemento meno rilevante dell’intera clip
- Per inserire il titolo era necessario un clic esplicito sul campo
Questa configurazione andava in direzione opposta rispetto a una compilazione rapida e aumentava la percezione di pesantezza dell’interazione. Corrette queste prime frizioni, la modale si presentava comunque, all’inizio della progettazione, come un’interfaccia ancora molto densa.
Struttura della modale pre–progettazione
La modale era organizzata attorno a una prima scelta fondamentale: il tipo di clip. In una fase iniziale questa decisione veniva presa direttamente nella griglia, tramite il menù contestuale. Con l’introduzione della barra delle azioni e della creazione rapida della clip in grid, la scelta del tipo è stata spostata nella modale, che è diventata il luogo dedicato alla configurazione consapevole dell’elemento.
Clip standard
Nel caso della clip standard, la modale concentrava in un unico spazio tutte le opzioni di configurazione principali. L’utente poteva definire la dimensione orizzontale della clip (piccola, media o grande), inserire un titolo e una descrizione testuale, scegliere un’icona e aggiungere uno o più link.
In particolare, il selettore di icona — presente solo per questa tipologia — occupava una porzione rilevante dello spazio disponibile, contribuendo in modo significativo alla densità visiva complessiva, pur non rappresentando una decisione centrale per la maggior parte dei casi d’uso.
Elemento BPMN
Gli elementi BPMN (Business Process Model and Notation) sono costrutti standard utilizzati per rappresentare visivamente processi, decisioni e flussi operativi. In Segno vengono utilizzati per modellare sequenze logiche e comportamenti strutturati all’interno di sistemi complessi.
Date queste premesse, la configurazione degli elementi BPMN risultava ancora più complessa. All’interno della stessa vista venivano presentate contemporaneamente tutte le famiglie principali — Gateway, Eventi e Attività — insieme a tutte le rispettive varianti.
Questa scelta rendeva immediatamente disponibili tutte le opzioni, ma al costo di una forte occupazione dello spazio verticale e di un elevato clutter visivo. Inoltre, risultava difficile comprendere in anticipo che ruolo avrebbe avuto l’elemento una volta inserito in griglia e come si sarebbe comportato nel flusso: queste informazioni erano affidate quasi esclusivamente all’identità visiva dell’elemento e alla sua denominazione, senza un supporto visivo o contestuale che ne anticipasse l’effetto concreto.
Link a progetto o scena
La clip di collegamento a progetto o scena serve a creare un riferimento verso un altro contesto di lavoro: un progetto distinto o una scena, ovvero una variante interna a un progetto esistente. Inserire questo tipo di clip in griglia significa quindi stabilire un collegamento logico tra contesti, mantenendo una continuità visiva all’interno del flusso.
Nella versione precedente, le opzioni relative a questo tipo di clip venivano presentate tramite tab orizzontali, mostrando contemporaneamente tutte le possibilità disponibili. Sebbene il flusso fosse più semplice rispetto alle altre tipologie, questa impostazione contribuiva comunque a un’eccessiva esposizione alle scelte.
Le connotazioni dell’intervento
Durante l’osservazione funzionale di alcuni utenti alle prese con la modale — con consegne di compito differenti — sono emerse criticità ricorrenti che hanno orientato l’intervento progettuale.
In particolare:
- il numero elevato di clic necessari per completare anche azioni semplici
- la difficoltà nell’anticipare che cosa sarebbe apparso in griglia una volta conclusa l’operazione
- una scarsa chiarezza visiva e funzionale soprattutto nella creazione degli elementi BPMN
Il tema centrale non era tanto cosa scegliere, quanto lo sforzo richiesto per arrivare al risultato e la scarsa leggibilità dell’esito concreto dell’azione una volta completata.
A partire da queste osservazioni, il redesign della modale si è fondato su tre connotazioni principali dell’intervento:
- Progressività delle scelte — mostrare solo ciò che serve nel momento in cui serve
- Centralità del risultato — rendere visibile l’esito dell’azione mentre la si compie
- Riduzione dei clic non necessari — eliminare o rendere discrezionali passaggi intermedi che non aggiungono valore
Nuova esperienza — Clip standard
La modale si apre ora con la clip standard preselezionata e il campo titolo già attivo, consentendo all’utente di iniziare immediatamente a scrivere. Questo rende possibile creare una clip base in pochi secondi, senza interruzioni.
Per aumentare la consapevolezza dell’esito, il titolo non è più un semplice campo testuale, ma è inserito all’interno di una anteprima semplificata della clip. In questa anteprima l’utente vede:
- Il colore della clip (derivato dal livello / riga)
- La dimensione selezionata
- Il tipo di connessioni previste
- Il comportamento della connessione alla selezione
La selezione dell’icona, precedentemente centrale, è stata spostata in una modalina secondaria, accessibile tramite un pulsante laterale. In questo modo l’icona diventa un’opzione di personalizzazione e non più un passaggio proposto all'utente in modo ingombrante.
Il campo descrizione rimane invariato rispetto alla versione precedente, mantenendo la flessibilità di formattazione già apprezzata dagli utenti.
Gestione dei link
Anche l’inserimento dei link è stato semplificato. In precedenza, per aggiungere un link era necessario attivare esplicitamente il comando Aggiungi link, rilevando anche l'incertezza da parte degli utenti che si chiedevano se il campo label fosse obbligatorio da compilare.
Nel nuovo flusso:
- Il campo di inserimento del link è sempre visibile
- Nel momento in cui viene inserito un valore:
- Appare il comando per rimuovere il link
- Compare il campo Label, chiaramente opzionale
- Viene generato automaticamente un nuovo campo vuoto sottostante
Questa struttura consente un inserimento rapido e continuo delle risorse e abilita, implicitamente, l’inserimento di link multipli: incollando più URL vengono generate automaticamente più voci collegate alla clip.
Nuova esperienza — Elementi BPMN
Nel caso degli elementi BPMN, la criticità era duplice: da un lato la forte densità di opzioni presentate simultaneamente, dall’altro la difficoltà nel comprendere in anticipo il comportamento che l’elemento avrebbe assunto nel flusso una volta inserito in griglia.
Rispetto alla clip standard, adesso la modale BPMN introduce un sottolivello di selezione: l’utente sceglie prima la famiglia di elementi (Gateway, Eventi, Attività), riducendo drasticamente il numero di opzioni visibili contemporaneamente.
Le varianti sono disposte in modo radiale e presentano una selezione di default. L’anteprima della clip mostra immediatamente il comportamento atteso dell’elemento — ad esempio la biforcazione prevista da un Exclusive Gateway.
Nuova esperienza — Link a progetto / scena
La clip di collegamento a progetto o scena svolge una funzione diversa: creare un ponte verso un contesto esterno. Per questo motivo, la modale è stata mantenuta intenzionalmente più semplice.
L’utente può:
- Scegliere se collegare un progetto o una scena
- Selezionare l’elemento esistente
- Opzionalmente definire un titolo alternativo
- Aggiungere una descrizione
L’anteprima mostra una clip tratteggiata, comunicando visivamente che l’elemento non appartiene interamente al progetto corrente.
Risultati e validazione
Il redesign della modale è stato valutato attraverso sessioni di test cronometrate e osservazioni qualitative, coinvolgendo sia utenti già familiari con Segno sia utenti alla prima esperienza con la piattaforma. Entrambi i gruppi hanno svolto gli stessi compiti utilizzando sia la vecchia modale sia la nuova modale, così da rendere confrontabili i risultati.
Agli utenti è stato chiesto di:
- creare una clip standard
- creare diversi elementi BPMN partendo dal risultato desiderato nel flusso (ad esempio ottenere una biforcazione tramite un gateway esclusivo)
- aggiungere una risorsa esterna tramite link
I risultati hanno mostrato dinamiche interessanti:
- Gli utenti nuovi completavano i compiti con la nuova modale in circa il 19% di tempo in meno rispetto alla vecchia modale, indicando una maggiore efficacia del nuovo flusso nelle fasi di primo utilizzo.
- Gli utenti già esperti completavano gli stessi compiti con la nuova modale in circa il 22% di tempo in meno rispetto agli utenti esperti che utilizzavano la versione precedente.
- Nelle prime interazioni, gli utenti esperti risultavano inizialmente circa il 7% più lenti rispetto ai nuovi utenti che utilizzavano la nuova modale, segnalando un naturale periodo di assestamento rispetto alle abitudini consolidate.
Quest’ultimo dato ha evidenziato un aspetto rilevante: il redesign introduceva un modello di interazione più chiaro ed esplicito, ma richiedeva un breve tempo di riadattamento per chi era abituato ai comportamenti della versione precedente. Una volta superata questa fase, le prestazioni degli utenti esperti si allineavano e superavano quelle precedenti.
Le domande di follow-up hanno confermato i dati quantitativi, evidenziando:
- una maggiore chiarezza su cosa facesse l’elemento creato
- una migliore comprensione dell’impatto della clip sul flusso
- una percezione di maggiore semplicità, pur in presenza di un dominio complesso
Conclusione
Il redesign della modale di creazione delle clip ha permesso di trasformare un’interazione densa e frammentata in un’esperienza progressiva e orientata al risultato. L’obiettivo non era ridurre le possibilità del sistema, ma renderle comprensibili nel momento in cui diventano rilevanti.
Questo intervento completa il lavoro avviato con il ripensamento della navigazione, chiudendo un primo ciclo di progettazione focalizzato su chiarezza, flusso e consapevolezza dell’azione.
Semplificare l’azione più frequente
Come ridurre il carico cognitivo e migliorare la comprensione dell’esito di creare una clip in Segno
Sommario:
Risultati ottenuti:
- Creazione delle clip più lineare e prevedibile, con maggiore consapevolezza dell’esito prima della conferma.
- Riduzione del carico cognitivo nella configurazione delle clip, in particolare per gli elementi BPMN.
- Migliore leggibilità del comportamento della clip una volta inserita nel flusso.
- Riduzione misurata del tempo di completamento delle azioni chiave (−19% per utenti nuovi, −22% per utenti esperti).
Tipo di lavoro:
Analisi UX della modale esistente, osservazione di utilizzo reale, ridefinizione dei flussi di creazione, interaction design e prototipazione iterativa.
Consegna:
Redesign completo della modale di creazione delle clip, introduzione di anteprime orientate all’esito, flussi progressivi per le diverse tipologie di clip e prototipi validati tramite test.
Team:
Giacomo Dalia, confronto continuo con stakeholder interni e team di sviluppo di Segno.
Il mio ruolo:
Product Designer Consultant — analisi delle frizioni nella creazione delle clip, definizione dei principi di progressività e outcome awareness, progettazione delle nuove interazioni e validazione tramite test qualitativi e quantitativi.
Curiosità:
Il redesign della modale ha evidenziato differenze significative tra utenti nuovi ed esperti, mostrando come un’interazione più esplicita richieda un breve periodo di adattamento, ma produca benefici maggiori nel medio periodo.
Introduzione
Il precedente case study, "Quando la crescita del prodotto mette in crisi la navigazione", si concludeva mettendo in evidenza un punto chiave: una volta chiariti dove e come avvengono le azioni immediate sulla griglia, emergeva con forza un’altra criticità. L’azione più frequente e strategica di Segno — la creazione di una clip — risultava ancora pesante, frammentata e poco comunicativa rispetto al risultato finale.
In Segno, le clip rappresentano l’unità fondamentale di lavoro: sono elementi concettuali che permettono di tradurre idee, decisioni, passaggi logici o riferimenti esterni in nodi operativi all’interno della griglia. Ogni clip non è un contenuto isolato, ma un punto attivo di un sistema più ampio, pensato per essere collegato, attraversato e riorganizzato all’interno di flussi di senso. Creare una clip significa quindi dare forma a un concetto e inserirlo consapevolmente in una rete di relazioni che ne determina il ruolo e il comportamento.
Questo secondo intervento progettuale nasce proprio dal bisogno di rendere la creazione di una clip più fluida, più leggibile e più orientata all’esito.
Contesto
Prima dell’avvio formale della consulenza, la modale di creazione della clip aveva già ricevuto una prima ottimizzazione a seguito dei miei feedback come beta tester. In origine, infatti, le priorità di compilazione non erano rispettate:
- La prima scelta proposta all’utente era la selezione dell’icona, l’elemento meno rilevante dell’intera clip
- Per inserire il titolo era necessario un clic esplicito sul campo
Questa configurazione andava in direzione opposta rispetto a una compilazione rapida e aumentava la percezione di pesantezza dell’interazione. Corrette queste prime frizioni, la modale si presentava comunque, all’inizio della progettazione, come un’interfaccia ancora molto densa.
Struttura della modale pre–progettazione
La modale era organizzata attorno a una prima scelta fondamentale: il tipo di clip. In una fase iniziale questa decisione veniva presa direttamente nella griglia, tramite il menù contestuale. Con l’introduzione della barra delle azioni e della creazione rapida della clip in grid, la scelta del tipo è stata spostata nella modale, che è diventata il luogo dedicato alla configurazione consapevole dell’elemento.
Clip standard
Nel caso della clip standard, la modale concentrava in un unico spazio tutte le opzioni di configurazione principali. L’utente poteva definire la dimensione orizzontale della clip (piccola, media o grande), inserire un titolo e una descrizione testuale, scegliere un’icona e aggiungere uno o più link.
In particolare, il selettore di icona — presente solo per questa tipologia — occupava una porzione rilevante dello spazio disponibile, contribuendo in modo significativo alla densità visiva complessiva, pur non rappresentando una decisione centrale per la maggior parte dei casi d’uso.
Elemento BPMN
Gli elementi BPMN (Business Process Model and Notation) sono costrutti standard utilizzati per rappresentare visivamente processi, decisioni e flussi operativi. In Segno vengono utilizzati per modellare sequenze logiche e comportamenti strutturati all’interno di sistemi complessi.
Date queste premesse, la configurazione degli elementi BPMN risultava ancora più complessa. All’interno della stessa vista venivano presentate contemporaneamente tutte le famiglie principali — Gateway, Eventi e Attività — insieme a tutte le rispettive varianti.
Questa scelta rendeva immediatamente disponibili tutte le opzioni, ma al costo di una forte occupazione dello spazio verticale e di un elevato clutter visivo. Inoltre, risultava difficile comprendere in anticipo che ruolo avrebbe avuto l’elemento una volta inserito in griglia e come si sarebbe comportato nel flusso: queste informazioni erano affidate quasi esclusivamente all’identità visiva dell’elemento e alla sua denominazione, senza un supporto visivo o contestuale che ne anticipasse l’effetto concreto.
Link a progetto o scena
La clip di collegamento a progetto o scena serve a creare un riferimento verso un altro contesto di lavoro: un progetto distinto o una scena, ovvero una variante interna a un progetto esistente. Inserire questo tipo di clip in griglia significa quindi stabilire un collegamento logico tra contesti, mantenendo una continuità visiva all’interno del flusso.
Nella versione precedente, le opzioni relative a questo tipo di clip venivano presentate tramite tab orizzontali, mostrando contemporaneamente tutte le possibilità disponibili. Sebbene il flusso fosse più semplice rispetto alle altre tipologie, questa impostazione contribuiva comunque a un’eccessiva esposizione alle scelte.
Le connotazioni dell’intervento
Durante l’osservazione funzionale di alcuni utenti alle prese con la modale — con consegne di compito differenti — sono emerse criticità ricorrenti che hanno orientato l’intervento progettuale.
In particolare:
- il numero elevato di clic necessari per completare anche azioni semplici
- la difficoltà nell’anticipare che cosa sarebbe apparso in griglia una volta conclusa l’operazione
- una scarsa chiarezza visiva e funzionale soprattutto nella creazione degli elementi BPMN
Il tema centrale non era tanto cosa scegliere, quanto lo sforzo richiesto per arrivare al risultato e la scarsa leggibilità dell’esito concreto dell’azione una volta completata.
A partire da queste osservazioni, il redesign della modale si è fondato su tre connotazioni principali dell’intervento:
- Progressività delle scelte — mostrare solo ciò che serve nel momento in cui serve
- Centralità del risultato — rendere visibile l’esito dell’azione mentre la si compie
- Riduzione dei clic non necessari — eliminare o rendere discrezionali passaggi intermedi che non aggiungono valore
Nuova esperienza — Clip standard
La modale si apre ora con la clip standard preselezionata e il campo titolo già attivo, consentendo all’utente di iniziare immediatamente a scrivere. Questo rende possibile creare una clip base in pochi secondi, senza interruzioni.
Per aumentare la consapevolezza dell’esito, il titolo non è più un semplice campo testuale, ma è inserito all’interno di una anteprima semplificata della clip. In questa anteprima l’utente vede:
- Il colore della clip (derivato dal livello / riga)
- La dimensione selezionata
- Il tipo di connessioni previste
- Il comportamento della connessione alla selezione
La selezione dell’icona, precedentemente centrale, è stata spostata in una modalina secondaria, accessibile tramite un pulsante laterale. In questo modo l’icona diventa un’opzione di personalizzazione e non più un passaggio proposto all'utente in modo ingombrante.
Il campo descrizione rimane invariato rispetto alla versione precedente, mantenendo la flessibilità di formattazione già apprezzata dagli utenti.
Gestione dei link
Anche l’inserimento dei link è stato semplificato. In precedenza, per aggiungere un link era necessario attivare esplicitamente il comando Aggiungi link, rilevando anche l'incertezza da parte degli utenti che si chiedevano se il campo label fosse obbligatorio da compilare.
Nel nuovo flusso:
- Il campo di inserimento del link è sempre visibile
- Nel momento in cui viene inserito un valore:
- Appare il comando per rimuovere il link
- Compare il campo Label, chiaramente opzionale
- Viene generato automaticamente un nuovo campo vuoto sottostante
Questa struttura consente un inserimento rapido e continuo delle risorse e abilita, implicitamente, l’inserimento di link multipli: incollando più URL vengono generate automaticamente più voci collegate alla clip.
Nuova esperienza — Elementi BPMN
Nel caso degli elementi BPMN, la criticità era duplice: da un lato la forte densità di opzioni presentate simultaneamente, dall’altro la difficoltà nel comprendere in anticipo il comportamento che l’elemento avrebbe assunto nel flusso una volta inserito in griglia.
Rispetto alla clip standard, adesso la modale BPMN introduce un sottolivello di selezione: l’utente sceglie prima la famiglia di elementi (Gateway, Eventi, Attività), riducendo drasticamente il numero di opzioni visibili contemporaneamente.
Le varianti sono disposte in modo radiale e presentano una selezione di default. L’anteprima della clip mostra immediatamente il comportamento atteso dell’elemento — ad esempio la biforcazione prevista da un Exclusive Gateway.
Nuova esperienza — Link a progetto / scena
La clip di collegamento a progetto o scena svolge una funzione diversa: creare un ponte verso un contesto esterno. Per questo motivo, la modale è stata mantenuta intenzionalmente più semplice.
L’utente può:
- Scegliere se collegare un progetto o una scena
- Selezionare l’elemento esistente
- Opzionalmente definire un titolo alternativo
- Aggiungere una descrizione
L’anteprima mostra una clip tratteggiata, comunicando visivamente che l’elemento non appartiene interamente al progetto corrente.
Risultati e validazione
Il redesign della modale è stato valutato attraverso sessioni di test cronometrate e osservazioni qualitative, coinvolgendo sia utenti già familiari con Segno sia utenti alla prima esperienza con la piattaforma. Entrambi i gruppi hanno svolto gli stessi compiti utilizzando sia la vecchia modale sia la nuova modale, così da rendere confrontabili i risultati.
Agli utenti è stato chiesto di:
- creare una clip standard
- creare diversi elementi BPMN partendo dal risultato desiderato nel flusso (ad esempio ottenere una biforcazione tramite un gateway esclusivo)
- aggiungere una risorsa esterna tramite link
I risultati hanno mostrato dinamiche interessanti:
- Gli utenti nuovi completavano i compiti con la nuova modale in circa il 19% di tempo in meno rispetto alla vecchia modale, indicando una maggiore efficacia del nuovo flusso nelle fasi di primo utilizzo.
- Gli utenti già esperti completavano gli stessi compiti con la nuova modale in circa il 22% di tempo in meno rispetto agli utenti esperti che utilizzavano la versione precedente.
- Nelle prime interazioni, gli utenti esperti risultavano inizialmente circa il 7% più lenti rispetto ai nuovi utenti che utilizzavano la nuova modale, segnalando un naturale periodo di assestamento rispetto alle abitudini consolidate.
Quest’ultimo dato ha evidenziato un aspetto rilevante: il redesign introduceva un modello di interazione più chiaro ed esplicito, ma richiedeva un breve tempo di riadattamento per chi era abituato ai comportamenti della versione precedente. Una volta superata questa fase, le prestazioni degli utenti esperti si allineavano e superavano quelle precedenti.
Le domande di follow-up hanno confermato i dati quantitativi, evidenziando:
- una maggiore chiarezza su cosa facesse l’elemento creato
- una migliore comprensione dell’impatto della clip sul flusso
- una percezione di maggiore semplicità, pur in presenza di un dominio complesso
Conclusione
Il redesign della modale di creazione delle clip ha permesso di trasformare un’interazione densa e frammentata in un’esperienza progressiva e orientata al risultato. L’obiettivo non era ridurre le possibilità del sistema, ma renderle comprensibili nel momento in cui diventano rilevanti.
Questo intervento completa il lavoro avviato con il ripensamento della navigazione, chiudendo un primo ciclo di progettazione focalizzato su chiarezza, flusso e consapevolezza dell’azione.
Semplificare l’azione più frequente
Come ridurre il carico cognitivo e migliorare la comprensione dell’esito di creare una clip in Segno
Sommario:
Risultati ottenuti:
- Creazione delle clip più lineare e prevedibile, con maggiore consapevolezza dell’esito prima della conferma.
- Riduzione del carico cognitivo nella configurazione delle clip, in particolare per gli elementi BPMN.
- Migliore leggibilità del comportamento della clip una volta inserita nel flusso.
- Riduzione misurata del tempo di completamento delle azioni chiave (−19% per utenti nuovi, −22% per utenti esperti).
Tipo di lavoro:
Analisi UX della modale esistente, osservazione di utilizzo reale, ridefinizione dei flussi di creazione, interaction design e prototipazione iterativa.
Consegna:
Redesign completo della modale di creazione delle clip, introduzione di anteprime orientate all’esito, flussi progressivi per le diverse tipologie di clip e prototipi validati tramite test.
Team:
Giacomo Dalia, confronto continuo con stakeholder interni e team di sviluppo di Segno.
Il mio ruolo:
Product Designer Consultant — analisi delle frizioni nella creazione delle clip, definizione dei principi di progressività e outcome awareness, progettazione delle nuove interazioni e validazione tramite test qualitativi e quantitativi.
Curiosità:
Il redesign della modale ha evidenziato differenze significative tra utenti nuovi ed esperti, mostrando come un’interazione più esplicita richieda un breve periodo di adattamento, ma produca benefici maggiori nel medio periodo.
Introduzione
Il precedente case study, "Quando la crescita del prodotto mette in crisi la navigazione", si concludeva mettendo in evidenza un punto chiave: una volta chiariti dove e come avvengono le azioni immediate sulla griglia, emergeva con forza un’altra criticità. L’azione più frequente e strategica di Segno — la creazione di una clip — risultava ancora pesante, frammentata e poco comunicativa rispetto al risultato finale.
In Segno, le clip rappresentano l’unità fondamentale di lavoro: sono elementi concettuali che permettono di tradurre idee, decisioni, passaggi logici o riferimenti esterni in nodi operativi all’interno della griglia. Ogni clip non è un contenuto isolato, ma un punto attivo di un sistema più ampio, pensato per essere collegato, attraversato e riorganizzato all’interno di flussi di senso. Creare una clip significa quindi dare forma a un concetto e inserirlo consapevolmente in una rete di relazioni che ne determina il ruolo e il comportamento.
Questo secondo intervento progettuale nasce proprio dal bisogno di rendere la creazione di una clip più fluida, più leggibile e più orientata all’esito.
Contesto
Prima dell’avvio formale della consulenza, la modale di creazione della clip aveva già ricevuto una prima ottimizzazione a seguito dei miei feedback come beta tester. In origine, infatti, le priorità di compilazione non erano rispettate:
- La prima scelta proposta all’utente era la selezione dell’icona, l’elemento meno rilevante dell’intera clip
- Per inserire il titolo era necessario un clic esplicito sul campo
Questa configurazione andava in direzione opposta rispetto a una compilazione rapida e aumentava la percezione di pesantezza dell’interazione. Corrette queste prime frizioni, la modale si presentava comunque, all’inizio della progettazione, come un’interfaccia ancora molto densa.
Struttura della modale pre–progettazione
La modale era organizzata attorno a una prima scelta fondamentale: il tipo di clip. In una fase iniziale questa decisione veniva presa direttamente nella griglia, tramite il menù contestuale. Con l’introduzione della barra delle azioni e della creazione rapida della clip in grid, la scelta del tipo è stata spostata nella modale, che è diventata il luogo dedicato alla configurazione consapevole dell’elemento.
Clip standard
Nel caso della clip standard, la modale concentrava in un unico spazio tutte le opzioni di configurazione principali. L’utente poteva definire la dimensione orizzontale della clip (piccola, media o grande), inserire un titolo e una descrizione testuale, scegliere un’icona e aggiungere uno o più link.
In particolare, il selettore di icona — presente solo per questa tipologia — occupava una porzione rilevante dello spazio disponibile, contribuendo in modo significativo alla densità visiva complessiva, pur non rappresentando una decisione centrale per la maggior parte dei casi d’uso.
Elemento BPMN
Gli elementi BPMN (Business Process Model and Notation) sono costrutti standard utilizzati per rappresentare visivamente processi, decisioni e flussi operativi. In Segno vengono utilizzati per modellare sequenze logiche e comportamenti strutturati all’interno di sistemi complessi.
Date queste premesse, la configurazione degli elementi BPMN risultava ancora più complessa. All’interno della stessa vista venivano presentate contemporaneamente tutte le famiglie principali — Gateway, Eventi e Attività — insieme a tutte le rispettive varianti.
Questa scelta rendeva immediatamente disponibili tutte le opzioni, ma al costo di una forte occupazione dello spazio verticale e di un elevato clutter visivo. Inoltre, risultava difficile comprendere in anticipo che ruolo avrebbe avuto l’elemento una volta inserito in griglia e come si sarebbe comportato nel flusso: queste informazioni erano affidate quasi esclusivamente all’identità visiva dell’elemento e alla sua denominazione, senza un supporto visivo o contestuale che ne anticipasse l’effetto concreto.
Link a progetto o scena
La clip di collegamento a progetto o scena serve a creare un riferimento verso un altro contesto di lavoro: un progetto distinto o una scena, ovvero una variante interna a un progetto esistente. Inserire questo tipo di clip in griglia significa quindi stabilire un collegamento logico tra contesti, mantenendo una continuità visiva all’interno del flusso.
Nella versione precedente, le opzioni relative a questo tipo di clip venivano presentate tramite tab orizzontali, mostrando contemporaneamente tutte le possibilità disponibili. Sebbene il flusso fosse più semplice rispetto alle altre tipologie, questa impostazione contribuiva comunque a un’eccessiva esposizione alle scelte.
Le connotazioni dell’intervento
Durante l’osservazione funzionale di alcuni utenti alle prese con la modale — con consegne di compito differenti — sono emerse criticità ricorrenti che hanno orientato l’intervento progettuale.
In particolare:
- il numero elevato di clic necessari per completare anche azioni semplici
- la difficoltà nell’anticipare che cosa sarebbe apparso in griglia una volta conclusa l’operazione
- una scarsa chiarezza visiva e funzionale soprattutto nella creazione degli elementi BPMN
Il tema centrale non era tanto cosa scegliere, quanto lo sforzo richiesto per arrivare al risultato e la scarsa leggibilità dell’esito concreto dell’azione una volta completata.
A partire da queste osservazioni, il redesign della modale si è fondato su tre connotazioni principali dell’intervento:
- Progressività delle scelte — mostrare solo ciò che serve nel momento in cui serve
- Centralità del risultato — rendere visibile l’esito dell’azione mentre la si compie
- Riduzione dei clic non necessari — eliminare o rendere discrezionali passaggi intermedi che non aggiungono valore
Nuova esperienza — Clip standard
La modale si apre ora con la clip standard preselezionata e il campo titolo già attivo, consentendo all’utente di iniziare immediatamente a scrivere. Questo rende possibile creare una clip base in pochi secondi, senza interruzioni.
Per aumentare la consapevolezza dell’esito, il titolo non è più un semplice campo testuale, ma è inserito all’interno di una anteprima semplificata della clip. In questa anteprima l’utente vede:
- Il colore della clip (derivato dal livello / riga)
- La dimensione selezionata
- Il tipo di connessioni previste
- Il comportamento della connessione alla selezione
La selezione dell’icona, precedentemente centrale, è stata spostata in una modalina secondaria, accessibile tramite un pulsante laterale. In questo modo l’icona diventa un’opzione di personalizzazione e non più un passaggio proposto all'utente in modo ingombrante.
Il campo descrizione rimane invariato rispetto alla versione precedente, mantenendo la flessibilità di formattazione già apprezzata dagli utenti.
Gestione dei link
Anche l’inserimento dei link è stato semplificato. In precedenza, per aggiungere un link era necessario attivare esplicitamente il comando Aggiungi link, rilevando anche l'incertezza da parte degli utenti che si chiedevano se il campo label fosse obbligatorio da compilare.
Nel nuovo flusso:
- Il campo di inserimento del link è sempre visibile
- Nel momento in cui viene inserito un valore:
- Appare il comando per rimuovere il link
- Compare il campo Label, chiaramente opzionale
- Viene generato automaticamente un nuovo campo vuoto sottostante
Questa struttura consente un inserimento rapido e continuo delle risorse e abilita, implicitamente, l’inserimento di link multipli: incollando più URL vengono generate automaticamente più voci collegate alla clip.
Nuova esperienza — Elementi BPMN
Nel caso degli elementi BPMN, la criticità era duplice: da un lato la forte densità di opzioni presentate simultaneamente, dall’altro la difficoltà nel comprendere in anticipo il comportamento che l’elemento avrebbe assunto nel flusso una volta inserito in griglia.
Rispetto alla clip standard, adesso la modale BPMN introduce un sottolivello di selezione: l’utente sceglie prima la famiglia di elementi (Gateway, Eventi, Attività), riducendo drasticamente il numero di opzioni visibili contemporaneamente.
Le varianti sono disposte in modo radiale e presentano una selezione di default. L’anteprima della clip mostra immediatamente il comportamento atteso dell’elemento — ad esempio la biforcazione prevista da un Exclusive Gateway.
Nuova esperienza — Link a progetto / scena
La clip di collegamento a progetto o scena svolge una funzione diversa: creare un ponte verso un contesto esterno. Per questo motivo, la modale è stata mantenuta intenzionalmente più semplice.
L’utente può:
- Scegliere se collegare un progetto o una scena
- Selezionare l’elemento esistente
- Opzionalmente definire un titolo alternativo
- Aggiungere una descrizione
L’anteprima mostra una clip tratteggiata, comunicando visivamente che l’elemento non appartiene interamente al progetto corrente.
Risultati e validazione
Il redesign della modale è stato valutato attraverso sessioni di test cronometrate e osservazioni qualitative, coinvolgendo sia utenti già familiari con Segno sia utenti alla prima esperienza con la piattaforma. Entrambi i gruppi hanno svolto gli stessi compiti utilizzando sia la vecchia modale sia la nuova modale, così da rendere confrontabili i risultati.
Agli utenti è stato chiesto di:
- creare una clip standard
- creare diversi elementi BPMN partendo dal risultato desiderato nel flusso (ad esempio ottenere una biforcazione tramite un gateway esclusivo)
- aggiungere una risorsa esterna tramite link
I risultati hanno mostrato dinamiche interessanti:
- Gli utenti nuovi completavano i compiti con la nuova modale in circa il 19% di tempo in meno rispetto alla vecchia modale, indicando una maggiore efficacia del nuovo flusso nelle fasi di primo utilizzo.
- Gli utenti già esperti completavano gli stessi compiti con la nuova modale in circa il 22% di tempo in meno rispetto agli utenti esperti che utilizzavano la versione precedente.
- Nelle prime interazioni, gli utenti esperti risultavano inizialmente circa il 7% più lenti rispetto ai nuovi utenti che utilizzavano la nuova modale, segnalando un naturale periodo di assestamento rispetto alle abitudini consolidate.
Quest’ultimo dato ha evidenziato un aspetto rilevante: il redesign introduceva un modello di interazione più chiaro ed esplicito, ma richiedeva un breve tempo di riadattamento per chi era abituato ai comportamenti della versione precedente. Una volta superata questa fase, le prestazioni degli utenti esperti si allineavano e superavano quelle precedenti.
Le domande di follow-up hanno confermato i dati quantitativi, evidenziando:
- una maggiore chiarezza su cosa facesse l’elemento creato
- una migliore comprensione dell’impatto della clip sul flusso
- una percezione di maggiore semplicità, pur in presenza di un dominio complesso
Conclusione
Il redesign della modale di creazione delle clip ha permesso di trasformare un’interazione densa e frammentata in un’esperienza progressiva e orientata al risultato. L’obiettivo non era ridurre le possibilità del sistema, ma renderle comprensibili nel momento in cui diventano rilevanti.
Questo intervento completa il lavoro avviato con il ripensamento della navigazione, chiudendo un primo ciclo di progettazione focalizzato su chiarezza, flusso e consapevolezza dell’azione.