Web design e UX

Ricerca e interviste brevi

Mappa dei compiti e dei bisogni

Architettura dell'informazione

01A chi serve il web design

• Per chi ha un sito confuso, datato o difficile da usare su mobile.
• Cosa comprende: ricerca, architettura, wireframe, prototipi, test, design system e consegna agli sviluppatori.
• Cosa non promette: nessun design è «intuitivo» per tutti; le scelte si verificano con persone reali.

Serve a chi ha un sito che funziona ma non si capisce: pagine piene, gerarchie confuse, moduli lunghi, testi che non dicono cosa fare. Serve anche a chi sta per costruire un sito nuovo e vuole decidere prima come sarà organizzato, invece di correggere dopo.

Non è decorazione. Il design decide cosa si vede per primo, cosa si può cliccare e cosa succede dopo. Un sito bello ma difficile da usare perde richieste; un sito chiaro ma trascurato perde fiducia. Il lavoro sta nel tenere insieme le due cose.

02Le ricerche di chi cerca web design

«Web design», «UX design», «rifare la grafica del sito», «sito bello e funzionale», «design responsive», «consulenza UX», «prototipo sito web», «design system», «come migliorare l'esperienza utente». Chi cerca «grafica» spesso intende l'aspetto; chi cerca «UX» intende il percorso. Servono entrambi.

Il punto di partenza non è la scelta del font: è capire chi usa il sito, cosa deve fare e cosa lo blocca. Per questo il lavoro comincia con poche domande concrete e con una lettura delle pagine esistenti, non con una tavolozza di colori.

03Cosa comprende il web design

Il percorso va dalla comprensione all'uso. Ogni passaggio produce un artefatto che si può rivedere: una mappa, un wireframe, un prototipo, un componente. Non si passa al successivo senza aver chiuso il precedente.

Ricerca e interviste brevi

Poche conversazioni con chi usa o dovrebbe usare il sito, più la lettura delle richieste che arrivano davvero. Non servono cento interviste: servono le domande giuste e la disponibilità ad ascoltare risposte scomode.

Interviste brevi e raccolta dei bisogni

Cinque o sei conversazioni da venti minuti con clienti, personale e chi non ha mai comprato. Si chiede cosa cercavano, cosa li ha bloccati e cosa hanno fatto dopo. Si annotano le frasi esatte, non le interpretazioni. Il risultato è un elenco di bisogni e attriti, non una persona tipo inventata.

Mappa dei compiti e dei bisogni

Le cose che le persone vengono a fare sul sito, in ordine di frequenza e importanza: trovare un prezzo, prenotare, confrontare, chiedere assistenza. Ogni compito ha una pagina o un percorso che lo rende possibile.

Mappa dei compiti e dei percorsi

Si elencano i compiti principali e si disegna il percorso minimo per completarli. Si segnano i punti in cui oggi si perde tempo o ci si blocca. La mappa serve a decidere quali pagine tenere, quali unire e quali eliminare. Senza questa mappa il design diventa una collezione di schermate.

Architettura dell'informazione

Come si organizzano pagine, menu, categorie e contenuti. Un'architettura chiara riduce i clic e rende prevedibile dove si trova ciò che serve.

Wireframe a bassa fedeltà

Schemi in bianco e nero con gerarchie, testi e pulsanti al posto giusto. Servono a discutere la struttura senza distrazioni estetiche, quando cambiare costa ancora poco.

Wireframe delle pagine principali

Si disegnano in scala di grigi le pagine che contano: home, servizio, contatto, scheda prodotto, carrello. Si decide cosa sta sopra la piega e quale azione è primaria. I testi sono provvisori ma realistici. I wireframe si rivedono insieme prima di passare alla grafica, così le correzioni costano poco.

Prototipi navigabili

Una versione cliccabile del percorso, utile per provare la sequenza e per mostrare al team cosa succederà. Non è il sito finale: è uno strumento di discussione.

Test di usabilità

Persone reali provano i compiti principali mentre qualcuno osserva e annota dove si bloccano. Cinque test ben fatti trovano più problemi di un questionario con mille risposte.

Test con cinque persone

