Il mito Above the fold: elementi di design di un sito web

above the fold

in style on the spot

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.

WeSC - WeAretheSuperlativeConspiracy

WeSC Streetwear WeAretheSuperlativeConspiracy Sweden Skateboarding

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.

Stussy - Worldwide since 1980

Stussy t shirts, jackets, jeans, hats, flannels

Nel sito 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 banner con larghezza fittizia.

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 Men's Clothes -  Pants, Shirts and Suits

Bonobos Men's Clothes - Pants, Shirts and Suits

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.

Zumiez - Skate shoes

Zumiez - Skate shoes, Snowboards, Skateboards, Guys & Girls Clothing

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.

servizi

Come possiamo aiutarti ?

Se ti interessa far crescere la tua attività online, renderla più profittevole, contattaci per una consultazione iniziale.

contattaci ora

Immagine iniziale  Above The Fold Book

Related Posts Plugin for WordPress, Blogger...

Commenti

comments

Previous post:

Next post: