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