UI UX design: interfacce chiare, progettate sull’azione
Lo UI UX design decide cosa vede chi arriva e cosa riesce a fare in pochi secondi. Lo progettiamo partendo dall’azione che deve compiere: scrivere, comprare, iscriversi.
UI e UX: due lavori, un solo schermo
Lo UX design progetta come funziona un percorso. Lo UI design progetta come appare e risponde ogni elemento. Si decidono insieme, ma si controllano con domande diverse.
| Aspetto | UX | UI |
|---|---|---|
| Domanda | Chi arriva riesce a fare quello che è venuto a fare? | Capisce a colpo d’occhio dove guardare e su cosa toccare? |
| Materia | Percorsi, ordine dei contenuti, passaggi, errori | Layout, tipografia, colori, bottoni, stati dei campi |
| Si controlla con | Prove di uso su un prototipo | Contrasto, dimensioni, coerenza tra schermi |
| Se manca | Bella da vedere, ma ci si perde | Logica corretta, ma faticosa da leggere |
Quando l’interfaccia lavora contro di te
Un’interfaccia confusa non dà errori visibili: la gente semplicemente se ne va. Il guasto sta spesso in poche scelte, che si vedono solo guardando qualcuno che usa lo schermo.
ApprofondisciCome si scopre dove si inceppa un’interfaccia
Come si scopre dove si inceppa un’interfaccia
Guarda qualcuno che la usa
Dai a una persona un compito preciso, per esempio chiedere un preventivo, e osserva senza aiutarla. Dove si ferma, dove torna indietro, cosa tocca per sbaglio: sono le informazioni più utili. Con poche persone emergono già i problemi che si ripetono.
Conta i passaggi
Per ogni azione importante scrivi quanti tocchi o clic servono dall’arrivo al risultato. Poi togli quelli che non servono. Un campo in meno e un testo di aiuto al posto giusto pesano più di una grafica rifatta.
Controlla sul telefono vero
Il browser del computer ridimensionato non basta. Apri la pagina su un telefono, con una mano, in piedi. Se il pollice non arriva al bottone o il testo costringe a ingrandire, l’interfaccia è pensata per chi l’ha disegnata, non per chi la usa.
Cerca le incoerenze
Metti accanto cinque schermate. Se un bottone cambia forma, colore o posizione senza motivo, chi usa deve ricominciare a capire ogni volta. Per evitarlo serve un design system, spiegato più sotto.
- Il bottone che conta ha lo stesso peso di tre altri bottoni
- Il modulo chiede più dati di quelli che servono per rispondere
- Su telefono bisogna ingrandire per leggere o per toccare
- Ogni schermata ha uno stile suo, perché le ha fatte persone diverse in tempi diversi
- Nessuno sa dire quale azione la pagina vuole far compiere
Cosa fa lo UI UX design, in concreto
Lo UI UX design è la progettazione di interfacce chiare e facili da usare per siti, applicazioni e piattaforme. Comprende la struttura dei percorsi, la grafica degli schermi, i prototipi e le regole condivise tra i team.
ALDEIA ottimizza la UI/UX per usabilità, accessibilità, tasso di conversione e velocità, e disegna interfacce per telefono, computer e tablet. Si parte dall’azione: ogni schermata ha un solo compito principale e il resto lo accompagna.
ApprofondisciDalla pagina al compito: come si ragiona
Dalla pagina al compito: come si ragiona
Prima di disegnare si scrive una frase: chi è la persona, cosa vuole ottenere, qual è l’azione che per te conta. Se la frase non esce, non è un problema grafico: manca una decisione, e nessun layout la sostituisce.
Un compito per schermata
Ogni schermata risponde a una domanda e propone un passo successivo. Le informazioni di contorno restano a portata di mano, ma non competono con l’azione principale. Se una pagina ha tre compiti, di solito sono tre pagine.
Contenuti veri fin dall’inizio
Un layout con testi finti nasconde i problemi: titoli troppo lunghi, nomi di prodotto che vanno a capo, messaggi di errore mai scritti. Lavoriamo con i testi reali, anche in bozza, così lo schermo viene provato per com’è.
Accessibile per costruzione
Le linee guida WCAG 2.2 del W3C, Raccomandazione del dicembre 2024, chiedono per esempio un contrasto di almeno 4,5 a 1 tra testo normale e sfondo (livello AA). Si controlla durante il disegno, non alla fine, perché cambiare un colore a sito finito di solito costa di più.
I quattro lavori dentro lo UI UX design
Si può partire da uno qualsiasi, a seconda di cosa hai già in mano.
Web design
Le pagine di un sito disegnate per far compiere un’azione: scrivere, prenotare, comprare. Struttura, gerarchia e leggibilità su ogni dimensione di schermo.
ApprofondisciCome si disegna una pagina che deve far compiere un’azione
Come si disegna una pagina che deve far compiere un’azione
Un buon web design parte dal contenuto e dall’azione, e solo dopo sceglie la grafica. Si decide cosa deve capire chi arriva nei primi secondi, poi cosa lo convince, poi cosa deve fare.
La gerarchia
Ogni pagina ha un titolo che dice cosa è, un testo che dice perché interessa e un’azione chiara. Tutto il resto sta in secondo piano per dimensione, colore e posizione. Se tutto è evidenziato, niente lo è.
Il telefono per primo
Si disegna prima lo schermo piccolo, dove lo spazio obbliga a scegliere. Poi si allarga. Il contrario porta a pagine che su telefono sembrano il computer rimpicciolito.
Velocità e peso
Un’interfaccia lenta è un’interfaccia peggiore, anche se è bella. Per questo immagini, font e animazioni si scelgono con il peso in mente, d’accordo con chi sviluppa il sito.
App design
Interfacce per applicazioni e piattaforme, mobile e web: navigazione, schermate, stati vuoti, errori, caricamenti. Anche i momenti in cui non succede niente.
Design system
Colori, caratteri, componenti e regole d’uso in un solo posto, da cui disegnano e sviluppano tutti. Gli schermi restano coerenti e si cambiano più in fretta.
ApprofondisciQuando serve un design system e quando no
Quando serve un design system e quando no
Un design system è una raccolta di componenti già decisi: bottoni, campi, schede, messaggi, con le regole per usarli. Chi disegna e chi sviluppa li riusa invece di rifarli ogni volta.
Quando ha senso
Serve quando gli schermi sono molti, quando lavorano più persone o quando il prodotto cresce nel tempo. Un sito di dieci pagine ha bisogno di uno stile chiaro; una piattaforma con decine di schermate ha bisogno di un sistema.
Cosa contiene
Le basi sono i valori di colore, la scala dei caratteri, le distanze e gli stati dei componenti: normale, sopra, attivo, disabilitato, in errore. Ogni componente ha una descrizione di quando usarlo e di quando no.
Come si tiene vivo
Un design system non è un file consegnato e dimenticato. Qualcuno decide cosa entra, cosa cambia e cosa si toglie. Senza questa cura dopo pochi mesi gli schermi tornano a somigliarsi meno.
Prototipazione in Figma
Prototipi cliccabili da provare con persone vere prima di scrivere codice. Cambiare un percorso su un prototipo di solito richiede meno lavoro che cambiarlo nel codice.
Dal compito al prototipo provato
Cinque passaggi, ciascuno con un risultato che puoi vedere.
Compiti e percorsi
Scriviamo le azioni che contano e il tragitto più breve per compierle. Esce una mappa dei percorsi, da discutere insieme.
Schemi a bassa definizione
Disegniamo gli schermi in bianco e nero, con testi veri. Si ragiona su ordine e priorità senza farsi distrarre dal colore.
Grafica degli schermi
Applichiamo caratteri, colori e componenti, con il contrasto controllato mentre si disegna.
Prototipo in Figma
Colleghiamo gli schermi in un prototipo cliccabile su telefono e computer, con gli stati di errore e di attesa.
Prova con persone e consegna a chi sviluppa
Facciamo provare il prototipo a chi userà il prodotto, correggiamo i punti dove si ferma, poi passiamo file e regole a chi scrive il codice.
La parola a Marco Sala
«Il momento che insegna di più è quando una persona che non conosce il progetto sbaglia strada sul prototipo. Non la correggiamo: guardiamo dove tocca, lo scriviamo e ne parliamo con chi disegna. Spesso il problema è una decisione presa troppo tardi.»
Dieci domande prima di approvare un’interfaccia
Valgono per un sito, un’app o un portale. Se rispondi no a più di due, c’è ancora lavoro da fare.
ApprofondisciCome usare la lista senza trasformarla in burocrazia
Come usare la lista senza trasformarla in burocrazia
La lista serve a fare domande, non a riempire caselle. Falla con il prototipo in mano, insieme a una persona che non ha partecipato al progetto: vede cose che il team non vede più.
Il contrasto si misura
Un colore sembra leggibile sul tuo schermo e non lo è su un telefono al sole. Esistono strumenti gratuiti che calcolano il rapporto tra due colori: usali sui testi, sui bottoni e sui campi.
Il modulo è il punto più delicato
Ogni campo in più è un motivo per smettere. Chiedi nome e un recapito, il resto si raccoglie dopo il primo contatto. Se un dato serve davvero subito, scrivi perché.
- Si capisce in tre secondi cosa fa la pagina e a chi serve?
- C’è un’azione principale e si distingue dalle altre?
- Il testo normale ha un contrasto di almeno 4,5 a 1 sullo sfondo (livello AA)?
- I bottoni si toccano con il pollice, senza ingrandire?
- Il modulo chiede solo i dati necessari per rispondere?
- Gli errori dicono cosa è successo e come correggere?
- Gli stessi elementi hanno lo stesso aspetto in ogni schermata?
- Qualcuno che non conosce il progetto ha provato il prototipo?
- Si legge bene su un telefono con lo schermo piccolo?
- Chi sviluppa ha ricevuto componenti e regole, non solo immagini?
Per chi ha senso partire dall’interfaccia
Hai un sito che porta visite ma pochi contatti
Il problema è spesso nel percorso o nel modulo, non nel traffico. Si guarda dove la gente si ferma e si rifà quel pezzo.
Stai per sviluppare un’app o una piattaforma
Prima si disegna e si prova, poi si scrive il codice. Correggere un prototipo di solito costa meno che correggere un software.
Hai più prodotti o più team che disegnano
Un design system tiene insieme l’aspetto e riduce il lavoro ripetuto, perché i componenti si riusano.
Il tuo gestionale lo usano tutti e lo odiano
Un’interfaccia interna meno faticosa fa perdere meno tempo ogni giorno. Si parte dai tre compiti che il team fa più spesso.
Il lessico di un progetto di interfaccia, in sei voci
- Wireframe
- Schema di uno schermo in bianco e nero che mostra posizione e priorità degli elementi, senza grafica.
- Prototipo
- Insieme di schermi collegati su cui si può cliccare come in un’app vera, usato per le prove prima dello sviluppo.
- Design system
- Raccolta di componenti, stili e regole d’uso condivisa tra chi disegna e chi sviluppa.
- Componente
- Elemento riusabile dell’interfaccia, come un bottone, un campo o una scheda, con i suoi stati.
- Usabilità
- La facilità con cui una persona porta a termine un compito con un’interfaccia.
- Accessibilità
- La possibilità di usare l’interfaccia anche con limiti di vista, udito, movimento o con strumenti di supporto.
Quanto costa
Si lavora su preventivo, perché il lavoro cambia con il numero di schermate, con il tipo di prodotto e con ciò che esiste già. Scrivici dove sei arrivato: ti diciamo da dove conviene cominciare.
Domande frequenti
Qual è la differenza tra UI e UX design?
Lo UX design progetta il percorso: ordine dei passaggi, contenuti, errori. Lo UI design progetta l’aspetto e il comportamento di ogni elemento: layout, colori, tipografia, bottoni. Il primo si verifica provando il prototipo con persone, il secondo controllando leggibilità e coerenza.
Che cos’è un design system e quando serve?
Un design system è una raccolta di componenti e regole che chi disegna e chi sviluppa riusa. Serve quando gli schermi sono molti, lavorano più persone o il prodotto cresce nel tempo. Per un sito piccolo basta uno stile definito.
Perché prototipare in Figma prima di sviluppare?
Perché correggere un percorso su un prototipo di solito costa meno che correggerlo nel codice. Gli schermi collegati si provano con persone vere su telefono e computer, e i punti dove si ferma qualcuno emergono prima dello sviluppo.
Che differenza c’è tra web design e UI UX design?
Il web design riguarda le pagine di un sito. Lo UI UX design è più ampio: comprende anche app, piattaforme e gestionali, e include percorsi, prototipi e design system. Il web design è una parte dello UI UX design.
Quanto contrasto deve avere il testo per essere leggibile?
Le linee guida WCAG 2.2 del W3C chiedono un rapporto di almeno 4,5 a 1 tra testo normale e sfondo, e di 3 a 1 per il testo grande. Si misura con strumenti gratuiti e va controllato durante il disegno.
Posso rifare solo l’interfaccia senza rifare tutto il sito?
Sì, se la struttura tiene. Si parte dai pezzi dove la gente si ferma, di solito il modulo e il primo schermo, si ridisegnano e si provano. Il resto del sito si adegua dopo, componente per componente.
Cosa devo preparare prima di contattare un’agenzia di UI UX design?
Basta dire quale azione vuoi far compiere, a chi, e cosa esiste già: un sito, un’app, appunti. Se hai dati su dove la gente si ferma, portali. Il resto si ricostruisce insieme nella prima conversazione.
Quanti contatti ti servono?
Raccontaci da dove parti. Ti diciamo cosa misurare, cosa togliere e cosa costruire.