ADD BUTTON
FINDABILITY
Migliorata l'aggiunta di elementi al report: maggiore visibilità e accessibilità del pulsante Add grazie alle best practice UX.
INTRODUZIONE
Aggiungere un nuovo elemento a un report Swydo è una delle azioni più basilari e frequenti nel builder — ma nel design precedente, il pulsante Add era visibile solo passando il mouse su un widget esistente, rendendolo difficile da trovare, specialmente su un report vuoto. L'obiettivo di questo progetto era rendere facilmente individuabile l'aggiunta di un widget, in qualunque punto del report.
PROGETTO
Ho fatto un benchmark su come altri builder (Semplice, Squarespace) affrontano lo stesso problema, esplorato diverse direzioni basandomi sul pattern di Squarespace che mostra lo spazio disponibile tra gli elementi, e sono arrivato a una soluzione più vicina al pulsante Add originale già riconosciuto dai clienti — semplicemente riposizionato e sempre visibile, incluse varianti per i gutter orizzontali e verticali e un comportamento dedicato per i widget alti.
SFIDA
I clienti erano già abituati al pulsante Add esistente, quindi la sfida era migliorarne la visibilità e il posizionamento senza rompere quella familiarità — inclusi casi limite come un report vuoto, l'aggiunta tra widget nella stessa riga, e widget lunghi e scorrevoli in cui il pulsante doveva restare ancorato e prevedibile.
IL MIO RUOLO
Ho lavorato come Product Designer su questo progetto, conducendo la ricerca competitiva, esplorando direzioni UX e progettando il posizionamento finale del pulsante Add e i suoi stati in tutto il report builder.
Vecchio pulsante Add
Il pulsante Add nella struttura precedente del report era visibile solo passando il mouse su un widget del report. Gli utenti incontravano due problemi principali: capire dove si trovasse la funzionalità del pulsante Add; capire dove sarebbe stato posizionato il nuovo widget dopo la sua configurazione. Con questi due problemi principali in mente, sono riuscito a restringere un po' il percorso di ciò che volevo ottenere e la direzione da seguire per la ricerca.
RICERCA UX
Ho basato la mia ricerca su tre prodotti diversi: Semplice Squarespace
SEMPLICE
Semplice è un tema per portfolio realizzato in WordPress. Il suo editor è progettato in modo che gli utenti possano trascinare nello spazio vuoto qualsiasi tipo di elemento desiderino nella pagina, come blocchi di testo, immagini, video, e così via. Quando l'utente cerca di inserire un elemento nella pagina, gli spazi di destinazione disponibili in cui può rilasciarlo vengono evidenziati. Passando il mouse su una di queste aree, quel segnale si attiva, mostrando all'utente che, rilasciando l'elemento lì, questo verrà posizionato nella posizione desiderata.
SQUARESPACE
Squarespace si comporta in modo simile a Semplice, ma ha una funzionalità interessante e rilevante per la mia ricerca. Passando il mouse su una sezione, si attivano due segnali sopra e sotto la sezione specifica, e l'utente può cliccare sul pulsante "Add Section" per aggiungere elementi da lì. Questo è stato un caso d'uso utile perché, nel report builder, gli utenti vogliono decidere dove aggiungere i loro widget, editor di testo o page breaker.
ESPLORAZIONE UX
Sulla base degli esempi trovati sulle piattaforme di benchmark, ho iniziato a creare possibili soluzioni per il nostro prodotto.
Un primo tentativo è stato fatto riutilizzando il criterio di Squarespace di mostrare gli spazi disponibili tra le righe del report. Ho differenziato i pulsanti con "Add Sections" e un più semplice "Add +", ma più in base all'azione che l'utente poteva compiere. Con il primo, l'utente poteva creare un'intera nuova Section nel report, un gruppo contenente widget che coprono lo stesso argomento. L'Add + o Add widget serviva ad aiutare gli utenti ad aggiungere elementi alla section. Qui sotto una selezione di varianti che ho creato per evidenziare meglio il concetto di aggiunta orizzontale dei widget, mostrando anche come le aree si attivano quando evidenziate.
Dopo un'attenta revisione della soluzione con altri designer e una discussione con il Product Manager, abbiamo concordato che la direzione fosse corretta, ma che il pulsante andasse semplificato. Ho quindi optato per un Add Button più simile a quello dei widget precedenti, ma che risaltasse rispetto alle aree dei widget e si comportasse più in linea con la soluzione che stavo esplorando.
SOLUZIONE FINALE E UI DESIGN
Come descritto sopra, la soluzione consisteva nel mostrare un elemento più simile a quello precedente, per diversi motivi. I clienti erano abituati all'Add Button, ma avevano difficoltà con la sua posizione. Qui sotto mostro diversi stati del report e l'interazione con l'Add Button.
Add button orizzontale
Quando il report è vuoto, il pulsante per aggiungere un widget appare automaticamente sotto il messaggio di report vuoto. Cliccando sul pulsante più, un sottomenu mostra quali opzioni l'utente può aggiungere al report.
Add button del gutter orizzontale - IN ALTO
Se un utente vuole aggiungere qualcosa in cima alla pila di widget, può farlo passando il mouse sul gutter superiore sopra la prima riga di widget, così da raggiungere il pulsante più che appare automaticamente.
Cliccando sul pulsante più, un sottomenu mostra quali opzioni l'utente può aggiungere al report.
Una volta scelto quale widget aggiungere, questo verrà posizionato al primo posto della riga e spingerà gli altri widget verso destra o alla riga sottostante, se la riga è già piena.
Add button del gutter orizzontale - IN MEZZO
Se un utente vuole aggiungere qualcosa tra le righe di widget, può farlo passando il mouse sul gutter tra le righe di widget, così da raggiungere il pulsante più che appare automaticamente.
Cliccando sul pulsante più, un sottomenu mostra quali opzioni l'utente può aggiungere al report.
Una volta scelto quale widget aggiungere, questo occuperà il primo posto della riga successiva e spingerà gli altri widget verso destra o alla riga sottostante, se la riga è già piena.
Add button del gutter verticale
Se un utente vuole aggiungere qualcosa tra i widget di una riga, può farlo passando il mouse sul gutter superiore sopra la prima riga di widget, così da raggiungere il pulsante più che appare automaticamente.
Cliccando sul pulsante più, un sottomenu mostra quali opzioni l'utente può aggiungere al report.
Una volta scelto quale widget aggiungere, questo verrà posizionato al primo posto della riga e spingerà gli altri widget verso destra o alla riga sottostante, se la riga è già piena.
SOLUZIONE EXTRA PER WIDGET LUNGHI
Per i widget molto alti, possiamo usare una soluzione diversa per il pulsante più.
Supponiamo che il pulsante più abbia un padding-top di 24px. Il margine superiore del pulsante è ancorato alla parte superiore del widget e resta lì finché la parte superiore del widget è visibile nell'editor del report.
Durante lo scroll, il pulsante più resta ancorato alla parte superiore del widget perché quest'ultima è ancora presente nel report e mantiene un padding di 24px dall'alto.
Non appena il lato superiore del widget raggiunge un margine di 24px dalla cima del report, il pulsante più resta ancorato a 48px dall'alto.
Esempio 1/3
Non appena il lato superiore del widget esce dal report, il pulsante più resta ancorato in alto con un padding-top di 48px.
Resterà in quella posizione fino a quando non si scorre verso la parte inferiore del widget.
Esempio 2/3
Non appena il lato superiore del widget esce dal report, il pulsante più resta ancorato in alto con un padding-top di 48px.
Resta in quella posizione fino a quando non si scorre verso la parte inferiore del widget.
Esempio 3/3
Come nella slide precedente, anche qui non appena il lato superiore del widget esce dal report, il pulsante più resta ancorato in alto con un padding-top di 48px.
Resta in quella posizione fino a quando non si scorre verso la parte inferiore del widget.
Quando l'utente scorre fino a 128px dalla fine del widget, cioè verso il suo lato inferiore, il pulsante più avrà un padding top e bottom di 48px. Da questo limite in poi, il pulsante più si ancora alla parte inferiore del widget e inizia a seguire lo scroll dell'intero report.
Il pulsante più scompare mentre segue lo scroll, poiché anche il padding-bottom è di 48px.
