Costruire schemi di navigazione orizzontali



Clusters di Genitori e Figli

Per semplificare il sistema la prima cosa da fare è tracciare una struttura chiara. Quando ci si trova a dover progettare un sito di grandi dimensioni la prima cosa da fare è individuare i clusters. L'idea è quella di raggruppare oggetti simili in schemi di navigazione insiemistici.

Un esempio di cluster paralleli di navigazione potrebbe essere:

Automobili (genitore)
  1. Automobili sportive (figlio)
  2. Automobili di lusso (figlio)
  3. Automobili da città (figlio)

I tre link sono per così dire paralleli, stanno tutti su uno stesso (sotto)livello, apparterebbero se - volessimo restare nella metafora della parentela - tutti a una stessa generazione di fratelli.

Jacob Nielsen e la navigazione a briciole di pane

Se nel sito i link vanno sempre più in profondità dando origine a più generazioni di livelli, allora è il caso di usare una struttura a briciole di pane. È il metodo che usa Yahoo!, e si presenta come una serie di passi successivi che dal primo (padre) portano fino a un qualche "pronipote". Per esempio:

Hardware (genitore) > Personal Computer (figlio) > Portatili e Palmari (nipote) > Notebook (pronipote)

Questo tipo di percorso andrebbe sempre indicato nelle pagine per favorire l'orientamento degli utenti.

Soluzioni tecniche
La navigazione a Cluster può essere presentata usando nuove tecnologie come i menu a scomparsa nelle barre di navigazione. Naturalmente ogni pagina-figlio deve avere comunque la possibilità di ritorno alla pagina-genitore. Risalire il sito a ritroso, dal fondo alla cima, dovrebbe essere facile come percorrerlo dal basso verso l'alto.

Ultimi articoli Web design

Metro, il "linguaggio di design" di Windows 8

I principi ispiratori del "linguaggio di design" utilizzato da...

Bootstrap: il framework di Twitter

Sviluppare applicazioni web sfruttando il framework con cui è stato...

Sfondi a tutta pagina con jQuery

Come avere degli sfondi a tutta pagina sui vostri siti web, per...

Grid design, dalla tipografia al web

Design coerenti e layout consistenti, usando principi di...

Art Direction e Design

Capire la differenza tra la direzione artistica di un progetto e il...

Altri articoli

Guide Web design

Guida Pubblicare un sito web

Le verifiche fondamentali da effettuare prima del lancio di un nuovo...

Guida Web Writing

Saper scrivere per il Web è una delle armi per attirare utenti e per...

Guida Accessibilità dei siti Web teorica

Questa guida è finalizzata sostanzialmente a una conoscenza e a una...

Altre guide

Newsletter @Grafica e Web Design

Ogni settimana, direttamente nella tua e-mail: guide, articoli, tutorial e FAQ su Web Design e grafica per il Web.

Iscriviti alla newsletter

Altre newsletter

Corsi in aula

Corso Google AdWords Base

25 Giugno 2012 a Milano
Disponibilità: 7 Posti

Corso Google AdWords Base

05 Giugno 2012 a Roma
Disponibilità: 7 Posti