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