UI e UX design: differenze, metodo e strumenti per iniziare

Questa guida è pensata per chi vuole distinguere i due ambiti, capire il processo e costruire un primo esercizio verificabile senza confondere strumenti e metodo.

Immagina di voler prenotare una visita. Devi capire quale appuntamento scegliere, trovare una data disponibile, inserire i dati corretti, recuperare un errore e ricevere una conferma affidabile. La UX riguarda la qualità di questo percorso nel suo insieme, anche prima e dopo l'uso dello schermo. La UI riguarda la superficie visiva e interattiva con cui compi le azioni: gerarchia, calendario, controlli, stati, testi e feedback.

In un team piccolo, la stessa persona può occuparsi di entrambe. Questo non rende però intercambiabili le responsabilità. Una schermata elegante non risolve un servizio che nasconde informazioni decisive; una ricerca accurata non basta se l'interfaccia finale rende difficile agire.

UI e UX design in una frase: user experience e user interface

UX, user experience, è l'esperienza complessiva della persona con un prodotto, un servizio e l'organizzazione che lo offre: aspettative, passaggi, ostacoli, risultato e conseguenze. UI, user interface, è il punto di contatto visivo e interattivo: ciò che presenta informazioni, riceve comandi e comunica lo stato del sistema.

L'usabilità descrive quanto l'uso permetta di raggiungere un obiettivo con efficacia, efficienza e soddisfazione in uno specifico contesto d'uso. È una qualità importante dell'esperienza, ma non la esaurisce. Una prenotazione può essere semplice da completare e lasciare comunque un'esperienza negativa se le condizioni sono poco trasparenti o la conferma non arriva.

I confini tra UI, UX, product design, interaction design, service design e user research variano tra organizzazioni. Per capire un ruolo, conviene guardare quali problemi affronta, con chi collabora e di quali risultati risponde, anziché affidarsi soltanto al titolo.

UX vs UI: differenze nello stesso compito

Nel caso della prenotazione, UX e UI osservano lo stesso percorso da angolazioni collegate.

Domanda UX	Decisione UI	Come verificarla
Quali informazioni servono prima di scegliere?	Ordine di data, durata, luogo e disponibilità	Chiedere a persone pertinenti di scegliere senza suggerimenti
Che cosa accade se l'orario non è disponibile?	Stato disabilitato, alternativa e messaggio esplicativo	Provare un caso limite credibile e osservare il recupero
Come si capisce che la prenotazione è riuscita?	Conferma visibile, riepilogo e prossima azione	Verificare che la persona sappia descrivere stato e seguito

La domanda UX non produce automaticamente un componente; la decisione UI non può ignorare il servizio. Se il sistema non conosce la disponibilità reale, cambiare il colore del pulsante non risolve il problema. Contenuto e interfaccia devono affrontarlo insieme.

Lo stesso ragionamento vale per prodotti editoriali e culturali. In una guida al Museo del Prado, l'esperienza comprende la ricerca delle informazioni e la preparazione della visita; l'interfaccia deve rendere distinguibili orari, accesso e opere.

Che cosa fa un UX designer

User research e customer journey

Il lavoro UX parte da domande, non da una collezione di schermate. Chi se ne occupa chiarisce il problema, distingue ciò che il team sa da ciò che presume e individua le persone interessate. Studia il contesto: che cosa cercano di fare, come lo fanno oggi, che cosa impedisce loro di riuscire e che cosa accade prima e dopo il punto di contatto digitale.

La guida alla user research di GOV.UK insiste sul coinvolgimento di utenti reali o probabili e su domande legate ai loro compiti. Nasce per servizi pubblici britannici, ma offre un principio utile anche altrove: opinioni interne e intuizioni non sostituiscono l'osservazione delle persone pertinenti.

Dalla ricerca alle decisioni

Le attività possono comprendere interviste, osservazione, mappatura del percorso o customer journey, architettura dell'informazione, prototipi e test. Si scelgono in base alla domanda, al rischio e alle decisioni da prendere, lavorando con contenuto e sviluppo.

Il design centrato sulle persone non è quindi una fase isolata. ISO 9241-210:2019 lo colloca lungo il ciclo di vita dei sistemi interattivi. Ricerca, progettazione e verifica vanno considerate attività ricorrenti, non passaggi confinati in un unico diagramma operativo.

Che cosa fa un UI designer

User interface, stati e componenti

Il lavoro UI traduce priorità, flussi e contenuti in un sistema visivo e interattivo. Decide tipografia, colore, spaziatura, iconografia e layout, ma anche stati di attesa, errore, successo, vuoto e indisponibilità. Progetta componenti che restino coerenti quando cambiano testi, dati, dimensioni dello schermo e modalità di input.

