Fai una prova: apri un sito che non conosci, guardalo per cinque secondi e poi chiudi gli occhi. Sai dire di cosa parla e cosa ti chiede di fare? Se la risposta è no, non sei distratto tu: è il sito che non si spiega.
Guardando siti di tutti i tipi, i miei compresi, mi sono accorto che i problemi sono quasi sempre gli stessi. Non c’entrano il gusto né il budget: sono cinque errori piccoli, che si notano poco quando il sito lo fai tu e tantissimo quando lo apre qualcun altro.
1. Tutto chiede attenzione, quindi niente la ottiene
Tre colori forti, un carosello, il banner dei cookie, un pop-up per la newsletter e la chat in basso a destra. Ogni pezzo da solo ha senso; tutti insieme fanno rumore. L’occhio non sa dove andare e la cosa più facile diventa tornare indietro.
Il trucco che uso è chiedermi: se in questa schermata potesse restare una cosa sola, quale sarebbe? Quella va in alto e in grande. Il resto si abbassa di tono, scende più giù o sparisce. Lo spazio vuoto non è spreco: è quello che fa capire cosa conta.
2. Un testo che stanca prima di essere letto
Grigio chiaro su bianco, corpo piccolo, righe lunghe quanto lo schermo: in un’anteprima è elegante, dopo tre righe è faticoso. Tre controlli sistemano quasi tutto.
- Testo normale ad almeno 16 pixel, che è anche la dimensione di partenza dei browser.
- Contrasto tra testo e sfondo di almeno 4,5 a 1, la soglia che le linee guida WCAG sull’accessibilità chiedono per il testo normale. Il contrast checker di WebAIM te lo dice in un secondo.
- Righe non troppo lunghe: intorno ai 60–75 caratteri si legge bene, oltre l’occhio fa fatica a ritrovare l’inizio della riga dopo.
E paragrafi brevi. Sul telefono un paragrafo di dieci righe diventa un muro.
3. Pensarlo sul computer e controllarlo (forse) sul telefono
Il sito si disegna su uno schermo grande, perché è lì che si lavora. Ma chi lo apre, molto spesso, lo fa dal telefono, magari con una mano sola mentre fa altro. E da qualche anno anche Google guarda prima la versione mobile di una pagina per decidere come mostrarla nei risultati.
Gli intoppi tipici sono sempre quelli: una tabella che esce dallo schermo, un menu che copre metà pagina, un testo che va ingrandito con le dita. Il consiglio più utile è il più noioso: prova davvero dal telefono, non solo restringendo la finestra del browser. Per avere più schermi sotto mano mentre lavoro uso Responsively App, ma un telefono vero resta l’esame finale.
4. Pulsanti che non dicono cosa succede
«Scopri di più», «Clicca qui», «Invia». Non sono sbagliati, ma non dicono niente. Un pulsante dovrebbe raccontare cosa succede dopo: «Leggi il menu», «Prenota un tavolo», «Scarica il PDF». Chi scorre la pagina leggendo solo i pulsanti, e capita più spesso di quanto pensi, dovrebbe capirne lo stesso il senso.
Poi c’è la parte fisica. Sul telefono il dito non è un mouse: Apple consiglia aree di tocco di almeno 44 punti per lato, Google di 48. Due link minuscoli attaccati sono il modo più sicuro per far premere quello sbagliato.
5. Lento, quasi sempre per colpa delle immagini
Un sito lento non lo vedi tu, che lo apri da casa con la fibra e la cache piena. Lo vede chi lo apre al bar con due tacche di 4G. E la causa, il più delle volte, è banale: una foto da diversi megabyte presa dalla fotocamera e caricata così com’è, quando a schermo ne basterebbe un decimo.
Cosa controllo io:
- immagini ridimensionate alla misura in cui vengono mostrate e salvate in WebP o AVIF;
- niente video in riproduzione automatica in apertura, se non servono davvero;
- pochi caratteri tipografici, e solo gli spessori che usi;
- script esterni (chat, pixel pubblicitari, widget social) solo se poi guardi davvero i loro dati.
Per misurare uso PageSpeed Insights. Il primo numero che guardo è l’LCP, il tempo che serve perché compaia il contenuto principale: sotto i 2,5 secondi Google lo considera buono.
Il giro da cinque minuti
Quando finisco una pagina, prima di dirla finita, faccio sempre questo giro:
- la apro dal telefono, con la rete mobile e non col Wi-Fi;
- la guardo per cinque secondi e mi chiedo cosa ho capito;
- leggo un paragrafo a metà pagina senza ingrandire;
- premo tutti i pulsanti con il pollice;
- la passo in PageSpeed Insights.
Non serve rifare il sito da zero: quasi sempre si sistema togliendo qualcosa, più che aggiungendo. E se il problema sta più a monte, cioè nel tipo di pagina scelto per quello che deve fare, ne parlo in sito vetrina o landing page.