UX/UI design: il vero processo dalla ricerca al passaggio

UX vs UI: la differenza che costa denaro

L'UX è come funziona un sito. L'UI è come appare. Un buon design inizia dal problema di un utente, non da una palette di colori.Se qualcuno non riesce a capire dove cliccare, l'interfaccia più bella non ti salverà — chiudono la scheda e vanno da un concorrente il cui pulsante era visibile.

Formalmente, esperienza utente è l'intero percorso: come una persona è arrivata, cosa stava cercando, cosa ha trovato, quanti passaggi ci sono voluti, dove ha inciampato, come si è sentita alla fine. L'UI è il livello visivo di quel percorso: tipografia, colore, griglia, stati dei pulsanti, icone, spaziatura. I livelli sono connessi, ma risolvono problemi diversi.

Perché la differenza è commerciale, non accademica

Immagina due negozi online. Il primo appare semplice, ma i filtri rispondono istantaneamente, i prezzi sono visibili in anticipo e il checkout richiede solo tre campi. Il secondo ha animazioni bellissime, fotografie enormi e un carrello che richiede registrazione prima di mostrare i costi di spedizione. Il primo vende di più. Non perché l'aspetto non conti, ma perché il reddito deriva da un'azione completata, non da un'impressione.

Quindi ecco la formula funzionante: l'UX decide se qualcuno raggiunge l'obiettivo, l'UI decide se si fida di te lungo il percorso. Hai bisogno di entrambi. Ma quando devi scegliere cosa sistemare per primo, sistema la logica.

Cosa non fa il design

• Non salva un prodotto scadente. Se il tuo prezzo è superiore al mercato senza spiegazione, il layout non lo nasconderà.
• Non sostituisce il traffico. Un forte Design UX/UI aumenta la conversione da visitatore a richiesta, ma qualcuno deve comunque portare i visitatori.
• Non legge la mente. Senza dati sui clienti, un designer indovina — e indovinare costa più della ricerca.

Ecco perché nei nostri servizi studio il design non appare mai come una voce a sé stante chiamata "disegnare un mockup". Si sviluppa insieme ad analisi, contenuti e sviluppo — altrimenti ottieni un'immagine costosa che nessuno può effettivamente costruire.

Passo 1. Ricerca, obiettivi e revisione dei concorrenti

Il design inizia con la domanda "cosa deve accadere su questo sito", non "quale colore ti piace". Fino a quando non viene data risposta, ogni revisione viene discussa in base al gusto — e il gusto è un argomento che nessuno vince.

Cosa stabiliremo in anticipo

• L'obiettivo aziendale. Richieste? Ordini? Prenotazioni? Candidature? Un obiettivo è primario; gli altri sono secondari.
• L'azione target. Il pulsante specifico che una persona dovrebbe premere. Se ce ne sono cinque e tutti sono "quello principale", nessuno viene premuto.
• Il pubblico. Chi sono, quanto sanno sull'argomento, quale dispositivo usano, cosa sanno già di te.
• Le obiezioni.Perché esitano: troppo costoso, troppo lento, poco chiaro, "faranno anche il mio tipo di lavoro".
• I vincoli.Scadenze, budget, CRM esistente, identità del marchio, requisiti legali.

I dati non devono essere costosi. Registrazioni delle chiamate di vendita, conversazioni in chat, query di ricerca sul sito, mappe di calore, le domande che i clienti pongono più spesso — questo è già sufficiente per smettere di indovinare. Se le analisi sono in corso, guarda dove le persone abbandonano e a quale passo.

Revisione dei concorrenti — non per copiare

Guardi i concorrenti per imparare le regole del mercato e trovare le lacune. Le regole sono ciò che un utente si aspetta per default: prezzo, tempistiche, cosa è incluso, recensioni. Le lacune sono ciò che nessuno offre: un calcolatore, tempi di attesa onesti, foto reali invece di stock, una spiegazione semplice del processo. Copiare il layout di qualcuno è inutile — non sai se funziona per loro e erediti i loro errori insieme alle loro decisioni.

Una revisione euristica

