Ehm no. Above the fold non è una parolaccia. Certo, non suona granché bene ma above the fold sta semplicemente a indicare la prima porzione dello schermo. Quella che vedi senza dover scrollare la pagina, in pratica. Oggi voglio appunto parlarti dell’importanza dell’above the fold (ATF) in quel processo di cui ho più e più volte parlato: l’ottimizzazione di un sito web. E no, anche questa non è una parolaccia.

Da quando mi sono messa a dieta per la settordicesima volta in pochi mesi mi si è rivegliata una voglia atavica di cibo spazzatura. Per questo motivo, i siti web che andremo ad analizzare oggi offrono cibo più o meno spazzatura. In ogni caso, take away.

Ho navigato un po’ in siti web americani che si occupano della fornitura di cibo da asporto con ordinazione online. Ho voluto vedere come se la cavano con l’above the fold e l’ottimizzazione dei primi pixel a loro disposizione. Perché – se non lo sai, sallo – ottimizzazione e above the fold vanno a braccetto.

Dimostra ancora una volta pazienza nel leggermi e vedrai che non te ne pentirai. E comunque, sei sempre in tempo a fare incetta di junk food da sgranocchiare davanti al monitor per far passare questi 10 minuti di lettura veloci veloci. Se ti serve un consiglio su cosa smangiucchiare, chiedi a Francesca: è lei l’esperta di “schifezze e schifezzuole”.

 

Above the fold. Tutto quello che dovresti far vedere subito. E quello che no

Quando crei un sito web da zero, o quando vuoi ottimizzare le tue pagine, devi capire che, in qualche modo, è come se tu stessi “vestendo” una persona. Anzi, meglio: come se stessi vestendo te stesso. Si dice che l’abito non faccia il monaco, ma che la prima impressione sia quello che conta (poi sono io quella contorta), no? Un sito web è un po’ come una persona. Se dovessi tenere un colloquio a una ragazza scollacciata, con una minigonna inguinale e le zeppe trasparenti alte 30 cm, e se questa ragazza dovesse fare l’account per la tua ditta che si occupa di vendita rosari personalizzati, be’ credo non potresti sceglierla per questo ruolo. Certo, magari le chiederesti il numero di telefono, ma per altri motivi. Vale lo stesso per un sito.

Se il tuo sito web non è affine al tuo stile comunicativo, se mostra di te troppo e troppo presto, rischi di perdere clienti. O, peggio ancora, di non ottenere alcuna conversione. Perché da te, dal tuo sito web, la gente si aspetta qualcosa di preciso. Devi essere così bravo da far vedere quello che le persone vogliono già dai primi pixel (che sono l’equivalente del primo impatto a un colloquio di lavoro). Ma devi lasciar loro desiderare qualcosa in più. Devi portarle a voler scrollare tutta la pagina, a vedere tutto di te. A chiederti, insomma, un secondo “colloquio di lavoro”.
 

Quali sono gli elementi da inserire above the fold?

A questo punto, forse, ti starai chiedendo cosa dovresti far vedere subito alle persone che arrivano nel tuo sito web e quello che no. E fai bene a farti questa domanda, perché potrebbe determinare un aumento di conversioni.

 
Ecco quindi gli elementi da inserire above the fold in un sito web:

• Logo
• Payoff
• Headline (possibilmente contenente la Value Proposition, ossia la risposta alla domanda “Perché una persona dovrebbe scegliere proprio me e non un concorrente?”)
• Contatti (e-mail, numero di telefono)

 
Questi sono proprio gli elementi basici. Accertati, quindi, di averli inseriti tutti. E tutti above the fold. Altri elementi importanti da inserire above the fold possono essere l’invito all’azione, ossia la CTA, e i bottoni social (Facebook, Twitter, G+).
 

Quello che non ho menzionato, può essere inserito BTF, ossia belove the fold.
 

Io non scrollo, tu scrolli, egli non scrolla. Che succede above the fold?

L’above the fold non è uguale per tutti. La porzione di pagina che tu riesci a visualizzare senza dover scrollare, non è la stessa di Francesca. Forse neppure Benedetto riesce a vedere tutti i pixel che vedi tu. Forse Beatrice li vede, ma Riccardo no. Che succede, quindi above the fold?

 

 
Come hai letto nel box qui sopra, per capire che risoluzione scegliere, e quindi andare a definire la grandezza del tuo above the fold, puoi usare Google Analytics:

• Dal pannello principale va’ su “Pubblico”
• Clicca su “Tecnologia”
• Quindi va’ su “Browser e sistema operativo”
• Infine clicca su “Risoluzione dello schermo”.

 

 
A questo punto avrai una panoramica chiara, proprio come vedi nell’immagine qui sopra, e saprai con certezza se creare un sito con risoluzione 1440×900, 1280×800 o altre. Quello che faremo adesso, invece, sarà dare un’occhiata ai siti americani di cui ti parlavo all’inizio. Cibo spazzatura, take away, settordicesima dieta: ricordi?

 

