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 sottocategorie: 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