Se un sito esiste già, esaminalo rispetto ai principi di base usabilità del sito web prima che qualcuno disegni qualcosa: è chiaro dove ti trovi; lo stato del sistema è visibile; un'azione può essere annullata; gli errori sono comprensibili; l'interfaccia parla la lingua del cliente; devi tenere a mente le cose tra le schermate. Due giorni di questo producono un elenco di problemi, metà dei quali possono essere risolti senza alcun redesign.

Passo 2. Scenari utente invece di pagine

Le persone non vengono "su un sito web" — vengono per fare qualcosa. Quindi progetti scenari, non pagine: cosa fa una persona, passo dopo passo, dall'arrivo al risultato.

Uno scenario si adatta in una semplice frase. "Un genitore sta cercando un doposcuola vicino a casa, vuole vedere il programma e il prezzo, e prenotare una sessione di prova da un telefono in cinque minuti." Questo è tutto. Da sola, quella frase ti mostra i requisiti: un filtro per la posizione, un programma leggibile, un prezzo senza "contattaci per dettagli", un modulo breve e un numero di telefono cliccabile.

Quanti scenari hai bisogno

Per un sito di servizi, di solito da tre a cinque. Di più e ti disperdi; di meno e ti manca qualcosa. Un set tipico: "mai sentito parlare di questa azienda, sto solo ricercando", "confrontando con un concorrente, cercando un motivo per sceglierne uno", "già deciso, voglio contattare rapidamente", "cliente esistente, ho bisogno di un contatto o di un documento".

Stati diversi, schermate diverse

I designer junior disegnano solo lo stato perfetto: catalogo completo, nomi brevi, ogni foto al suo posto. La realtà è più ricca. Ogni schermata chiave ha bisogno di stati:

• Vuoto — il filtro non ha trovato nulla, il carrello è vuoto, non ci sono ancora ordini. Cosa vede la persona e dove va dopo?
• Caricamento — cosa c'è sullo schermo mentre i dati viaggiano.
• Errore — il server è inattivo, il pagamento è fallito, un campo è errato.
• Overflow — un nome prodotto di tre righe, 40 articoli, una recensione di 2.000 caratteri.
• Successo — il modulo è stato inviato. E adesso? "Grazie" non è una risposta; le persone vogliono sapere quando qualcuno chiamerà.

Gli stati sono la parte più noiosa e più preziosa del lavoro. Sono esattamente ciò che separa un mockup che puoi costruire da un mockup che ha il tuo sviluppatore che ti contatta ogni mezz'ora.

Passo 3. Architettura dell'informazione

L'architettura dell'informazione è dove vivono le cose e come si chiamano. Risolve metà dei tuoi problemi di navigazione prima che esista il primo pixel.

Il lavoro sembra semplice ed è noioso nella pratica: raccogliere tutto il contenuto, raggrupparlo per significato, nominare i gruppi con le parole del cliente, impostare la priorità. La parte chiave è le parole del cliente. "Soluzioni" ha senso per te; la persona sta cercando "riparazione frigorifero". Il tuo organigramma interno non dovrebbe mai filtrare nel menu.

Regole che fanno risparmiare tempo

• Il menu non è una discarica. Cinque a sette elementi di alto livello. Se non ci sta, il raggruppamento è errato.
• Profondità massima di tre clic per qualsiasi pagina importante. Oltre, perdi le persone.
• Un significato, una pagina.Due pagine simili competono tra loro nella navigazione e nella ricerca.
• L'etichetta è la query.Un elemento di menu dovrebbe corrispondere a come una persona realmente pensa e parla di esso.

Priorità all'interno della pagina

All'interno di una pagina si applica la stessa logica: rispondere prima, poi dettagliare, poi fornire prove, poi agire. Un visitatore decide in pochi secondi se si trova nel posto giusto, e lo decide dalla prima schermata. Se la parte superiore della pagina dice "Benvenuto nel nostro sito web", hai speso il tuo spazio più prezioso su un segnaposto.

L'ordine dei blocchi è design anche — ed è la parte che muove di più il denaro. Abbiamo analizzato la logica della sequenza dei blocchi nel nostro articolo su struttura della pagina di destinazione: stesse meccaniche, compresse in una singola pagina.

Testare l'architettura senza mockup

