10 linee guida per l’Homepage

Jakob Nielsen ci vuole ingolosire e dedica la sua ultima AlertBox a 10 linee guida [nuova finestra] che l’Homepage non deve mancare. Si tratta di un estratto delle ben piĆ¹ corpose 113 linee guida del suo ultimo manuale, Homepage Usability.

Tra i punti presentati ne selezionamo 3, quelli a nostro avviso fondamentali:

  1. scrivere un titolo della pagina altamente significativo
  2. includere una casella di ricerca ben visibile e sufficientemente ampia
  3. scegliere nomi rilevanti per i link e differenziarli tra loro

Homepage Usability – 50 Websites Deconstructed

La scelta di Jakob Nielsen e Marie Tahir di basare la loro analisi sulla Homepage dei siti ha il vantaggio di essere chiara e decisamente pratica: hanno sottolineato con il pennarello rosso cosa va e cosa non va dal punto di vista dell’usabilità.

Argomenti

A ciascun sito sono dedicate quattro pagine in cui sono riportati:

  • Lo screenshot della Homepage
  • L’analisi del titolo della finestra, dell’Url e dello spazio occupato da testo, banner e grafica
  • Le debolezze e (se ce ne sono) i punti di forza dal punto di vista dell’usabilità e accessibilità

Il manuale si apre con due capitoli introduttivi, in cui è possibile trovare:

  • Una serie con più di 100 linee guida da considerare nel progettare la Homepage, riguardanti il linguaggio da usare, la navigazione, la struttura dei link, le funzionalità di ricerca, l’uso della grafica e delle animazioni
  • Statistiche, relative ai 50 siti analizzati, concernenti il tipo di layout più comune, la dimensione di pagina media, la disposizione dei menu e le scelte di design

Pro

  • Il primo libro che analizza così in profondità l’usabilità dell’Homepage
  • Le linee guida sono applicabili anche al resto della struttura del sito
  • L’analisi è divisa punto per punto e si legge molto agevolmente
  • La teoria è poca, molti sono invece gli esempi presentati

Contro

  • Jakob Nielsen tende sempre ad esagerare con il numero di linee guida da applicare

Informazioni

Homepage Usability – 50 siti web analizzati (titolo originale Homepage Usability – 50 Websites Deconstructed) ¤ Di Jakob Nielsen, Marie Tahir ¤ Edito da Apogeo (editore originale New Riders) ¤ Prezzo 45.00 dollari ¤ 320 pagine ¤ Pubblicato ad Aprile 2002

La Home Page

Questo articolo fa parte di un corso gratuito di design web ospitato su questo sito.

Splash Screen

La pagina di benvenuto, che spesso ci accoglie prima di entrare in un sito, è la splash screen.
Se consideriamo che l’utente ha fretta di ottenere le notizie e che la splash screen non permette la navigazione, è difficile capirne la funzionalità.
Consigliamo, quindi, di non crearla per un sito facile e immediato che si rivolge ad un ampio pubblico.

La splash screen è più appropriata per un pubblico di esperti – magari di designer – per i quali può essere utile sottolineare le proprie capacità grafiche e tecniche.

Un altro uso è quello di informare l’utente riguardo i contenuti delle pagine prima che entri, come succede per i siti per adulti.

Regole basilari per la realizzazione della splash screen:

  1. date la possibilità di saltare l’introduzione con lo “skip intro”
  2. rendete la splash screen informativa sui contenuti del sito, con testi e immagini esplicativi
  3. non cadete nella tentazione di una grafica ridondante e animata, rallenta la connessione al sito e non è strettamente necessaria per attirare l’utente
  4. fate in modo che sia solo una breve introduzione, lunga circa 5 secondi, passati in quali automaticamente si entra nella home del sito.
La Home Page

Non si è certi in quale punto del sito entri l’utente, ma è molto più probabile che cominci la navigazione dalla home e questa deve rispondere a tutte le aspettative (riguardo l’home page Jakob Nielsen e Marie Tahir hanno scritto un manuale da tenere sempre a portata di mano).

Cosa non deve mancare in una home

  1. nome del sito, logo
  2. slogan o titolo che comunica immediatamente l’area d’interesse del sito
  3. menu di navigazione
  4. la funzione di ricerca
  5. le novità o promozioni

Tipi di home

La home deve immediatamente comunicare il contenuto del sito, per questo è importante definire la struttura di home più adatta. A seconda che il sito sia prevalentemente d’informazione o sia ricco di servizi, la home presenta una disposizione delle informazioni e della navigazione diversa.

  • Home a menu: è una lista di collegamenti alle pagine interne o mappe grafiche
  • Home informativa: spazio alle informazioni più recenti (indicato per un sito di news) con collegamenti agli approfondimenti e alle altre notizie
  • Home a percorsi: divisa in aree d’interesse, che permettono all’utente di scegliere il tema o il servizio da visitare (indicato per siti grandi o con contenuti molto diversi)

Divisione dello spazio

Le diverse funzioni delle pagine web – navigazione, pubblicità, contenuti, news ecc. – occupano lo spazio dello schermo secondo le necessità.
Considerando lo spazio della navigazione e della pubblicità come un unico campo, in home page si dovrebbe dedicare almeno il 30% della pagina ai contenuti.
Nelle pagine interne diminuisce l’esigenza di promozione e si dà più spazio ai contenuti: almeno il 60%.

La navigazione

Molti utenti prediligono cercare le informazioni con la funzione di ricerca, che dev’essere sempre presente in tutte le pagine del sito, ma altrettanti preferiscono navigare. Guidate l’utente per far capire dov’è, dove è stato e dove può andare.

Dove sono:
  • nome e logo del sito (nelle pagine interne è link alla home),
  • mostrare parte della struttura del sito (come fosse una mappa con in evidenza la sezione che si sta visitando),
  • nel <title> scrivere il contenuto, la pagina e il sito (in quest’ordine)
Dove sono stato:
  • link alle pagine visitate hanno un colore diverso da quelle non viste
Dove posso andare:
  • directory di navigazione,
  • link,
  • collegamenti fissi (pagine precedente e successiva; meglio se si anticipa sotto il collegamento il contenuto delle pagine [nuova finestra])

Ampiezza del sito e profondità

  • Ampiezza: collegamenti alle diverse sezioni del sito
  • Profondità: navigazione in una sezione del sito, indicando i vari livelli. La navigazione cosiddetta a “briciole di pane” è la più usata per indicare la profondità di una sezione fornendo un elenco orizzontale dei diversi livelli: home » pagina di 2° livello » pagina di 3° livello » pagina di 4° livello

Consigliamo di indicare sia le sezioni del sito, sia i livelli della sezione che si sta visitando, offrendo contemporaneamente una navigazione in ampiezza e in profondità.

I frame

Pro:
la separazione del contenuto dalla navigazione fornisce un facile accesso alle informazioni del sito. Tecnicamente i frame semplificano la costruzione della pagina, poiché i contenuti posso essere aggiornati senza compromettere la grafica e la navigazione.

Contro:
i frame sono nemici dell’usabilità, infatti una pagina a frame non è stampata correttamente e non è indicizzata (letta per essere catalogata nei risultati della ricerca) dai maggiori motori di ricerca. È anche impossibile aggiungere la pagina nei “preferiti” del browser.

Per ovviare a questi limiti è fondamentale creare una versione del sito anche senza frame.