Si preparano tre o quattro compiti e si chiede di svolgerli senza aiuto. Si registra dove si fermano, cosa cercano e cosa dicono ad alta voce. Non si spiega il sito: se serve una spiegazione, il problema è del sito. Alla fine si elencano i problemi per gravità e si correggono prima della pubblicazione.

Design system e componenti

Pulsanti, campi, schede, menu e messaggi diventano componenti riusabili, con stati e regole. Un sistema riduce le incoerenze e rende più veloci le modifiche future.

Ticket di design e componenti

Ogni componente viene descritto con misure, stati, comportamento su mobile e regole d'uso. Le modifiche passano da un ticket che dice cosa cambia e perché. Il file di design e il sito restano allineati. Senza questo passaggio, ogni nuova pagina reinventa pulsanti e spaziature.

Tipografia e scala dei testi

Font, misure, interlinea e gerarchia. La leggibilità viene prima del carattere di moda: su mobile un testo piccolo o troppo chiaro è un ostacolo, non uno stile.

Colore, contrasto e stati

Palette, contrasti verificati e colori per gli stati di errore, successo e disabilitato. Il colore non è solo identità: è informazione.

Griglie e spaziature

Una griglia e una scala di spaziature rendono le pagine coerenti senza doverle misurare una per una. Le distanze sbagliate si notano prima delle scelte di colore.

Design responsive

Lo stesso contenuto deve funzionare a 320 px e a 1440 px, senza nascondere informazioni importanti. Si progettano prima i casi stretti, non si adatta tutto alla fine.

Verifica responsive e stati limite

Si controllano le pagine principali a 320, 390, 768, 1024 e 1440 px, con testi lunghi, immagini mancanti e messaggi di errore. Si verificano menu, tabelle, moduli e aree di tocco. Si annotano overflow, testi tagliati e pulsanti troppo vicini. La verifica si fa nel browser, non solo nel file di design.

Form e microcopy

Etichette, messaggi di errore, testi di aiuto e conferme. Un modulo chiaro riduce gli abbandoni più di un pulsante colorato.

Design per l'e-commerce

Schede prodotto, filtri, carrello e checkout. Ogni passaggio in più va giustificato: chi compra vuole capire cosa sta comprando e quanto pagherà.

Design per la conversione

Gerarchia delle azioni, prove di fiducia e riduzione degli attriti. Il design non convince con la pressione: rende evidente il passo successivo.

Icone e illustrazioni

Un linguaggio visivo coerente, con icone leggibili a piccole dimensioni e illustrazioni che non rubano spazio al contenuto.

Fotografia e direzione artistica

Scelta delle immagini, tagli, proporzioni e coerenza tra sito, social e materiali. Le foto giuste mostrano il prodotto o il luogo; quelle sbagliate sembrano stock e allontanano.

Movimento e transizioni

Animazioni brevi che aiutano a capire cosa è cambiato. Il movimento che rallenta o distrae viene tolto, e si rispetta chi ha chiesto meno animazioni nel sistema.

Handoff agli sviluppatori

Specifiche, misure, stati e file ordinati. La consegna non è un link a un file: è un pacchetto che permette di costruire senza indovinare.

Linee guida e documentazione

Regole d'uso per chi pubblicherà dopo: griglie, testi, immagini e componenti. La documentazione evita che il sito si degradi alla prima pagina aggiunta.

Verifica dopo la pubblicazione

Il design si giudica sul sito vero, con i contenuti veri e i dispositivi veri. Dopo il lancio si controllano i percorsi principali e si correggono le differenze.

Il lavoro procede dal problema alla verifica. Ogni passaggio si può rivedere e correggere prima che diventi codice.

• Capire: chi usa il sito, cosa deve fare e cosa lo blocca oggi.
• Organizzare: mappa dei compiti, architettura e wireframe delle pagine principali.
• Disegnare: componenti, tipografia, colori e prototipo da provare con persone reali.
• Consegnare e verificare: specifiche per lo sviluppo e controllo sul sito pubblicato.

Il design non si misura con i like. Si misura con compiti completati, tempo e attriti.

• Compiti completati nei test, con e senza aiuto.
• Punti di abbandono nei percorsi principali.
• Errori di compilazione nei moduli e messaggi che non si capiscono.
• Contrasto e leggibilità dei testi, verificati con strumenti e a occhio.
• Comportamento a 320 px, con testi lunghi e immagini mancanti.
• Differenze tra prototipo e sito pubblicato.

