Il futuro digitale e professionale: la User eXperience

Grafica 2D

Il futuro digitale e professionale: la User eXperience

by Michele
Luglio 2021

La UX, è una fase di progettazione di un prodotto che ne vuole rendere l’utilizzo facile.

Cosa è la User eXperience?

Qualsiasi prodotto che utilizziamo è stato progettato da qualcuno: una porta, un’applicazione mobile oppure un sito web come questo nel quale stai leggendo questo articolo. Durante la fase di ideazione il progettista tiene sempre conto, in modo conscio e inconscio, di come l’utente si relazionerà col prodotto che sta progettando: la User eXperience, detta brevemente anche con l’acronimo UX. Ma cosa significa, dove si applica e cosa si occupa di preciso?

La traduzione inglese-italiano ci suggerisce che: la User eXperience è l’esperienza dell’utente. La normativa ISO 9241-210 più formalmente la definisce come “l’insieme delle percezioni e delle reazioni di un utente che derivano dall’uso o dall’aspettativa d’uso di un prodotto, sistema o servizio”.

Prendiamo, ad esempio, una comunissima porta: la User eXperience è il modo con cui una persona la usa, ci interagisce e si comporta. Quando l’utente trova una porta chiusa e la vuole utilizzare inizierà un’interazione compiendo delle azioni, ad esempio sulla maniglia: dovrà individuarla, infilarci la mano o le dita, decidere se tirare verso di sé, verso il lato destro o sinistro o spingerla. Quando un prodotto, in questo esempio una porta, è utilizzato in modo naturale senza esitazioni o tentativi, significa che è ben progettato.

UX UI design
Il modo in cui un utente interagisce con una porta è un esempio di User eXperience: dietro il semplice gesto da parte dell’utente che usa la maniglia c’è un attento studio, a volte consapevole altre inconscio perché influenzato dall’esperienza collettiva o da standard/normative di progettazione: l’altezza della maniglia, la sua forma, il suo materiale, le sue dimensioni ecc. Quando l’utente apre una porta senza esitare significa che la User eXperience di quella porta è corretta. Al contrario, se l’utente non individua immediatamente la maniglia o l’azione che deve compiere (tirare o spingere) significa che c’è qualcosa che non va nella User eXperience.
UX UI design
Le porte antipanico sono un ottimo esempio di prodotti progettati tenendo conto della User eXperience: l’utente non ha tempo di ragionare se deve tirare o spingere. Il suo istinto è correre e uscire, spingendo qualsiasi cosa che gli capiti davanti, infatti le porte antipanico hanno maniglioni che devono essere spinti e non tirati o girati, e il loro senso di apertura è verso l’esterno e non l’interno o un lato.

A questo punto possiamo dire la UX, è una fase di progettazione di un prodotto con lo scopo di rendere l’utilizzo facile e immediato.

Gli ambiti di utilizzo della UX sono molteplici, si può applicare su oggetti fisici (come una porta) o in prodotti digitali (esempio un app o un sito web.)

Contestualizziamo adesso la User eXperience nel mondo digitale, ovvero in tutti quei prodotti come siti websoftware o applicazioni su device come smartphone o tablet. È uno dei contesti più interessanti in cui la UX trova ampissime e affascinanti applicazioni.

L’utente, in un prodotto digitale, come ad esempio il sito della propria banca, dovrà svolgere delle azioni per ottenere degli obiettivi, come quello di controllare il proprio estratto conto. Qui entra in gioco la progettazione UX che dovrà orientarlorassicurarloguidarlococcolarlo e anche premiarlo. Per farlo il progettista UX, detto UX Designer, definisce su un foglio gli obiettivi che l’utente deve raggiungere. Esempio “fare un bonifico”, oppure “scaricare l’ultimo estratto conto” e così via. Successivamente lo UX designer studia i modi possibili per guidare l’utente per fargli raggiungere gli obiettivi individuati, ad esempio strutturando bene i contenuti oppure creando dei messaggi che suggeriscono un certo tipo di azione.

