La nostra impresa ha attraversato un periodo di cambiamento, e i nostri diversi team di prodotto sono cresciuti e hanno fatto dei passi avanti. Abbiamo commesso errori e abbiamo affrontato molte sfide, ma stiamo imparando a migliorarci pian piano. Quindi, grazie per esservi uniti al percorso del nostro team. Ecco una rapida occhiata su cosa tratta la nostra pubblicazione di restyle e aggiornamento organizzativo riguardo Drag & Drop Editor.

Perché ce ne siamo occupati?

Il nostro Team di Prodotto Editor è composto da due progettisti, uno sviluppatore front-end, uno sviluppatore back-end e il nostro CEO e azionista principale. Ci concentriamo su tre editor di email: Drag & Drop, Plain Text e Code Editor. Quando discutevamo di cosa fare, abbiamo identificato una problematica ricorrente che aveva bisogno di essere risolta: l’interfaccia utente incoerente con i nostri nuovi tool. Negli scorsi anni, Benchmark ha rilasciato dei nuovi builder tool: tre piccoli editor, due registrazioni dai builders, engagement automation email e il più recente Automation Pro (Beta). Una debolezza era nel fatto che ogni tool aveva diverse variazioni di stile che portavano a numerose possibilità come più progettisti, più sviluppatori, mancanza di guida di stile, handoff scarsi, codice legacy problematico e così via. Alcune variazioni erano visivamente ovvie e altre erano relative al codice.

Style variations in Benchmark tools

Con così tante incongruenze, fare aggiornamenti stava diventando un incubo per il nostro team di prodotti. Per non parlare del fatto che questo affligge l’esperienza dei nostri utenti e crea confusione in quelli che sono i comportamenti previsti e gli spunti visivi. Come fa un utente ad imparare a fidarsi della vostra app se il risultato è un indovinello? Dovevamo organizzarci e ottenere la coerenza del prodotto in modo che i nostri utenti potessero impiegare meno tempo a pensare a come usare il nostro tool e più tempo a pensare ai propri impegni. Proprio per questo, il nostro team ha individuato due obiettivi:

  1. Ripulire gli stili di design e il codice
  2. Creare un’esperienza utente più lineare sui nostri tool aggiornati

C’erano molte aree interessanti, ma per questa pubblicazione abbiamo deciso di limitarci agli aggiornamenti stilistici e organizzativi dell’interfaccia utente nella navigazione, nei pannelli di blocco attivi e nelle toolbar di editing di testo. Ogni area ha offerto una propria sfida, per cui ecco alcuni dei nostri pensieri.

Semplificare la navigazione nell’editor

La prima opportunità si è presentata con la navigazione principale nel nostro editor. Questa è rappresentata da quattro icone che dividono ogni area di editing. La quarta icona (una matita) indica quando un blocco viene selezionato ma non contiene delle vere opzioni nel proprio pannello quando un blocco non viene modificato. Occupava spazio importante ed era più disorientante che utile per i nostri utenti, quindi l’abbiamo rimossa. Abbiamo anche sostituito le icone con del testo per aumentare la chiarezza in ogni lingua. Le icone occupavano meno spazio, ma abbiamo pensato fosse importante utilizzare delle chiare etichette in quel punto.

Editor navigation comparison

Dedicarci a nove lingue non è stato semplice. Significa che tutte le nostre decisioni avevano un livello di sfida in più e abbiamo pensato alle situazioni peggiori mentre progettavamo. Una sfida è stato il conteggio di caratteri. La maggior parte delle volte, i testi in inglese utilizzano meno caratteri di lingue come il tedesco e il portoghese. In aree tanto limitate, cosa accade se ci si dilunga troppo? Si aggiunge un rigo? Si tronca? Si espande l’area?

Language comparison

In questo caso, abbiamo deciso di ovviare al problema con la dimensione del testo e inserendo comportamenti di ripiego. Questa era una situazione minore, ma altre volte diventa più complicato quando ci sono più fattori in gioco.

Toolbar di modifica del testo

Poiché questo è uno dei componenti più utilizzati, abbiamo realizzato che aggiornare e sezionare le nostre icone potesse rappresentare un ottimo modo per migliorare l’esperienza degli utenti.

Icon update to text editing toolbar

Abbiamo anche cambiato il comportamento della barra rendendolo più adattabile a diverse dimensioni di schermi e dispositivi. Viene mostrata la barra completa fin quando un utente non cambia la dimensione del proprio browser. In quel momento, tutte le opzioni convergono in un menu accessibile cliccando “Più”. Il vecchio design invadeva lo spazio di lavoro degli utenti portando il loro lavoro in basso, mentre il design aggiornato agisce diversamente.

Behavior update to text editing toolbar

Pannelli di blocco attivi

Questa è l’area in cui abbiamo unito le nostre forze. Quando abbiamo applicato elementi di interfaccia utente dal nostro nuovo form di registrazione e creato quelli mancanti, c’è stato un aumento di stile e coerenza e i pannelli hanno avuto più spaziatura. Sotto la superficie, il codice era stato esaminato, ripulito e strutturato per essere più modulare e lavorare più velocemente (grazie al nostro sviluppatore front-end!)

Old-Overview

After Update

Il secondo problema era l’organizzazione e l’incoerenza tra i blocchi stessi. Se posizionaste tutti i blocchi di opzione uno accanto all’altro, l’organizzazione sarebbe diversa. I nostri utenti si stavano riabituando ad ogni singolo blocco, per cui abbiamo standardizzato un’organizzazione generale.

Block organization overview

Consistent block organization

Il nostro cambiamento più grande ha riguardato problemi in cui il numero di opzioni mostrate in un certo momento aveva un impatto sul flusso di lavoro degli utenti. Alcuni blocchi si espandevano troppo e non erano scalabili successivamente. Quindi, per questi blocchi, abbiamo separato le loro opzioni in due tabelle basate sulla funzione e il livello di utilizzo all’interno della tabella. La prima tabella conteneva opzioni relative all’intero blocco e la seconda si occupava di opzioni relative agli elementi interni al blocco.

Dunque, che altro?

Molto in realtà! Il nostro team ha fatto dei piccoli passi per ottenere insight degli utenti più approfondite spostandosi verso la metodologia “Lavoro da completare”. Se non lo avete ancora fatto, vi consigliamo di dare un’occhiata all’ebook di Intercom

La descrivono in modo simpatico, così:

La gente acquista prodotti e servizi per completare un ‘lavoro’. La chiave per il successo è comprendere il vero motivo per il quale i clienti stanno usando il vostro prodotto.

Quest’anno si sta dimostrando essere pieno di nuove ed interessanti pubblicazioni. Speriamo di poterne parlare ancora! Alla prossima …