Dai l'elenco dei nomi delle sezioni a cinque persone al di fuori del progetto, chiedi loro di ordinarlo in gruppi e di dire cosa si aspetterebbero di trovare dove. I disaccordi ti mostreranno i punti critici in un'ora. È economico e batte discutere in una sala riunioni.

Passo 4. Wireframe: lo scheletro senza trucco

Un wireframe è uno schema in bianco e nero di uno schermo: cosa viene dopo cosa, cosa conta di più, dove si trova l'azione.Niente caratteri eleganti, niente ombre, niente fotografie. Deliberatamente.

Il punto della grigio è rimuovere tutto ciò che distrae dalla struttura. Mostra un mockup colorato e il cliente dirà inevitabilmente "rendi il pulsante più luminoso", e la conversazione sul pulsante che si trova nel posto sbagliato non avviene mai. Un wireframeriporta la discussione sulla sostanza: è chiaro cosa sia questa azienda, cosa offre, perché fidarsi di essa e cosa fare dopo.

Cosa appartiene a un wireframe

• Vere intestazioni ed etichette, non Lorem ipsum. Il testo fittizio mente sia sulla lunghezza che sul significato.
• Il numero reale di elementi: se il catalogo ha 12 articoli, non disegnare tre.
• Ogni stato chiave dal passaggio precedente.
• Versioni mobile e desktop delle schermate chiave subito, non "ci adatteremo più tardi".

Quante schermate disegnare

Non tutte. Disegni i tipi di pagina: home, pagina di servizio, catalogo, pagina articolo, modulo, articolo, contatto, pagine utili (404, grazie). Tutto il resto si assembla dagli stessi blocchi. Se ogni nuova pagina ha bisogno di un nuovo mockup, non hai un sistema — hai un mucchio di immagini.

Questo è il posto più economico per discutere

Spostare un blocco in un wireframe richiede minuti. Spostarlo in un sito costruito, con CMS, richiede giorni e denaro. Quindi è esattamente qui che dovresti opporre resistenza, fare domande imbarazzanti e richiedere motivazioni. Da qui in poi, il prezzo di una modifica aumenta ad ogni passo.

Passo 5. Il concetto di UI: come appare la fiducia

Una volta che la struttura è concordata, arriva il livello visivo. Il suo compito non è decorare — è rendere la struttura ovvia e guadagnare fiducia.

La fiducia in un'interfaccia si costruisce su cose noiose: una griglia ordinata, spaziatura coerente, testo leggibile, foto reali invece di stock, numeri onesti, un'assenza di rumore visivo. Nessuno pensa "adoro questa griglia modulare" — semplicemente sentono che le cose qui sono in ordine, quindi il lavoro sarà probabilmente in ordine anche lui. Il contrario è vero: loghi dei clienti disallineati e tre blu diversi si leggono come "buttati insieme".

Di cosa è fatto un concetto di UI

• Tipografia. La combinazione dei caratteri, le dimensioni, l'altezza della linea, la lunghezza della linea. È l'80% di come si sente un sito, perché un sito è per lo più testo.
• Colore. Una base neutra, un accento riservato per l'azione target, colori funzionali per errori e successi. Spendi l'accento solo su ciò che conta, o smette di funzionare.
• Griglia e ritmo. Un passo di spaziatura (un multiplo di 4 o 8, ad esempio) invece di valutare ogni intervallo.
• Immagini. Le tue foto del lavoro e delle persone superano le stock perfette, perché nessuno crede nelle stock.
• Tono. L'interfaccia parla: formale, amichevole, tecnica. Questa è una decisione, non un incidente.

Un concetto è uno schermo, non l'intero sito

Di solito si presenta la home page o una pagina di servizio chiave in due o tre direzioni. L'obiettivo è concordare un linguaggio, non approvare una versione finale. Come appare quel linguaggio in progetti reali è più facile da vedere nel portfolio: settori diversi necessitano di un diverso tono visivo, anche se il processo dietro di essi è identico.

E la parte essenziale: un concetto è giudicato su "serve l'obiettivo", non su "mi piace". Maggiori informazioni su questo nella sezione feedback.

Passo 6. Sistema di design e componenti