La progettazione di Wireframe User eXperience

In un contesto digitale, la User eXperience è indispensabile per una corretta progettazione di un prodotto. Oltre a definire gli obiettivi degli utenti ha un altro ruolo molto importante: organizzare i contenuti in modo fluido, gerarchico ed intuitivo, affinché l’utente trovi facilmente quello da lui cercato. Questa importante fase, definita wireframe, consiste nel realizzare schermate dove vengono visualizzati i blocchi dei contenuti di una pagina.

I wireframe, parola inglese che significa fili di ferrorappresentano le fondamenta della paginaSono una sorta di layout primordiale. In questa fase di progettazione non ci si concentra su aspetti estetici (colore, carattere tipografico, foto ecc.) ma solo su aspetti di contenuto, di gerarchia e di posizione.

Dopo che i wireframe sono consolidati e approvati, si passa alla fase successiva, quella della User Interface, che si occuperà di inserire e curare elementi grafici ed estetici.

UX UI design
Wireframe dell’app Aqua Fit di Silvia Sesia, progetto realizzato durante il corso UX/UI Design con Adobe XD. I wireframe, prima fase del progetto, mostrano la struttura dei contenuti della pagina. Solo successivamente, dopo aver consolidato i contenuti e la struttura nei wireframe, la designer ha curato l’aspetto grafico: la User Interface.

I software UX per disegnare wireframe

Abbiamo visto come la User eXperience, contestualizzata nel digitale, è una fase di progettazione che ha diverse fasi. Tra questi quella di organizzare i contenuti di una pagina e predisporli in dei layout, i wireframe. Ad oggi ci sono molti software dedicati a questi scopo. Alcuni sono stati sviluppati oppositamente, altri invece hanno un utilizzo più ampio.

Adobe XD è uno dei software più versatili e diffusi per creare wireframe. Essendo della famiglia Adobe vanta una veloce famigliarità per chi conosce altri programmi della stessa casa software. Uno dei vantaggi principali di Adobe XD è la collaborazione in tempo reale: più utenti possono utilizzare contemporaneamente lo stesso file, previa naturalmente connessione internet. Altro plus di XD è la facile e veloce prototipazione: ovvero la trasformazione dei wireframe in prodotto multimediale navigabile per effettuare demo e test di UX.

UX UI design
Schermata del software Adobe XD, nell’artboard è stato disegnato un wireframe. L’interfaccia di Adobe XD è molto simile a quella di un altro software suo competitor che nel mercato è uscito molto prima: Sketch. Gli UX Designer, progettando il programma Adobe XD, hanno probabilmente preferito ispirarsi a Sketch, software pioniere specializzato nella progettazione di wireframe UX e UI.

Nel corso SinerVis UX/UI con Adobe XD vengono spiegate tutte le funzionalità del software Adobe XD, sia di progettazione UX di UI, ma anche di condivisione e prototipazione.

Il software principale competitor di Adobe XD è Sketch, che, come unico plus rispetto ad Adobe XD ha una migliore fruizione e organizzazione delle librerie condivise. Sketch gira solo su piattaforma Mac, ma non sembra essere una preoccupazione per la casa software produttrice perché la maggior parte di UX e UI Designer lavora su Mac.

Balsamiq e Axure sono altri software appositamente ideati per la produzione di wireframe. Hanno ha alcune funzioni avanzate tra cui quella di prototipazione che permette di realizzare wireframe navigabili con breakpoint, cosa che invece per adesso Adobe XD non fa ancora. Non si può non citare Figma, che ultimamente sta prendendo sempre più piede come programma UX e UI. La caratteristica principale di Figma è che è un software/web app cloud con tutti i vantaggi, ma anche svantaggi, connessi.

Perché è importante possedere nuove competenze nel campo UX nel 2021

