Web Design

navigazionale:

PRIMA UNITA’

Introduzione al web design navigazionale

Nell’ambito del web design navigazionale bisogna considerare due

fattori fondamentali: l’elemento umano e quegli elementi

navigazionali che verranno usati proprio dalle persone.

Considerando questi due elementi durante la realizzazione di un sito

sarà possibile trovare le soluzione appropriate per il sistema

navigazionale da utilizzare.

A questo riguardo proprio negli ultimi anni sono stati elaborati

diversi elementi e progettati nuovi sistemi navigazionali proprio per

migliorare l’esperienza navigazionale di ogni utente.

Elementi base del web navigazionale

Per web navigazionale si intende l’organizzazione sistematica di tutti

quei collegamenti che forniscono l’accesso alle informazioni presenti

nelle pagine web e alle associazioni tra i diversi elementi presenti in

esse.

Il fatto più importante da considerare è il modo con cui il sistema

navigazionale fornisce le informazioni richieste.

I sistemi di navigazione, infatti, forniscono i contesti, mostrano agli

utenti la loro posizione, aiutandoli ad orientarsi con facilità non solo

all’interno della struttura di un sito ma anche attraverso i contenuti

stessi. Proprio attraverso i sistemi di navigazione si rivelano le

tematiche e le principali finalità dei siti.

Il web navigazionale gioca un ruolo importante specialmente nella

realizzazione di siti commerciali dove una corretta scelta ed un uso

sapiente dei sistemi di navigazione può contribuire alla credibilità

non solo del sito ma anche del marchio rappresentato.

Il design applicato all’esperienza di navigazione non solo si occupa

della creazione specifica dei singoli elementi utili alla navigazione

ma si occupa, attraverso il loro utilizzo, di raggiungere le precise

finalità con le quali il sito è stato progettato.

Meccanismi navigazionali

I link rappresentano il principale meccanismo navigazionale di ogni

sito web.

I collegamenti sono rappresentati da semplici elementi testuali e

grafici (semplice scritte oppure pulsanti, immagini o icone) che

collegano una pagina di partenza ad un’altra oppure ad un altro

elemento presente nella stessa pagina.

Tuttavia i link, a seconda della loro tipologia e del loro

funzionamento, vengono utilizzati anche per stabilire quei diversi

livelli di importanza spesso presenti tra le pagine di un sito.

Le principali finalità da considerare durante la progettazione e la

realizzazione dei collegamenti alla base dei sistemi navigazionali

sono:

Fornire accesso alle informazioni

Mostrare la posizione degli utenti all’interno del sito

Descrivere il contenuto di un sito

Influire sulla credibilità di un sito

La navigazione fornisce gli elementi d’accesso

Gli elementi navigazionali sono gli elementi fondamentali che

permettono all’utente di capire come muoversi all’interno di un sito.

Pertanto proprio per indicare il loro corretto utilizzo nelle pagine di

un sito, per facilitare l’esperienza di ogni utente all’interno di esso,

sono stati elaborati dei precisi modelli navigazionali di riferimento

per ogni web designer.

Principali modelli navigazionali

Modello di collegamento attraverso il contenuto

In questo modello navigazionale non esiste una gerarchia interna tra

la pagine di un sito, non esiste nemmeno una home page. Pertanto in

questo caso anche i collegamenti non sono organizzati secondo uno

schema preciso. I link non sono messi in evidenza ma compaiono in

linea con il testo presente nelle pagine e vengono utilizzati

semplicemente per indirizzare l’utente, attraverso particolari elementi

di contenuto, ad ulteriori contenuti o pagine del sito.

Schema base del modello di collegamento attraverso il contenuto

Modello di “informazione liquida”

Questo modello è simile per struttura a quello già visto in precedenza.

Infatti anche in questo caso i contenuti non sono organizzati secondo

un criterio gerarchico. Tuttavia in questo modello non c’è alcuna

differenza tra elementi di testo e ipertesti dal momento che l’intero

contenuto del sito è interattivo. Attraverso una singola parola di una

