Dove guardano

Cos'è e perché conta

Chi apre la tua landing o la tua scheda sull'App Store decide in pochi secondi se restare. In quei secondi vede cosa fa la tua app e il bottone per provarla? Di solito lo scopri solo dopo il lancio, dai numeri.

Foveacast te lo fa vedere prima. È una pagina web gratuita e open source (licenza MIT, il codice è su GitHub). Trascini una schermata della tua pagina e ti restituisce una heatmap, cioè una mappa a colori: dove è chiara, è probabile che gli occhi vadano lì; dove è scura, probabilmente no. E te la mostra per tre momenti: il primo secondo, i primi tre, i primi sette.

Il modello ha imparato da dati veri: lo studio UEyes (Jiang, Leiva e colleghi, CHI 2023) ha seguito con un eye tracker, una telecamera che registra dove guardano le pupille, 62 persone davanti a 1.980 schermate di siti, programmi, app e manifesti. Gira tutto nel tuo browser: niente account, e l'immagine non viene caricata da nessuna parte.

1. Fai una schermata fatta bene

Il risultato vale quanto la schermata che gli dai. Io faccio così:

1. Apri la tua pagina nel browser del computer, a finestra grande. Chiudi il banner dei cookie e ogni popup: se restano, si prendono gli occhi anche nella previsione.
2. Fotografa la prima videata, quella che si vede senza scorrere: il primo secondo si gioca lì. Su Mac premi Cmd+Shift+4 e trascini sull'area; su Windows premi Win+Shift+S.
3. Per il resto della pagina fai una schermata per ogni blocco, non una sola lunghissima. Il modello lavora su una versione piccola dell'immagine, 320 per 240 pixel: una pagina intera in un'unica immagine verticale si schiaccia e i dettagli spariscono.
4. Salvala in PNG o JPG, sotto i 20 MB. Se è più larga di 2560 pixel, lo strumento la rimpicciolisce da solo.

Per l'App Store apri la scheda della tua app dal browser del computer e fai lo stesso. Non è come la vede chi la apre dal telefono, ma ti dice se icona, nome e prime immagini si fanno notare.

2. Lancia la prova

1. Apri allaboutken.com/Foveacast dal computer, con Chrome (o un altro browser basato su Chromium) o con Firefox. Tieni la finestra larga: se è sotto i 900 pixel, la pagina pensa che tu sia su un telefono e ti mostra un avviso.
2. La prima volta scarica i file del modello, circa 57 MB: aspetta che finisca. Dalle volte dopo li prende dalla memoria del browser e parte subito.
3. Trascina la schermata nella pagina, oppure incollala, oppure caricala con New Image.
4. Aspetta l'analisi: arriva prima la vista a 3 secondi, poi le altre due. Clicca sulla heatmap per passare da una vista all'altra: First glance (1 s), Quick scan (3 s), Full viewing (7 s).

Con Download PNG salvi l'immagine: tienila, ti serve per il confronto alla fine.

3. Leggi le tre viste e il report

I colori vanno dal viola scuro, poca attenzione prevista, all'arancione, fino al giallo chiaro, la più alta. Due cose da sapere prima di guardare:

• La scala è relativa alla tua immagine: il punto più forte è sempre giallo, anche se niente spicca davvero. Giallo non vuol dire «funziona», vuol dire «è il più forte di questa pagina».
• Il mirino segna dove il modello pensa che cada il primo sguardo. È una stima, non una misura.

Le tre viste dicono cose diverse:

• 1 secondo: cosa salta all'occhio prima ancora di leggere. Contano contrasto, bordi, volti, testo grande.
• 3 secondi: un primo giro sulla pagina. Iniziano a contare titoli, immagini grandi, menu e bottoni.
• 7 secondi: una lettura più attenta. L'attenzione arriva anche su testi, moduli e dettagli.

Sotto la heatmap c'è il report, Analysis Report. Le parti che uso di più:

• Attention by image region: la regola dei terzi, cioè la pagina divisa in una griglia di 3 per 3, con la percentuale di attenzione in ogni riquadro.
• Eye movement sequence: l'ordine previsto in cui lo sguardo passa da una zona all'altra, segnato con dei numeri.
• Attention shift: come si sposta il centro dell'attenzione da 1 a 7 secondi. Se scende nell'ordine in cui vuoi che si legga, la pagina guida bene.