È di estrema importanza avere conoscenze professionali di User eXperience per progettare prodotti digitali di qualità. Avendo competenze di UX si è più sensibili nella fase di progettazione e si migliora notevolmente la navigazione e utilizzo del prodotto.

Senza una fase professionale di progettazione UX il prodotto rischierebbe di essere, per alcuni utenti, complicato o poco gradevole. 

Ad oggi sempre più aziende stanno inserendo nel loro team, assumendole, figure specializzate di UX Design. Probabilmente nel futuro tutte le aziende medio-grandi avranno una figura UX interna. La User eXperience nel futuro diventerà un must di fase di progettazione e revisione per qualsiasi prodotto, cosa che ad oggi purtroppo non lo è ancora del tutto.

Il rischio più grave di quando si progetta un prodotto digitale senza competenze UX è immedesimarsi completamente nell’utente e prendere decisioni personali, che magari sono corrette per il progettista ma non lo sono per gli altri utenti.

Bisogna progettare per l’utente e non per se stessi. È quella che viene definita user-centered design: progettazione centrata sull’utente. Con questo approccio si mettono al primo posto i bisogni, i desideri e anche i limiti dell'utente per rendere il più usabile, semplice ed intuitivo il prodotto. Per progettare user-centered si necessita però conoscere il tipo di utente, la sua età, la sua dimestichezza nella navigazione e necessità.

Diventando un UX designer si possono acquisire competenze e tecniche per comprendere al meglio il tipo di utenti (definiti User Personas) e mappare nel modo corretto le fasi e momenti di interazione (Journey Map).

La User Personas e la Journey Map

Le user personas sono degli identikit di utenti ideali che possono utilizzare un prodotto. L’identificazione delle user personas permette una migliore consapevolezza di progettazione orientata esclusivamente agli utenti e alle loro necessità. Conoscerli significa progettare per loro tenendo conto della loro etnia, età, abitudini, cultura ecc.

Per identificare e mappare le user personas ci sono diverse tecniche e approcci. Il primo fra tutti è quello del buon senso. Se si progetta ad esempio un app legata allo sport del calcio è chiaro che uno dei principali user personas sarà un utente maschio, con la passione del calcio, con età compresa dai 16 anni ai 60 (difficilmente un utente femminile di 80 anni utilizzerà un’app sul calcio). Una volta individuati gli user personas si crea una vero e proprio identikit: si individua un nome di riferimento e una foto, si definisce l’età, le competenze, le necessità, la conoscenza di lingue e di tecnologia ecc. Un progetto può ovviamente avere più di una user personas.

UX UI design
Esempio di User Personas dell’app TOwRIteNow realizzata da Eugenia Paffile durante il corso UX/UI con Adobe XD. In questo “identikit” è stato individuato e descritto accuratamente l’utente “tipo”. La fase di UX ha tenuto conto delle sue competenze, personalità, obiettivi e necessità.

Un'altra fase importante è la Journey Map, un processo di progettazione nel quale vengono mappati i momenti più importanti di interazione tra utente e prodotto. Esempio: registrazione, accesso, utilizzo per raggiungere un determinato scopo. Per ogni momento di interazione, definito step o fase, vengono descritti i comportamenti dell’user personas e i suoi umori. Attraverso la realizzazione di una Journey Map si ha più consapevolezza dello scenario del progetto e si può fare una progettazione che soddisfi e coinvolga più profondamente l’utente.

User Personas e Journey Map fanno parte di un processo di design definito Service Design che collabora e confina con la User eXperience.

UX UI design
Journey Map l’app Click Lunch di Silvia La Rossa, progetto realizzato durante il corso UX/UI con Adobe XD. In questa Journey Map la designer ha individuato sei fasi di conversione di tipologia di utenza tra la user personas individuata e l’app: da utente anonimo (fase di scoperta dell’app) a cliente fidelizzato (fidelizzazione).

