User Experience (UX): la guida essenziale in 4 passi per uno sviluppatore front-end + gli strumenti pratici e un caso d’uso reale

Conoscere le tecniche e i software (es. Figma) per creare un mockup non è sufficiente. Occorre saper creare un sistema che abbia un’ottima User Experience e un ottimo Design. E il concetto che uno sviluppatore possa o addirittura debba ignorare queste conoscenze è totalmente sbagliato: uno sviluppatore deve conoscere le basi per sviluppare ogni parte dell’applicazione pensando sempre all’utente finale che userà il prodotto. In questo articolo impareremo le basi della UX e useremo uno strumento pratico per validare la UX di un sistema web reale.

Introduzione

Nel capitolo precedente abbiamo visto come creare un mockup di un’applicazione web desktop o mobile e come un mockup ben fatto, eventualmente anche con la parte interattiva, possa essere utilizzato per avere un’anteprima fedele dell’applicazione finale, da utilizzare per schiarire le idee in fase di sviluppo e avere un feedback dal cliente prima ancora di scrivere una riga di codice.

Conoscere le tecniche e i software (es. Figma) per creare un mockup non è però sufficiente. Occorre saper creare un sistema che abbia un’ottima User Experience e un ottimo Design. Uno sviluppatore deve quindi conoscere almeno le basi per sviluppare ogni parte dell’applicazione pensando all’utente finale che userà il prodotto. Vediamo quindi le basi della UX in 4 passi e poi andiamo a conoscere uno strumento potentissimo per indagare la UX di un sistema Web reale: Hotjar.

Passo 1: dare valore con la UX

Quando si progetta un’applicazione web c’è una domanda fondamentale che dobbiamo sempre tenere a mente:

Sto dando valore all’utente nel modo più veloce, semplice e completo possibile?

Se la risposta a questa domanda è SI, allora abbiamo fatto un buon lavoro di UX.

Il primo passo quando progettiamo una nuova applicazione è di capire quale valore stiamo dando al nostro utente finale. Se non forniamo nessun valore allora la nostra applicazione non ha scopo e probabilmente non sarà mai apprezzata da nessuno.

Quando le funzioni della nostra applicazione “matchano” con i requisiti del nostro cliente perché gli fanno risparmiare tempo o denaro, allora stiamo offrendo valore.

Dare valore però è solo il primo passo essenziale per una buona UX. Il passo successivo è capire qual è il modo migliore per fornire valore.

Passo 2: ricercare iterativamente semplicità, velocità e completezza

Il secondo passo consiste in un processo iterativo per ricercare il modo più semplice e veloce di fornire valore all’utente. Affinché la velocità e la semplicità siano ottimali, è importante sempre misurare:

• i tempi per ottenere un valore
• le interazioni richieste per ottenere valore

Quanto più possiamo ridurre i tempi e il numero di interazioni necessarie, tanto migliore sarà la soddisfazione del cliente.

Questo processo è iterativo e richiede, quando possibile, il feedback dell’utente finale. Il mockup è uno degli strumenti più potenti per ottenere un feedback in maniera veloce.

Ricordiamo infine che il valore fornito all’utente deve essere anche completo, poiché se è parziale costringiamo l’utente ad interagire ancora con l’applicazione per ottenere la restante parte del valore, facendogli perdere tempo.

Nel caso di un’applicazione web quanto più un sito è macchinoso e prevede molti click, tanto più si riduce la velocità nell’ottenere valore. Un buon libro per approfondire queste tematiche è disponibile al seguente link:

100 Things Every Designer Needs to Know About People

https://www.amazon.com/Things-Designer-People-Voices-Matter/dp/0321767535 

Passo 3: divertimento ed estetica

Quando i passi precedenti sono ottimizzati, possiamo valutare elementi che rendono divertente ed esteticamente bella l’interazione e il modo con il quale forniamo valore.

Se infatti riusciamo ad emozionare l’utente che interagisce con il nostro sistema, allora la sua esperienza sarà sicuramente più piacevole.

Nel caso di un’applicazione web emozionare l’utente significa:

1. non introdurre emozioni negative derivanti da errori o lentezza del sistema
2. introdurre emozioni positive con un ottimo design grafico (colori, font, animazioni, allineamento, … come vedremo più avanti) e interazioni che risultano naturali e conformi a quello che l’utente si aspetta