pagina è possibile attivare diversi meccanismi navigazionali per

condurre l’utente verso tutte gli altri contenuti del sito.

Schema base del modello di collegamento “liquido”

Modello di ricerca

In questo modello non esistono sistemi di navigazione diretti ai

contenuti interni di un sito. Gli utenti, attraverso questo modello

navigazionale, possono solamente inserire delle parole chiave

necessarie ad effettuare delle ricerche attraverso le quali otterranno

una lista di pagine a cui accedere. Dalle nuove pagine ricavate

attraverso la ricerca sarà possibile solamente ritornare alla lista di

partenza oppure nuovamente alla pagina iniziale di ricerca.

Schema base del modello navigazionale di ricerca

Modello filtro

In questo modello navigazionale è possibile da una singola pagina,

attraverso l’utilizzo di filtri specifici per la ricerca, accedere

contemporaneamente ad altri contenuti.

La lista dei risultati permette, cliccando sui singoli elementi, di

visualizzare singolarmente tutti i materiali, come testi e immagini,

ottenuti attraverso la ricerca. In questo modo l’utente può visualizzare

i contenuti delle nuove pagine cercate rimanendo nella pagina di

partenza.

Schema base del modello navigazionale di ricerca

Modello strutturato

In questo particolare modello i collegamenti ai vari contenuti del sito

sono posizionati su uno dei lati di ogni pagina.

L’area in cui sono collocati i link, ben distinta nel layout generale

della pagina, prende pertanto il nome di blocco navigazionale.

In questo caso gli elementi navigazionali appaiono chiaramente

strutturati per rispecchiare una gerarchia interna dei contenuti.

Attraverso questa particolare organizzazione è possibile navigare

avanti e indietro attraverso i contenuti presenti secondo una direzione

e un ordine prestabilito. Ad esempio, partendo da una home page sarà

possibile accedere solamente ad alcuni contenuti del sito, attraverso i

quali si potrà poi raggiungere ulteriori elementi. Ripercorrendo il

percorso effettuato al contrario, sarà possibile tornare alla home page

del sito.

In questo modello gli unici link presenti sono quelli del blocco

navigazionale, non ci sono collegamenti in linea nel testo.

Schema base del modello navigazionale strutturato

Sistemi per un’esperienza navigazionale bilanciata

Ovviamente i sistemi analizzati costituiscono solo dei modelli

navigazionali di base. Infatti molto spesso i siti web utilizzano allo

stesso tempo più di un modello navigazionale, affinchè tutti contenuti

siano sempre accessibili attraverso modalità differenti.

Ad esempio è più che comune, navigando in rete, trovare siti

provvisti di un modello navigazionale gerarchico e di un motore di

ricerca interno dei contenuti.

Esempio di schema di un sito con molteplici forme di accesso ai contenuti

La posizione attraverso i sistemi navigazionali

I sistemi navigazionali servono all’utente non solamente per spostarsi

attraverso i contenuti ma anche per orientarsi al loro interno.

Informazioni specifiche di questo tipo aiutano le persone a navigare

attraverso i contenuti specificando di volta in volta la posizione degli

utenti e i loro possibili spostamenti da quella posizione.

La posizione degli utenti viene spesso indicata evidenziando gli

elementi navigazionali corrispondenti, attraverso i quali l’utente è

arrivato in un determinato punto del sito oppure, come abbiamo visto,

attraverso uno specifico percorso indicato dalle “briciole”

(breadcrumbs).

Il design grafico al servizio della navigazione

Per realizzare graficamente un sistema navigazionale funzionante, un

web designer deve innanzitutto conoscere il contenuto di un sito, per

realizzare dei collegamenti ragionati proprio in base alle diverse parti

in cui è stato concepito e realizzato.

Il layout delle pagine, insieme alle forme grafiche scelte, conferisce

agli elementi navigazionali la loro forma definitiva, attraverso la

scelta e la creazione di menù, pulsanti, icone, particolari elementi di

testo, immagini, ecc.. Nella realizzazione grafica degli elementi per la