Un sistema di design è un insieme di mattoni pronti più le regole per costruire con essi.Pulsanti, campi, schede, intestazioni, spaziatura, stati — definiti una volta e riutilizzati ovunque.

Senza un sistema, ogni nuovo schermo è disegnato da zero. Sei mesi dopo il sito ospita sette tonalità di grigio, quattro dimensioni di pulsanti e tre tipi di scheda prodotto, e nessuno ricorda perché. Con un sistema, una nuova pagina si assembla in ore invece di giorni e sembra parte del tutto.

Cosa c'è in un sistema

• Token.Colori, dimensioni dei caratteri, raggi, ombre, il passo di spaziatura — come variabili nominate, non valori inventati sul momento.
• Componenti.Un pulsante con ogni stato (predefinito, hover, focus, premuto, caricamento, disabilitato), un input con errore e suggerimento, una scheda, un modale, una tabella, paginazione.
• Regole di composizione.Quale intestazione quando, quanto spazio tra i blocchi, come si comportano gli elementi in caso di overflow.
• Modelli.Moduli, filtri, checkout — assemblaggi standard costruiti da componenti.

Perché il cliente dovrebbe interessarsi, non solo il designer

Un sistema è un risparmio per il tuo futuro. Un nuovo servizio, una pagina di atterraggio per una campagna, una sezione extra — tutto si assembla da ciò che esiste e non richiede un nuovo progetto di design. Ferma anche il sito dal dividersi nel tempo mentre persone diverse apportano modifiche.

La scala dipende dal progetto: un piccolo sito di brochure ha bisogno di una singola pagina di regole, un grande catalogo o prodotto ha bisogno di una libreria adeguata. Su il progetto Astrina il sistema dei componenti è esattamente ciò che ha mantenuto ogni tipo di pagina coerente senza dover disegnare ogni schermo separatamente.

Passo 7. Prototipo, passaggio agli sviluppatori e QA del design

Un prototipo è un mockup cliccabile in cui puoi percorrere un intero scenario prima che esista una sola riga di codice. Risponde alla domanda a cui un'immagine statica non può rispondere: "cosa succede quando premo questo?"

I prototipi catturano errori costosi: un passaggio ridondante in un modulo, un vicolo cieco dopo l'invio, un modo confuso per tornare indietro, un filtro che si resetta da solo. Cinque persone che percorrono lo scenario ad alta voce ti insegnano più di un mese di dibattiti interni. Non hai bisogno di un laboratorio — hai bisogno di qualcuno dal pubblico, un compito e un osservatore che rimane in silenzio.

Cosa contiene effettivamente un passaggio

• Mockup a due o tre larghezze chiave: mobile, tablet/intermedio, desktop.
• Ogni componente e stato dello schermo.
• Token e regole: colori, tipo, passo di spaziatura, comportamento di overflow.
• Comportamento: cosa è cliccabile, cosa si apre, cosa anima e per quanti millisecondi.
• Testo finale, non testo segnaposto. Risorse: icone, immagini, loghi nei formati giusti.
• Casi limite: un titolo molto lungo, una foto mancante, zero risultati.

Un buon passaggio non è "ecco un link al file". È un incontro in cui il designer e lo sviluppatore percorrono i mockup e dicono ad alta voce le parti non ovvie. Mezz'ora di conversazione risparmia una settimana di messaggi.

Controllo qualità del design: il controllo dopo la costruzione

Una volta assemblato il sito, il designer lo esamina di nuovo — questa volta in un browser. Spaziatura, avvolgimento del testo, stati, comportamento con dati reali, messa a fuoco, velocità di animazione, comportamento del modulo. È una fase breve, ma saltala e c'è sempre un divario tra il mockup e il sito live. La regola è semplice: fino a quando il controllo qualità del design non è superato, il progetto non è finito.

Mobile-first e accessibilità in linguaggio semplice

Inizi a progettare sullo schermo del telefono — non perché sia di moda, ma perché le restrizioni sono più severe lì.Se il contenuto si adatta e funziona a 360 pixel di larghezza, si espanderà senza problemi su desktop. L'altra direzione quasi mai funziona.

