Web Design
navigazionale:
SECONDA UNITA’
Tipologie navigazionali
Non tutti i meccanismi navigazionali sono uguali e pertanto devono
essere utilizzati a seconda di quelle caratteristiche specifiche che
abbiamo già analizzato.
Ad esempio, le barre e le etichette sono spesso utilizzate come
sistemi di navigazione principale, mentre meccanismi navigazionali
sviluppati verticalmente funzionano come sistemi secondari, per una
navigazione locale.
Per scegliere adeguatamente un meccanismo navigazionale bisogna
considerare le diverse categorie navigazionali, le loro funzioni e le
differenti tipologie di pagine tra le quali creare i collegamenti.
Categorie navigazionali
La maggior parte dei sistemi navigazionali rientrano in tre categorie
principali:
1) Strutturale
Collega una pagina ad un’altra seguendo la gerarchia generale del
sito.
2) Associativa
Collega tra loro le pagine con contenuti simili, indipendentemente
dalla loro posizione nella struttura del sito.
3) Utilitaria
Collega quelle pagine con una stessa funzione, che facilitano gli
utenti a utilizzare il sito stesso. Queste particolari pagine possono
anche trovarsi al di fuori della gerarchia principale del sito e la loro
relazione reciproca è data esclusivamente dalla loro funzione.
Schema delle tre principali categorie navigazionali
1) Navigazione strutturale
La navigazione strutturale segue l’organizzazione interna di un sito
web. Una navigazione di questo tipo permette alla persone di
spostarsi da un contenuto ad un altro solo seguendo quella precisa
struttura gerarchica, secondo la quale gli elementi del sito sono stati
organizzati.
La navigazione strutturale può essere suddivisa in due sotto-
categorie:
Navigazione principale
Navigazione locale
a) Navigazione principale (main-navigation)
La navigazione principale serve a indicare generalmente le pagine o i
contenuti principali di un sito: ad esempio quelle pagine che
dipendono direttamente dalla home page.
I collegamenti presenti in un meccanismo di navigazione principale
dovrebbero pertanto evidenziare le tematiche e i contenuti principali
di tutto il sito e condurre l’utente a questi, secondo la gerarchia
prestabilita.
b) Navigazione locale (local navigation o page-level navigation)
Una navigazione di questo tipo permette l’accesso ai contenuti
secondari di un sito, non raggiungibili direttamente attraverso gli
elementi della navigazione principale.
Il termine “locale” oppure “secondario” si riferisce ad una serie di
elementi contenuti all’interno di una directory, in una determinata
pagina.
Come già accennato nel modulo sul web design grafico, le diverse
categorie navigazionali con i relativi meccanismi hanno spesso una
specifica posizione nelle pagine, determinata proprio dalla loro
funzione.
Esempio di posizionamento tipico degli elementi della navigazione locale e principale in
una pagina.
2) Navigazione associativa
La navigazione associativa crea importanti connessioni attraverso i
diversi livelli gerarchici delle struttura di un sito. Questa tipologia
permette, senza abbandonare l’attuale contenuto, di accedere subito
ad un altro.
Esistono tre tipologie di navigazione associativa:
Navigazione contestuale
Link veloci
Footer navigation
a) Navigazione contestuale
Questo tipo di navigazione può variare e per questo viene anche
definita come “situazionale”. Sebbene i collegamenti di questo tipo
portino a pagine simili, su uno stesso livello gerarchico, possono
anche condurre a nuove aree di contenuto o a siti diversi.
Generalmente gli elementi per la navigazione contestuale sono
posizionati in prossimità del contenuto di una pagina per creare una
forte connessione tra il significato di un testo e le pagine a questo
collegate.
Gli elementi di navigazione contestuale possono essere organizzati in
una pagina, in due modi principali:
Navigazione interna (embedded navigation)
In questo caso gli elementi per la navigazione sono inseriti
internamente al testo.
Link collegati (related links)
In questo caso gli elementi per la navigazione sono collocati alla fine
o a fianco dei contenuti della pagina.
Schematizzazione della possibile disposizione degli elementi di navigazione contestuale
b) Link veloci (quick links o short cuts)
Questa tipologia di navigazione fornisce l’accesso a quei contenuti
che non possono essere rappresentati nella navigazione principale. I
link veloci, al contrario della navigazione contestuale, sono
contestuali per l’intero sito, non per una sola pagina.
Questi link servono generalmente per mettere in evidenza quelle aree
del sito che vengono visitate di frequente oppure per “promuovere”
quei contenuti altrimenti poco accessibili nella struttura generale del
sito.
I link veloci spesso compaiono in alto o su un lato delle pagine.
Possono trovarsi anche nella home page in cui appaiono spesso situati
in un blocco navigazionale indipendente, spesso costituito da un
meccanismo di menù a tendina.
Es.
c) Footer Navigation
Si trova posizionata, così come il footer nel layout di una pagina, in
fondo alla pagina.
Una navigazione di questo tipo è solitamente rappresentata attraverso
dei link testuali che permettono l’accesso a pagine singole isolate
(dead end), senza ulteriori sotto-contenuti.
Una footer navigation contiene alcune informazioni supplementari
non pertinenti al tema principale del sito, come i dati relativi, ad
esempio, al copyright e alle condizioni d’uso.
3) Navigazione utilitaria
Questo tipo di navigazione collega gli strumenti e gli elementi che
aiutano gli utenti ad usare il sito.
Queste pagine non fanno parte della gerarchia dei contenuti principali
di un sito. Ad esempio, un collegamento ad un modulo di ricerca non
fa parte dei sistemi di navigazione principale e locale ma rappresenta
solamente una delle funzioni di un sito.
Gli elementi di navigazione utilitaria appaiono solitamente a fianco
dei meccanismi di navigazione principale dei siti web.
Possiamo distinguere diverse tipologie di navigazione utilitaria:
Navigazione extra-sito
Toolbox
Collegamenti attraverso i simboli
Selettori di lingua
Navigazione intra-sito
Navigazione extra-sito
Una navigazione di questo tipo crea un collegamento a quei siti web
che sono collegati al sito di partenza.
In molti casi gli elementi navigazionali di questo tipo vengono
utilizzati per collegare quei siti web appartenenti ad un’unica
compagnia, come evidenziato nell’esempio seguente:
Gli elementi necessari a questo tipo di navigazione si trovano
generalmente posizionati a destra, nella parte alta delle pagine.
Toolbox
Un sistema di questo tipo riunisce tutte quelle opzioni adottate da un
sito web per rendere possibili determinate operazioni.
Ad esempio nella categoria “toolboxes” rientrano quei link che
conducono a contenuti specifici ma soprattutto a pagine funzionali.
Ad esempio, dalla home page, una toolbar può stabilire un
collegamento ad un motore di ricerca, un modulo per la registrazione
di dati o un negozio online.
Collegamenti attraverso i simboli
La maggior parte dei siti web presenta un simbolo distintivo posto
ben in evidenza nella home page.
Molto spesso ai simboli in questione viene associato un collegamento
funzionale che permette attraverso un semplice click di tornare in
qualsiasi momento alla pagina principale del sito. In diversi casi è
possibile che tale funzionalità di un sito sia indicata esplicitamente
sotto lo stesso simbolo presente nella home page.
Data la funzionalità primaria di questo collegamento, diversi siti
hanno inserito tali simboli nel meccanismo di navigazione principale
come nell’esempio seguente.
Esempio di un simbolo di collegamento, integrato nella navigazione principale
Selettori della lingua
Siti web di grande diffusione presentano sempre funzionalità
navigazionali di questo tipo.
Attraverso collegamenti utilitari di questo tipo gli utenti possono
passare, con un semplice click, a versioni di un sito in lingue diverse.
Navigazione interna alle pagine (anchor links)
Questa funzionalità navigazionale permette, con un semplice click
sull’apposito collegamento, di ritornare dal fondo di una pagina,
qualora questa fosse molto estesa, alla sezione superiore della stessa e
viceversa.
Tipologie di pagine
Le tipologie navigazionali e le tipologie di pagine sono strettamente
legati. Una data struttura navigazionale può ad esempio avere due
differenti finalità su tipologie di pagine diverse.
Ad esempio, gli utenti potrebbero aspettarsi una navigazione
contestuale sulla home page che li conduca verso le pagine interne al
sito.
Tuttavia i collegamenti presenti in una pagina posizionata in fondo
alla struttura gerarchica di un sito potrebbero condurre l’utente a
contenuti completamente diversi oppure ad altri siti web.
Le tipologie di navigazione di un sito possono infatti essere comprese
attraverso l’osservazione delle pagine in cui compaiono.
Ogni pagina di un sito web dovrebbe avere una funzione specifica e
proprio per questo motivo è importante stabilire fin dal principio il
suo posizionamento nel sito, attraverso una tipologia e dei
meccanismi navigazionali appropriati.
Inoltre l’obiettivo e la funzionalità di ogni pagina dovrebbe sempre
risultare chiara per l’utente.
Possiamo distinguere tre categorie principali di pagine:
(1) Pagine navigazionali
L’obiettivo di queste pagine è quello di portare le persone ai
contenuti che stanno cercando. A questa categoria, come vedremo più
avanti, appartengono le home page, le pagine di “atterraggio”
(landing page) e le pagine galleria.
(2) Pagine di contenuto
Le pagine di questo tipo contengono I contenuti principali che sono
alla base dell’esistenza stessa di un sito: articoli, pagine di prodotti
ecc.
(3) Pagine funzionali
Le pagine funzionali permettono alla persone di eseguire delle
operazioni specifiche, come ad esempio effettuare una ricerca in linea
oppure compilare dei moduli online o semplicemente controllare la
posta elettronica.
Tutte le tipologie fanno riferimento allo scopo primario delle
pagine all’interno della struttura di un sito.
(1) Pagine Navigazionali
Le pagine navigazionali servono a condurre gli utenti alle pagine
funzionali e alle pagine di contenuto.
Sono pertanto delle pagine fondamentali per la ricerca primaria delle
informazioni, non appena giunti in un determinato sito web.
Tali pagine giocano un ruolo importante nella descrizione delle
principali finalità di un sito e servono a supportare le diverse
modalità di ricerca interne.
a) Homepage
Le home page collegano i visitatori alle aree chiave di ogni sito web.
In queste pagine è importante mostrare subito gli ulteriori livelli
navigazionali a cui si può accedere per raggiungere i contenuti.
Un’organizzazione di questo tipo permette, attraverso un’unica
pagina di accesso, di aver immediatamente chiare le varie aree del
sito e i percorsi necessari per raggiungerle.
L’home page presentata nell’esempio seguente è configurata come un
unico portale d’accesso a tutte le pagine e altri siti dipendenti dalla
stessa università.
Home page dell’Università La Sapienza (uniroma1.it)
b) Pagine di atterraggio
Le cosiddette pagine di atterraggio offrono una visuale complessiva
delle principali categorie di un sito. Queste molto spesso
corrispondono anche alle opzioni di navigazione principali e possono
ad esempio costituire le sezioni principali di un giornale, oppure i
dipartimenti di un negozio online.
Così come le home page offrono una visuale generale dell’intera
struttura di un sito così le pagine di atterraggio forniscono una
schematizzazione del contenuto di una data sezione.
In molti casi infatti gli utenti possono raggiungere i contenuti di un
sito nei modi più disparati, attraverso la lista “preferiti” del browser,
oppure attraverso dei motori generici di ricerca. Pertanto in molti casi
gli utenti, per raggiungere i contenuti desiderati, non passano
necessariamente attraverso la home page dei siti. In questo caso gli
utenti arrivano proprio nelle pagine di atterraggio, interne al sito ma
dotate sia di meccanismi per la navigazione principale che locale.
Con un meccanismo navigazionale come quello dei menù dinamici è
anche possibile omettere completamente le pagine di atterraggio dal
momento che è possibile portare i visitatori direttamente alle pagine
corrispondenti alle opzioni del menù.
Tuttavia omettendo le pagine navigazionali sarà poi impossibile
creare dei collegamenti diretti a determinate pagine, dal momento che
sarà possibile arrivare a tali contenuti solamente tramite il
meccanismo progettato.
c) Pagine galleria
Le pagine di questo tipo sono simili per funzione alle pagine di
atterraggio ma forniscono una panoramica su uno specifico gruppo di
elementi, contenuti o prodotti, invece di contenere semplicemente
quei collegamenti diretti alle differenti sezioni del sito.
Ovviamente pagine di questo tipo sono fondamentali nella
strutturazioni dei siti di carattere commerciale.
Le pagine galleria non solo permettono agli utenti di navigare verso
un preciso contenuto o prodotto: contengono infatti delle
fondamentali informazioni d’acquisto e permettono i visitatori di
comparare i diversi prodotti per poi dirigersi verso la pagina specifica
del prodotto scelto, per ottenere informazioni più dettagliate.
(1) Esempio di pagina galleria: dalla pagina galleria notebooks è possibile poi
visualizzare (2) la pagina specifica relativa all’elemento selezionato.
(2)
d) Pagine del risultato di ricerca
Come suggerito dalla nomenclatura stessa, le pagine di questo tipo,
pur apparendo simili alle pagine galleria, vengono create sulla base
delle parole chiave inserite dagli utenti.
L’insieme dei collegamenti derivanti dalla ricerca attraverso keyword
può tuttavia apparire secondo criteri diversi: sotto forma di “galleria”
di elementi oppure sotto forma di un semplice elenco.
Pagina navigazionale relativa al risultato di ricerca dal sito e-commerce zalando.it
(2) Pagine di contenuto
In quei siti ricchi di informazioni testuali, articoli, notizie, annunci,
blog, etc., le pagine di contenuto costituiscono gli elementi più
importanti nell’organizzazione del sito.
Pertanto in questa tipologia di pagine i contenuti dovrebbero essere
ben visibili e non chiusi tra meccanismi navigazionali non necessari e
elementi grafici ingombranti.
Nell’esempio seguente gli elementi navigazionali occupano una
sezione limitata della pagina e non sono state inserite immagini
superflue. In questo modo è possibile leggere il contenuto senza
distrazioni.
Pagina contenuto da archeoguida.it
Pagine dei prodotti
Pagine di questo tipo, fondamentali nei siti di e-commerce,
presentano precisi elementi che le caratterizzano:
Immagini dei prodotti
Descrizioni dei prodotti
Dettagli aggiuntivi
Prodotti correlati
Inoltre le pagine dei prodotti spesso presentano elementi funzionali
specifici quali ad esempio:
Aggiungere al carrello o acquistare
Aggiungere alla lista dei desideri (whish list)
Ingrandire l’immagine dei prodotti (zoom)
Suggerimenti per la navigazione verso altre pagine prodotti
Strumenti per la condivisione
Esempio di pagina prodotto con diverse funzionalità
(3) Pagine funzionali
Pagine di questo tipo permettono alle persone di eseguire specifiche
operazioni in rete come ad esempio eseguire ricerche, compilare
moduli o inviare mail. Così come le pagine di contenuto, le pagine
funzionali costituiscono quel punto di arrivo che soddisfa le necessità
dell’utente.
In queste pagine la parte testuale è limitata anche per quanto riguarda
gli elementi navigazionali. In una pagina funzionale è ad esempio
difficile trovare elementi per la navigazione inseriti in linea con il
testo. Molto spesso infatti le operazioni eseguibili attraverso le pagine
funzionali non devono essere interrotte per poter andare a buon fine.
a) Moduli di ricerca
Nei siti web che dispongono di meccanismi navigazionali per la
ricerca è frequente trovare degli specifici campi di ricerca, posizionati
in alto nella home page, accanto agli elementi per la navigazione
principale. Tuttavia questi semplici campi di ricerca possono essere
ampliati con pagine specifiche per una ricerca avanzata, che offrono
un maggior controllo sul processo di ricerca e sui risultati ottenibili.
Dal momento che un modulo di ricerca avanzata richiede più spazio
per l’inserimento di dati specifici, è necessario utilizzare un’apposita
pagina, chiamata appunto “modulo di ricerca”.
Accesso alla ricerca avanzata in yahoo.it
Modulo per la ricerca avanzata in yahoo.it
b) Moduli per la registrazione
Queste pagine particolari permettono agli utenti di inserire una serie
di dati richiesti per attivare determinati servizi online come ad
esempio creare un account, compilare un cv online ecc.
Così come per le pagine di ricerca anche in questo caso i meccanismi
di navigazione associativa, che consentirebbero all’utente di
abbandonare con un semplice click il modulo, non sono adatti a
queste pagine. Tale scelta serve ad evitare l’interruzione
dell’inserimento dei dati necessari alla registrazione finale, dal
momento che i moduli presenti sulle pagine web richiedono una serie
di azioni specifiche per il salvataggio dei dati.
Accesso alla pagina del modulo di registrazione dalla home page di ebay.it
Pagina protetta del modulo di registrazione da ebay.it
Esempio di modulo di registrazione direttamente nella home page di facebook.it
c) Pagine contenenti applicazioni per il Web
Questa categoria comprende tutte quelle pagine che contengono
elementi e funzioni interattive con specifiche funzioni, utilizzabili
online dagli utenti. Su queste pagine gli utenti possono compiere
diverse azioni, come ad esempio scrivere una mail, compilare fogli di
calcolo, ecc.
Anche in queste pagine vengono usati solitamente meccanismi
navigazionali limitati per abbandonare l’area di “lavoro”, situati in
alto sul lato destro della pagina. Un abbandono veloce della pagina
può infatti causare la perdita di quei dati inseriti ma non salvati.
Pertanto prima dell’abbandono della pagina gli utenti vengono a
riguardo avvisati.
Es. di messaggio navigazionale prima dell’abbandono della pagina di compilazione di una
nuova mail (da yahoo.it).
FINE LEZIONE
Top Related