UX di test A/B per framework basati su componenti

Acquisire familiarità con la programmazione può essere di grande beneficio per i designer. Di conseguenza, molti si sono tuffati e hanno imparato a lavorare con il codice (o almeno a parlarne in una certa misura la lingua) per essere più efficaci quando collaborano con gli ingegneri. JavaScript, probabilmente il linguaggio di scripting preferito del web, ha una solida comunità che sta plasmando il futuro del web con i framework che sta realizzando.

Come risultato della loro struttura e dei vincoli tecnici, Framework come Vue.js, React.js e Material UI sono importanti da considerare per i progettisti perché fungono da elementi costitutivi per sistemi di progettazione robusti. Inoltre, sapere come funziona il codice è utile anche quando si facilitano le tecniche di progettazione basate sui dati in un ambiente di sviluppo come i test A/B.

In un recente progetto per una startup che crea una piattaforma di gestione dei pazienti per connettere le persone ai professionisti della salute mentale, abbiamo scoperto che la creazione e la gestione degli account dei pazienti con il minor attrito possibile erano fondamentali per molti dei nostri consulenti clinici. Concentrarsi sulla creazione di un'esperienza di navigazione intuitiva per i profili dei pazienti è stato fondamentale, così come l'impostazione di un flusso utente ottimale per creare, modificare e assegnare attività di benessere ai pazienti.

Discutendo il progetto con il responsabile tecnico, è stato stabilito che, fondamentalmente, l'applicazione era abbastanza semplice: i medici avevano bisogno della capacità di creare e modificare i profili dei pazienti, visualizzare una libreria di attività per il benessere e assegnare lezioni ai pazienti.

Il team ha deciso di allineare il design del progetto con il framework Material UI, utilizzando elementi di base come modali popup, schede display, pulsanti attivi/inattivi, elenchi di fisarmoniche e una serie di notifiche di successo e di avviso. Una volta definiti i componenti che avrebbero costituito gli elementi di base, il team di prodotto ha offerto opinioni diverse sul layout dell'applicazione.

Durante le discussioni sulla progettazione dell'interfaccia utente del progetto, lo sviluppatore ha spiegato la differenza tra componenti funzionali e di visualizzazione e in che modo i componenti funzionali controllano il flusso dei dati di un'applicazione mentre i componenti di visualizzazione sono rilevanti per l'interfaccia utente e il layout.

In parole povere, i componenti di visualizzazione definiscono il linguaggio visivo di un'applicazione e i componenti funzionali aiutano a dar loro vita .

Questa struttura offre possibilità uniche ai progettisti perché, in genere, il codice relativo alla gestione della logica di un'applicazione è isolato in un file separato da quello che controlla il layout dell'interfaccia utente. Se eseguito correttamente, questo approccio alla progettazione del software garantisce una base di codice modulare e robusta che consente un processo basato su test.

È possibile testare funzionalità identiche in layout alternativi con il minimo sforzo ingegneristico? La risposta è "Sì" e, se eseguito con un metodo A/B all'inizio del processo, verrà inserito in un ciclo di vita di sviluppo del prodotto snello. (Lo sviluppo del prodotto snello è uno spin-off del concetto giapponese di kaizen, la filosofia aziendale di apportare miglioramenti incrementali ai flussi di lavoro, alle pratiche, alle tecniche e, in questo caso, ai prodotti.)

Eric Ries, imprenditore seriale e autore, discute una guida pratica al ciclo di vita dello sviluppo del prodotto snello nel suo libro The Lean Startup . Il metodo segue un flusso di lavoro di creazione di prodotti con un'ipotesi chiara, test di ciò che è stato costruito e iterazione in base a ciò che è stato appreso.

Il metodo di avvio snello

Definizione dell'approccio di test A/B

Il test A/B è un componente fondamentale del toolkit di qualsiasi professionista esperto di UX. Il suo ruolo nel ciclo di vita dello sviluppo del software è di contribuire a migliorare l'usabilità delle applicazioni. In combinazione con i dati della mappatura termica, i team possono ottenere informazioni preziose sul comportamento degli utenti, soprattutto quando si tratta di punti di attrito all'interno del flusso di un'applicazione.

Prima di iniziare il test A/B, ecco alcune domande per focalizzare il processo:

• Come viene utilizzato il test A/B in UX?
• Quali metodi di analisi A/B sono disponibili?
• Perché progettare test A/B durante il wireframe?
• Per cosa stiamo testando?

Il metodo più comune di test A/B su larga scala è uno split test che offre versioni leggermente diverse di un'applicazione o di un sito Web agli utenti live. Uno split test è spesso fuori dall'ambito e/o dal budget per una startup o una piccola impresa. Tuttavia, esistono alternative ai test suddivisi su larga scala che sono più accessibili e includono: interviste di persona, focus group e servizi online che ti connettono a una rete di utenti di test.

Design basato su test A/B

Durante il processo di wireframing, è importante considerare le possibilità del test A/B dal punto di vista del layout e della navigazione. Semplici variazioni dei componenti del display possono facilmente modificare il modo in cui le informazioni vengono presentate. I framework basati su componenti ti danno la libertà di sperimentare come è organizzato il contenuto senza dover riprogettare le funzionalità principali di un prodotto.