Mobile-first è una disciplina di priorità. Su uno schermo piccolo non puoi mostrare tutto in una volta, quindi sei costretto a rispondere onestamente a cosa conta di più. Quella risposta migliora anche la versione desktop.

Cosa controllare su mobile

• I target di tocco non devono essere più piccoli di una punta di dito. Link minuscoli ammassati insieme producono tocchi errati e irritazione.
• Niente esce dal bordo; non c'è scorrimento orizzontale.
• Il numero di telefono compone, l'indirizzo apre una mappa, i campi del modulo richiamano la tastiera giusta.
• L'azione importante è raggiungibile senza scorrimenti infiniti.
• Immagini pesanti non rallentano il caricamento su una connessione mobile.

Accessibilità: quattro cose che ti danno l'80% del risultato

• Contrasto.Il testo grigio chiaro su bianco sembra elegante in un mockup ed è illeggibile all'aperto alla luce del sole. Il contrasto aiuta le persone con scarsa visione — e aiuta anche te, su uno schermo economico, in movimento.
• Focalizzati.Quando navighi con una tastiera puoi vedere su quale elemento ti trovi. Rimuovere l'anello di messa a fuoco "perché è brutto" è un errore comune e serio.
• Tastiera.L'intero modulo può essere compilato e inviato senza toccare un mouse. Un modale può essere chiuso; un menu può essere abbandonato.
• Testo alternativo.Una breve descrizione di cosa significa un'immagine. Aiuta gli utenti non vedenti e i motori di ricerca allo stesso modo.

L'accessibilità non è una fase separata e costosa. È un insieme di abitudini: non fare mai affidamento solo sul colore per trasmettere significato, etichetta i campi invece di fare affidamento sui segnaposto, scrivi messaggi di errore su cui un umano può agire. Integrata al momento del design costa pochi centesimi. Aggiunta dopo il lancio costa soldi veri.

Il testo è parte del design

Un'interfaccia è fatta di parole più che di grafiche.Il titolo, l'etichetta del campo, il testo del pulsante, il messaggio di errore — tutte queste sono decisioni di design che si trovano espresse in lettere.

Questo ci dà una regola: progettare senza contenuti finiti è come fare previsioni. Il designer inventa un titolo di tre parole; quello del cliente è di dodici. Inventa tre benefici; quelli reali sono due, e sono diversi. Il mockup crolla nella fase di contenuto, e tutti sono sorpresi.

Parole che fissano le interfacce

• I pulsanti descrivono l'esito."Richiedi un preventivo" è meglio di "Invia". Una persona dovrebbe sapere cosa succede dopo il clic.
• I titoli rispondono, non stuzzicano."Siti web per cliniche mediche" funziona; "Creiamo il futuro" non funziona.
• Gli errori dicono cosa fare."Formato non valido" è brutto. "Inserisci il numero di telefono come +44…" è buono.
• Le etichette battono le congetture.Se un campo ha bisogno di qualcosa di specifico, dillo prima dell'errore, non dopo.
• Meno parole, stesso significato.Ogni frase in più abbassa le probabilità che quella necessaria venga letta.

Una pratica fa risparmiare settimane: redigi il testo per gli schermi chiave prima che venga disegnato qualsiasi cosa — anche in modo approssimativo, in un foglio di calcolo. Poi il designer lavora con lunghezze reali e significati reali invece di piegare la realtà per adattarsi a un layout.

Come fornire feedback utili e quante revisioni sono normali

La causa più comune di progetti allungati non è "un cattivo designer" — è il feedback espresso come gusto."Non mi colpisce", "rendilo più moderno", "a mia moglie non è piaciuto" — non puoi rispondere a queste con il lavoro, solo con un altro tentativo di indovinare.

La formula per un commento utile

Parla del problema, non della soluzione. La forma è: ciò che vedo → ciò che mi preoccupa → ciò che rischia. Ad esempio: "Il primo schermo non dice che lavoriamo a livello nazionale. I clienti chiedono di questo alla prima chiamata — temo che alcuni di loro non raggiungeranno affatto il modulo." Questo è qualcosa su cui un designer può lavorare. "Rendi il pulsante rosso" è una soluzione finita, e probabilmente non riguarda il pulsante.

