Quando entri in un sito web non inizi subito a leggere con attenzione. Prima guardi. Cerchi di capire dove sei, cosa puoi trovare e se vale la pena restare. È un comportamento quasi automatico, lo stesso che abbiamo quando entriamo in un negozio che non conosciamo: in pochi istanti ci facciamo un’idea, ancora prima di aver guardato bene gli scaffali.
Sul web questa prima impressione si concentra soprattutto nella parte iniziale della pagina, quella che compare sullo schermo prima di iniziare a scorrere. Nel web design viene chiamata Above the Fold e, nonostante il nome possa sembrare l’ennesimo tecnicismo da addetti ai lavori, il concetto è molto semplice.
È il primo pezzo del tuo sito che una persona incontra.
E non deve raccontare tutto. Anzi, cercare di infilare lì dentro servizi, vantaggi, presentazione, tre pulsanti, quattro slogan e magari anche la foto del team è spesso il modo migliore per non far capire niente.
Una buona sezione iniziale ha un compito molto più concreto: far capire all’utente dove è arrivato e dargli un motivo per continuare.
Vediamo quindi cosa dovrebbe contenere, quali errori possono renderla confusa e come capire se i primi secondi sul tuo sito stanno aiutando la navigazione oppure la stanno complicando.
Cos’è l’Above the Fold e perché conta
Il termine Above the Fold non nasce con Internet. Arriva dai giornali cartacei: quando erano esposti piegati nelle edicole, la parte superiore della prima pagina era quella immediatamente visibile. Titoli, fotografie e notizie importanti dovevano quindi conquistarsi quello spazio.
Sul web il principio è rimasto, anche se al posto della piega del giornale abbiamo il bordo dello schermo.
L’Above the Fold è la porzione della pagina che vediamo appena atterriamo su un sito, senza aver ancora fatto scroll.
Questa zona ha un peso particolare perché deve orientare una persona che, molto probabilmente, non conosce ancora bene il sito. Può essere arrivata da Google, da un link ricevuto su WhatsApp, da un social oppure dopo aver sentito nominare l’attività da qualcuno. Non possiamo dare per scontato che sappia già chi siamo e cosa facciamo.
Per questo l’Above the Fold:
non dovrebbe essere pensato come una copertina bella da vedere, ma come l’inizio di una conversazione. Prima fai capire di cosa stai parlando, poi puoi permetterti di approfondire.
Non esiste una misura perfetta
Uno degli errori più facili è immaginare l’Above the Fold come un rettangolo dalle dimensioni precise: tot pixel di altezza e problema risolto. Peccato che gli utenti non visitino tutti il sito dallo stesso computer.
C’è chi arriva da uno smartphone piccolo, chi da un portatile, chi da uno schermo enorme e chi tiene aperte talmente tante barre del browser che metà dello spazio disponibile è già stato occupato prima ancora di arrivare sul sito.
Progettare l’Above the Fold significa quindi ragionare soprattutto sulla priorità delle informazioni, non inseguire una misura universale che non esiste.
In pratica, nella prima schermata dovrebbero trovare spazio soprattutto:
- il messaggio principale, per capire subito di cosa ti occupi;
- un elemento visivo coerente con ciò che vuoi comunicare;
- una CTA chiara, che indichi quale può essere il passo successivo;
- abbastanza spazio vuoto da rendere leggibili e riconoscibili gli elementi importanti.
Da ricordare
Non è necessario che tutto sia visibile senza scroll. È necessario che ciò che si vede faccia venire voglia di continuare.
Lo scroll, infatti, non è il nemico:
Gli utenti sanno perfettamente che una pagina continua verso il basso. Il problema nasce quando la prima schermata non offre nessun indizio interessante su ciò che troveranno dopo.
Cosa dovrebbe capire un utente nei primi secondi
Prima di pensare a fotografie, animazioni o effetti particolari, c’è una domanda molto più utile da farsi: che cosa deve capire una persona appena arriva qui? In una homepage aziendale, per esempio, dovrebbero emergere almeno tre informazioni.
Dove sono?
Non serve necessariamente scrivere il nome della categoria professionale a caratteri cubitali, ma il contesto deve essere comprensibile.
Se sei una web designer, uno studio di architettura o un ristorante, l’utente non dovrebbe dover investigare.
Cosa posso trovare qui?
Dire cosa fai è importante, ma spiegare cosa puoi fare per chi sta leggendo lo è ancora di più.
“Realizziamo siti web” descrive un servizio. “Progettiamo siti web che aiutano piccole attività e professionisti a presentarsi online in modo chiaro” aggiunge immediatamente un contesto.
Dove posso andare adesso?
Non tutti saranno pronti a contattarti dopo 4 secondi, ed è normale. Una CTA può invitare a scoprire i servizi, vedere i progetti, richiedere informazioni oppure approfondire un argomento.
L’importante è evitare di mettere l’utente davanti a una pulsantiera da cabina di pilotaggio.
Gli elementi di un Above the Fold efficace
Non esiste una formula valida per ogni sito. La homepage di un fotografo può avere esigenze diverse da quella di un consulente e una landing page dedicata a un servizio avrà priorità ancora differenti.
Ci sono però alcuni elementi che ricorrono spesso perché aiutano a costruire una gerarchia chiara.
Un titolo che dica qualcosa
Il titolo principale non dovrebbe costringere il visitatore a interpretarlo.
“Diamo forma alle tue idee” potrebbe appartenere a un architetto, una tipografia, un’agenzia di comunicazione.
La creatività funziona meglio quando poggia sulla chiarezza, non quando deve sostituirla.
Un testo che aggiunga contesto
Il sottotitolo serve per completare ciò che il titolo non può raccontare. Può spiegare a chi ti rivolgi, quale problema risolvi oppure quale approccio utilizzi.
Non deve diventare una mini autobiografia. Per quella c’è tutto il resto della pagina.
Una CTA riconoscibile
Se vuoi che l’utente compia un’azione, rendila evidente. E soprattutto scegli una priorità.
Tre pulsanti con lo stesso peso visivo non offrono tre possibilità: spesso creano semplicemente tre dubbi.
Un visual con un motivo per esserci
Una fotografia, un’illustrazione o un mockup possono aiutare a comunicare il tono e il tipo di servizio. Ma l’immagine dovrebbe partecipare al messaggio.
Se togliendola non cambia nulla, forse è lì solo perché avanzava uno spazio vuoto. E gli spazi vuoti, ogni tanto, stanno benissimo anche da soli.
Quando voler stupire crea solo confusione
Un Above the Fold efficace non deve necessariamente essere minimale. Può essere colorato, illustrato, animato e avere una forte personalità. Il punto è capire se quelle scelte stanno aiutando il messaggio oppure stanno gareggiando con lui.
Uno slider con cinque messaggi, per esempio, sembra offrire più informazioni. In pratica chiede all’utente di aspettare che il sito finisca la presentazione. E difficilmente qualcuno è entrato nella homepage pensando: “Perfetto, adesso mi metto qui e aspetto la slide numero quattro”.
Lo stesso vale per animazioni troppo invadenti, testi giganteschi che occupano tutto lo schermo o CTA distribuite ovunque.
Meglio evitare
- Slogan che potrebbero dire tutto e niente
- Più CTA con lo stesso peso
- Immagini puramente decorative
- Effetti che rubano l’attenzione
- Riempire ogni centimetro disponibile
Meglio puntare su
- Titoli comprensibili anche fuori contesto
- Un’azione principale evidente
- Visual collegati al messaggio
- Animazioni che aiutano la gerarchia
- Spazio per far respirare gli elementi
Questo non significa progettare siti tutti uguali. Ma fare in modo che la creatività sostenga il messaggio:
È lo stesso principio che vale quando si costruisce la struttura di una pagina web: prima decidiamo cosa deve capire l’utente, poi scegliamo il modo migliore per mostrarglielo.
Il test dei 5 secondi
Per capire se la parte iniziale del tuo sito funziona puoi fare un test semplice, senza strumenti particolari e senza coinvolgere un gruppo di ricerca con tanto di lavagna e pennarelli.
Apri la homepage e guardala per cinque secondi. Poi chiudila, oppure mostrala a una persona che non conosce bene la tua attività e chiedile che cosa ha capito.
Dovrebbero emergere almeno queste tre informazioni:
| Domanda | Cosa verificare |
|---|---|
| Di cosa si occupa l’attività? | Il servizio o il settore sono comprensibili? |
| A chi si rivolge? | È chiaro chi può trovare utile ciò che proponi? |
| Qual è il passo successivo? | Si capisce quale azione compiere o dove continuare? |
Non serve ricordare ogni parola del titolo o del testo.
L’obiettivo è capire se il messaggio generale è arrivato oppure se la homepage ha lasciato più domande che risposte.
Se il risultato non è quello che speravi:
Non significa che devi rifare tutto il sito. Spesso è sufficiente rivedere la gerarchia delle informazioni:
- rendere il titolo più preciso;
- ridurre gli elementi che competono per l’attenzione;
- rendere più evidente la CTA principale;
- scegliere un’immagine più coerente con il messaggio.
Il test riflette il modo in cui le persone leggono una pagina web. Cercano punti di riferimento, parole chiave e segnali per capire se sono nel posto giusto.
Ne parlo in dettaglio nell’articolo su come leggono gli utenti una pagina web.
Non devi raccontare tutto. Devi far iniziare il viaggio.
L’Above the Fold non deve convincere una persona ad acquistare, raccontare vent’anni di esperienza, mostrare tutti i servizi e rispondere contemporaneamente alle FAQ. Deve fare bene il primo passo.
Se chi arriva comprende il contesto, trova una gerarchia chiara e intuisce dove continuare, la parte iniziale della pagina ha già fatto un ottimo lavoro. Il resto può arrivare dopo, scorrendo.
Il tuo sito nei primi secondi chiede già troppa pazienza?
Se vuoi rivedere la struttura della tua homepage e capire cosa rendere più chiaro, contattami: possiamo progettare una pagina che accompagni le persone fin dal primo sguardo, senza costringerle a giocare a “indovina cosa faccio”.
Ti va di parlarne?