navigazione, anche la scelta della dimensione delle forme e dei font,

dei colori e dell’ordine degli elementi può influire sull’accessibilità

dei singoli contenuti.

Scelte navigazionali

Un corretto funzionamento degli elementi navigazionali di un sito

permette agli utenti di spostarsi in un attimo tra i contenuti presenti.

Lo spostamento immediato tra un contenuto all’altro, attraverso un

semplice click, viene definito volatilità transizionale.

La navigazione deve permettere nel modo più veloce possibile di

fornire all’utente quelle informazioni fondamentali che rappresentano

le finalità di ogni sito.

Pertanto gli elementi navigazionali devono tenere conto di due fattori

fondamentali:

visualizzazione rapida dei contenuti delle pagine

Attraverso l’utilizzo di parole chiave che richiamino velocemente i

contenuti a cui sono collegate.

visualizzazione rapida degli elementi delle pagine

Attraverso l’utilizzo di elementi grafici che richiamino

immediatamente, con la loro sola forma, i contenuti a cui fanno

riferimento.

Meccanismi navigazionali

Per meccanismo navigazionale si intende un collegamento o un

insieme di link con una stessa funzione e un aspetto simile.

Tali meccanismi di funzione e aspetto omogeneo sono gli strumenti

fondamentali per attivare i diversi sistemi navigazionali dei siti web.

I meccanismi navigazionali vengono scelti in maniera adeguata

rispetto ai contenuti da rappresentare. Ad esempio determinate

strutture di contenuti possono richiedere un’organizzazione

gerarchica ramificata che colleghi le varie tematiche.

Navigazione a passi (step navigation)

Questo meccanismo permette agli utenti di navigare attraverso le

pagine secondo una sequenza precisa. Tali meccanismo viene

generalmente indicato attraverso l’utilizzo di un’etichetta di testo, una

freccia e un collegamento ipertestuale necessario a ritornare al punto

di partenza.

Normalmente, in questo meccanismo, una freccia rivolta con la punta

a sinistra indica un movimento verso la pagina vista

precedentemente; la freccia rivolta verso destra indica invece una

navigazione verso le pagine successive.

Un meccanismo navigazionale di questo tipo è ottimale quando si ha

la necessità di collegare degli elementi che sono sequenziali per

contenuto: le pagine di un libro o di un manuale, delle istruzioni di

vario tipo, contenute in più pagine ma costituenti una sequenza

precisa, esami online in cui le domande devono essere visualizzate in

un preciso ordine.

Es. di step navigation

Navigazione a pagine (page navigation)

Questo meccanismo navigazionale è molto simile a quello analizzato

in precedenza ma include alcune informazioni e opzioni aggiuntive.

Tale sistema viene spesso utilizzato nelle pagine relative ai risultati di

ricerca che mostrano i dettagli riguardanti le pagine trovate. Il

meccanismo in questione serve, dopo che il primo lotto di risultati è

stato visualizzato di passare al lotto successivo e così via.

Esempi di navigazione a pagine

(1)

(2)

“Avanti” e “indietro”

Durante la navigazione può essere necessario rivisitare la pagina di

partenza oppure navigare direttamente verso l’ultima pagina di una

sequenza. Questo tipo di funzionalità o meccanismo viene quasi

sempre indicato da una doppia freccia.

Es.

Cliccando sulla freccia rivolta verso sinistra sarà possibile ritornare

direttamente al primo elemento visualizzato durante la navigazione

nel sito; la freccia opposta porterà invece all’ultimo elemento

presente nella sequenza.

Pagine ad accesso diretto

Questo particolare meccanismo navigazionale permette all’utente di

accedere direttamente ad una determinata pagina senza dover per

forza scorrere una sequenza prima di arrivare ai contenuti richiesti.

Es. di pagine ad accesso diretto da Amazon.com, su fondo pagina

Meccanismo delle breadcrumbs

Un altro elemento navigazionale fondamentale è, come ricorderete,

l’utilizzo corretto delle breadcrumbs.

