meccanismi navigazionali
Post on 06-Apr-2016
230 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
top related