NEW TEXT EDITOR
Migliorata l'usabilità dell'editor di testo: menu contestuali per tabelle, immagini e link basati sul feedback.
INTRODUZIONE
L'editor di testo dei report di Swydo aveva bisogno di un rinnovamento: un nuovo comportamento del menu e nuovi menu contestuali per tabelle, immagini e link — basati sui pattern osservati nell'uso quotidiano reale dell'editor da parte dei clienti. Il menu precedente si attivava sollevando l'intero widget di testo, il che spostava l'attenzione lontano dal vero compito di editing.
PROGETTO
Ho spostato il menu sopra al widget invece che al suo interno, mantenendo il comportamento del widget coerente con gli altri widget del report e riportando l'attenzione sul menu stesso. Da lì, ho progettato nuovi menu contestuali per tabelle, immagini e link, ciascuno pensato su misura per ciò che gli utenti dovevano davvero fare con quel tipo di contenuto.
SFIDA
Le tabelle richiedevano il lavoro maggiore: gli utenti dovevano modificare il contenuto delle celle, inserire o eliminare righe e colonne, e regolare la larghezza delle colonne, ma il menu esistente nascondeva queste azioni. Ho analizzato come altri prodotti gestiscono l'editing delle tabelle e adattato un pattern più scopribile, per poi estendere lo stesso approccio a menu contestuale all'editing di immagini e link, così da rendere coerente l'intero editor.
IL MIO RUOLO
Ho lavorato come Product Designer sull'editor di testo dei report, conducendo la ricerca di usabilità e progettando il nuovo posizionamento del menu e i menu contestuali per tabelle, immagini e link.
NUOVA POSIZIONE DEL MENU
Menu con widget al 100% delle dimensioni
A differenza del design precedente del menu e dell'editor di testo, dove l'intero editor, una volta attivato, si sollevava e mostrava il menu contestualmente al suo interno, ora la soluzione prevede che il menu sia posizionato sopra il bordo superiore del widget. Questa soluzione permette al widget di mantenere un comportamento simile agli altri widget ed evita di spostare l'attenzione sull'intero elemento, concentrandola solo sul menu.
WIDGET MENU AL 50% DELLA DIMENSIONE
WIDGET MENU AL 25% DELLA DIMENSIONE
NUOVO MENU CONTESTUALE E FUNZIONALITÀ
Per migliorare il comportamento del widget di testo, oltre a piccoli dettagli UI, ho voluto migliorare anche il comportamento del menu contestuale di:
- Tabelle Immagini Link
MIGLIORAMENTI AI WIDGET DI TESTO PREDEFINITI
WIDGET DI TESTO IN HOVER
MENU CONTESTUALE DELLA TABELLA
Per migliorare l'usabilità del menu della tabella, ho notato che anche altri prodotti adottano una soluzione più contestuale. Questo si può ottenere in vari modi; ho scelto di usare delle maniglie interattive.
MODIFICA DELLE FUNZIONALITÀ DELLA TABELLA
In questo flusso, ho cercato una soluzione più accessibile per gli utenti. Il pain point di questo flusso era la mancanza di chiarezza su cosa l'utente stesse modificando e il conflitto in cui entravano i menu, principale e della tabella.
COMPORTAMENTO CONTESTUALE DEL TESTO NELLA CELLA
Quando un utente deve modificare il contenuto di una cella, il comportamento è simile a quello del menu principale, ma in questo caso contestuale alla cella stessa.
MENU CONTESTUALE DEI LINK
Negli esempi qui sotto è mostrato il vecchio menu contestuale per i link nell'editor di testo. L'aspetto critico di questo elemento era la scarsa visibilità, poiché era difficile da trovare nella pagina. La soluzione è stata dargli un'elevazione diversa.
MENU CONTESTUALE DELLE IMMAGINI
Sul menu delle immagini il problema era simile a quello del menu dei link. La mia soluzione è stata posizionare un menu all'interno dell'immagine per rafforzarne la presenza, non sopra di essa.
