Fin da piccolo una delle persone che ammiravo di più era sempre stato Steve Jobs e come questo grande personaggio sono sempre stato attratto dalla cura per i dettagli e l’ottimizzazione dell’esperienza utente (o user experience).
Con il tempo questa passione è aumentata sempre più, tanto che oggi, quando realizzo qualsiasi progetto per i miei clienti la cura per i dettagli insieme a una buona dose di UX è sempre al primo posto.
Questa evoluzione è avvenuta step by step fino a sentire una vera esigenza di scrivere un articolo su questo argomento.
Sei pronto? Sto per svelarti alcuni segreti dei più esperti User Experience Designer e psicologi del nostro tempo. Si parte 😉
Non posso non citare una delle persone che ha fatto conoscere al mondo la UX: Jonathan Ive, ex Chief Design Officer di Apple.
Cos’è la user experience e l’usabilità?
Prima di capire cos’è la user experience (UX) è bene capire cos’è l’usabilità.
Una delle definizioni più importanti ci arriva da Steve Krug, esperto di usabilità ed esperienza utente:
E la user experience? Questa ha il compito di misurare la soddisfazione dell’interazione utente con il sito.
Sei sei alle prime armi potrebbe sembrare complicato e la differenza nulla, dunque provo a fornirti una spiegazione più dettagliata.
Mentre l’usabilità si concentra su efficacia, efficienza e soddisfazione la user experience va più in profondità e si prefigge lo scopo di rendere piacevole l’interazione con il soggetto in questione.
Per concludere la prima si limita a rendere utilizzabile un determinato obbiettivo dei progettisti, la seconda tende a migliorarlo ancora più per rendere l’esperienza piacevole e significativa.
Il modello procedurale che dovresti seguire quando realizzi qualsiasi cosa è dunque il seguente: usabilità -> UX.
Concetti psicologici fondamentali per migliorare UX e usabilità
Donald Norman nel suo libro la caffetteria del masochista presenta 6 concetti psicologici fondamentali che ho trovato subito molto interessanti e che riporto in questa guida con molto piacere.
Affordance
L’affordance è la relazione fra l’oggetto, per come appare, e come esso possa essere utilizzato.
Riguardo a questo concetto Norman dice:
Se per esempio guardi l’immagine seguente, quale azione pensi sia possibile?
Se pensi al clic di un bottone allora questa azione ha l’affordance: “clic di un bottone”.
L’affordance ha lo scopo di rendere l’oggetto in questione intuitivo, senza perciò che sia necessario l’utilizzo di un’etichetta come il testo nel bottone.
Significanti
I significanti comunicano dove l’azione va eseguita.
Per esempio, aggiungendo del testo sul bottone di prima, rafforzerai la tua convinzione che l’azione verrà eseguita quando cliccherai sul testo del bottone “VAI AL BLOG”.
Ti stai perdendo?
Capisco perfettamente che l’esempio del bottone non possa essere subito comprensibile, dunque sentiamo quello che ci dice Norman riguardo le tipologie di significanti:
Ora dovrebbe essere tutto più chiaro, vero?
Assicurati che i significanti permettano di capire cosa succederà. Per esempio in una CTA (call to action) o link non utilizzare mai “clicca qui” o “scopri di più”, ma piuttosto utilizza “vai al blog” o “ottieni il tuo PDF gratuito”. Questo è chiamato feedforward e viene completato dal feedback di cui parlerò più avanti.
Mapping
Sono passati ormai un pò di anni dalla prima volta in cui ho dormito a casa della mia morosa e durante la notte dovetti alzarmi per andare al bagno che si trovava al piano inferiore.
Per cercare di raggiungere l’obiettivo accesi almeno 6 luci di cui 3 non mi servivano a niente e sono sicuro di aver svegliato anche i suoi genitori.
Inutile dire che mi sentivo un cretino. Solamente un pò di anni dopo ho capito che io c’entravo ben poco. La colpa non era mia.
La colpa era associata alla disposizione degli interruttori.
Mentre gli interruttori di casa mia erano vicini alla stanza in cui si trovavano, nella casa dei genitori della mia morosa gli interruttori erano collocati in modo diverso.
Se per esempio c’erano due stanze davanti a me e in mezzo a queste due stanze c’erano gli interruttori, quello di destra accendeva la luce della stanza di sinistra, mentre quello di sinistra accendeva la luce della stanza di destra.
Come dice Norman:
Guarda bene questa immagine:
Te la immagineresti mai con il più a sinistra e il meno a destra?
No, vero? Ecco, questo è un mapping.
Vincoli
I vincoli si dividono in:
- fisici;
- culturali;
- semantici;
- logici.
Questi vanno a definire i paletti e gli obblighi che un designer deve rispettare per guidare l’azione e facilitare l’interpretazione.
Norman dice:
Pensa al bottone di un form in opacità, cosa indica? Molto probabilmente che non hai completato i campi obbligatori del form. Questo per esempio è un vincolo logico.
Altri vincoli possono essere gli step di un processo di acquisto o lo stesso schermo del display.
Feedback
Poco tempo fa ho mandato in riparazione il mio computer e mi sono dimenticato di segnare il codice tracking per rintracciare il pacco.
Ho vissuto giorni di ansia chiedendomi: “dove sarà?” o “sarà già arrivato a destinazione?”.
Colpa mia perché non ho segnato il codice di tracking? No.
La colpa anche in questo caso è del sistema in gestione che si è completamente dimenticato di inviarmi una mail di conferma (o feedback) che diceva: “ecco, questo è il codice con cui potrai rintracciare il pacco”.
Non avendo un feedback entriamo in paranoia e se entriamo in paranoia pensiamo e se pensiamo non possiamo concentrarci sull’azione principale che dovremmo svolgere.
Ti è mai successo di pigiare più volte il bottone al semaforo vicino alle strisce pedonali? Si, vero? Lo fai perché non hai un feedback immediato e non sai se la richiesta è stata processata.
Norman riguardo all’importanza dei feedback dice:
Un esempio di feedback può essere un loader che appare tra l’invio di un form e la richiesta processata.
Modelli concettuali
Norman dice dei modelli concettuali:
I modelli concettuali sono dunque dei modelli mentali che nella nostra mente rappresentato il modo in cui secondo noi funzionano le cose.
Riprendiamo per esempio la seguente immagine:
Quale pensi che sia la sua funzione?
Incrementare il valore centrale (42) di 1 se selezioni il bottone con il “+” e diminuire il valore di 1 se selezioni il bottone con il “-“, giusto?
Ma aspetta un attimo… come hai fatto a capirlo? Molto probabilmente se facessimo vedere questa immagine a un alieno o a un’animale non la capirebbero.
Quindi perché mai sei arrivato a questo pensiero? Ovvio, perché sai cosa vuol dire “+” e sai cosa vuol dire “-” e hai associato questa cosa al tuo ragionamento tramite questo modello mentale.
Ad esempio l’icona dell’imbuto potresti associarla ad una funzione che serve per filtrare e l’icona della casa alla home dell’app o del sito.
Immagina ora di avere un’applicazione dove la home viene rappresentata con l’icona dell’imbuto e i filtri con l’icona della casa, ti ritroveresti?
Tools che ti aiutano a migliorare la user experience (UX)
Ogni volta che sto per realizzare un sito mi affido a vari strumenti, qui sotto ho deciso di riportare gli stessi che utilizzo anche io.
Hotjar
Hotjar è un programma che ti permette di capire nel concreto come gli utenti utilizzano il tuo sito web grazie a vari strumenti come le heatmap (che vedi qui sotto), i recordings e altro ancora. Scoprire cos’è e come funziona è veramente semplice.
È uno strumento utilissimo che ti permette di ottenere una specie di test di usabilità e che tenderà a migliorare anche la user experience del tuo sito.
Ah… non te l’ho detto? Ha una versione gratuita!
Sketch (o Adobe XD)
Sei uno che parte a manetta e non dedica tanto tempo alla realizzazione grafica del progetto?
Mi dispiace dirlo, ma stai sbagliando. E questo per due motivi principali:
- Dovrai fare rework inutili dovuti al fatto che il cliente non sapeva cosa aspettarsi e alla fine il progetto non gli è affatto piaciuto. Si può evitare a monte facendogli prima vedere lo sketch del lavoro.
- Lo sketch ti permette di avere una base su cui appoggiarti e di non avere alcun limite creativo.
Dunque quali programmi ti consiglio per migliorare la user experience e l’usabilità dei tuoi progetti?
Sketch per macOS e Adobe XD per gli altri dispositivi.
Conclusioni
Con questo articolo spero di averti illustrato quello che un buon UX designer dovrebbe fare quando realizza un qualsiasi progetto.
E non dimenticare… ragiona sempre come il tuo potenziale cliente e mai come il progettista.
Hai domande o dubbi? Non esitare a lasciare un commento! 😉
Un saluto,
Matteo.