Queste briciole non sono altro che la rappresentazione grafica di un

sistema navigazionale lineare che indica la struttura generale visitata

di un sito e la posizione dell’utente all’interno di questo.

Esempio del meccanismo delle breadcrumbs

Ovviamente il percorso delle briciole può essere indicato in modi

diversi. In particolare esiste una specifica distinzione tra breadcrumbs

di carattere posizionale e breadcrumbs di carattere attributivo.

L’esempio riportato nella slide precedente appartiene al primo tipo

dal momento che le keyword si riferiscono direttamente al percorso

necessario per arrivare ad una determinata pagina del sito, seguito

dall’utente. In questo caso per raggiungere determinati contenuti sarà

possibile intraprendere anche strade diverse, in base ai percorsi

stabiliti dai designer.

Al contrario nell’esempio successivo le breadcrumbs utilizzate sono

di tipo attributivo dal momento che sono utilizzate a indicare non

tanto un percorso ma delle sottodivisioni gerarchiche secondo la

tipologia dei contenuti.

Struttura ad albero navigazionale (navigation tree)

Questo meccanismo viene utilizzato da tutti quei siti il cui contenuto

è altamente organizzato secondo una precisa gerarchia.

Secondo questo sistema navigazionale, i contenuti sono organizzati in

“cartelle” rappresentate da icone di diversa grandezza a seconda del

livello gerarchico di appartenenza, organizzate verticalmente nelle

pagine.

Es. di albero navigazionale

Molto spesso accanto ad ogni icona è presente uno specifico pulsante

con il segno del + all’interno attraverso il quale è possibile navigare

attraverso i contenuti interni alla cartella.

Le mappe del sito (sitemap)

Una struttura navigazionale di questo tipo non è altro che la

rappresentazione semplificata della struttura generale di un sito.

Attraverso la visualizzazione di questa gli utenti possono navigare

direttamente verso tutti contenuti presenti in un sito.

Un meccanismo navigazionale di questo tipo rende sicuramente

estremamente accessibili tutti i contenuti di un sito web, dal momento

che da un’unica pagina è possibile raggiungere in un solo click ogni

altra sezione.

Tuttavia una mappa del sito è un sistema navigazionale che

potremmo definire secondario dal momento che non costituisce un

meccanismo utilizzabile direttamente dalla home page ma da una

pagina specifica indicata proprio dal blocco navigazionale principale.

Esempio di collegamento dalla home page alla mappa del sito

Esempio di una mappa del sito

Le directory o “sistemi di archiviazione”

Le directory sono un meccanismo navigazionale che solitamente

offre un accesso diretto alla pagine attraverso i contenuti.

Al contrario delle mappe del sito, le directory possono classificare i

contenuti in precise categorie. Un sistema di questo tipo è anche

diverso da un semplice indice di contenuti che stabilisce un elenco

secondo un preciso ordine molto spesso alfabetico: le directory infatti

permettono di collegare diverse tipologie di contenuti senza una

particolare strutturazione gerarchica. Pertanto un sistema

navigazionale di questo tipo si adatta bene anche all’organizzazione

dei collegamenti esterni.

Esempio di navigazione attraverso le directory

Nuvole per la marcatura (tag clouds)

Uno dei più recenti meccanismi navigazionali è rappresentato

dall’utilizzo dei cosiddetti tag clouds che elencano in ordine

alfabetico i vari collegamenti presenti in un sito, distinguendoli anche

in base alla loro importanza e frequenza di utilizzo. Un argomento

che ricorre più volte all’interno di un sito, verrà pertanto visualizzato

con più evidenza, attraverso questo sistema di navigazione.

Un meccanismo di questo tipo è tuttavia molto spesso associato

anche ad altri sistemi navigazionali di base presenti nel sito.

Esempio di tag clouds da flickr.com

Indici A-Z

Questo meccanismo navigazionale costituisce una guida a tutti i

contenuti e i termini presenti in un sito, attraverso un ordine

alfabetico (A-Z).

Anche in questo caso gli indici vengono utilizzati come meccanismi

