Mi sembra che siamo ormai lontani dall’idea che tutto deve essere “Above The Fold”, sopra la piega, mostrato nei 600/800 pixel prima di scrollare la pagina. Gli utenti scrollano, scendono, leggono e cliccano anche sotto la piega. Questo però non significa che quello che è sopra la piega non sia importante: è molto importante e va trattato altrettanto bene.
Tutto quello che sta sopra la piega ha maggior valore di quello che sta sotto, allo scopo di attrarre e mantenere l’attenzione del visitatore.
Questo secondo Jakob Nielsen, ma per un e-tailer, per un venditore online, è molto importante decidere cosa deve attrarre e mantenere l’attenzione del visitatore, ed accordargli il posto preciso nella pagina: dall’avviso della spedizione gratuita, ai prodotti più venduti, ad un semplice link di testo.
Qui sono presenti alcune soluzioni e va messa anche l’avvertenza che sto usando una risoluzione 1368×768 su un notebook da 15″.
Il Banner a tutto schermo: una soluzione molto adottata.
In questi due casi le immagini sono completamente Above The Fold.
WeAreTheSuperlativeConspirancy ha un luongo banner a scorrimento con i prodotti cliccabili, ma appena si scende sotto la piega ci sono tutti i contenuti del sito organizzati nei vari spazi.
Nel sito web di Stussy c’è una lunga barra grigia che attraversa la larghezza del sito con in evidenza le icone dei social networks. Ad un primo sguardo si è portati a credere che questo sia il footer della pagina. Forse con una risoluzione maggiore la barra grigia non è un problema…
In ogni caso, entrambi i siti hanno molte informazione sotto la piega, ma entrambi hanno deciso che l’informazione principale sia un messaggio concentrato e convincente con immagini di grande qualità che assomiglia molto a come le riviste di carta presentano i servizi di moda.
Il problema da affrontare con serietà è che le immagini non possono essere costruite a caso. Se ho una larghezza di 960 px non devo avere altezze imbarazzanti che portino a problemi di visualizzazione.
Ecco che si può costruire un banner con un ottimo spazio che si riempie con alcune istruzioni.
Bonobos è un famoso ecommerce che adotta questa soluzione.
Non si allunga una immagine per adattarla ad una larghezza che non ha senso.
La navigazione cambia cliccando sul menù a lato e ci si sposta tra le slides sapendo dove si va.
Il rapporto 2:1 oppure 3:1
Alcuni siti utilizzano una colonna aggiuntiva sul lato destro del banner presente in home page con lo scopo di evidenziare altre aree del sito.
Come si fa a scegliere cosa mettere in questa colonna?
Non bisognerebbe mai tirare ad indovinare. Prova a considerare questi elementi:
- chi è il mio cliente?
- come posso presentare meglio i prodotti?
- come si vendono i prodotti? Se so che i nuovi arrivi vendono immediatamente una percentuale alta nelle prime settimane di presenza, devo metterli in avanti ed in evidenza.
- c’è differenza tra la clientela maschile e femminile?
- sto investendo molto nei social media e voglio portare traffico dal sito perché ho impostato il customer care su Facebook?
Questi sono tutti elementi importanti, a cui puoi aggiungerne anche altri, che fanno parte della politica di vendita dello store online e che vanno testati e valutati con i numeri della web analytics per garantire sempre la miglior esperienza del cliente.
Above the Fold è un mito. Tuttavia, nel progetto web che deve caratterizzare la creazione del tuo ecommerce, devi mettere molta attenzione a cosa metti sopra la piega e a perché la metti. Devi essere sicuro di mandare il giusto messaggio ai tuoi consumatori. Sei un brand, sei un’industria, a cosa servono i tuoi prodotti ed i tuoi servizi. Soprattutto: non fare le cose a caso o solo per imitazione di altri siti.
***
