Perché tutti le confondono
'UI/UX' viene pronunciato come una parola sola così spesso che la maggior parte delle persone pensa sia un unico lavoro. Non lo è — e la confusione non è innocua. Un founder che pensa 'UI' quando in realtà il problema è 'UX' assumerà un designer visivo per risolvere un problema che in realtà sta nel flusso di checkout, spenderà il budget per un pulsante più bello, e vedrà la stessa percentuale di utenti abbandonare allo stesso passaggio. La soluzione non era mai visiva. Era strutturale. Sapere quale dei due problemi hai davvero è la differenza tra spendere soldi e sprecarli.
Le definizioni, senza fronzoli
UI — User Interface (Interfaccia Utente)
Tutto ciò che puoi vedere e con cui puoi interagire fisicamente: pulsanti, colori, tipografia, icone, spaziature, animazioni. La UI è la superficie — lo strato visivo e interattivo tra la persona e il sistema. È l'artigianato che puoi catturare con uno screenshot.
UX — User Experience (Esperienza Utente)
L'intero percorso che una persona compie per ottenere qualcosa — quanto è facile, quanti passaggi richiede, se ha senso, se la persona si sente sicura o persa. La UX è strutturale — non puoi catturarla con uno screenshot, puoi solo misurarla, nei task completati e in quelli abbandonati.
8 modi per distinguerle
Focus
UI
Come il prodotto appare e si sente al tatto — colore, tipografia, spaziature, icone.
UX
Come il prodotto funziona per chi lo usa — l'intero percorso, dall'inizio alla fine.
La domanda a cui risponde
UI
"È bello da vedere?"
UX
"Ha senso?"
Cosa viene consegnato
UI
Mockup, style guide, librerie di componenti, schermate pixel-perfect.
UX
User flow, wireframe, personas, mappe del percorso, report di usabilità.
Gli strumenti del mestiere
UI
Figma, palette colori, set di icone, scale tipografiche.
UX
Interviste agli utenti, mappe del percorso, A/B test, analytics, card sorting.
Come si misura il successo
UI
Coerenza visiva, allineamento al brand, appeal estetico.
UX
Tasso di completamento dei task, tempo sul task, tasso di abbandono, punteggio di soddisfazione.
Quando entra nel processo
UI
Più tardi — una volta validato il flusso, la UI gli dà un volto.
UX
Prima — prima ancora che esista un singolo pixel, la UX decide cosa sia il flusso.
Come appare il "buono"
UI
Un pulsante che sembra cliccabile. Spaziature coerenti. Un linguaggio visivo coerente.
UX
Un checkout che richiede 3 passaggi invece di 8, perché nessuno ha dovuto fermarsi a pensare.
Come fallisce ciascuna
UI
Un'interfaccia bellissima che nessuno riesce a capire come usare — tutto stile, zero mappa.
UX
Un form che funziona perfettamente ma sembra del 2004 — tutta logica, zero rifinitura.
Pensi di saper distinguere? Provaci.
Ecco 6 decisioni reali prese su un prodotto. Per ognuna, decidi se sta sistemando la UI o la UX — poi leggi la spiegazione. Nessuna registrazione, nessun tracciamento, solo sei secondi di onestà su quanto conosci davvero la differenza.
Il pulsante di checkout è viola, con angoli arrotondati e una sottile animazione all'hover.
Non sono rivali — hanno bisogno l'una dell'altra
Una UI splendida attorno a un flusso confuso rende solo la confusione più costosa da vedere. Una UX brillante sepolta sotto un'interfaccia goffa e incoerente fa sì che le persone diffidino di qualcosa che in realtà funziona. I siti e i prodotti che convertono non sono mai uno o l'altro — sono decisioni di UX (cosa costruire, in che ordine, con quanti passaggi) espresse attraverso l'artigianato della UI (come appare e si sente una volta costruito). Nessuna delle due sistema ciò che l'altra ha rotto.
Hai bisogno di un sito in cui UX e UI siano davvero d'accordo?
Parliamone →About
Patrick Chen — sviluppatore indipendente e web designer di Sublimearts.io. Mi chiedono di 'migliorare la UI' più spesso di quanto il problema sia davvero la UI. Di solito è il flusso. Questo è l'articolo che vorrei poter semplicemente inviare invece di spiegarlo ogni volta.