Interazione, accessibilità e contenuti

La UI deve far capire che cosa è possibile fare, che cosa sta accadendo e che cosa è appena successo. Un campo obbligatorio deve avere un nome comprensibile; il focus da tastiera deve essere visibile; un errore deve indicare come recuperare; un comando non può dipendere soltanto dal colore. Documentare varianti e comportamenti consente a design, contenuto e sviluppo di costruire lo stesso prodotto.

I fondamenti visivi rimangono importanti: gerarchia, contrasto, griglie e tipografia sono approfonditi anche nella guida al graphic design. Nell'interfaccia, però, devono rispondere a stati dinamici e azioni, non soltanto a una composizione statica.

Processo di user experience design: capire, definire, prototipare, testare

Un percorso essenziale può essere articolato in cinque movimenti:

Capire. Raccogliere evidenze sul contesto, sulle persone e sul servizio esistente; separare fatti, interpretazioni e assunzioni.
Definire. Formulare il problema, l'esito desiderato e le domande ancora aperte. Scegliere che cosa affrontare e che cosa resta fuori.
Prototipare. Rendere verificabili le ipotesi con il livello di fedeltà più economico adeguato alla domanda.
Testare. Osservare persone pertinenti mentre svolgono compiti realistici, senza suggerire la soluzione.
Iterare. Collegare le osservazioni a decisioni concrete, modificare e verificare di nuovo ciò che comporta rischio.

È una traccia, non un rito. Ricerca e test possono comparire in ogni fase; una scoperta può cambiare la definizione del problema; un limite tecnico può richiedere una nuova alternativa. Il Double Diamond offre un'altra mappa compatibile — scoperta, definizione, sviluppo e consegna — ma non è “il processo UX” universale.

Un prototipo ad alta fedeltà non è sempre più informativo. Se la domanda riguarda l'ordine dei passaggi, bastano fogli di carta o wireframe essenziali. Se bisogna verificare focus, tastiera o annunci di uno screen reader, serve invece un artefatto abbastanza funzionante da riprodurre quei comportamenti.

Strumenti per UI design e UX design

Il set minimo dipende dall'evidenza che occorre produrre.

Attività	Strumento minimo ed esempi	Evidenza utile
Domande e piano di ricerca	Documento o foglio condiviso	Obiettivi, ipotesi, partecipanti, consenso, note
Percorso e flussi	Carta o lavagna, anche digitale	Passaggi, decisioni, punti di attrito
Wireframe	Carta, Penpot o Figma	Struttura, priorità e contenuti
Prototipo	Editor collegabile o codice leggero	Compiti eseguibili e ipotesi verificabili
Sistema UI	Componenti e token nel mezzo scelto	Stati, varianti, regole responsive
Test	Guida, prototipo e note	Osservazioni legate ai compiti
Accessibilità	Standard, tastiera, screen reader e controlli tecnici	Problemi riproducibili e correzioni

Penpot e Figma sono esempi di ambienti per wireframe, prototipi e componenti, non sinonimi del mestiere. Carta e lavagna sono spesso sufficienti per ordinare un flusso. Nessuno strumento sostituisce il reclutamento di persone pertinenti, il consenso, l'analisi o il confronto con chi costruirà e manterrà il prodotto.

Prima di scegliere, verifica quattro aspetti: il tipo di prova che devi creare, la possibilità di includere contenuti e casi limite realistici, la compatibilità con il lavoro del team e l'accessibilità del prototipo per la verifica prevista. Funzioni, piani e prezzi cambiano; non sono una base stabile per decidere che cosa imparare per primo.

Accessibilità in UI e UX design

L'accessibilità non è una spunta alla fine né un sinonimo di buon contrasto. Va considerata quando si definiscono il pubblico, i requisiti e il percorso, poi verificata nelle decisioni di contenuto, interazione e sviluppo. Coinvolgere persone con disabilità presto e durante il progetto aiuta a riconoscere barriere concrete; non sostituisce il controllo rispetto agli standard.

Secondo il prodotto, verifica tastiera, focus, nomi accessibili, ingrandimento, errori, struttura dei contenuti e tecnologie assistive. I controlli automatici trovano soltanto una parte dei problemi e non certificano da soli la conformità.

WCAG 2.2 è una Raccomandazione W3C dal 2023, ma applicare criteri tecnici e progettare una buona esperienza restano compiti collegati e distinti. Una pagina può superare alcuni controlli e risultare ancora difficile da capire; una sessione con utenti può far emergere una barriera senza stabilire da sola la conformità. Servono entrambi i livelli.

Un esercizio completo per iniziare

Usa il caso della prenotazione di una visita e prepara un dossier contenuto:

