Quando la crescita del prodotto mette in crisi la navigazione
Ripristinare gerarchia, orientamento e progressività in un sistema in rapida evoluzione.
Sommario:
Risultati ottenuti:
- Percorsi di navigazione più leggibili e coerenti tra le diverse viste del prodotto.
- Migliore orientamento dell’utente nelle fasi di accesso, esplorazione e lavoro sui progetti.
- Riduzione delle situazioni di incertezza legate alla posizione e al ruolo delle visualizzazioni disponibili.
- Navigazione progressiva e contestuale, che espone le funzionalità solo quando diventano rilevanti.
Tipo di lavoro:
Audit della navigazione esistente, analisi UX basata su osservazione dell’uso reale, ridefinizione dell’architettura delle viste e prototipazione iterativa di soluzioni di navigazione contestuale.
Consegna:
Proposta di riorganizzazione dell’header e delle viste principali, modello di navigazione progressiva applicato a Collection e Project view, prototipi funzionali per la validazione delle nuove logiche di accesso e orientamento.
Team:
Giacomo Dalia, confronto continuo con stakeholder interni e team di sviluppo di Segno.
Il mio ruolo:
Product Designer Consultant — analisi dei pain point legati alla navigazione, ridefinizione della gerarchia delle viste, progettazione dei flussi di accesso e orientamento, con particolare attenzione alla coerenza tra contesto, azioni disponibili e aspettative dell’utente.
Curiosità:
Il redesign della navigazione è nato come intervento mirato su singole criticità, ma ha rapidamente evidenziato la necessità di rivedere anche le azioni operative nella griglia, aprendo il percorso che ha portato al secondo case study.
Introduzione
Come anticipato nell’overview del progetto, Segno è un prodotto in continuo divenire: cresce rapidamente, stratificando funzionalità e modalità d’uso nel tempo. Questa crescita, naturale in una fase esplorativa e sperimentale, ha però reso necessario un momento di consolidamento e riflessione sulla struttura dell’interfaccia.
Quando ho iniziato a lavorare su Segno come Product Designer Consultant, il primo e più evidente pain point emerso dall’uso quotidiano della piattaforma è stato la navigazione. Il sistema era ricco di funzioni, ma il flusso non risultava immediatamente leggibile e i comandi che lo governavano apparivano, in più punti, poco coerenti con le aspettative degli utenti che hanno partecipato al Beta Testing.
Contesto e problema
La navigazione di Segno si era sviluppata in modo incrementale, seguendo l’evoluzione delle funzionalità piuttosto che un disegno unitario. Questo aveva portato a:
- percorsi poco espliciti tra le diverse sezioni del prodotto
- azioni disponibili ma difficili da individuare
- una distribuzione dei comandi non sempre allineata ai principi standard di usabilità
Un esempio emblematico riguardava l’header della piattaforma. In una configurazione convenzionale, il logo posizionato in alto a sinistra rappresenta l’ancora per tornare alla home. In Segno, quello spazio era invece occupato dall’accesso alle impostazioni utente, affiancato da ricerca e help contestuale.
Il ritorno alla home era affidato a un path visibile solo dopo essere entrati in un progetto e posizionato al centro dell’header: una collocazione inattesa che rischiava di far percepire l’utente come “intrappolato” all’interno del progetto. Questo effetto era amplificato dal fatto che il pulsante back del browser riportava alla pagina dei risultati del motore di ricerca, interrompendo il flusso di lavoro.
Primo intervento — Riorganizzazione dell’header
Il primo intervento ha riguardato la normalizzazione dell’header, riportandolo verso uno schema più riconoscibile e coerente con le abitudini operative dell’utente medio:
- Inserimento del pulsante Home tramite il logo del prodotto in alto a sinistra
- Spostamento dei comandi secondari (impostazioni, ricerca, help) sulla destra
- Mantenimento temporaneo di aspetto e comportamento di ricerca e help, rimandandone l’ottimizzazione a iterazioni successive
Il path precedentemente collocato nell’header è stato rimosso e ripensato in una sezione sottostante, liberando spazio e riducendo l’ambiguità cognitiva.
Un sistema di viste cresciuto senza una gerarchia chiara
Le criticità maggiori emergevano nella navigazione tra le diverse visualizzazioni del prodotto. L’utente si trovava davanti a una struttura a tab composta da:
- Collection — la vista principale con l’elenco dei progetti
- Project — la vista del singolo progetto (disabilitata fino all’accesso al progetto)
- Presentation — una delle feature a maggior valore aggiunto, anch’essa disabilitata fino all’ingresso nel progetto
- Community — sempre attiva, indipendentemente dal contesto, raccoglie template di progetto curati dalla redazione di Segno e contributi condivisi dagli altri utenti, pensati come punto di ispirazione e riuso.
A questa si aggiungeva una vista a lista dei concetti, semanticamente affine alle altre, ma collocata nelle impostazioni. Il risultato era una frammentazione delle visualizzazioni, dovuta a una crescita rapida che aveva lasciato “indietro” alcune decisioni strutturali.
Il redesign — Navigazione contestuale e progressiva
Il redesign ha introdotto un cambiamento sostanziale: abbandonare un sistema di tab statici in favore di una navigazione più contestuale, capace di adattarsi allo stato corrente dell’utente.
Nella vista "Collection":
- Lo spazio precedentemente occupato dai tab è stato trasformato in un carosello di template della Community, dandovi maggior rilievo.
- L’accesso ai template completi è diventato un’azione chiara e dedicata.
- Le varie visualizzazioni di progetto non sono più mostrate finché non si accede ad un progetto, quando cioè diventano rilevanti.
All’interno di un progetto:
- Lo stesso spazio è stato riutilizzato per ospitare informazioni contestuali: nome del progetto, stato di salvataggio, azioni di export e condivisione
- Le diverse visualizzazioni del progetto sono state raccolte in tab minimali a icona, posizionati sulla destra
- Alle viste esistenti si sono aggiunte:
- una vista documento, in cui l’AI organizza i concetti in una forma discorsiva
- una vista ad albero, più familiare per chi è abituato alle mappe concettuali tradizionali
Questo approccio ha reso la navigazione progressiva, mostrando solo ciò che è utile nel momento in cui serve.
Validazione e primi riscontri
Le modifiche alla navigazione sono state iterate e valutate principalmente attraverso osservazione diretta dell’uso della piattaforma e raccolta di feedback qualitativi da parte del gruppo di beta tester coinvolti nello sviluppo.
In questa fase, l’obiettivo non era produrre una misurazione quantitativa formale, ma verificare:
- la maggiore chiarezza dei percorsi principali
- la riduzione delle situazioni di incertezza durante l’esplorazione dell’interfaccia
- la coerenza percepita tra contesto, comandi disponibili e azioni attese
I riscontri hanno indicato una migliore comprensione del flusso di navigazione e una riduzione delle frizioni nelle fasi iniziali di utilizzo. Il redesign è stato quindi considerato sufficientemente solido per proseguire lo sviluppo.
In una fase successiva, il sistema si presta a ulteriori attività di validazione strutturata — come l’utilizzo di scale standard di usabilità o test comparativi tra versioni — da integrare una volta stabilizzato il set di funzionalità principali.
Dalla navigazione alle azioni
Una volta consolidata la navigazione globale, l’attenzione si è spostata sulle azioni disponibili nella griglia, lo spazio operativo in cui i concetti vengono creati, modificati e messi in relazione.
Nelle prime versioni di Segno, l’interazione con la griglia era fortemente basata su menù contestuali attivabili con il clic destro. Azioni centrali come la creazione di una nuova clip, l’aggiunta di una milestone o la gestione delle relazioni richiedevano di conoscere in anticipo il gesto corretto e il punto esatto in cui intervenire. Questo approccio risultava efficiente per utenti esperti, ma poco leggibile per chi si avvicinava allo strumento per la prima volta.
Con l’evoluzione del prodotto, il sistema di interazioni si è progressivamente arricchito. È stata introdotta la selezione esplicita degli elementi e, di conseguenza, una barra delle azioni visibile una volta selezionata una o più clip. In questa fase sono state aggiunte nuove funzionalità, come Insert in Flow: un’azione che permetteva di selezionare una clip e inserirne un’altra all’interno della relazione che la collegava a un elemento successivo nel flusso.
Questo arricchimento, pur rispondendo a bisogni reali, ha generato una crescente incongruenza tra le interazioni: alcune azioni erano legate al contesto della riga, altre alla selezione della clip, altre ancora esclusivamente alla barra delle azioni. Era necessario mettere ordine alle interazioni che l'utente ha con il suo progetto.
Per affrontare il problema è stato utile distinguere due categorie di interazione:
- Azioni immediate e frequenti, legate al ritmo del lavoro sulla griglia e orientate alla velocità di inserimento e modifica dei contenuti.
- Azioni strutturali, che incidono sulla natura dell’elemento e richiedono un momento di attenzione dedicato.
A partire da questa distinzione, l’intervento si è concentrato sulle azioni immediate e frequenti, ovvero quelle che scandiscono il ritmo operativo del lavoro sulla griglia.
Il menù contestuale resta disponibile come modalità alternativa, ma non rappresenta più il canale principale di interazione. Oggi la maggior parte delle interazioni passa dalla barra delle azioni, che si adatta dinamicamente al contesto: mostra comandi diversi in base a ciò che è selezionato — una riga, una clip, una connessione — o propone azioni di base quando non è selezionato alcun elemento.
In questo contesto è stato chiarito il ruolo delle azioni immediate: il doppio clic sulla griglia è stato assegnato alla creazione rapida di una clip, mentre la milestone, azione secondaria, è stata rimossa da questo gesto e resa disponibile tramite barra delle azioni o menù contestuale.
Allo stesso modo, l’azione Insert in Flow è stata resa più chiara e puntuale. Invece di passare dalla selezione della clip e dalla barra delle azioni, l’inserimento di un nuovo elemento nel flusso avviene ora cliccando direttamente sulla connessione tra due clip, rendendo esplicito sia il gesto sia il punto esatto in cui il nuovo concetto verrà collocato.
Queste modifiche hanno riallineato le interazioni con il contesto visivo e spaziale della griglia, riducendo ambiguità e carico cognitivo nelle azioni più frequenti.
Durante i test e l’utilizzo quotidiano della piattaforma, alcuni feedback hanno iniziato a emergere con una certa costanza. Gli utenti apprezzavano la maggiore chiarezza delle azioni di base, ma incontravano difficoltà nel momento in cui dovevano creare una clip completa: la modale risultava carica di opzioni, informazioni e passaggi, richiedeva numerosi clic e comunicava poco chiaramente il risultato finale dell’azione.
Questo ha reso evidente un ulteriore bisogno progettuale: migliorare l’esperienza di creazione e configurazione delle diverse tipologie di clip (gateway, eventi, oggetti), che fino a quel momento erano state gestite in modo frammentato tra barra delle azioni e menù contestuali.
Da qui si è aperto il secondo filone di lavoro, focalizzato sul rendere più semplice, leggibile e orientata all’esito l’azione più frequente di Segno: la creazione di una clip.
Quando la crescita del prodotto mette in crisi la navigazione
Ripristinare gerarchia, orientamento e progressività in un sistema in rapida evoluzione.
Sommario:
Risultati ottenuti:
- Percorsi di navigazione più leggibili e coerenti tra le diverse viste del prodotto.
- Migliore orientamento dell’utente nelle fasi di accesso, esplorazione e lavoro sui progetti.
- Riduzione delle situazioni di incertezza legate alla posizione e al ruolo delle visualizzazioni disponibili.
- Navigazione progressiva e contestuale, che espone le funzionalità solo quando diventano rilevanti.
Tipo di lavoro:
Audit della navigazione esistente, analisi UX basata su osservazione dell’uso reale, ridefinizione dell’architettura delle viste e prototipazione iterativa di soluzioni di navigazione contestuale.
Consegna:
Proposta di riorganizzazione dell’header e delle viste principali, modello di navigazione progressiva applicato a Collection e Project view, prototipi funzionali per la validazione delle nuove logiche di accesso e orientamento.
Team:
Giacomo Dalia, confronto continuo con stakeholder interni e team di sviluppo di Segno.
Il mio ruolo:
Product Designer Consultant — analisi dei pain point legati alla navigazione, ridefinizione della gerarchia delle viste, progettazione dei flussi di accesso e orientamento, con particolare attenzione alla coerenza tra contesto, azioni disponibili e aspettative dell’utente.
Curiosità:
Il redesign della navigazione è nato come intervento mirato su singole criticità, ma ha rapidamente evidenziato la necessità di rivedere anche le azioni operative nella griglia, aprendo il percorso che ha portato al secondo case study.
Introduzione
Come anticipato nell’overview del progetto, Segno è un prodotto in continuo divenire: cresce rapidamente, stratificando funzionalità e modalità d’uso nel tempo. Questa crescita, naturale in una fase esplorativa e sperimentale, ha però reso necessario un momento di consolidamento e riflessione sulla struttura dell’interfaccia.
Quando ho iniziato a lavorare su Segno come Product Designer Consultant, il primo e più evidente pain point emerso dall’uso quotidiano della piattaforma è stato la navigazione. Il sistema era ricco di funzioni, ma il flusso non risultava immediatamente leggibile e i comandi che lo governavano apparivano, in più punti, poco coerenti con le aspettative degli utenti che hanno partecipato al Beta Testing.
Contesto e problema
La navigazione di Segno si era sviluppata in modo incrementale, seguendo l’evoluzione delle funzionalità piuttosto che un disegno unitario. Questo aveva portato a:
- percorsi poco espliciti tra le diverse sezioni del prodotto
- azioni disponibili ma difficili da individuare
- una distribuzione dei comandi non sempre allineata ai principi standard di usabilità
Un esempio emblematico riguardava l’header della piattaforma. In una configurazione convenzionale, il logo posizionato in alto a sinistra rappresenta l’ancora per tornare alla home. In Segno, quello spazio era invece occupato dall’accesso alle impostazioni utente, affiancato da ricerca e help contestuale.
Il ritorno alla home era affidato a un path visibile solo dopo essere entrati in un progetto e posizionato al centro dell’header: una collocazione inattesa che rischiava di far percepire l’utente come “intrappolato” all’interno del progetto. Questo effetto era amplificato dal fatto che il pulsante back del browser riportava alla pagina dei risultati del motore di ricerca, interrompendo il flusso di lavoro.
Primo intervento — Riorganizzazione dell’header
Il primo intervento ha riguardato la normalizzazione dell’header, riportandolo verso uno schema più riconoscibile e coerente con le abitudini operative dell’utente medio:
- Inserimento del pulsante Home tramite il logo del prodotto in alto a sinistra
- Spostamento dei comandi secondari (impostazioni, ricerca, help) sulla destra
- Mantenimento temporaneo di aspetto e comportamento di ricerca e help, rimandandone l’ottimizzazione a iterazioni successive
Il path precedentemente collocato nell’header è stato rimosso e ripensato in una sezione sottostante, liberando spazio e riducendo l’ambiguità cognitiva.
Un sistema di viste cresciuto senza una gerarchia chiara
Le criticità maggiori emergevano nella navigazione tra le diverse visualizzazioni del prodotto. L’utente si trovava davanti a una struttura a tab composta da:
- Collection — la vista principale con l’elenco dei progetti
- Project — la vista del singolo progetto (disabilitata fino all’accesso al progetto)
- Presentation — una delle feature a maggior valore aggiunto, anch’essa disabilitata fino all’ingresso nel progetto
- Community — sempre attiva, indipendentemente dal contesto, raccoglie template di progetto curati dalla redazione di Segno e contributi condivisi dagli altri utenti, pensati come punto di ispirazione e riuso.
A questa si aggiungeva una vista a lista dei concetti, semanticamente affine alle altre, ma collocata nelle impostazioni. Il risultato era una frammentazione delle visualizzazioni, dovuta a una crescita rapida che aveva lasciato “indietro” alcune decisioni strutturali.
Il redesign — Navigazione contestuale e progressiva
Il redesign ha introdotto un cambiamento sostanziale: abbandonare un sistema di tab statici in favore di una navigazione più contestuale, capace di adattarsi allo stato corrente dell’utente.
Nella vista "Collection":
- Lo spazio precedentemente occupato dai tab è stato trasformato in un carosello di template della Community, dandovi maggior rilievo.
- L’accesso ai template completi è diventato un’azione chiara e dedicata.
- Le varie visualizzazioni di progetto non sono più mostrate finché non si accede ad un progetto, quando cioè diventano rilevanti.
All’interno di un progetto:
- Lo stesso spazio è stato riutilizzato per ospitare informazioni contestuali: nome del progetto, stato di salvataggio, azioni di export e condivisione
- Le diverse visualizzazioni del progetto sono state raccolte in tab minimali a icona, posizionati sulla destra
- Alle viste esistenti si sono aggiunte:
- una vista documento, in cui l’AI organizza i concetti in una forma discorsiva
- una vista ad albero, più familiare per chi è abituato alle mappe concettuali tradizionali
Questo approccio ha reso la navigazione progressiva, mostrando solo ciò che è utile nel momento in cui serve.
Validazione e primi riscontri
Le modifiche alla navigazione sono state iterate e valutate principalmente attraverso osservazione diretta dell’uso della piattaforma e raccolta di feedback qualitativi da parte del gruppo di beta tester coinvolti nello sviluppo.
In questa fase, l’obiettivo non era produrre una misurazione quantitativa formale, ma verificare:
- la maggiore chiarezza dei percorsi principali
- la riduzione delle situazioni di incertezza durante l’esplorazione dell’interfaccia
- la coerenza percepita tra contesto, comandi disponibili e azioni attese
I riscontri hanno indicato una migliore comprensione del flusso di navigazione e una riduzione delle frizioni nelle fasi iniziali di utilizzo. Il redesign è stato quindi considerato sufficientemente solido per proseguire lo sviluppo.
In una fase successiva, il sistema si presta a ulteriori attività di validazione strutturata — come l’utilizzo di scale standard di usabilità o test comparativi tra versioni — da integrare una volta stabilizzato il set di funzionalità principali.
Dalla navigazione alle azioni
Una volta consolidata la navigazione globale, l’attenzione si è spostata sulle azioni disponibili nella griglia, lo spazio operativo in cui i concetti vengono creati, modificati e messi in relazione.
Nelle prime versioni di Segno, l’interazione con la griglia era fortemente basata su menù contestuali attivabili con il clic destro. Azioni centrali come la creazione di una nuova clip, l’aggiunta di una milestone o la gestione delle relazioni richiedevano di conoscere in anticipo il gesto corretto e il punto esatto in cui intervenire. Questo approccio risultava efficiente per utenti esperti, ma poco leggibile per chi si avvicinava allo strumento per la prima volta.
Con l’evoluzione del prodotto, il sistema di interazioni si è progressivamente arricchito. È stata introdotta la selezione esplicita degli elementi e, di conseguenza, una barra delle azioni visibile una volta selezionata una o più clip. In questa fase sono state aggiunte nuove funzionalità, come Insert in Flow: un’azione che permetteva di selezionare una clip e inserirne un’altra all’interno della relazione che la collegava a un elemento successivo nel flusso.
Questo arricchimento, pur rispondendo a bisogni reali, ha generato una crescente incongruenza tra le interazioni: alcune azioni erano legate al contesto della riga, altre alla selezione della clip, altre ancora esclusivamente alla barra delle azioni. Era necessario mettere ordine alle interazioni che l'utente ha con il suo progetto.
Per affrontare il problema è stato utile distinguere due categorie di interazione:
- Azioni immediate e frequenti, legate al ritmo del lavoro sulla griglia e orientate alla velocità di inserimento e modifica dei contenuti.
- Azioni strutturali, che incidono sulla natura dell’elemento e richiedono un momento di attenzione dedicato.
A partire da questa distinzione, l’intervento si è concentrato sulle azioni immediate e frequenti, ovvero quelle che scandiscono il ritmo operativo del lavoro sulla griglia.
Il menù contestuale resta disponibile come modalità alternativa, ma non rappresenta più il canale principale di interazione. Oggi la maggior parte delle interazioni passa dalla barra delle azioni, che si adatta dinamicamente al contesto: mostra comandi diversi in base a ciò che è selezionato — una riga, una clip, una connessione — o propone azioni di base quando non è selezionato alcun elemento.
In questo contesto è stato chiarito il ruolo delle azioni immediate: il doppio clic sulla griglia è stato assegnato alla creazione rapida di una clip, mentre la milestone, azione secondaria, è stata rimossa da questo gesto e resa disponibile tramite barra delle azioni o menù contestuale.
Allo stesso modo, l’azione Insert in Flow è stata resa più chiara e puntuale. Invece di passare dalla selezione della clip e dalla barra delle azioni, l’inserimento di un nuovo elemento nel flusso avviene ora cliccando direttamente sulla connessione tra due clip, rendendo esplicito sia il gesto sia il punto esatto in cui il nuovo concetto verrà collocato.
Queste modifiche hanno riallineato le interazioni con il contesto visivo e spaziale della griglia, riducendo ambiguità e carico cognitivo nelle azioni più frequenti.
Durante i test e l’utilizzo quotidiano della piattaforma, alcuni feedback hanno iniziato a emergere con una certa costanza. Gli utenti apprezzavano la maggiore chiarezza delle azioni di base, ma incontravano difficoltà nel momento in cui dovevano creare una clip completa: la modale risultava carica di opzioni, informazioni e passaggi, richiedeva numerosi clic e comunicava poco chiaramente il risultato finale dell’azione.
Questo ha reso evidente un ulteriore bisogno progettuale: migliorare l’esperienza di creazione e configurazione delle diverse tipologie di clip (gateway, eventi, oggetti), che fino a quel momento erano state gestite in modo frammentato tra barra delle azioni e menù contestuali.
Da qui si è aperto il secondo filone di lavoro, focalizzato sul rendere più semplice, leggibile e orientata all’esito l’azione più frequente di Segno: la creazione di una clip.
Quando la crescita del prodotto mette in crisi la navigazione
Ripristinare gerarchia, orientamento e progressività in un sistema in rapida evoluzione.
Sommario:
Risultati ottenuti:
- Percorsi di navigazione più leggibili e coerenti tra le diverse viste del prodotto.
- Migliore orientamento dell’utente nelle fasi di accesso, esplorazione e lavoro sui progetti.
- Riduzione delle situazioni di incertezza legate alla posizione e al ruolo delle visualizzazioni disponibili.
- Navigazione progressiva e contestuale, che espone le funzionalità solo quando diventano rilevanti.
Tipo di lavoro:
Audit della navigazione esistente, analisi UX basata su osservazione dell’uso reale, ridefinizione dell’architettura delle viste e prototipazione iterativa di soluzioni di navigazione contestuale.
Consegna:
Proposta di riorganizzazione dell’header e delle viste principali, modello di navigazione progressiva applicato a Collection e Project view, prototipi funzionali per la validazione delle nuove logiche di accesso e orientamento.
Team:
Giacomo Dalia, confronto continuo con stakeholder interni e team di sviluppo di Segno.
Il mio ruolo:
Product Designer Consultant — analisi dei pain point legati alla navigazione, ridefinizione della gerarchia delle viste, progettazione dei flussi di accesso e orientamento, con particolare attenzione alla coerenza tra contesto, azioni disponibili e aspettative dell’utente.
Curiosità:
Il redesign della navigazione è nato come intervento mirato su singole criticità, ma ha rapidamente evidenziato la necessità di rivedere anche le azioni operative nella griglia, aprendo il percorso che ha portato al secondo case study.
Introduzione
Come anticipato nell’overview del progetto, Segno è un prodotto in continuo divenire: cresce rapidamente, stratificando funzionalità e modalità d’uso nel tempo. Questa crescita, naturale in una fase esplorativa e sperimentale, ha però reso necessario un momento di consolidamento e riflessione sulla struttura dell’interfaccia.
Quando ho iniziato a lavorare su Segno come Product Designer Consultant, il primo e più evidente pain point emerso dall’uso quotidiano della piattaforma è stato la navigazione. Il sistema era ricco di funzioni, ma il flusso non risultava immediatamente leggibile e i comandi che lo governavano apparivano, in più punti, poco coerenti con le aspettative degli utenti che hanno partecipato al Beta Testing.
Contesto e problema
La navigazione di Segno si era sviluppata in modo incrementale, seguendo l’evoluzione delle funzionalità piuttosto che un disegno unitario. Questo aveva portato a:
- percorsi poco espliciti tra le diverse sezioni del prodotto
- azioni disponibili ma difficili da individuare
- una distribuzione dei comandi non sempre allineata ai principi standard di usabilità
Un esempio emblematico riguardava l’header della piattaforma. In una configurazione convenzionale, il logo posizionato in alto a sinistra rappresenta l’ancora per tornare alla home. In Segno, quello spazio era invece occupato dall’accesso alle impostazioni utente, affiancato da ricerca e help contestuale.
Il ritorno alla home era affidato a un path visibile solo dopo essere entrati in un progetto e posizionato al centro dell’header: una collocazione inattesa che rischiava di far percepire l’utente come “intrappolato” all’interno del progetto. Questo effetto era amplificato dal fatto che il pulsante back del browser riportava alla pagina dei risultati del motore di ricerca, interrompendo il flusso di lavoro.
Primo intervento — Riorganizzazione dell’header
Il primo intervento ha riguardato la normalizzazione dell’header, riportandolo verso uno schema più riconoscibile e coerente con le abitudini operative dell’utente medio:
- Inserimento del pulsante Home tramite il logo del prodotto in alto a sinistra
- Spostamento dei comandi secondari (impostazioni, ricerca, help) sulla destra
- Mantenimento temporaneo di aspetto e comportamento di ricerca e help, rimandandone l’ottimizzazione a iterazioni successive
Il path precedentemente collocato nell’header è stato rimosso e ripensato in una sezione sottostante, liberando spazio e riducendo l’ambiguità cognitiva.
Un sistema di viste cresciuto senza una gerarchia chiara
Le criticità maggiori emergevano nella navigazione tra le diverse visualizzazioni del prodotto. L’utente si trovava davanti a una struttura a tab composta da:
- Collection — la vista principale con l’elenco dei progetti
- Project — la vista del singolo progetto (disabilitata fino all’accesso al progetto)
- Presentation — una delle feature a maggior valore aggiunto, anch’essa disabilitata fino all’ingresso nel progetto
- Community — sempre attiva, indipendentemente dal contesto, raccoglie template di progetto curati dalla redazione di Segno e contributi condivisi dagli altri utenti, pensati come punto di ispirazione e riuso.
A questa si aggiungeva una vista a lista dei concetti, semanticamente affine alle altre, ma collocata nelle impostazioni. Il risultato era una frammentazione delle visualizzazioni, dovuta a una crescita rapida che aveva lasciato “indietro” alcune decisioni strutturali.
Il redesign — Navigazione contestuale e progressiva
Il redesign ha introdotto un cambiamento sostanziale: abbandonare un sistema di tab statici in favore di una navigazione più contestuale, capace di adattarsi allo stato corrente dell’utente.
Nella vista "Collection":
- Lo spazio precedentemente occupato dai tab è stato trasformato in un carosello di template della Community, dandovi maggior rilievo.
- L’accesso ai template completi è diventato un’azione chiara e dedicata.
- Le varie visualizzazioni di progetto non sono più mostrate finché non si accede ad un progetto, quando cioè diventano rilevanti.
All’interno di un progetto:
- Lo stesso spazio è stato riutilizzato per ospitare informazioni contestuali: nome del progetto, stato di salvataggio, azioni di export e condivisione
- Le diverse visualizzazioni del progetto sono state raccolte in tab minimali a icona, posizionati sulla destra
- Alle viste esistenti si sono aggiunte:
- una vista documento, in cui l’AI organizza i concetti in una forma discorsiva
- una vista ad albero, più familiare per chi è abituato alle mappe concettuali tradizionali
Questo approccio ha reso la navigazione progressiva, mostrando solo ciò che è utile nel momento in cui serve.
Validazione e primi riscontri
Le modifiche alla navigazione sono state iterate e valutate principalmente attraverso osservazione diretta dell’uso della piattaforma e raccolta di feedback qualitativi da parte del gruppo di beta tester coinvolti nello sviluppo.
In questa fase, l’obiettivo non era produrre una misurazione quantitativa formale, ma verificare:
- la maggiore chiarezza dei percorsi principali
- la riduzione delle situazioni di incertezza durante l’esplorazione dell’interfaccia
- la coerenza percepita tra contesto, comandi disponibili e azioni attese
I riscontri hanno indicato una migliore comprensione del flusso di navigazione e una riduzione delle frizioni nelle fasi iniziali di utilizzo. Il redesign è stato quindi considerato sufficientemente solido per proseguire lo sviluppo.
In una fase successiva, il sistema si presta a ulteriori attività di validazione strutturata — come l’utilizzo di scale standard di usabilità o test comparativi tra versioni — da integrare una volta stabilizzato il set di funzionalità principali.
Dalla navigazione alle azioni
Una volta consolidata la navigazione globale, l’attenzione si è spostata sulle azioni disponibili nella griglia, lo spazio operativo in cui i concetti vengono creati, modificati e messi in relazione.
Nelle prime versioni di Segno, l’interazione con la griglia era fortemente basata su menù contestuali attivabili con il clic destro. Azioni centrali come la creazione di una nuova clip, l’aggiunta di una milestone o la gestione delle relazioni richiedevano di conoscere in anticipo il gesto corretto e il punto esatto in cui intervenire. Questo approccio risultava efficiente per utenti esperti, ma poco leggibile per chi si avvicinava allo strumento per la prima volta.
Con l’evoluzione del prodotto, il sistema di interazioni si è progressivamente arricchito. È stata introdotta la selezione esplicita degli elementi e, di conseguenza, una barra delle azioni visibile una volta selezionata una o più clip. In questa fase sono state aggiunte nuove funzionalità, come Insert in Flow: un’azione che permetteva di selezionare una clip e inserirne un’altra all’interno della relazione che la collegava a un elemento successivo nel flusso.
Questo arricchimento, pur rispondendo a bisogni reali, ha generato una crescente incongruenza tra le interazioni: alcune azioni erano legate al contesto della riga, altre alla selezione della clip, altre ancora esclusivamente alla barra delle azioni. Era necessario mettere ordine alle interazioni che l'utente ha con il suo progetto.
Per affrontare il problema è stato utile distinguere due categorie di interazione:
- Azioni immediate e frequenti, legate al ritmo del lavoro sulla griglia e orientate alla velocità di inserimento e modifica dei contenuti.
- Azioni strutturali, che incidono sulla natura dell’elemento e richiedono un momento di attenzione dedicato.
A partire da questa distinzione, l’intervento si è concentrato sulle azioni immediate e frequenti, ovvero quelle che scandiscono il ritmo operativo del lavoro sulla griglia.
Il menù contestuale resta disponibile come modalità alternativa, ma non rappresenta più il canale principale di interazione. Oggi la maggior parte delle interazioni passa dalla barra delle azioni, che si adatta dinamicamente al contesto: mostra comandi diversi in base a ciò che è selezionato — una riga, una clip, una connessione — o propone azioni di base quando non è selezionato alcun elemento.
In questo contesto è stato chiarito il ruolo delle azioni immediate: il doppio clic sulla griglia è stato assegnato alla creazione rapida di una clip, mentre la milestone, azione secondaria, è stata rimossa da questo gesto e resa disponibile tramite barra delle azioni o menù contestuale.
Allo stesso modo, l’azione Insert in Flow è stata resa più chiara e puntuale. Invece di passare dalla selezione della clip e dalla barra delle azioni, l’inserimento di un nuovo elemento nel flusso avviene ora cliccando direttamente sulla connessione tra due clip, rendendo esplicito sia il gesto sia il punto esatto in cui il nuovo concetto verrà collocato.
Queste modifiche hanno riallineato le interazioni con il contesto visivo e spaziale della griglia, riducendo ambiguità e carico cognitivo nelle azioni più frequenti.
Durante i test e l’utilizzo quotidiano della piattaforma, alcuni feedback hanno iniziato a emergere con una certa costanza. Gli utenti apprezzavano la maggiore chiarezza delle azioni di base, ma incontravano difficoltà nel momento in cui dovevano creare una clip completa: la modale risultava carica di opzioni, informazioni e passaggi, richiedeva numerosi clic e comunicava poco chiaramente il risultato finale dell’azione.
Questo ha reso evidente un ulteriore bisogno progettuale: migliorare l’esperienza di creazione e configurazione delle diverse tipologie di clip (gateway, eventi, oggetti), che fino a quel momento erano state gestite in modo frammentato tra barra delle azioni e menù contestuali.
Da qui si è aperto il secondo filone di lavoro, focalizzato sul rendere più semplice, leggibile e orientata all’esito l’azione più frequente di Segno: la creazione di una clip.