Usabile.it

usabilità, accessibilità e interaction-design per il web

home » Articoli » Progettare l'home page

27/02/2001

Progettare l'home page

[di Maurizio Boscarol]

Sebbene le home page possano variare considerevolmente a seconda del tipo di sito, progettarle e' sempre un compito diverso dalla progettazione di pagine interne. Le differenze sono date dalle particolari funzionalita' di queste pagine. In questo articolo ci soffermeremo su alcune considerazioni che è necessario tener presente, dividendole per comodità in due categorie:

  1. funzionalità
    ovvero quali compiti assolvono le home page
  2. vincoli
    ossia i limiti che può essere necessario considerare.

Funzionalità

La prima cosa da sottolineare è probabilmente ovvia, ma è meglio non darlo per scontato: la home page è probabilmente la via di accesso principale ad un sito (anche se certo non l'unica possibile). Si troverà così a ricevere due grandi categorie di visitatori:

  1. Utenti che arrivano sul sito per la prima volta
  2. Utenti che conoscono già il sito e vi ritornano.

Gli utenti che arrivano per la prima volta si pongono per lo più 2 tipi di domande:

  • Dove sono? Cos'è questo sito e cosa offre? Ho qualche motivo per visitarlo (cioé mi propone qualcosa di interessante)?
  • Dove posso andare da qui? Come mi muoverò alla ricerca di ciò che sembra promettente o come troverò ciò che stavo cercando?

Fornire identità e orientamento sono dunque le due funzionalità principali di un'home page.

Gli utenti che ritornano sul sito lo conoscono già. E' quindi è probabile che cercheranno soprattutto:

  • News: informazioni sui più recenti aggiornamenti, sulle modifiche e sulle offerte del momento.
  • Scorciatoie e utilities: metodi meno standardizzati e più veolci per raggiungere le informazioni gradite, o accessi per utenti registrati.

Quelli che seguono sono alcuni dei principali modi per assolvere a queste funzionalità in un'home page. Non sono probabilmente gli unici, ma sono quelli che hanno dimostrato nel tempo di possedere una certa efficacia, assumendo il ruolo di convenzioni. I motivi sono tutt'altro che arbitrari, come vedremo. Di conseguenza, qualora si intendesse violare queste convenzioni, è bene farlo a ragion veduta.

1. Fornire identità

...ovvero rispondere alle domande che l'utente si pone: cosa fa questo sito? chi è l'azienda?
Un modo standard per assolvere a questa funzione è naturalmente quello di inserire il logo in bella evidenza nell'home page. Che l'azienda sia famosa o perfettamente sconosciuta, il logo serve a identificare il luogo in cui ci si trova.
Il logo andrebbe posto in alto a sinistra per un motivo molto semplice: è il punto gerarchicamente più importante della pagina. Spostarlo da lì significa rischiare di inserire qualcosa al di "sopra", e se qualcosa sta sopra il logo nella gerarchia della pagina, si possono creare dubbi e confusione all'utente. Se siete certi che non si generano confusioni, allora, in virtù di un'impaginazione particolare, il logo può anche essere posto in qualche altro luogo rilevante della pagina. In ogni caso, non vi devono essere conflitti gerarchici con altre immagini o elementi. Don Norman sostiene che "fra gli oggetti e la loro localizzazione deve esistere una corrispondenza spaziale naturale: in altre parole deve esserci una ragione per collocare gli oggetti nel luogo in cui si trovano". Ogni volta che si dispongono gli oggetti (non soltanto il logo) sulla pagina bisognerebbe tener presenti queste affermazioni.

Inserire il logo non è però tutto: siete sicuri che la vostra pagina dica chiaramente cosa offre il sito? A chi si rivolge? Perché dovrebbe essere interessante? Non datelo per scontato. Spesso un semplice logo non è affatto sufficiente.
Uno dei sistemi utilizzati a questo scopo è quello di inserire negli immediati dintorni del logo un piccolo slogan, una frase esplicativa che introduca in maniera chiara e accattivante il servizio. E' importante però evitare gli slogan magniloquenti e vuoti: si deve soprattutto capire!

[Usabile.it ha scelto un'altra strada. Nella prima versione dell'home page abbiamo inserito nella colonna a destra una serie di risposte alle domande esplicite "di cosa si parla" e "a chi è rivolto il sito". Quest'ultima categoria permane nell'attuale versione, mentre il "di cosa si parla", dopo qualche mese è stato sostituito da un "abbiamo parlato di", seguito da una serie di link diretti ad alcuni articoli. In questo modo abbiamo anche fornito una scorciatoia a utenti abituali (che così non devono necessariamente passare per la pagina dell'indice per recuperare tutti i vecchi articoli), mantenendo il più possibile in evidenza il range di argomenti affrontati.

Non vi è una scelta ottima: avremmo potuto scrivere vicino al logo "argomenti dal mondo della web usability", o qualcosa di simile. Ma poiché al momento della pubblicazione del sito l'argomento era solo emergente, qualcuno avrebbe potuto non sapere cosa fosse la web usability. Fornire la chiara indicazione degli argomenti che avremmo affrontato è parsa la scelta migliore.

Tutto semplice? Anzi... alcuni utenti ci hanno segnalato un problema di... usabilità! La barra a destra è ormai convenzionalmente considerata barra di link, al pari delle barre a sinistra. Di conseguenza questi utenti tentavano di cliccare sugli argomenti, benché privi di sottolineatura e colorati in nero come del normale testo (evidentemente non tutti i link devono essere blu e sottolineati per essere percepiti come tali...). La somiglianza con barre simili di altri siti era per alcuni un segnale molto forte.

La soluzione (senza procedere ad un oneroso redesign...) è stata quella di attendere di avere qualche articolo in archivio e passare a fornire una scorciatoia agli articoli in luogo del "si parla di", avvicinando così la funzione della barra a destra alle aspettative degli utenti (in questa maniera si marca anche una differenza con la tabella sottostante, non linkata e contenente solo un'indicazione delle categorie di utenti cui ci rivolgiamo).]

La verità quindi è che l'intera pagina, nel suo insieme, deve presentare informazioni semplici ed efficaci sull'identità del sito. Ricordatevi di non dare per scontato che l'utente vi conosca o che sappia cosa offrite: l'home page deve indicarlo senza lasciare dubbi.

2. Orientamento e navigazione

L'home page deve rispondere anche alle domande: dove posso andare? cosa posso trovare? Come faccio per arrivarci? Questa funzionalità viene assolta generalmente in tre modi (che sono comunque molto più complicati di quanto non si possa esporre qui...):

  1. con la presenza di chiari menu di navigazione. I menu dovrebbero utilizzare etichette verbali che indichino il più esattamente possibile cosa si trova al di là del link. Non fidatevi di quelle che vi possono sembrare geniali metafore se prima non ne avrete valutato la comprensibilità. Allo stesso modo, l'uso di icone senza etichette verbali non è consigliabile, perché non vi è accordo sul significato della grossa maggioranza delle icone... Ricordate anche che gli strumenti di navigazione principale sono al secondo posto nella gerarchia d'importanza degli elementi di una pagina. La scelta di collocarli in una barra orizzontale sotto al logo o nella colonna a sinistra riflette questa gerarchia. I cambiamenti sono possibili, ma tenete conto del messaggio complessivo che la vostra impaginazione offre.
  2. con directory che raccolgano le sezioni principali del sito. Con un solo click potete consentire all'utente di entrare in una sezione che gli interessa particolarmente, dove potrà effettuare scelte più precise.
  3. attraverso funzioni di ricerca testuali. Tipicamente, la casellina di ricerca interna al sito, utile soprattutto se il vostro sito ha molte pagine.

3. Che c'è di nuovo? News e offerte.

In molti casi (non sempre) l'home page è anche la pagina che presenta le novità. Nel corpo della pagina, gerarchicamente in posizione inferiore rispetto a logo e navigazione, prevedete uno spazio dove presentare le novità del giorno, della settimana o del mese... E, chi lo sa, potreste aver bisogno di proporre servizi speciali, offerte, partnership. Prevedete uno spazio per tutto questo fin dal principio. Ricordate di inserire una data accanto alle novità, perché non sempre chi arriva sul vostro sito sa con quale frequenza lo aggiornate, ed è spiacevole approfondire una novità per scoprire poi, in marzo, che è riferita alle feste natalizie (naturalmente è consigliabile aggiornare il sito più frequentemente di ogni tre mesi...).

4. Scorciatoie o altre utilities per utenti abituali

Abbiamo già discusso di una possibile scorciatoia parlando dell'home page di usabile.it. Le scorciatoie possono avere diverse forme, ma si tratta per lo più di link ridondanti o di accessi diretti a zone del sito. Tra queste ultime vi sono anche le funzionalità di accesso per utenti registrati. Se il sito le prevede, è bene inserire fin dall'home page il form per l'inserimento di password e nome utente. Alcuni siti invece utilizzano in home page un link ad una pagina di ingresso vera e propria. Ma perché aggiungere un link in più? Questo genere di funzionalità non occupa molto spazio. Se la inserite direttamente nella home page, gli utenti registrati ve ne saranno grati.

 

Vincoli

Progettare un' home page non significa soltanto pensare a funzionalità e facilitazioni per gli utenti. Vi sono spesso delle altre scelte da compiere, alcune delle quali sono a volte dei vincoli in sé, come i banner. In altri casi si tratta di scelte di fondo, per effettuare le quali bisogna avere coscienza di alcuni vincoli cognitivi (per evitare di sovraccaricare l'attenzione dell'utente) e tecnologici (come i vincoli di peso in kilobyte dei documenti, collegati alla scarsa ampiezza della banda passante).

I banner

Sebbene la percentuale di click dei banner sia costantemente in calo dal momento della nascita del web a oggi, e alcune ricerche abbiano dimostrato che gli utenti hanno ormai imparato a ignorarli, per molti siti i banner sono ancora una delle fonti principali di guadagno. Vi sono tre accortezze da tenere presenti a proposito dei banner in home page:

  1. Al momento del design prevedete già lo spazio per i banner, evitando che appaiano posticci e mal integrati nella pagina.
  2. Non inseriteli MAI prima del logo. Dà alla pagina un 'impressione di estrema commercialità, nel senso spregiativo del termine. Sembra, insomma, che vi importi molto di più il banner del vostro sito. Il che forse sarà anche vero, ma non è una buona idea renderlo così esplicito...
  3. Evitate gli eccessi. Un banner è più che sufficiente. Se ne dovete proprio inserire degli altri, è opportuno che si differenzino. Spesso i banner di piccole dimensioni sono comunque efficaci, e vengono da alcuni siti inseriti in una delle colonne ai lati della pagina. Non sono un esperto di pubblicità, e non so quanto rendano. Certo l'effetto sull'utente di una pagina che sembra un albero di natale lampeggiante non è dei migliori. Se potete, prevedete una o due postazioni fisse per i banner, e ruotate i diversi sponsor (anche se questi il più delle volte preferiscono la presenza costante). In questo modo l'utente sarà attratto dal non trovare sempre lo stesso banner in quella posizione. Valutate comunque altre forme di sponsorizzazione, come le partnership o gli annunci testuali.

In generale, comunque, è bene ricordare che le animazioni (tutte, non solo i banner) sono dei distrattori! Usatele con parsimonia, si tratti di Gif animate o di moduli in Flash, perché disturbano l'attenzione dell'utente invece di favorirla e interagiscono negativamente con i contenuti testuali.

Intro animate e "pagine copertina"

Le intro animate sono moduli, solitamente in Flash, di animazione vettoriale multimediale, usate per introdurre l'ingresso al sito vero e proprio. A volte è prevista la possibilità di saltarle, a volte no (e in tal caso al web designer che ha omesso questa possibilità fischieranno le orecchie... soprattutto se per l'utente non è la prima visita al sito).

Le pagine copertina sono quelle costituite da un'unica grande immagine, che una volta caricata ha l'unica funzione di essere un link alla home-page propriamente detta.

Hanno entrambe lo stesso problema: sono lente da caricare e allontanano la pagina vera e propria. Perché utilizzarle, allora? Per motivi di immagine, si dice alle volte. Per dare un'esperienza estetica o multimediale. Siete sicuri che l'utente medio (che non ha alcun interesse a intraprendere il mestiere di web designer) gradisca questi rallentamenti privi di funzionalità?
Le stesse norme di usabilità della Macromedia sconsigliano vivamente l'utilizzo delle intro animate in Flash. Le intro possono essere linkate in home page, così se qualcuno ne è appassionato le potrà scaricare come libera scelta, invece di imporle anche a chi non ne vuole sapere (o non ha il plug-in e non intende scaricarselo).
Per le "pagine copertina" invece, nessuna speranza: vanno abolite, ora e definitivamente. Se volete mostrare la vostra arte, progettate una sezione portfolio, e sfogatevi là...

Problemi di peso

Le home page sono pagine che si devono scaricare velocemente. Se possibile (ma spesso non lo è...) più in fretta delle pagine interne, dato che devono 'agganciare' l'attenzione dell'utente. Generalmente è difficile che siano più veloci, perché le pagine interne si possono a volte avvantaggiare dal mancato scaricamento di alcuni file grafici in comune con la home, che in tal caso sono già presenti nella cache memory del browser. A maggior ragione, mantenete il peso complessivo del codice html più i file grafici associati entro i 50Kbyte (se possibile ancor meno), limite considerato massimo per garantire un tempo di scaricamento ragionevole.

Queste considerazioni sono delle linee guida, e come tali vanno usate senza eccessiva rigidità. Il loro scopo è quello di porre l'attenzione sui motivi che stanno alla base delle scelte che si fanno.
E' bene ricordare che ogni sito ha i suoi obiettivi: definiteli chiaramente. Se, in base agli obiettivi, ritenete di avere una ragione valida per violare queste linee-guida, be', allora fatelo. Ma valutate attentamente i pro e i contro: accertatevi (con dei test di usabilità, per esempio) che anche i vostri utenti gradiscano queste modifiche!

Articoli correlati:

torna su Torna su