Esempio reale: la UX del sito SinerVis Solutions

La UX, come scritto precedentemente, è una fase che predispone le basi per il design grafico. Progettare wireframe prima di passare alla grafica permette di consolidare in modo maturo e responsabile scelte di contenuto e gerarchia delle informazioni.

Per il sito SinerVis Solutions la fase di wireframe è stata fondamentale perché ha permesso di concentrarsi sull’identificazione dei contenuti e sulla loro disposizione nella pagina. Grazie alla stesura di varie proposte su wireframe si è individuata la disposizione più efficace che ha soddisfatto le richieste e i bisogni immaginati delle user personas individuate.

Se si fosse partiti direttamente con il progetto grafico ci sarebbe stato il rischio di essere distratti da discussioni su elementi grafici (come colore, icone o font), cosa che invece merita di essere affrontata e ponderata in una fase successiva.

La progettazione del wireframe della homepage di SinerVis Solutions è iniziata con la stesura dei contenuti da voler inserire. La lista degli elementi si è poi ridotta per avere una homepage più snella con meno contenuti, in modo da non appesantire con troppe informazioni l’utente. Dopo varie revisioni di wireframe è stata approvata la proposta che convinceva più a tutti del team interno e solo successivamente si è passati alla fase di progettazione grafica, la User Interface.

UX UI design
A sinistra il wireframe approvato della homepage del sito SinerVis Solutions. A destra la UI, successivamente disegnata, in riferimento al wireframe. La disposizione dei contenuti nei wireframe è stata revisionata più volte e solo dopo che è stata consolidata si è passati alla fase di User Interface. Wireframe e UI sono stati progettati col software Adobe XD.

La User eXperience nel futuro

Al giorno d’oggi si stanno diffondendo sempre più nuovi scenari digitali e tipologie di devicesmart watchsmart tv, dispositivi con visori di realtà virtuale, assistenti virtuali vocali. Siti web e applicazioni continuano ad evolversi e a mutare, basti pensare alle integrazioni di comandi vocali o di realtà aumentata.

Il modo di utilizzare web e dispositivi digitali cambia in continuazione e continuerà a evolversi nel tempo. Nel passato, per interagire con un sito web, ci si limitava a cliccare. Oggi si possono usare comandi vocali e tattili (esempio i tocchi negli smart smartphone). Ma cosa succederà alla User eXperience nel futuro? Film e romanzi di fantascienza ci aiutano ad immaginare comandi di interazione come il body tracking (in alcune consolle di videogiochi già vengono utilizzati). Tra 10 anni sarà magari normale navigare nel web esclusivamente con caschi o dispositivi VR e leggere un articolo come questo su un monitor o smartphone sarà solo un gesto nostalgico e vintage.

Se il tema della UX trattato in questo articolo ti ha interessato scopri il Master UX/UI Adobe XD di SinerVis. Il corso affronta argomenti teorici per comprendere appieno la disciplina e padroneggiarla professionalmente fornendo pratici strumenti come la creazione di wireframe UX, progettazione grafica UI e prototipazione.

Scopri il Corso UX/UI Adobe XD di SinerVis

Possedere competenze di UX, come quelle trattate nel corso e citate in questo articolo, permette di conoscere il passato, essere aggiornati sul presente e ottenere una maturità di progettazione pronta e orientata a ciò che succederà nel futuro.

Vuoi approfondire gli argomenti?
Scegli un corso SinerVis e formati con i professionisti del settore 👇
Michele
UI & UX Designer
Grafico
Docente Sinervis
Il suo sogno da bambino era diventare grafico. Si laurea in Design della Comunicazione presso il Politecnico di Milano. Lavora come freelance da oltre 15 anni a 360° nel mondo del visual design. Tra il suo portfolio clienti: Rizzoli, eBay, Ikea, Banca Intesa, Samsung. Parallelamente al ...