Webmastering: Webdesign
La struttura di un sito web deve essere il riflesso di una strategia. Devono essere elaborati degli scenari di navigazione per spingere l'utente a seguire un percorso all'interno del sito. Tuttavia non bisogna imbrigliare il visitatore ma lasciarlo libero di spostarsi o cambiare rubrica in ogni momento.
Percorso visuale
Alcuni studi hanno mostrato che l'occhio dell'internauta medio percorre generalmente la pagina web secondo un andamento globale a «zigzag» cominciando dall'angolo superiore sinistro, fino all'angolo inferiore destro:
La zona centrale superiore rappresenta quindi un luogo particolarmente strategico per piazzare delle informazioni.
Strutturazione di un sito web
La strutturazione di un sito web consiste nel costruire l'architettura globale del sito web organizzando le diverse informazioni. Si tratta in un primo tempo di fare l'inventario dei contenuti del sito e di raggrupparli per tematica così da costituire delle rubriche, si parla allora di rubricazione.
Una volta identificate le principali rubriche (si farà attenzione a non superare la dozzina), bisogna determinare la loro organizzazione e scomposizione in sotto rubriche. Di solito la strutturazione del sito può presentarsi sotto la forma di un'arborescenza la cui radice è la pagina iniziale:
I classici
Alcune caratteristiche si ritrovano generalmente sulla maggior parte dei siti:
Logo del sito in alto a sinistra. Un clic su questo logo porta direttamente all'home page;
Link verso la homepage su tutte la pagine del sito;
Elementi di navigazione presenti su tutte le pagine per permettere all'utente di situarsi nel sito e ritornare facilmente alla rubrica principale.
Elementi di navigazione
Gli elementi di navigazione sono degli strumenti che permettono al visitatore di sapere dove si trova nel sito, di tornare da dove è arrivato o di spostarsi nelle rubriche. Esistono diversi modo per attuare gli elementi di navigazione:
Il filo di Arianna;
La navigazione per finestre;
La mappa del sito;
Le frecce di navigazione.
Filo di Arianna
Viene detto filo di Arianna (in inglese breadcrumb), uno strumento di navigazione costituito da una serie di link gerarchizzati. Il breadcrumb rappresenta il percorso di navigazione e permette all'utente:
Di situarsi nel sito;
Di ritornare facilmente alle rubriche principali.
Un filo di Arianna si presenta come segue: Homepage > Webmastering > Webdesign > Navigazione
Un filo di Arianna ha le seguenti caratteristiche:
Link separati dal carattere «>», per simbolizzare la nozione di gerarchia;
Ultimo clic non cliccabile e in grassetto. Rappresenta la pagina sulla quale si trova il visitatore.
Il termine inglese «breadcrumb» (letteralmente «briciola di pane») fa riferimento alla favola di Grimm, «Hansel e Gretel», che racconta la storia di due bambini perduti nel bosco che fanno cadere pezzetti di pane per trovare la loro strada.
Il termine italiano «filo di Arianna» si riferisce alla mitologia greca. Arianna, innamorata di Teseo, gli offrì una matassa di filo quando si avventurò nel labirinto per uccidere il Minotauro. Srotolando la matassa ritrovò l'uscita del labirinto.
Navigazione per schede (Tab)
Le schede sono degli strumenti di navigazione utili che permettono di distinguere delle rubriche in un sito web e di passare facilmente da una all'altra. Possono essere usati anche dei codici colori per rinforzare la differenza tra le rubriche:
Mappa del sito
Una mappa del sito (in inglese sitemap) permette agli visitatori di conoscere il sito nella sua globalità in una sola occhiata. Un item «Sei qui» può inoltre permettere all'utente di situarsi nel sito.
Frecce di navigazione
La presenza di frecce di navigazione (Successivo, Precedente, Torna alla rubrica, Torna alla homepage) rende la navigazione intuitiva per l'utente.
Foto: © Pixabay.
Il documento intitolato « Webmastering: Webdesign » dal sito CCM (it.ccm.net) è reso disponibile sotto i termini della licenza Creative Commons. È possibile copiare, modificare delle copie di questa pagina, nelle condizioni previste dalla licenza, finché questa nota appaia chiaramente.