Come ogni sforzo progettuale, un test A/B efficace dovrebbe seguire una metodologia chiaramente definita. Innanzitutto, decidi per quale variabile stai testando. Quindi, definisci cosa costituisce il successo. Termina valutando i dati e determina quale dovrebbe essere il passaggio successivo.

Ad esempio, in un caso, è stata testata la gerarchia del layout. Il layout A era costituito da una griglia a due colonne che aveva il componente elenco pazienti a sinistra dello schermo e il componente profilo paziente a destra. Il layout B aveva un elenco di pazienti a colonna singola che avrebbe fatto clic sul componente del profilo del paziente.

Il nostro primo test è stato per la chiarezza. Abbiamo chiesto ai consulenti clinici durante le sessioni di intervista quale dei due modelli fosse il più organizzato. Contrariamente alle ipotesi interne, la griglia a colonna singola è stata fortemente indicata come la soluzione progettuale più intuitiva. I nostri consulenti hanno ritenuto che la combinazione di un elenco di pazienti e di un profilo nella stessa visualizzazione fosse "occupata" e "confusa". Al contrario, le parole usate per descrivere il layout della griglia a colonna singola erano chiare e "pulite".

Il "modello scatola dei componenti"

Per questa applicazione web abbiamo utilizzato React, un framework basato su concetti di gestione dello stato e componenti modulari. React è una libreria JavaScript dichiarativa, efficiente e flessibile per la creazione di interfacce utente. Ti consente di comporre interfacce utente complesse da piccoli pezzi di codice isolati chiamati "componenti". Questa modularità si traduce in flessibilità quando si lavora su un prodotto coinvolgendo sia sviluppatori che designer.

Sono arrivato a capire questo framework ispirandomi al modello box HTML+CSS. Il Component Box Model offre una modalità organizzativa con cui creare blocchi costitutivi per un'applicazione. È particolarmente adatto allo sviluppo di un sistema di progettazione per progetti in rapida evoluzione.

Per mantenere agile il design thinking, è possibile seguire una serie di principi di progettazione particolarmente adatti a un ciclo di vita di sviluppo prodotto snello.

• Primo principio: raggruppare contesti e azioni simili .
• Secondo principio: lasciare che l'architettura dell'informazione aiuti a semplificare il flusso di "stato" tra i componenti.
• Terzo principio: progettare sistemi visivi scalabili per semplificare il modo in cui gli sviluppatori comprendono e implementano i progetti.

Raggruppamento di contesti simili

Considera il modello mentale dei tuoi utenti: raggruppa risultati e azioni simili in base al loro "contesto di utilizzo". Valuta se gli utenti devono creare, leggere, aggiornare ed eliminare elementi all'interno di ciascun contesto e se è necessario fornire un feedback per le loro azioni. Quando si definisce un test A/B per uno specifico scenario di utilizzo, considerare il layout, le modalità di accesso agli input ei metodi di navigazione.

Semplificare il flusso di interazione di "Stato"

In React, il flusso di "stato" si riferisce a come le informazioni si spostano in un'applicazione, come i componenti aiutano a organizzare i dati e come vengono visualizzati. In genere, lo stato fluisce nei componenti di visualizzazione dai componenti funzionali che agiscono come contenitori. I progettisti possono prepararsi per i test A/B delineando preventivamente come i componenti funzionali possono alterare il layout di un'applicazione modificando il modo in cui vengono valutati i componenti del display.

Sviluppare sistemi di progettazione robusti

L'utilizzo di componenti di visualizzazione per sviluppare standard per elementi visivi come tipografia, pulsanti, input, modali e schede aiuta a fornire gli elementi costitutivi per un linguaggio di progettazione standardizzato. I robusti sistemi visivi hanno la flessibilità di mantenere i progettisti e gli sviluppatori UX sulla stessa pagina sui componenti a cui si fa riferimento all'interno dei wireframe.

Sommario

Il successo della progettazione basata su test A/B è legato alla sinergia tra i team di prodotto e tecnici. I progettisti che desiderano adottare questo metodo dovrebbero essere precisi su dove e come testare. Trascorri del tempo sviluppando un'ipotesi e determinando ciò che speri di scoprire. Non distrarti. Attieniti ad esso: è molto facile allontanarsi dal tuo metodo.

Questo processo non è mai veramente finito e si evolve man mano che i prodotti crescono. I progettisti che utilizzano una strategia di sviluppo del prodotto basata su test dovrebbero sfruttare le opportunità di apprendimento che si presentano durante il ciclo di vita di sviluppo di un prodotto.

I componenti, proprio come i sistemi di progettazione, riguardano la modularità e la riutilizzabilità dei modelli, non il layout o lo stile. Dal punto di vista del designer, la flessibilità di testare, perfezionare e migliorare i prodotti con i test A/B può aiutare a sviluppare prodotti più incentrati sull'utente, il che alla fine porta al loro maggiore successo.

•••

Ulteriori letture sul blog di Toptal Design:

• Sfruttare i modelli mentali in UX Design
• Test UX per le masse: mantienilo semplice ed economico
• La guida fondamentale all'usabilità mobile
• Il valore della ricerca sugli utenti
• Comprendere i sistemi e i modelli di progettazione