Regole che accelerano l'approvazione

• Raccogliere le revisioni in un'unica lista da tutti i soggetti coinvolti, invece di farle cadere in chat tutto il giorno.
• Nomina un unico decisore. Se cinque persone approvano, il mockup diventa una media — e le medie non vendono.
• Guardalo sul tuo telefono, non solo su un grande monitor. È così che i tuoi clienti lo guardano.
• Non riaprire decisioni già stabilite. Una struttura concordata si riapre per nuovi fatti, non per un nuovo umore.

Quante revisioni sono normali

Pratica comune: due giri di revisioni per fase (struttura, concetto, mockup) più una rifinitura finale. Non è avarizia da studio — protegge il progetto. Giri infiniti significano quasi sempre che l'obiettivo non è concordato, non i pixel. Se il terzo giro discute la stessa cosa, il problema risiede nel passo di ricerca, ed è lì che dovresti tornare.

Errori costosi e comuni

• Progettare senza contenuto. Un mockup costruito su testo fittizio crolla quando arriva il testo reale. Sempre.
• Copiare un concorrente. Stai copiando un'immagine senza sapere se funziona per loro.
• Decorazione sopra chiarezza. Animazione, parallasse e slider invece di rispondere a "cosa vendi".
• Molti obiettivi su un'unica schermata.Cinque pulsanti con peso uguale equivalgono a zero clic.
• Progettare per la giuria.Un mockup per premi e un mockup di vendita sono generi diversi.
• Nessuno possiede l'accettazione.Un progetto senza un proprietario della decisione si trascina per mesi.

Checklist: valutare un design prima che vada in sviluppo

Prima che i mockup vadano in costruzione, esegui questa lista. Ogni voce è una modifica che costa minuti ora e giorni dopo.

Significato

• In 5 secondi la prima schermata ti dice: di che azienda si tratta, cosa offre, a chi, e cosa fare dopo.
• Ogni schermata ha un'azione principale, ed è visivamente la principale.
• Le obiezioni chiave sono risposte: prezzo o una fascia di prezzo, tempistiche, garanzie, chi sei.
• Ogni affermazione è supportata: casi studio, recensioni con nomi, numeri che puoi effettivamente dimostrare.

Struttura

• I blocchi seguono "risposta → dettaglio → prova → azione".
• Navigazione: 5–7 elementi, etichette con le parole del cliente, qualsiasi cosa importante entro 3 clic.
• Nessuna due pagine riguardanti la stessa cosa.

Completezza

• C'è una versione mobile di ogni tipo di pagina, non solo desktop.
• Gli stati sono disegnati: vuoto, caricamento, errore, successo, testo lungo, molti elementi.
• Il testo è definitivo, le immagini sono reali, niente Lorem ipsum ovunque.
• Esistono pagine di utilità: 404, grazie, errore di pagamento se ne hai bisogno.

Sistema e accessibilità

• Pulsanti, campi e schede provengono da un unico set invece di essere ridisegnati per ogni schermo.
• Il distanziamento segue un singolo passo; ci sono esattamente tanti colori quanti ne servono.
• Il contrasto del testo è sufficiente, il focus è visibile, il modulo può essere completato da tastiera.
• Le immagini hanno descrizioni alt, i campi hanno etichette, gli errori hanno testo umano.

Prontezza alla costruzione

• Un sviluppatore ha esaminato i mockup prima dell'approvazione e ha confermato che è realizzabile secondo il programma.
• Il comportamento è documentato: clic, aperture, animazioni, comportamento del modulo.
• È chiaro cosa è modificabile nell'amministrazione e cosa è codificato a mano.
• Qualcuno è nominato per accettare il QA del design dopo la costruzione.

Se ogni elemento è un sì, consegnalo con fiducia. Se più di tre sono un no, non sei pronto — e la costruzione non riparerà quelle lacune, le fisserà nel cemento. Vuoi un'opinione esterna sul tuo sito attuale o sui mockup che qualcuno ha disegnato per te?Mettiti in contatto — lo confronteremo con questa stessa lista e ti diremo onestamente cosa correggere per primo.

FAQ