4. Le due domande del primo secondo

Di tutto il report, a me interessano due domande. Le guardo nella vista a 1 secondo:

1. La promessa si vede? La promessa è la frase che dice cosa fa la tua app e per chi. Dovrebbe essere chiara in tutte e tre le viste. Se si accende solo a 3 o a 7 secondi, probabilmente è troppo piccola o ha poco contrasto con quello che ha intorno.
2. Il bottone principale si vede? È quello che fa scaricare o iscrivere. Se a 1 secondo resta scuro, probabilmente nessuno lo nota prima di andarsene.

Poi guarda chi ruba l'attenzione: un logo, una foto messa lì per bellezza, due zone gialle vicine che si fanno concorrenza. Decidi cosa deve vincere.

Scrivi in due righe cosa hai visto: è quello che dai a Claude Code.

5. Sistema la pagina con Claude Code

Apri Claude Code nella cartella del sito e dagli le immagini: trascinale nella finestra, incollale con Ctrl+V o scrivi il percorso del file. Un cambio alla volta, se no non sai cosa ha funzionato.

Ti allego la schermata della mia landing e la heatmap dell'attenzione prevista a 1 secondo. Il bottone principale «[testo del bottone]» resta quasi al buio: probabilmente nessuno lo nota.
Fallo risaltare: più contrasto con lo sfondo, più spazio vuoto intorno e, se serve, più grande o più in alto.
Non toccare i testi, i colori del brand e il resto della pagina.
Prima di cambiare, dimmi in tre righe cosa vuoi fare.

Il titolo «[la tua frase]» si accende solo nella vista a 7 secondi. Voglio che si veda nel primo secondo.
Lavora solo su dimensione, peso e contrasto del titolo, e sullo spazio intorno. Non cambiare le parole.
Alla fine elencami i valori che hai cambiato, prima e dopo.

Nella heatmap a 1 secondo [l'elemento] è la zona più chiara e toglie attenzione al titolo e al bottone.
Rendilo meno forte, con meno contrasto o più piccolo, senza toglierlo.
Il resto lascialo com'è.

Prima di rifare la prova apri la pagina e controlla che funzioni ancora tutto, anche dal telefono.

6. Rifai la prova, poi chiedi a persone vere

1. Rifai la schermata con la stessa finestra e lo stesso punto della pagina, passala a Foveacast e salva la PNG. Se cambi inquadratura, il confronto non vale.
2. Metti affiancate le due heatmap a 1 secondo, prima e dopo. La domanda è una: il bottone e la promessa ora sono più chiari, rispetto al resto della pagina?
3. Guarda anche le viste a 3 e a 7 secondi: hai spostato l'attenzione, controlla di non averla tolta a qualcosa che serve.
4. Se è peggio, torna indietro. Se è meglio, tieni il cambio e passa al prossimo.

E poi non fidarti troppo. È una previsione su una persona media che guarda la pagina senza cercare niente; i tuoi utenti arrivano con uno scopo, e chi cerca qualcosa guarda in modo diverso. Su testi fitti, tabelle e mappe sbaglia di più. Esistono servizi a pagamento con eye tracking misurato su persone vere, ma per un controllo prima del lancio basta questo: usalo per trovare i problemi evidenti, poi fai vedere la pagina a qualche persona vera e chiedile cosa fa questa app e dove cliccherebbe.

Gli errori più comuni

• Passare tutta la pagina in un'unica immagine lunghissima. Si schiaccia: fai una schermata per blocco.
• Leggere il giallo come «funziona». È solo il punto più forte della tua immagine.
• Guardare solo la vista a 7 secondi. Promessa e bottone si giocano nel primo.
• Chiedere a Claude Code cinque cambi insieme e poi non sapere quale ha aiutato.
• Prendere la heatmap per i tuoi utenti veri. È una media, non la tua gente.

Checklist

• Schermata dal computer, senza banner né popup
• Una schermata per la prima videata e una per ogni blocco importante
• La promessa è chiara in tutte e tre le viste
• Il bottone principale non è scuro a 1 secondo
• Ho chiesto a Claude Code un cambio alla volta
• Ho rifatto la prova con la stessa inquadratura e confrontato le due PNG
• Ho fatto vedere la pagina a qualche persona vera

Domande frequenti