una domanda di ricerca e tre ipotesi esplicite;
un flusso principale e due casi limite, come indisponibilità ed errore nei dati;
wireframe a bassa fedeltà con contenuti plausibili;
un prototipo che includa conferma ed errore recuperabile;
tre compiti di test non suggestivi;
una sintesi delle osservazioni e una seconda versione;
una nota su accessibilità, limiti e alternative scartate.

Un compito credibile potrebbe essere: “Vuoi prenotare la prima visita disponibile sabato pomeriggio. Mostrami come procederesti.” Evita formule che rivelano l'interfaccia, come “Premi il pulsante blu per scegliere sabato”. La guida GOV.UK al test di usabilità moderato suggerisce di collegare ogni compito alle domande di ricerca e di osservare la persona mentre prova a completarlo.

Il numero di partecipanti dipende dalla popolazione, dalla domanda e dal rischio. Se coinvolgi persone, pianifica consenso, privacy ed eventuale compenso. Se non hai accesso a utenti pertinenti, dichiara il limite e non trasformare commenti di amici o colleghi in “risultati di ricerca”.

Competenze e portfolio per UX e UI designer

Un caso portfolio deve permettere di capire il problema e il tuo contributo. Includi:

contesto, obiettivo, responsabilità e persone con cui hai collaborato;
vincoli reali e decisioni che ne sono derivate;
evidenze pertinenti, anonime e condivisibili con il consenso necessario;
cambiamenti tra una versione e l'altra, con la ragione;
risultato, compromessi e questioni rimaste aperte.

Non serve rappresentare ogni progetto come una sequenza perfetta di post-it. È più utile mostrare dove un'ipotesi è cambiata e che cosa non è stato possibile verificare. Evita metriche inventate, partecipanti fittizi e affermazioni causali che i dati non sostengono. Un singolo esercizio ben documentato dimostra attenzione al metodo, ma non garantisce da solo preparazione professionale o occupazione.

Errori frequenti

Partire dallo stile

Colori e componenti non chiariscono da soli il compito, il pubblico o il servizio.

Confondere opinioni interne e ricerca

Il team conosce vincoli e obiettivi, ma non rappresenta automaticamente le persone che useranno il prodotto.

Testare soltanto il percorso ideale

Indisponibilità, errori, contenuti lunghi e interruzioni sono parte dell'esperienza.

Chiedere preferenze generiche

“Ti piace?” produce meno indicazioni di un compito osservabile collegato a una domanda precisa.

Delegare l'accessibilità a un plugin

Gli strumenti automatici aiutano a individuare problemi specifici, ma non sostituiscono standard, controlli manuali e coinvolgimento delle persone.

Presentare ruoli e fasi come universali

Titoli e responsabilità dipendono dal contesto; ciò che conta è rendere chiari compiti, decisioni e collaborazione.

Domande frequenti

UI e UX possono essere svolte dalla stessa persona?

Sì, soprattutto nei team piccoli. È comunque utile distinguere le domande sull'esperienza complessiva dalle decisioni sulla superficie interattiva, così nessuna delle due viene trascurata.

Serve saper programmare?

Non per iniziare ogni attività UX o UI. Comprendere i vincoli del web e dialogare con chi sviluppa migliora la fattibilità delle decisioni; alcuni test di interazione e accessibilità richiedono inoltre un prototipo funzionante.

Quale strumento conviene imparare per primo?

Quello minimo per il problema scelto. Per ordinare un percorso basta la carta; per collegare schermate serve un editor di prototipi; per verificare interazioni reali può servire codice. Impara prima a formulare un'ipotesi e a riconoscere quale evidenza potrebbe smentirla.

Che differenza c'è tra wireframe e prototipo?

Il wireframe descrive soprattutto struttura e priorità. Il prototipo permette di simulare un compito o un comportamento. Un wireframe può diventare parte di un prototipo, e nessuno dei due deve necessariamente avere l'aspetto del prodotto finale.

Come si testa senza un prodotto finito?

Con l'artefatto più semplice capace di rappresentare la decisione: fogli ordinati, schermate collegate o una porzione funzionante. Il compito deve restare realistico e il facilitatore non deve guidare la persona verso la risposta.

Le WCAG riguardano solo chi sviluppa?

No. Contenuti, ordine, messaggi, stati, componenti e interazioni nascono da decisioni condivise tra design, redazione e sviluppo. La verifica tecnica è indispensabile, ma molte barriere si prevengono già quando si definiscono il percorso e il sistema.

Per iniziare, scegli un compito reale e osservabile, scrivi ciò che credi di sapere e costruisci il prototipo più semplice che permetta di metterlo alla prova. Il valore non sta nel numero di schermate, ma nella qualità delle domande e nelle decisioni che le evidenze rendono possibili.