Principi di web design che incidono davvero sui risultati
Buona parte dei consigli di web design sono preferenze travestite da principi. Un numero minore di decisioni cambia in modo affidabile ciò che fanno i visitatori, e quasi tutte sono poco appariscenti: cosa si vede per primo, se il testo si legge, e quanti passaggi separano una persona da ciò per cui è venuta.
Questa guida copre quelle con prove alle spalle e nomina quelle che sono davvero questione di gusto.
Una gerarchia chiara per schermata#
Ogni schermata dovrebbe rendere una cosa ovviamente la più importante. Quando tre elementi si contendono l'attenzione con lo stesso peso, i visitatori risolvono l'ambiguità andandosene.
La gerarchia si costruisce con dimensione, peso, colore, spazio e posizione — grosso modo in quest'ordine di forza. Lo spazio è il più sottoutilizzato: un elemento con aria attorno si legge come importante senza dover urlare.
- Un'azione primaria per schermata, con uno stile diverso da tutto il resto.
- Azioni secondarie presenti ma visivamente più sommesse: contorno anziché pieno.
- Titoli che descrivono il contenuto, non titoli brillanti che non descrivono nulla.
- Spazio usato di proposito: una pagina affollata non ha gerarchia, solo densità.
Leggibilità prima della decorazione#
Un testo difficile da leggere ti costa lettori per quanto sia buona la scrittura. Sono soglie misurabili, non opinioni.
| Proprietà | Obiettivo pratico | Perché |
|---|---|---|
| Dimensione del testo | 16–18 px su mobile | Sotto i 16 px iOS ingrandisce al focus di un campo e il testo piccolo perde lettori |
| Lunghezza di riga | 55–75 caratteri | Le righe lunghe fanno perdere il segno all'occhio nel ritorno |
| Interlinea | 1,5–1,7 per il testo corrente | Un'interlinea stretta riduce la velocità di lettura in modo misurabile |
| Contrasto del testo | 4,5:1 minimo, meglio 7:1 | WCAG AA; il grigio su grigio fallisce all'aperto su un telefono |
| Contrasto dei controlli | 3:1 sullo sfondo | L'utente deve poter vedere dove finisce un campo |
| Lunghezza dei paragrafi | Tre-quattro righe | I blocchi lunghi vengono saltati su mobile |
Verifica il contrasto sullo sfondo reale, gradienti e immagini compresi. Un valore che passa su bianco può fallire sull'immagine di testata su cui si trova davvero.
Progetta i moduli per il completamento, non per la simmetria#
I moduli sono il punto in cui la maggior parte degli obiettivi di un sito si realizza davvero, e dove il design investe meno attenzione. Ogni campo che aggiungi costa completamenti; ogni campo che togli è denaro gratis se quel dato non ti serviva.
- Chiedi il minimo che ti serve per rispondere. Il resto puoi chiederlo nella risposta.
- Una colonna sola. I moduli a due colonne causano campi saltati e sono peggiori su mobile.
- Etichette sopra i campi, sempre visibili: le etichette solo come testo di esempio spariscono appena si digita.
- Tipi di campo e attributi di completamento automatico corretti, così il telefono mostra la tastiera giusta e propone il riempimento.
- Valida all'uscita dal campo, non a ogni tasto, e metti l'errore accanto al campo.
- Non svuotare mai il modulo in caso di errore. Perdere ciò che si è digitato è il motivo di abbandono più frequente.
- Di' cosa succede dopo l'invio, e quanto tempo richiede.
Cosa è gusto e cosa no#
Avere chiara la differenza fa risparmiare molto tempo nelle riunioni di revisione. La colonna di sinistra è discutibile; quella di destra no.
| Gusto | Non è gusto |
|---|---|
| Palette di colori | Rapporti di contrasto sullo sfondo reale |
| Scelta tipografica | Dimensione del testo e lunghezza di riga |
| Stile delle illustrazioni | Se le immagini hanno testo alternativo sensato |
| Immagine di testata sì o no | Se l'azione primaria è visibile senza scorrere |
| Angoli arrotondati o vivi | Se gli stati di focus sono visibili da tastiera |
| Stile delle animazioni | Se l'animazione rispetta prefers-reduced-motion |
| Densità dell'impaginazione | Se i bersagli tattili misurano almeno 44 px |
Domande frequenti
Conta ancora ciò che si vede senza scorrere?
Non come regola per cui tutto l'importante debba starci: le persone scorrono, e lo fanno da vent'anni. Ciò che conta è che la parte alta risponda a «cos'è e fa per me?» in un paio di secondi. Se lo fa, i visitatori scorreranno per il dettaglio. Se non lo fa, nulla di ciò che sta più in basso viene letto.
Quanti caratteri tipografici dovrebbe usare un sito?
Di solito una o due famiglie, con i pesi che fanno il lavoro che farebbero famiglie in più. La ragione pratica è la prestazione più che il gusto: ogni famiglia e ogni peso in più è un altro file da scaricare prima che il testo si mostri correttamente. Una famiglia ben scelta con tre pesi copre quasi ogni sito.
Vale la pena fare la modalità scura?
Vale la pena se puoi farla con i token di design fin dall'inizio, quando costa pochissimo. Aggiungerla a un sito finito significa passare in rassegna ogni colore, ogni immagine e ogni ombra, che è un progetto vero. Se la offri, rispetta la preferenza di sistema per impostazione predefinita e lascia che l'utente la scavalchi.
Il design deve somigliare a quello dei concorrenti?
Le convenzioni sì dovrebbero coincidere — navigazione in alto, carrello in alto a destra, il logo che rimanda alla home — perché romperle costa comprensione senza guadagno. Tutto ciò che sta sopra le convenzioni è il tuo spazio di differenziazione. L'errore è copiare in blocco l'impaginazione di un concorrente, che di solito importa decisioni adatte ai suoi contenuti e non ai tuoi.
principi web designbuone pratiche web designprincipi uxprogettazione modulileggibilità webgerarchia visiva