Approfondiremo questo secondo punto nel prossimo capitolo, introducendo le basi del design per sviluppatori front-end.

Passo 4: processo iterativo di UX

Nell’applicare gli step precedenti non c’è un ordine rigido. E’ importante procedere iterativamente e applicare quanto detto in ognuna di queste fasi:

• Analisi: analizzare le aspettative (i requisiti) dell’utente
• Realizzazione: giungere ad una versione del sistema
• Test: capire se tale versione soddisfa il cliente

Attraverso questo processo possiamo scoprire nuovi aspetti prima non noti o ignorati e migliorare il livello di UX aumentando il nostro livello di conoscenza del contesto. Sfrutteremo la nuova conoscenza del contesto per ridefinire e risolvere i problemi esistenti o quelli nuovi nati a seguito delle nuove conoscenze.

Verificare la UX del prodotto realizzato

Quando progettiamo una nuova applicazione il nostro obiettivo sarà applicare i passi precedenti e cercare di ottenere il risultato migliore possibile.

Con il mockup potremo capire rapidamente se un utente riesce ad apprezzare uno strumento, ma quando svilupperemo l’applicazione quello che succede è che questa si allontana dal mockup anche in maniera significativa per vari motivi:

• limiti tecnici
• costi maggiori rispetto a quanto preventivato (e di conseguenza tempi ridotti)
• sviluppatori poco attenti alla UX

In ogni caso a prodotto finito non possiamo assumere che la UX sia ottimale, ma dobbiamo comunque testare le nostre ipotesi di usabilità. Questa volta però applicheremo i concetti descritti sopra su un prodotto reale finito.

Se lavoriamo in una grande azienda sarà possibile intervistare utenti finali invitandoli ad usare il prodotto in anteprima. Se lavoriamo in una piccola azienda o siamo sviluppatori  indipendenti, questa strada è più difficile. Esiste però uno strumento che ci permette di comprendere come un utente usa la nostra applicazione web in forma anonima e trasparente. Si chiama Hotjar e nella versione gratuita ci aiuta a verificare l’usabilità di un qualsiasi prodotto web.

Valutare la UX di un progetto web: i video delle sessioni utente e le heatmap

In questa sezione vedremo come ottenere informazioni sugli utenti quando navigano sul nostro sistema web (in forma anonima e aggregata). Nel rispetto dei nostri utenti, ricordiamoci di specificare sempre nella privacy policy che usiamo questi strumenti (anche questa è una forma di UX).

Tra tutti gli strumenti, quelli che trovo più interessanti sono i video delle sessioni e le heatmap.

Hotjar è un sistema software che fornisce entrambi questi strumenti.

Installazione di Hotjar

Dopo esserci registrati con un account su Hotjar è possibile copiare uno script da includere nelle nostre pagine Web, un po’ come si fa con Google Analytics.

Il passo finale per completare l’installazione consiste nel verificare che Hotjar sia incluso correttamente in ogni pagina del sito andando a cliccare sul pulsante Tracking in alto a destra:

 Heatmaps per migliorare l’interazione

Una Heatmap ci permette di capire cosa gli utenti cliccano di più nella pagina: più i link sono cliccati, maggiore sarà la gradazione di rosso.

Per ogni pagina web ci saremo fatti un’idea dei link più importanti. La domanda è: questi link sono anche i più cliccati?

Se così non è allora dobbiamo iterare la UX, ad esempio:

• modificando il design del link
• modificando la posizione del link
• modificando il testo del link

Dopo le modifiche provvederemo a valutare una nuova Heatmap.

Per creare una Heatmap si preme il pulsante in alto a sinistra nella sezione Heatmap:

Quello che faccio generalmente è creare una Heatmap per uno specifico indirizzo web (terzo step del wizard di creazione):

Dopo aver creato una heatmap non ci resta che attendere i primi visitatori per capire se abbiamo fatto o meno un buon lavoro.

Registrazione della sessione di navigazione

La Heatmap è uno strumento statico e che aggrega l’interazione di più utenti nella pagina. Per capire fino in fondo se il sito è usato al meglio e come ci aspettiamo, i video di sessione sono sicuramente più utili. In Hotjar un video di sessione si chiama Recording e per crearne uno usiamo ancora una volta la sezione apposita:

A livello di UX, con i recording possiamo avere tantissime informazioni, sia per il desktop che per il mobile, identificando errori, sequenze di interazione lente e complicate o parti della pagina poco chiare, spesso “invisibili” all’utente perché il design è “camaleontico”.

Esempi da un caso d’uso reale: il sito devexp.io

Per il sito https://devexp.io ho applicato i concetti appresi sopra. La cosa più importante è sempre ascoltare il feedback degli utenti e iterare.

All’inizio, quando ancora si hanno pochi visitatori ed è difficile avere un feedback diretto, si possono gli strumenti Hotjar per valutare il comportamento degli utenti nel sito e, ancora una volta, iterare il design a livello di interazione semplificandolo ad ogni iterazione.

Vediamo quindi alcuni miglioramenti di UX apportati sul sito dalla prima versione in poi.

Iterazione da feedback: lettura tramite PDF o ePub

Una funzione richiesta da alcuni lettori è stata quella di scaricare un articolo in PDF e ePub. Ho introdotto quindi la possibilità di scaricare un articolo in questi formati.

Dopo che si introduce una nuova funzione, occorre testarla e capire se effettivamente dà valore.

La funzione introdotta è stata quindi valutata tramite Google Analytics e oggi molti utenti preferiscono questo formato di lettura rispetto alla pagina web. I motivi possono essere diversi, ma il risultato è che per coloro che preferiscono avere il PDF l’esperienza è ora migliorata.

Il menu in alto

Nella prima versione il design era molto semplice e c’erano diversi link che non erano intuitivi. Con l’heatmap ho notato che un link veniva cliccato spesso, in particolare il link Angular.

Nella prima versione era presente nella pagina uno slider di immagini che scorreva tra un’immagine Angular e un’altra immagine ogni 2 secondi.

Quando veniva premuto il link Angular, lo slider si spostava e rimaneva fisso sull’immagine Angular.

Naturalmente quando lo slider si trovava già nella sezione Angular, cliccando il link non succedeva nulla perché ci si trovava già nella sezione Angular.

Quando nelle sessioni di registrazione vedi che molti utenti cliccano più volte il link e non succede nulla, capisci che qualcosa non va. In questo caso l’impressione è che il link era rotto!

Oggi il link Angular rimanda invece alle informazioni sul libro di testo: l’intenzione dell’utente è infatti probabilmente quella di approfondire concetti Angular. Nelle sessioni registrate successive alla modifica, chi cliccava sul link non tornava subito indietro, segno che effettivamente l’utente aveva trovato ciò che cercava.

Registrazione all’uscita

Molti lettori leggono un articolo senza essere registrati; ho pensato allora di introdurre un popup di registrazione quando si esce dalla pagina.

Con i recordings ho notato che molti lettori vedono il popup e lo chiudono prima di chiudere il tab dell’articolo. Se sei un lettore non registrato, ma che segue devexp ad esempio tramite linkedin, mostrare il popup ogni volta è solo un fastidio.

La soluzione è stata mostrare il popup ad un returning visitor solo la prima volta, senza infastidirlo ulteriormente.

Conclusioni

Abbiamo visto come con pochi e semplici concetti di UX possiamo migliorare molto l’esperienza dell’utente con i nostri software. Più in generale, sia che si tratti di uno strumento con un’interazione grafica, o di una libreria, o ancora di un sistema non software, pensiamo sempre all’utente finale che utilizzerà il nostro prodotto e cerchiamo quanto più possibile di semplificare il suo modo di usarlo.

Nel caso di interfaccia grafica, possiamo migliorare la UX anche nella fase di mockup, ma dovremo testare comunque l’usabilità per il prodotto finito. Hotjar è uno strumento che ci aiuta a farlo in maniera semplice e gratuita, monitorando le sessioni di un utente. Con questo strumento possiamo migliorare l’esperienza degli utenti futuri:

• facendo ipotesi,
• implementando soluzioni e
• verificando se i risultati implementati hanno portato a miglioramenti rispetto alla versione precedente.

Dopo aver appreso le basi della UX, nel prossimo capitolo vedremo le basi del design per uno sviluppatore front-end, nella teorie e nella pratica. Uno sviluppatore front-end, anche se non è un designer, deve comunque conoscere le basi per realizzare prodotti esteticamente piacevoli o anche solo per interpretare correttamente il linguaggio dei designer.