Gli stessi problemi tornano su siti di settori diversi.

• Menu con troppe voci e nessuna gerarchia.
• Testo grigio chiaro su fondo bianco, illegibile su mobile.
• Moduli lunghi senza spiegare quali campi sono obbligatori.
• Pulsanti diversi per la stessa azione, con etichette diverse.
• Immagini decorative che occupano tutto il primo schermo e nascondono il contenuto.
• Design approvato solo su desktop, mai provato con testi veri.

04Domande da fare a un fornitore di design

Le risposte mostrano se il lavoro parte dalle persone o solo dal file grafico.

• Come decide cosa mettere nel primo schermo?
• Quante persone reali proveranno il prototipo e come vengono reclutate?
• Cosa succede se un test smentisce la soluzione proposta?
• Il design system è documentato e riusabile o è un file chiuso?
• Chi verifica il responsive e con quali contenuti?
• Cosa è escluso: copy, foto, sviluppo, accessibilità?

Il design migliora quando chi conosce il business partecipa alle decisioni, non solo all'approvazione finale.

• Accesso ai dati: richieste, ricerche interne, reclami e pagine più viste.
• Due o tre clienti disponibili per una conversazione breve.
• I contenuti reali, non testi di riempimento.
• Un referente che decide e raccoglie i pareri interni.
• Le immagini e i materiali di brand esistenti.
• Tempo per rivedere wireframe e prototipo prima dello sviluppo.

Il design non sostituisce lo sviluppo, l'identità o l'accessibilità: le mette in ordine.

Costruire il sito

Il design diventa pagine, componenti e prestazioni. Serve chi lo sviluppa con gli stessi criteri. Sviluppo siti web

Identità e materiali

Logo, palette e caratteri devono reggere su sito, social e stampa. Il design system parte da lì. Branding e servizi grafici

Usabilità per tutti

Contrasti, tastiera e lettori di schermo non sono un'aggiunta finale: si progettano dall'inizio. Accessibilità web

05Glossario del design

Le parole che tornano in ogni progetto, spiegate senza gergo.

06Checklist di consegna del design

Alla fine devono restare file, regole e verifiche, non solo immagini da guardare.

• Mappa dei compiti e dei percorsi principali.
• Architettura delle pagine e menu approvata.
• Wireframe delle pagine che contano.
• Prototipo provato con almeno cinque persone.
• Design system con stati e misure.
• Specifiche per lo sviluppo e file ordinati.
• Verifica responsive con contenuti reali.
• Contrasti e focus visibile controllati.
• Linee guida per chi pubblicherà.
• Elenco delle cose rimandate e dei motivi.

07Come riconoscere un design fatto bene

Si vede da quanto è facile fare la cosa per cui si è arrivati sul sito.

• Il percorso principale si capisce senza spiegazioni.
• I testi sono leggibili su mobile e i pulsanti si toccano senza errori.
• Gli stati di errore dicono cosa fare, non solo che c'è un errore.
• I componenti sono coerenti tra le pagine.
• Le scelte sono motivate da prove, non solo dal gusto.
• Chi pubblica dopo sa usare le regole senza reinventarle.

Un design system vive se viene usato. Dopo il lancio si controllano le pagine nuove, si aggiornano i componenti e si annotano le eccezioni. Se nessuno lo mantiene, in pochi mesi il sito torna a essere una somma di pagine diverse.

Il design non è finito quando il sito è bello: è finito quando le persone riescono a fare ciò che sono venute a fare. Per questo la verifica continua con test brevi e con i dati di utilizzo.

Le stesse regole di chiarezza cambiano con il pubblico e con le aspettative del settore.

Letture sul rapporto tra identità, interfaccia e percezione. Non sono pubblicità.

Il design si completa con lo sviluppo, l'identità e la misura. Sono lavori che si influenzano a vicenda.

• Sviluppo siti web: dal prototipo al sito
• Branding e servizi grafici: identità coerente
• Accessibilità web: usabile da tutti
• Ottimizzazione conversioni: dai percorsi ai risultati
• Sviluppo e-commerce: catalogo e checkout

08Domande frequenti su web design e UX