di navigazione secondari, molto utili ad agevolare un accesso diretto

ai contenuti secondo un preciso elenco alfabetico. Gli indici infatti

non costituiscono un meccanismo navigazionale che permette un

accesso primario ai contenuti, dal momento che per accedere a questi

elenchi è necessario utilizzare un sistema navigazionale principale.

Esempio di indice alfabetico dal sito bbc.co.uk

Barre navigazionali e etichette

Questo comune meccanismo di navigazione prevede l’utilizzo di una

barra navigazionale orizzontale contenente in sequenza una serie di

collegamenti iperterstuali.

La differenza tra le barre di navigazione e le “etichette” è la loro

diversa rappresentazione. I due meccanismi navigazionali funzionano

infatti allo stesso modo, con le stesse identiche funzioni.

Le etichette sono rappresentate come delle semplici targhette

sovrapposte dagli angoli arrotondati, solitamente posizionate al di

sopra dell’area di contenuto principale di una pagina.

L’utilizzo delle etichette e delle barre navigazionali, anche se di facile

utilizzo, può tuttavia creare alcuni problemi di accessibilità dal

momento che entrambi i sistemi occupano quello spazio orizzontale

delle pagine web limitato dalla visualizzazione dei browser. Pertanto

questi due meccanismi navigazionali devono essere progettati

evitando proprio i problemi relativi alla loro visualizzazione finale.

Proprio per questo gli elementi testuali contenuti nelle etichette

devono essere molto brevi. Altrimenti, per aumentare la loro visibilità

e accessibilità, dovranno essere organizzati su due livelli di testo.

Molto spesso, siti web ricchi di contenuti utilizzano il sistema di

etichette in associazione ad altri meccanismi navigazionali proprio

per ovviare ad un problema di visualizzazione finale.

Esempio di barra navigazionale (doppia)

Esempio di utilizzo di etichette

Menù verticali

Un menù di questo tipo permette di inserire parti testuali più lunghe

negli elementi navigazionali, senza generare particolari problemi

nella visualizzazione della pagina, dal momento che può essere

sviluppato verticalmente.

Partendo proprio da questo specifico meccanismo navigazionale,

arriviamo a considerare la sua evoluzione: i menù dinamici.

Menù dinamici (fly-out o pull-down menù)

I menu di questo tipo permettono un accesso veloce alle opzioni

navigazionali, senza creare problemi permanenti alla visualizzazione

delle pagine.

Si tratta di un sistema dinamico dal momento che gli utenti devono in

effetti interagire con esso, visualizzando attraverso il semplice

spostamento del cursore del mouse, i diversi contenuti a cui si può

arrivare tramite il menù.

Con questo meccanismo è possibile accedere immediatamente a più

opzioni navigazionali che ci permetteranno di raggiungere più

velocemente i contenuti ricercati.

Esempi di menu dinamici (sia verticali che orizzontali)

Menù a tendina

I menù base di questo tipo vengono utilizzati per indicare delle

specifiche opzioni attraverso le quali gli utenti, con un semplice click

del mouse, possono accedere a nuove pagine del sito.

Esempio di un doppio drop-down menù

Sistemi navigazionali dei browser (browser mechanic)

I browser hanno dei meccanismi navigazionali interni che ogni web

designer deve conoscere per progettare al meglio quei sistemi di

navigazione che invece saranno propri del suo sito.

I più importanti meccanismi di navigazione utilizzati dagli attuali

browser sono:

Il tasto “indietro” (back button)

Il tasto “avanti” (forward button)

Cronologia (ctrl+H). Elenca le pagine web che sono state visitate,

partendo dalla più recente.

URLs. Una nuova digitazione o il richiamo dell’URL nella barra

dell’indirizzo permette la navigazione anche attraverso siti diversi.

Elenco preferiti. Un sistema che permette di registrate alcuni siti

web come preferiti, per poi raggiungerli con più facilità, senza dover

digitare l’URL.

Tasto home. Permette la navigazione immediata verso la pagina di

partenza.

FINE LEZIONE