Meal 2 go: banner ATF e foto stock. Ai-ai-ai Signora Longari lei mi cade sui primi pixel

Il sito web Meal 2 Go non è un esempio da 10 e Lode. Usa infatti lo spazio ATF per 1/4. C’è il logo (senza payoff), ma manca l’headline che esprima il plus di questo portale. In alto a destra, poi, è posizionato un bel banner pubblicitario. Il box della live chat è situato in basso, quando sarebbe stato meglio inserirlo al posto del banner pubblicitario assieme al numero di telefono. E poi: cosa sono tutte quelle immagini stock che ruotano nel grande box rosso? Va bene usare le immagini di repertorio, ma quelle sono più finte delle tette della… Ehm, niente nomi, va’ (anche perché ne dovrei far troppi).
 

 
Una cosa che, invece, ti consiglio di annotare è la grande headline del box rosso (“Hungry?” – “Affamato?”) e la subheadline che si sarebbe potuta ripetere anche nei primi pixel. Se una frase del genere, “Food delivered in minutes” (“Cibo consegnato in pochi minuti”) avesse un poco più di appeal (“Cibo ancora caldo” o “appena cucinato” e “consegnato in pochi minuti”) sarebbe una signora headline, meritevole dell’ATF.
 

Hungry House: il valore delle foto e della domanda giusta al momento (e nel posto) giusto

Ecco invece un esempio di un buon ATF. Nel sito Hungry House troviamo un logo con payoff, tanto semplice quanto chiaro. Poi ci sono i pulsanti di Facebook e G+, segno di una fervente attività social (hai visto il numero di like e condivisioni?).
 

 
Assolutamente azzeccata l’aggiunta dell’headline (“Are you hungry?”), che fa leva su un bisogno che, per quanto scontato (se sei arrivato in un sito di cibo take away è ovvio tu sia affamato), resta sempre una potente calamita. A sollecitare ulteriormente il bisogno di cibo, la forma interrogativa e la commistione testo/immagini. Nel banner slide sottostante si vedono dei piatti abbondanti, ben preparati, che sfilano sotto il naso del lettore. Queste foto alimentano la tua fame che già si fa sonoramente sentire per l’ufficio, con ruggiti di stomaco che manco Fred Flinstone… In questo sito avrei visto bene ATF, magari sotto i bottoni social, anche il numero di telefono per un contatto veloce. Sarebbe stata ok anche un’headline che informasse il lettore sui plus del servizio. Scrivere “Hai fame?” alimenta il bisogno di cibo, ma non fornisce informazioni utili, non trovi?
 

HouseBites: metterci la faccia e la giusta value proposition

Sono rimasta piacevolmente colpita dal sito HouseBites, anche se è decisamente perfettibile. Cosa mi piace? Per prima cosa il fatto che anche questo portale abbia un payoff, poi che abbia capito l’importanza di inserire una value proposition (“Freshly cooked food […]”).
 

 
Lodevole, a mio parere, anche l’inserimento delle foto degli chef. Peccato che – inspiegabilmente – sia stata inserita, sotto ciascuna immagine, una sigla e non il nome dello chef. Peccato che, dopo tanto parlare di mangiare, si perdano proprio in un bicchier d’acqua.
 

Just Eat e come non sfruttare l’Above the Fold

Nel titolo ti ho detto tutto. Il sito Just Eat è da prendere da esempio in negativo. Guarda come l’above the fold non venga assolutamente sfruttato.
 

 
Come vedi manca praticamente tutto. I primi pixel del sito vengono utilizzati solo per il logo, posizionato a sinistra come da manuale. La porzione centrale, e quella destra, sono completamente vuote. Il bianco regna sovrano. Tieni bene a mente questo sito e fa’ esattamente l’opposto: sfrutta i primi pixel del tuo sito web per inserire payoff, headline, numero di telefono e, se reputi opportuno, CTA.
 

Ti va di condividere con me e gli altri qualche esempio di above the fold che ti è piaciuto, o che non ti è piaciuto affatto? O magari hai delle domande da pormi? O ancora, vuoi sottopormi il tuo ATF? Scrivi la tua nei commenti qui sotto.

 
P.S.: Ogni riferimento a persone, cibo, colloqui di lavoro e diete è voluto e non casuale. Se ti sei rifatta le tette e ti senti chiamata in causa, e hai continuato a leggere solo per vedere se ci fosse il tuo nome in questo articolo (dato che assomigli pure alla tipa della prima immagine), mi dispiace d’averti fatto perdere tanto tempo: non lo troverai. Puoi tornare a pettinare i polipi in totale serenità. Cià cià! 😉