Anche se si può pensare il contrario, spesso nel web una pagina lunga è meglio di una più breve. Ma, perché una pagina lunga sia veramente efficace, occorre che il lettore sia consapevole della sua lunghezza. Infatti, la schermata che appare sui nostri computer evidenzia solo una parte di una lunga pagina. Per vedere l’intera pagina, occorre farla scorrere. 

Però, non sempre l’utente è consapevole che la pagina prosegue oltre la schermata visualizzata nel suo computer e, quindi, non va avanti.

Per rendere evidente che la pagina è lunga e che non finisce con la schermata visibile sul computer, occorre seguire alcune regole. 

 

Above the fold

Come abbiamo visto nell’ultimo post, si usa il termine “above the fold” (sopra la piega), per indicare l’area della pagina che si può vedere sul computer, senza far scorrere la pagina.  

La posizione della “piega” può essere differente per diversi utenti, dato che dipende da vari fattori, come la risoluzione dello schermo del computer e il numero di barre aperte. Dipende anche dal fatto se si sta visualizzando la pagina sul computer o su un tablet o un cellulare.

Il problema, con le pagine web che si estendono in lunghezza, è spesso determinato dal fatto che l’utente non ha sempre consapevolezza che il contenuto – se è spezzettato e non continuo – prosegue anche sotto la piega (below the fold).

Ad esempio, se c’è dello spazio bianco poco sopra la piega, si può credere che la pagina finisca lì, come si può vedere nell’immagine seguente: 

Per evitare che si crei questo “falso limite inferiore”, bisogna eliminare lo spazio bianco, oppure ridurre il suo spessore, in modo da minimizzare il numero di utenti che lo vedono sopra la piega. 

Bisogna anche stare attenti a non posizionare una linea orizzontale o una barra sopra la piega, perché anche in questo modo si ottiene un falso limite inferiore.

Per evitare questi problemi, si possono utilizzare alcune specifiche tecniche per incoraggiare gli utenti a far scorrere le pagine.

 

Layout con due o tre colonne

Si può utilizzare un layout a colonne di differenti altezze, come proposto nella figura seguente: 

Se un elemento della pagina sta a cavallo della piega (colonna sinistra nella figura), gli utenti capiscono che la pagina continua sotto la piega. Di conseguenza, se almeno una colonna copre la piega, non ci saranno problemi legati alle diverse impostazioni del computer, o all’utilizzo di mobile device: sarà sempre evidente che la pagina continua anche sotto la piega.

 

Utilizzare uno sfondo 

Un altro modo per rendere evidente che la pagina continua anche sotto la piega si ottiene creando la pagina con uno sfondo – sopra e ai lati – che contrasta con il contenuto del sito, come si può vedere nell’esempio seguente: 

In questo caso, chi guarda la pagina si aspetta che lo sfondo sia presente anche in basso e, non vedendolo, intuisce che la pagina prosegue più in basso. 

 

Aggiungere un elemento grafico che invita a far scorrere la pagina 

Sopra la piega, si può aggiungere un elemento grafico, in una posizione che sia facile da notare. I due esempi seguenti evidenziano come possono essere posizionati questi elementi grafici: in basso nella pagina, freccia sulla destra (prima immagine), e due frecce al centro (seconda immagine).

 

 

In alternativa, si può usare un elemento indipendente che appare fissato in basso nella finestra del browser dell’utente. Questo elemento grafico appare nella parte inferiore della pagina, indipendentemente dalla risoluzione dello schermo, come si può notare nell’esempio seguente (l’elemento grafico è rappresentato dall’etichetta gialla, con scritto “Scroll for More”, posizionata in basso sulla destra):

L’etichetta scompare quanto si inizia a far scorrere la pagina. Si può anche fare in modo che, cliccando sull’etichetta, la pagina scorra lentamente.

 

Link che rimandano a diversi contenuti lungo la pagina

Un altro modo di utilizzare degli elementi grafici che invitino a far scorrere la pagina è costituito dalla presenza di link che collegano a diverse posizioni lungo la pagina. Cliccando su questi link si viene automaticamente inviati alla corrispondente sezione della pagina, come per esempio avviene con i link posti nel box destro della seguente figura:  

 

Conclusioni 

Le pagine lunghe possono essere efficaci, ma devono necessariamente far sapere agli utenti che devono essere fatte scorrere. Senza questo prerequisito, sono condannate a non essere viste, anche se offrono delle valide ragioni per essere lette.