Analisi e struttura di layout (parte prima: l’home page)

21 Maggio 2012

Web

Indice Contenuti

Il layout di home page

Dopo alcuni articoli dedicati alla comunicazione più prettamente social, con questo nuovo articolo voglio provare ad analizzare e  descrivere gli approcci corretti alla definizione del layout di un web site. Per qualche verso mi riaggancio ad un precedente articolo dal titolo “Alcune cose fondamentali da sapere sui siti internet” con la volontà di aggiungere alla questione un’analisi più prettamente tecnica, dopo aver affrontato per l’appunto questioni più concettuali e di contenuto.

Forse banalizzando, o forse no, direi che strutturare una pagina web è un po’ come comporre un puzzle e sebbene esistano vari approcci alla definizione di un layout di pagina, non è detto che alcuni possono essere migliori di altri.

Per gran parte delle pagine di un sito web internet solitamente viene utilizzato lo stesso modello di layout, fatta eccezione per la home page e per alcune pagine di contenuti specifici (es: form richieste informazioni, ecc …).

Il layout di home page maggiormente in voga in questo periodo e a mio avviso estremamente valido dal punto di vista della comunicazione, è composto solitamente da sei elementi principali disposti in un ordine ben preciso. Ciò non toglie però che ognuno possa comunque liberare la propria creatività con elementi grafici anche “fantasiosi”, tenendo comunque sempre presente lo scopo che vogliamo raggiungere con il nostro sito internet.

Vediamo quindi, con questo primo articolo, quali sono gli elementi principali che compongono il layout di home page di cui parlo e che potete vedere rappresentato dallo schema qui sotto:

Schema layout homepage sito web
1

HEADER

In qualunque pagina si trovino i visitatori devono poter sapere sempre, con assoluta certezza, che sito stanno visitando e debbono potersi muovere in modo agevole all’interno di esso. A tale riguardo, l’header gioca ovviamente un ruolo fondamentale. Dare particolare rilevanza al logo, al brand o altri elementi grafici distintivi è un passo fondamentale. Accanto ad esso, o comunque inglobato nell’header, trova di norma spazio il cosiddetto “menu” o “barra di navigazione”.

Lo scopo della barra di navigazione è ovviamente quello di agevolare i nostri visitatori nella consultazione dei contenuti desiderati o aiutarli a consultare a fondo le singole sezioni che compongono il nostro progetto. Questo ovviamente presuppone che tutte le informazioni vengano organizzare in maniera logica a monte, prima ancora di pensare a come rappresentarle graficamente. Una volta definita la struttura dei contenuti sarà necessario decidere quali “posizionare” nella barra e a quali eventualmente dedicare una posizione di maggior prestigio, come ad esempio badge, banner, ecc …

Non dimentichiamoci di porre in risalto anche l’accesso ai social network e profili vari collegati alla nostra azienda e l’eventuale selettore per il cambio della lingua di consultazione.

2

MAIN CLAIM

Con “Main Claim” solitamente tendo ad identificare l’area del contenuto emozionale e comunicativo di maggior risalto. Spesso quest’area viene utilizzata per dar risalto a case history, campagne di comunicazione stagionali, eventi o prodotti ai quali dedicare particolare attenzione.

Tra gli aspetti importanti, da tener maggiormente presente, vorrei sottolineare l’efficacia dei contenuti da destinare all’area “Main Claim” e il “peso” che questi i contenuti avranno. Considerando una dimensione standard in larghezza di 960px per un altezza variabile, ma comunque solitamente compresa tra i 200 e i 400px, le immagini che andremo a destinare a tale area rischiano di avere un size (peso) di alcune centinaia di Kb e nuocere così alla fluidità della consultazione. Lavorate quindi al fine di ottimizzare il peso di ogni singola immagine trovando il giusto compromesso tra la qualità della risoluzione e il loro “peso” in Kb. Inoltre considerate sempre che un messaggio debole o non efficace, se comunicato in uno spazio comunque sia “importante”, amplificherà di conseguenza la sua inefficacia e null’altro!

3

MAIN BOX

Se il nostro sito è ricco d’informazioni e alcune di esse meritano un particolare risalto, l’area denominata “Main Box” è il luogo ideale. Molto spesso ulteriormente suddivisa in 3 o 4 aree visive, nella “Main Box” possono trovar spazio gli eventi in primo piano, il focus su un prodotto di punta o “nuovo nato”, l’area di iscrizione al nostro servizio di newsletter, l’area di accesso al file sharing (area riservata), ecc
4

SUB BOX

Se il nostro sito è davvero così ricco d’informazioni, forse lo spazio dei “Main Box” non sarà sufficiente. A questo punto potrebbe rivelarsi utile “duplicare” lo spazio denominato Main Box, e creare ulteriori 3 o 4 aree visive nuove sottostanti. Naturalmente è bene definire prima quali contenuti destinare all’area “Main Box” e quali alla “Sub Box”. Massima libertà nella suddivisione degli spazi dove, con formula quasi calcistica, direi che si potrebbero utilizzare schemi quali: 4+3 (4 main e 3 sub) oppure 4+4, 3+4, 2+4, ecc
5

FOOTER

Informazioni relative al contenuto delle pagine come copyright, data ultimo aggiornamento, info privacy, indirizzo e dati societari e indirizzo di posta elettronica, per quanto necessarie, non giocano un ruolo determinate per la maggior parte dei visitatori del nostro sito. Per questa ragione sarà possibile relegarle nella sezione denominata “Footer”.
6

DEEP SITE LINKS

Non sempre presente, l’area che qui nomino per convenzione “Deep Site Links” risulta invece a mio avviso molto utile laddove la struttura e di conseguenza i contenuti del nostro sito, siano effettivamente molto articolati. Esplicitare quindi i link sotto forma di sitemap, oltre che agevolare gli utenti nella consultazione delle pagine, comporta indubbiamente vantaggi anche per aspetti quali il SEO e l’indicizzazione presso i motori di ricerca.

Chiudo questa mia analisi con una considerazione non secondaria; la visibilità dei contenuti nella cosiddetta “No Scroll Area”. Come da schema riportato nell’articolo, dobbiamo sempre considerare le possibili dimensioni monitor in uso agli utenti. Stando ad alcuni dati statistici reperibili in rete, pare che tra le principali risoluzioni monitor la facciano da padrone:

  1. 1366×768 (15%)
  2. 1024×768 (14%)
  3. 1280×800 (12%)

 

Se consideriamo lo spazio “sottratto” dalle barre funzione del browser (toolbar) ed altri possibili plugin installati dall’utente, a nostra disposizione resta gran poco; oserei dire uno spazio compreso tra i 560 px (linea rossa A) e i 660 px (linea rossa B). Questo ovviamente senza che l’utente intervenga con lo scroll della pagina, da qui appunto “no scroll area”.

Quindi se desideriamo che il nostro messaggio arrivi con quasi assoluta certezza, alla maggior parte dei nostri clienti o possibili tali, abituiamoci a strutturare il nostro layout tenendo presente questa piccola ma fondamentale regola.