Date post: | 06-Apr-2016 |
Category: |
Documents |
Upload: | corso-grafica-e-web-design |
View: | 236 times |
Download: | 0 times |
Web Design
navigazionale:
TERZA UNITA’
Progettare un framework navigazionale
In questa terza lezione relativa al web design navigazionale vedremo
i vari passaggi necessari a realizzare un framework navigazionale per
un sito web.
In primo luogo vedremo come strutturare, rispettando i criteri di
accessibilità analizzati finora, un’architettura navigazionale
finalizzata a migliorare l’esperienza di ogni utente sul nostro sito.
Anche se l’architettura di un sito è stata già progettata è comunque
importante conoscere i principi di organizzazione e categorizzazione
di base per realizzare degli elementi di navigazione appropriati e
correttamente funzionanti.
Valutazione degli elementi navigazionali necessari
Elementi navigazionali necessari all’orientamento:
L’obiettivo dei prodotti e dei servizi offerti dal sito è visibile già
dalla sua Home page
La funzione dei meccanismi di navigazione principale risulta
immediatamente chiara agli utenti
La posizione degli utenti all’interno di un sito viene indicata in
ogni pagina.
Elementi di navigazione globale appaiono costantemente nelle
varie sezioni del sito.
Elementi necessari per una corretta navigazione
La maggior parte delle aree del sito risultano accessibili dalla
home page.
Il contenuto di maggior rilevanza del sito è posizionato in una
posizione gerarchica elevata nella struttura generale del sito.
Il contenuto è posizionato non più lontano di tre collegamenti (3
click definibili come “micro azioni”) dalla home page.
Un punto di uscita appare in ogni pagina.
Elementi necessari per una corretta “etichettatura” (labeling)
I collegamenti sono “etichettati” correttamente con una
terminologia esclusiva nella componentistica navigazionale del
sito.
Il linguaggio utilizzato è semplice e facilmente comprensibile dai
visitatori.
Il significato delle opzioni navigazionali è subito chiaro.
La destinazione dei collegamenti è facilmente intuibile
Le eventuali abbreviazioni utilizzate sono di facile comprensione.
Ogni pagina mostra un titolo del browser coordinato con il titolo
della pagina e con le altre “etichette” navigazionali.
Ogni pagina contiene un titolo collegato semanticamente anche
alle etichette presenti.
Se il sito supporta diverse lingue, la navigazione è flessibile nel
fornire le opportune traduzioni.
Elementi necessari per un’adeguata usabilità dell’interfaccia
Le opzioni navigazionali sono chiaramente visibili.
La gerarchia visiva delle diverse opzioni navigazionali è subito
chiara all’utente.
I meccanismi navigazionali sono ben realizzati graficamente e
pertanto piacevoli alla vista.
I colori sono utilizzati efficacemente anche per indicare una
gerarchia tra gli elementi navigazionali.
Elementi necessari per un adeguato utilizzo dei browser
I tasti “indietro” e “avanti”, insieme alle altre funzionalità
navigazionali dei browser sono funzionanti per le pagine del sito.
Ogni pagina possiede una Url facilmente leggibile
L’URL è collegata al nome della compagnia e indica di volta in
volta una struttura prevedibile all’interno della directory del sito,
Non ci sono collegamenti “morti” (dead-end) all’interno del sito.
Tutte gli elementi elencati devono rispondere a specifici standard di
qualità e devono essere singolarmente valutati, prima della
realizzazione di un’architettura e di un framework navigazionale, per
capire l’effettivo livello inziale di accessibilità di un sito.
Effettuare un test navigazionale di base
Per capire quando i meccanismi navigazionali scelti e strutturati sono
adeguati alle esigenze del sito è possibile utilizzare degli schemi
funzionali di riferimento per accertarsi che ogni esigenza
navigazionale e di accessibilità risponda a determinati standard
qualitativi.
Struttura esempio per un test navigazionale
Domanda navigazionale Marcatura
Qual è il tema della pagina? Tracciare un rettangolo intorno al titolo
della pagina oppure trascriverlo.
Di che sito si tratta? Cerchiare il nome del sito.
Quali sono le sezioni principali in cui la pagina è
divisa?
Indicare le sezioni con un simbolo
stella.
Qual è il primo livello in alto rispetto a questa
pagina?
Indicare con un piccolo quadrato.
Come raggiungo la Home Page? Indicare con un triangolo.
Come raggiungo il livello superiore di questa
sezione del sito?
Indicare con un rombo.
Che cosa rappresenta ogni gruppo di link? Indicare con:
pallino verde – dettagli maggiori, sotto-
pagine.
pallino rosso – pagine associate in una
stessa sezione.
pallino blu – pagine non associate ma
comunque situate nello stesso sito.
pallino nero – collegamenti a quelle
pagine al di fuori del sito.
Ovviamente i simboli di marcatura dei vari elementi possono essere
scelti a piacere, ma la funzionalità di questo test di misurazione dello
“stress” navigazionale rimane invariata.
Comprendere la tecnologia utilizzata
Nella creazione di un sito e nella realizzazione degli elementi
navigazionali indispensabili per il suo funzionamento è necessario
acquisire familiarità sulla modalità con cui le pagine web vengono
assemblate.
La tecnologia sottostante al nostro sito web determina la scelta di
determinate soluzioni navigazionali.
Ad esempio, volendo inserire degli specifici elementi navigazionali di
ricerca, come una “lista di preferiti”, è necessario considerare che, se
il sito non ha la capacità di organizzare i profili degli utenti,
registrando degli account, non sarà possibile inserire l’elemento
navigazionale scelto.
Durante l’analisi della funzionalità navigazionale di un sito web ci
sono tre livelli tecnologici da considerare:
Piattaforma
Tecnologie Back-end
Tecnologie Front-end
Piattaforma
E’ possibile che un sito web venga realizzato per essere visualizzato
non solo attraverso lo schermo di un computer: potrebbe infatti essere
utilizzato attraverso un telefono cellulare oppure un palmare (PDA).
Considerare le modalità di visualizzazione e le tecnologie attraverso
le quali un determinato sito web verrà visualizzato, è fondamentale
nella scelta di elementi navigazionali efficienti.
Con il termine “adattamento dei contenuti” si fa riferimento al
processo di trasformazione di un sito web affinchè questo sia fruibile
attraverso una tecnologia diversa senza che la sua accessibilità venga
limitata.
Esistono programmi che operano questo adattamento in maniera
automatica ma purtroppo con scarsi risultati dal punto di vista degli
standard di usabilità.
Pertanto è necessario conoscere le caratteristiche delle piattaforme su
cui si desidera che un sito venga correttamente visualizzato e reso
fruibile. Gli elementi principali da considerare nel cambiamento della
piattaforma di visualizzazione sono le seguenti:
Dimensioni del display
La dimensione dello schermo è senza dubbio il primo elemento da
considerare nell’adattamento di un sito web. Ad esempio alcuni siti
web presentano delle specifiche versioni per lo schermo dei cellulari.
Esempio
Interazione
L’utilizzo di differenti hardware e software nell’adattamento può
provocare dei cambiamenti nelle modalità di interazione con le
pagine web.
Ad esempio cliccare un link su un palmare utilizzando uno stilo
specifico rappresenta un tipo di interazione diversa rispetto
all’utilizzo dei tasti di un mouse nella scelta di un elemento
navigazionale.
Contesti di utilizzo
I dispositivi utilizzati creano diversi contesti di utilizzo. Ad esempio
diversi dispositivi portatili (notebook, PDA, cellulari ecc.) tendono
normalmente ad essere più costosi e lenti per quanto riguarda
l’accesso alla rete.
Questi tuttavia vengono raramente utilizzati in maniera passiva.
Nell’utilizzo navigazionale di questi dispositivi, le persone hanno
infatti generalmente degli obiettivi specifici, diversi dalla semplice
navigazione libera, come ad esempio il controllo di una mail, la
ricerca di un termine su un dizionario, la visualizzazione di una
mappa, ecc..
Differenze di sviluppo
Il modo in cui il contenuto viene creato, immagazzinato e
visualizzato su diverse piattaforme richiede la conoscenza e l’utilizzo
di diverse tecnologie e versioni di queste. Ogni browser su ogni
modello di cellulare può infatti rendere i contenuti in maniera diversa.
Inoltre, la gamma dei font, dei colori e degli stili disponibili può
variare ampiamente tra le diverse piattaforme.
Velocità di connessione
Il caricamento di file di grandi dimensioni attraverso l’utilizzo di un
telefono cellulare può richiedere molto tempo. Al contrario interagire
con un documento immagazzinato a livello locale su un palmare non
comporta problemi di connessione. La velocità di connessione alla
rete influisce su come un’applicazione deve essere progettata.
La navigazione indica tutti quegli elementi chiave che non
dovrebbero mai cambiare nell’utilizzo di piattaforme diverse, per
preservare l’accessibilità di un sito.
E’ comune infatti visualizzare differentemente, da un punto di vista
puramente grafico, le pagine di un sito web.
Determinate pagine, quando visualizzate ad esempio attraverso il
display di un cellulare, possono risultare contrariamente alla versione
originale, prive di tutti quegli elementi grafici che le rendevano
accattivanti. Nonostante questo, gli elementi navigazionali sono
ugualmente funzionanti.
Per far questo è necessario che le informazioni siano state progettate
dall’inizio per poter essere fruibili su ogni tipo di piattaforma.
Per ottenere una navigazione ottimale anche in casi particolari è
necessario seguire alcuni criteri:
Separare i contenuti dalla loro presentazione
E’ importante non “etichettare” i contenuti in modo che questi
contengano le indicazioni per la loro visualizzazione.
E’ bene formattare i documenti semanticamente. Per esempio in
HTML, è bene utilizzare le marcature <h1>-<h6> per evidenziare le
intestazioni e applicare poi fogli di stile per i diversi strumenti di
utilizzo.
In questo modo le stesse intestazioni potranno apparire sempre in
maniera appropriata sulle diverse apparecchiature.
Pianificare diversi formati di visualizzazione
Data l’esistenza e l’utilizzo di schermi dalla dimensioni più disparate,
la lunghezza dei testi della pagine web, diventa un discriminante
fondamentale. Sviluppando un sito web, per strumenti fissi e mobili
allo stesso tempi, la lunghezza delle etichette, dei titoli e delle pagine
deve essere formattata in maniera differente.
Pertanto il design del nostro sito dovrà fornire all’occorrenza diverse
titolature, etichette e contenuti, che possano sempre essere
visualizzati.
Non fare affidamento sui meccanismi di navigazione dipendenti
dai supporti
Meccanismi navigazionali come i menù dinamici non funzionano
correttamente sui cellulari. Allo stesso modo liste lunghe di
collegamenti oppure l’utilizzo di indici A-Z non costituiscono delle
buone scelte navigazionali.
Al contrario per una corretta accessibilità navigazionale anche
attraverso schermi dalle dimensioni limitate è bene approntare un
sistema generale con poche opzioni navigazionali principali in
evidenza e una gerarchia di collegamenti strutturata in profondità.
Non utilizzare i plug-in e gli script
Attualmente, elementi realizzati in flash non vengono ancora
correttamente visualizzati su tutti i telefoni cellulari.
Allo stesso modo il linguaggio JavaScript non funziona attraverso il
display di un cellulare.
Le pagine web, per essere compatibili con piattaforme diverse
devono poter essere utilizzate anche in assenza dei plug-in e senza il
corretto funzionamento dei programmi in JavaScript.
Al contrario programmi realizzati con il linguaggio di
programmazione Java ben si prestano alla realizzazione di
applicazione per il web, fruibili su qualsiasi tipo di supporto digitale.
2) Tecnologie server-side (back-end technologies)
Per tecnologie back-end di un sito web si intendono tutti quegli
elementi che lo rendono funzionante e operativo. Tra gli elementi
fondamentali per il funzionamento troviamo: la struttura del database
di fondo, le aree protette da password (https), i firewall e i profili
utente.
Analizzando questo livello tecnico è necessario considerare in che
modo la tecnologia server side può limitare o implementare ciò che è
stato progettato. Ad esempio, la personalizzazione è possibile? Gli
account degli utenti e i profili possono essere registrati? E’ possibile
integrare il contenuto proveniente da differenti siti web e database?
Per ottenere le risposte necessarie a queste domande, durante lo
sviluppo di un sito web, è necessario considerare il cosiddetto
Sistema per la Gestione dei Contenuti, il Content Management
System (CMS). Un programma CMS rappresenta un sistema di
riferimento che organizza le informazioni digitali durante tutto l’arco
di vita di un sito web dalla scrittura alla pubblicazione in rete.
Un sistema CMS si occupa della gestione di due elementi
fondamentali: fornisce spazio per il salvataggio e la ricerca dei
contenuti
Un programma di tipo CMS rappresenta un’applicazione server side
che gestisce il flusso di lavoro per creare e mantenere il contenuto
presente un sito web.
Un’applicazione di questo tipo costituisce un’unità centrale per il
coordinamento e l’aggiornamento dei contenuti, che gestisce tutto il
materiale proveniente dalle varie risorse e lo pubblica attraverso i
diversi canali.
L’applicazione CMS si appoggia per il funzionamento ad un database
preesistente dove i contenuti per il web sono stati precedentemente
inseriti.
I programmi CMS possono essere realizzati attraverso l’utilizzo di
specifici linguaggi di programmazione come ad esempio i più comuni
PHP, NET e ASP.
Un esempio open source di un programma CMS è ad esempio
Joomla, scaricabile gratuitamente attraverso il seguente link:
http://www.joomla.it/download.html
Schema di gestione contenuti attraverso CMS
Nell’organizzazione navigazionale del sito vengono sviluppate molte
delle regole che verranno poi seguite dall’applicazione CMS per
visualizzare i contenuti.
Un CMS influisce sul design navigazionale progettato ma anche
quest’ultimo ha un impatto importante sulla struttura di un CMS.
Ad esempio i template creati influenzano il modo in cui
l’applicazione CMS è configurata.
3) Tecnologie front-end (client-side technologies)
Le tecnologie front-end rappresentano tutti i codici e le informazioni
che vengono inviate dal server al browser degli utenti. I browser
interpretano le informazioni e le visualizzano sullo schermo. Dal
momento che le tecnologie di front-end possono direttamente influire
sulla navigazione è necessario conoscere le loro caratteristiche e
capacità.
Le tecnologie di questo tipo, con cui durante il corso acquisiremo
familiarità non sono altro che: i fogli di stile “a cascata” (CSS) e i
programmi JavaScript, elementi che utilizzati in maniera appropriata,
contribuiscono a migliorare la navigazione tra i contenuti di un sito.
Ad esempio i file CSS permettono di separare il contenuto di una
pagina dalla sua presentazione. Attraverso questi specifici file è
possibile cambiare l’aspetto delle pagine senza intaccare la struttura
(X)HTML di base. Inoltre gli utenti hanno la possibilità di usare fogli
di stile differenti nella visualizzazione del sito, migliorando pertanto
il suo grado di accessibilità.
Frame
I frame permettono di visualizzare una pagina in una sezione separata
e scorribile dello schermo, andando così a suddividere lo schermo del
browser in più sezioni.
Uno dei primi utilizzi dei frame sul web era quello di fissare
verticalmente sulla sinistra gli elementi navigazionali, permettendo
invece lo scorrimento dei contenuti principali. Attualmente il loro uso
è sconsigliato nella realizzazione della struttura delle pagine, dal
momento che i frame ormai vengono difficilmente supportati dalle
moderne versioni dei browser.
L’inserimento di frame leggermente diversi da quelli originali
possono tuttavia venire ancora utilizzati attraverso l’utilizzo dei CSS.
Esempio della creazione di frame per la navigazione attraverso
l’utilizzo di file CSS
<html>
<head>
<title>Frame con CSS</title>
<link rel="stylesheet" type="text/css" href="frame.css">
</head>
<body>
<div id="TOP">
<h1>Frame alto</h1>
</div>
<div id="LEFT">
<span>frame sinistro</span>
</div>
<div id="RIGHT">
<span>
frame destro<br>frame destro<br>frame destro<br>
frame destro<br>frame destro<br>frame destro<br>
frame destro<br>frame destro<br>frame destro<br>
frame destro<br>frame destro<br>frame destro<br>
</span>
</div>
</body>
</html>
A questa struttura HTML viene associato il seguente foglio di stile (frame.css) per
determinare la visualizzazione finale.
body { background-color: #E0E0E0; color: #000000; margin: 0px; overflow: Hidden;}
div {font: Normal 12px sans-serif; }
h1 {font: Bold 35px 'Times New Roman';}
#TOP
{background-color: blue; color: #FFD700; height: 15%; padding: 5px; overflow: Hidden;}
#LEFT
{float: Left; width: 20%; padding: 5px; overflow: Auto;}
#RIGHT
{background-color: #FFFFFF; float: Left; width: 80%; height: 85%; padding: 5px;
overflow: Auto;}
Tuttavia nella visualizzazione finale, il file CSS impostato per la
funzionerà solamente attraverso alcuni browser, comparendo nel
modo seguente:
Visualizzazione di “Frame con CSS” attraverso IE 8
Flash
Flash è un programma di animazione grafica che permette l’utilizzo
di menù dinamici e altre tipologie di animazioni nella realizzazione di
pagine web. I programmi flash possono essere inseriti all’interno
della struttura HTML.
Il “peso” limitato dei programmi Flash ha reso questi programmi
molto popolari per aumentare non sono il rendimento grafico e il
dinamismo delle pagine ma anche per facilitare la navigazione e la
loro accessibilità.
Tuttavia bisogna considerare che gli utenti avranno poi bisogno di un
Flash player plug-in per vedere quelle animazioni realizzate in flash.
Attualmente la maggior parte dei browser ha già installato uno
specifico plug-in per la corretta visualizzazione degli elementi flash.
Ajax
Ajax non è un linguaggio di programmazione ma una combinazione
di tecnologie che permettono di creare delle applicazioni web
interattive. Lo scopo primario di questa tecnologia front-end è quello
di rendere le pagine più dinamiche e ricettive rispetto alle azioni degli
utenti sul sito. Attraverso uno scambio di dati tra browser e server, la
tecnologia Ajax permette un aggiornamento dinamico delle pagine
senza che queste debbano essere ricaricate completamente, dopo ogni
azione dell’utente.
XForms
I normali form HTML rendono possibile accettare gli input degli
utenti sulle pagine di ricerca, galleria, prodotti ecc. Proprio per questa
funzionalità i form HTML sono ampiamente utilizzati nei siti di e-
commerce.
Gli XForms sono un’evoluzione dei moduli online standard e
permettono un inserimento dei dati più ricco, facile e veloce e
soprattutto funzionante indipendentemente dall’apparecchiatura
utilizzata.
Gli XForms permettono una sostituzione dinamica dei dati,
rimpiazzando anche la necessità di utilizzo di applicazione
JavaScript. E’ possibile utilizzare gli Xforms per nascondere
e/mostrare sezioni delle pagine senza la necessità di caricarle
nuovamente. Con l’utilizzo di questi nuovi form è possibile realizzare
applicazione web interattive senza l’utilizzo del JavaScript.
Il problema principale nell’utilizzo degli Xforms è dovuto al fatto che
per il momento i browser non riescono a supportarli autonomamente,
richiedendo invece per la loro corretta visualizzazione l’utilizzo di
specifici plug-in.
Progettare un’architettura navigazionale
Prima di creare i collegamenti necessari alla navigazione tra le nostre
pagine web è senz’altro fondamentale avere bene in mente la struttura
organizzativa interna del sito da realizzare. Per questo motivo è
necessario progettare preventivamente un’architettura generale,
mettendo in evidenza quei collegamenti necessari al corretto
funzionamento del sito.
Esempio di schema base navigazionale attraverso macro azioni e micro azioni di
navigazione
Architettura delle informazioni del sito
La struttura navigazionale del sito riflette l’organizzazione interna e
la gerarchia delle pagine del sito, secondo il loro contenuto. Partendo
da questa struttura base è poi possibile progettare agevolmente
l’inserimento di tutti quegli elementi addizionali specifici per il
miglioramento dell’interfaccia grafica del nostro sito.
Per costruire l’architettura navigazionale è necessario tenere in mente
le differenti tipologie di strutture:
Struttura lineare
Struttura a ragnatela
Struttura gerarchica
Struttura a faccette
Nella creazione e organizzazione degli elementi navigazionali
naturalmente è possibile utilizzare e combinare strutture diverse. Ad
esempio una struttura navigazionale a ragnatela può utilizzare tutte le
restanti strutture base.
Architettura lineare
In una struttura navigazionale lineare le pagine sono organizzate in
sequenza come evidenziato nell’esempio seguente.
Strutture di questo tipo vengono utilizzate quando gli utenti non
possono raggiungere una pagina senza aver visitato quella prcedente,
secondo la sequenza. Molto spesso in una struttura navigazionale di
questo tipo è sufficiente l’inserimento di un singolo meccanismo
navigazionale che permette il passaggio tra le pagine.
Molto spesso una struttura di questo tipo viene utilizzata nella pagine
galleria oppure durante la compilazione di moduli online, a separare i
vari passaggi della registrazione.
Schema di struttura lineare
Una struttura a “ruota” (hub and spoke) può essere considerata come
un’estensione di una struttura lineare nell’organizzazione
navigazionale delle pagine web.
Questa struttura è essenzialmente un insieme di più strutture lineari
provenienti da uno stesso punto di partenza come illustrato
nell’esempio seguente.
Esempio di architettura a “ruota” (hub and spoke)
In questa struttura gli utenti partono da una specifica pagina di
atterraggio (landing page) per poi muoversi attraverso le singole
pagine collegate a questa. Dalle pagine successive a quella di
atterraggio gli elementi di navigazione principale riporteranno gli
utenti al punto di partenza.
Architettura a ragnatela
Una struttura di questi tipo presenta diversi nodi collegati tra loro,
senza livelli o sequenze strutturate. I collegamenti sono organizzati in
modo che non esista un punto di partenza preciso all’interno del sito.
Ogni pagina non è altro che un potenziale fulcro all’interno del sito
da cui è possibile raggiungere progressivamente i contenuti collegati
attraverso i “raggi” o “connettori”.
La navigazione associativa funziona proprio come una struttura a
ragnatela, con collegamenti incrociati tra pagine multiple.
Strutture a ragnatela sono utilizzate ad esempio da siti come myspace
(www.myspace.com) dove gli utenti possono liberamente creare
collegamenti tra le diverse parti di contenuti e gli altri utenti.
Esempio di architettura “a ragnatela”
Architettura navigazionale gerarchica (tree structure)
Le gerarchie mostrano i livelli dei nodi organizzati secondo un tipo di
relazione definita “genitore-figlio”. In questa architettura deve essere
presente un nodo primario, situato in cima alla gerarchia
navigazionale delle pagine: solitamente il nodo primario di un sito
organizzato gerarchicamente è l’home page.
I nodi della gerarchia possono avere dei “genitori”, pagine di livello
superiore e pertanto più vicine al nodo primario e dei “figli”, pagine
di livello inferiore, dipendenti da queste e pertanto più distanti dal
nodo primario.
Tutti i livelli dipendenti ereditano la designazione del nodo genitore,
estendendola ulteriormente ai sotto-livelli.
Molti siti web presentano la seguente architettura gerarchica:
home page > pagine di atterraggio (o di galleria) > pagine prodotto
Una struttura di questo tipo è ovviamente tipica dei siti di e-
commerce. Tuttavia anche un sito web costituito da poche pagine può
essere strutturata secondo un’architettura gerarchica.
Esempio di architettura navigazionale gerarchica
Per architettura poligerarchica si intende una condizione
navigazionale gerarchica in cui una pagina ha più di un “figlio”,
come evidenziato nell’esempio.
Esempio di architettura navigazionale poligerarchica
La poligerarchia è un’architettura importante per un nuovo utilizzo
delle pagine e dei contenuti o per farle apparire sotto due categorie
diverse. Ad esempio due aree differenti di un dato sito possono
condividere una pagina contenente elementi pertinenti ad entrambe.
Quest’ultima pagina pertanto ha due “genitori”.
Tuttavia un’architettura navigazionale poligerarchica può creare
problemi nella visualizzazione di alcune tipologie di informazioni. Se
ad esempio si utilizzano delle breadcrumbs come meccanismi
navigazionali, queste dovranno indicare la provenienza dell’utente o
la posizione della pagina su cui quest’ultimo si trova?
Prima di realizzare i meccanismi navigazionali e i collegamenti
necessari è opportuno considerare i problemi derivanti dall’utilizzo di
un’architettura di questo tipo.
Architettura a “faccette” (facets)
Le cosiddette “faccette” offrono un’alternativa alle strutture
navigazionali gerarchiche. In questa architettura la posizione di una
pagina all’interno del sito è determinata dalle categorie che gli
appartengono. Ad esempio un determinato oggetto può appartenere
ad alcune categorie ma allo stesso tempo non essere in alcun modo
collegato ad altre.
In questo modo un dato elemento risulta accessibile da più punti
all’interno del sito.
Un’architettura a “faccette” permette di ricercare determinate
informazioni all’interno di un sito da diverse posizioni o angolazioni.
Così come nell’architettura gerarchica, le faccette possono essere
organizzate secondo categorie ma partendo da principi differenti.
Nell’architettura gerarchica la posizione di una pagina è data da i suoi
“parenti” (ad un livello superiore), “fratelli”, “sorelle” (ad uno stesso
livello) e “figli” (ad un livello inferiore). Nell’architettura a faccette
la posizione di un oggetto si ricava attraverso le categorie di valori
che gli appartengono. Il contenuto a destra messo in evidenza (in
rosso) nell’esempio successivo è posizionato nell’intersezione delle
categorie che lo descrivono.
Confronto tra architettura gerarchica e architettura a faccette
Esempio di un’organizzazione dei contenuti secondo architettura
gerarchica
Musica Rock
Rock classico
Beatles
Abbey Road
Sgt. Pepper’s Lonely Hearts Club Band
Pink Floyd
Dark Side of the Moon
Rock sperimentale
Frank Zappa
We’re Only in It for the Money London Symphony Orchestra,
Jazz from Hell, Vol 1
Musica classica
Johann Sebastian Bach
Goldberg Variations
Igor Stravinsky
L’uccello di fuoco
Petrushka
Con le faccette al contrario è possibile visualizzare direttamente le
caratteristiche e le proprietà dei contenuti ricercate dagli utenti.
Questi dati potrebbero riguardare, sempre considerando l’esempio
precedente, lo stile musicale, l’artista, il titolo di un album, il prezzo,
ecc.
Il seguente esempio illustra un esempio di architettura navigazionale
secondo faccette
Esempio di faccette con i rispettivi valori
Faccetta Valori
Stile Rock
Rock classico
…..Rock sperimentale
Classica
Artista Johann Sebastian Bach
Beatles
Pink Floid
Frank Zappa
Igor Stravinskij
Titolo Abbey Road
Dark side of the Moon
Goldberg Variation
Jazz from Hell, Vol 1
Petrushka
L’uccello di fuoco
We’re Only in It for the Money London
Symphony Orchestra,
Prezzo Sotto i 10 euro
Tra i 10 e i 15 euro
Sopra i 15 euro
Come creare una mappa del sito
Una mappa del sito è un documento che indica visivamente le
relazioni tra il contenuto e la funzionalità dell’architettura
navigazionale progettata.
Elementi per la realizzazione di una mappa del sito
Anche se una mappa navigazionale di un sito può essere realizzata
graficamente in molti modi diversi, il suo scopo principale è sempre
lo stesso: comunicare l’architettura di un sito.
Alcuni elementi di base vengono sempre utilizzati nella realizzazione
di una mappa.
Nella progettazione di questa vengono comunemente indicati:
Nodi
I nodi non sono altro che le pagine che fanno parte del sito. Nelle
mappe questi vengono indicati convenzionalmente attraverso
l’utilizzo di rettangoli.
Connettori
I nodi (le pagine) sono collegati per mostrare le relazioni
navigazionali intercorrenti tra le varie pagine. Normalmente nella
mappe di sito i connettori non vengono utilizzati per indicare i
collegamenti associativi, mentre invece vengono sempre utilizzati per
evidenziare le connessione relative alla navigazione strutturale e
utilitaria.
Schema numerico
Per evitare confusione nell’organizzazione dei nodi sulla mappa è
bene associare ad ogni pagina uno specifico numero. In molti casi
tuttavia le mappe di sito si presentano invece con delle lettere a
identificare i diversi nodi.
E’ possibile inoltre attraverso l’utilizzo di numeri specifici indicare il
rapporto dei nodi associando delle sequenze di numeri per
evidenziare il rapporto di gerarchia.
Etichette
Nella realizzazione della mappa è necessario associare ad ogni nodo
un titolo che poi corrisponderà all’etichetta navigazionale definitiva
della pagina.
Attributi delle pagine
Oltre al titolo di ogni pagina è bene indicare sulla mappa alcune
caratteristiche di base delle pagine come ad esempio:
Il formato dei contenuti (formati diversi dal semplice HTML,
come ad esempio file Pdf)
Eventuali pagine dipendenti che appariranno in nuove finestre
(pop-up).
Contenuti dinamici che cambiano durante la visualizzazione della
pagina.
Eventuali login necessari per accedere ad una pagina.
Tipologia e template di ogni pagina
Funzionalità e caratteristiche particolari
Gli attributi della pagine possono essere indicati e differenziati
utilizzando simboli, abbreviazioni ma anche colorazioni e
ombreggiature differenti.
Annotazioni
In molti casi le mappe non possono comunicare ogni dato relativo
alla realizzazione dei vari collegamenti navigazionali e proprio per
questo è bene inserire, dove necessario, specifiche note di testo
indicanti le caratteristiche particolari dei nodi.
Scopo
Infine è bene evidenziare nella mappa quelle pagine che sono
fondamentali per la comunicazione dell’obiettivo finale del sito. Tale
indicazione sarà poi fondamentale nella progettazione e realizzazione
di eventuali cambiamenti.
Titolo e legenda (key)
Nell’intestazione di una sitemap è bene indicare oltre al titolo, la
versione della mappa realizzata, a differenziarla da eventuali
pianificazioni successive. Fondamentale è inoltre l’inserimento di una
legenda per annotare tutte le abbreviazioni, simboli e colori utilizzati
nella realizzazione della sitemap.
Esempio di sitemap con struttura gerarchica
Mappa del sito blueprint o high-level
Una mappa di questo tipo mostra come collegare le sezioni principali
di un sito o di più siti web contemporaneamente.
In questa mappa non sono indicati tutti i nodi, ma vengono invece
definite chiaramente le relazioni tra i contenuti e le loro diverse
funzionalità.
Una mappa di questo tipo permette di visualizzare alternative diverse
nell’organizzazione delle pagine prima di stabilirne i dettagli
navigazionali.
Visualizzare il sito graficamente in questo modo può facilitare la
successiva pianificazione degli elementi navigazionali.
Una mappa blueprint è importante per mettere in evidenza la
concettualizzazione primaria di un sito e per organizzare le macro-
azioni navigazionali necessarie a raggiungere l’obiettivo finale del
sito stesso, sia dal punto di vista dell’utente sia dal punto di vista del
creatore e proprietario.
Una mappa di questo tipo serve anche come base per la progettazione
tecnica del sito.
L’architettura tecnica può infatti basarsi su una mappa di questo tipo
per facilitare la strutturazione dei database sottostanti al sito web e la
gestione dei sistemi di back-end.
L’esempio seguente mostra una high-level sitemap con tre tipologie differenti di siti
collegati ad un’unica compagnia.
Il principale obiettivo del sito rappresentato nell’esempio, come
evidenziato dalla stessa mappa blueprint, è quello di supportare
l’immagine del marchio e presentare informazioni specifiche
riguardanti la produzione.
I visitatori del sito principale vengono diretti verso i siti a livello
locale (country sites) per ottenere informazioni più dettagliate
riguardo i prodotti trattati.
I siti web a livello locale
Nella mappa blueprint dell’esempio, ogni paese, dove l’industria
rappresentata dal sito generale gestisce la vendita, ha il suo proprio
sito web, nella lingua appropriata.
Nei siti locali i visitatori possono interagire con i prodotti, comparare
i modelli e visualizzarli al meglio. Dopo aver visualizzato i prodotti
secondo specifici meccanismi navigazionali, gli utenti sono
indirizzati verso i siti web dei rivenditori per l’eventuale acquisto dei
prodotti.
I siti web rivenditori (dealer web-sites)
Questi siti costituiscono il mezzo per effettuare quelle diverse
transazioni rivolte poi all’acquisto finale dei prodotti offline, come ad
esempio la richiesta di contatti o appuntamenti con il rivenditore, la
necessità di prenotare un test di guida o una revisione tecnica, ecc.
La struttura principale della mappa blueprint è volta proprio a
condurre i visitatori ai siti dei rivenditori.
Pertanto l’architettura complessiva mira proprio a spostare gli utenti
da una spazio virtuale a un contatto con i vari rivenditori al di fuori
della rete. Pertanto nell’esempio riportato il ruolo del meccanismo
navigazionale utilitario del “selettore di paese” è fondamentale nel
creare il contatto tra utenti in rete e rivenditori locali.
L’intento generale dell’architettura rappresentata in questa mappa
blueprint è pertanto evidente e accessibile già al livello più alto della
struttura navigazionale.
Mappa di sito dettagliata
Una mappa di sito di questo tipo evidenzia in dettaglio i vari livelli
navigazionali su cui in sito viene organizzato.
In questo caso è importante mettere in evidenza le azioni di micro
livello da un punto centrale dell’architettura generale per raggiungere
un determinato obiettivo. E’ necessario rendere breve il percorso
navigazionale, inserendo il minor numero possibile di micro-azioni.
Una mappa di questo tipo è utile proprio nell’organizzazione grafica
di tali collegamenti.
Da un punto di partenza centrale è tuttavia impossibile tracciare tutti i
collegamenti tra le molteplici pagine di un sito. In questo caso è
necessario realizzare più di una mappa dettagliata su documenti
diversi.
In alternativa è possibile utilizzare anche un foglio di calcolo
(spreadsheet), strutturato con elementi adatti (come numeri in
sequenza: 1, 1.1, 1.1.1, 1.1.2, 1.2.1, ecc.) ad evidenziare la struttura
gerarchica.
In questo modo è possibile racchiudere facilmente un gran numero di
informazioni testuali associabili ai nodi.
Consolidare l’architettura
Una volta progettata manualmente l’architettura navigazionale è bene
ricordare che esistono diversi strumenti digitali per la realizzazione
definitiva della nostra mappa del sito.
Tra i software professionali di maggior utilizzo e diffusione dedicati
alla realizzazione di site-map troviamo: Microsoft Visio,
Conceptdraw WebWave, e Mindjet Mindmanager.
Organizzare le pagine sulla mappa
Il layout dei nodi e degli altri elementi deve evidenziare le relazioni.
Una mappa gerarchica tradizionale, così come quella mostrata in un
esempio precedente (cfr. slide 68) riflette le categorie della
navigazione principale. All’interno della struttura indicata è chiaro
che le pagine sotto la “titolatura” appartengono proprio a questa
sezione. E’ ovviamente possibile organizzare visivamente le pagine in
diversi modi purchè l’utilizzo dei connettori evidenzi sempre i diversi
livelli gerarchici e eventualmente poligerarchici.
L’esempio seguente mostra come, anche utilizzando rappresentazioni
grafiche diverse, l’organizzazione dei nodi e dei connettori rifletta
sempre le differenti relazioni navigazionali.
Determinare i percorsi navigazionali
Nella scelta degli opportuni meccanismi navigazionali, non è
necessario permettere da un singolo punto nel sito una navigazione
universale rivolta a tutti gli altri contenuti.
Al contrario è meglio stabilire dei brevi percorsi navigazionali
prefissati secondo le finalità del sito web, affinchè gli utenti
visualizzino, proprio attraverso l’architettura navigazionale creata,
quelle pagine che si vogliono mettere in evidenza.
La struttura di un sito e la navigazione sono correlate ma non
indicano la stessa cosa. Una mappa di sito dettagliata mostra tutte le
pagine all’interno di questo ma il sistema navigazionale scelto ha una
visibilità limitata nell’architettura creata.
L’esempio seguente illustra i possibili percorsi navigazionali da una
stessa pagina. La navigazione principale (main navigation) fornisce
l’accesso alle pagine di livello superiore (linea rossa spessa, rivolta
verso l’alto), mente la navigazione locale (local navigation) permette
agli utenti di muoversi verse le pagine situate ad un livello gerarchico
inferiori, le cosiddette pagine “figlie” (connettori blu).
Infine gli elementi di navigazione associativa collegano quei
contenuti situati su uno stesso livello per similarità di funzioni e
contenuti (linea rossa tratteggiata).
Diversi percorsi navigazionali all’interno dell’architettura strutturale di un sito
Per creare i percorsi è prima necessario conoscere la natura della
struttura del sito, anche nel caso in cui questo sia stato progettato da
qualcun altro.
La maggior parte dei siti sono spesso strutturati secondo un modello
gerarchico, tuttavia possono ugualmente comprendere allo stesso
tempo elementi di strutture lineari e a “ragnatela”.
Pertanto un sistema navigazionale non è altro che un insieme di
diverse modalità di accesso alle informazioni, all’interno di una data
struttura.
Per determinare l’abbinamento più efficace è necessario iniziare
l’opera definendo i percorsi ottimali all’interno del sito, seguendo
alcuni criteri di base fondamentali.
Ad esempio è importante cominciare a creare i percorsi navigazionali
partendo non dalla home page ma dalle pagine più importanti
all’interno di un sito: le pagine di contenuto.
Ad esempio per un sito di vendita online, le pagine di contenuto più
importanti saranno sicuramente le “pagine prodotto”.
Dopo aver identificato la tipologia di pagina è necessario evidenziare
il suo scopo e le sue caratteristiche peculiari (ad es. l’utilizzo di
immagini, video o elementi interattivi oppure di semplici parti
testuali).
Scegliere gli appropriati meccanismi
Una volta identificati i percorsi chiave riguardanti le pagine di
contenuto principali di un sito è necessario scegliere gli appropriati
meccanismi navigazionali, tra quelli trattati nella prima unità del
Modulo didattico corrente.
La domanda chiave nella scelta dell’appropriato meccanismo
navigazionale è la seguente: qual’è il meccanismo più semplice e
facile da utilizzare per supportare la tipologia navigazionale scelta?
Una scelta corretta deve inoltre tenere conto della tipologia di pagina
per cui creare un meccanismo navigazionale. Ad esempio i
meccanismi navigazionali richiesti da una “pagina di atterraggio”
(landing page) sono sicuramente numericamente superiori rispetto a
quelli adatti a rendere accessibile una pagina situata ad un livello più
basso nella struttura gerarchica di un sito.
Un altro elemento da considerare nella scelta dei meccanismi
navigazionali sono le caratteristiche del contenuto delle pagine.
Ad esempio nel caso in cui la pagina da collegare riguardi un file
particolare, come un file video o un documento pdf, sarà necessario
considerare in che modo i meccanismi navigazionali dovranno
gestirlo. Inoltre è importante conoscere la frequenza con cui i
contenuti verranno aggiornati per poter adeguare di conseguenza gli
eventuali meccanismi navigazionali collegati ai cambiamenti, come
ad esempio quei collegamenti inseriti internamente ai contenuti stessi
(embebbed links).
Logica visiva
Da un punto di vista navigazionale, i meccanismi scelti dovrebbero
comparire in un unico sistema visivo, accanto agli altri elementi
presenti in una pagina.
Creare una logica visiva navigazionale migliora l’usabilità di un sito
e l’orientamento al suo interno.
Studi sul layout navigazionale delle pagine web
Non esistono delle regole rigide o degli standard di riferimento unici
per il posizionamento dei meccanismi navigazionali nel layout di una
pagina.
Tuttavia nel corso dell’evoluzione nella progettazione delle pagine
web, sono stati elaborati degli studi riguardanti proprio le aspettative
degli utenti in relazione al posizionamento dei meccanismi
navigazionali.
Come si vede nella tabella seguente, tali aspettative sono leggermente
cambiate nel corso degli anni. Tuttavia, come già accennato, uno dei
trend più comuni nel posizionamento dei vari meccanismi
navigazionali è quello che li vede situati sul lato sinistro delle pagine.
In particolare poi i meccanismi relativi alla navigazione principale
sono quasi sempre collocati in alto a sinistra oppure orizzontalmente,
sul lato superiore delle pagine, proprio secondo le ultime tendenze nel
campo del web design navigazionale.
Evoluzione nel posizionamento degli elementi navigazionali
Template navigazionale
Nel caso di siti web di grande diffusione è difficile che il layout
navigazionale della pagine venga realizzato manualmente. Infatti per
la realizzazione del layout navigazionale di centinaia di pagine è
possibile ricorrere a dei template navigazionali prestabiliti secondo
regole precise.
Tali template pertanto non sono altro che collezioni predefinite di
meccanismi navigazionali. In queste organizzazioni navigazionali due
o più meccanismi possono essere inseriti simultaneamente, a creare
un unico, ampio “modulo” navigazionale.
Ad esempio, l’area di navigazione globale potrebbe essere indicata
attraverso l’utilizzo di un logo, insieme agli elementi della
navigazione principale e utilitaria.
All’interno di un template navigazionale questi diversi meccanismi
vengono concepiti e rappresentati come un singolo elemento.
La creazione di un template navigazionale permette che uno stesso
meccanismo navigazionale venga rappresentato allo stesso modo
nelle diverse pagine del sito in cui viene utilizzato, a seconda delle
esigenze.
Regole navigazionali
Il design navigazionale si occupa di creare la giusta formula secondo
la quale gli elementi navigazionali dovranno apparire in ogni pagina.
Pertanto l’obiettivo è quello di realizzare uno schema generale per
l’intero sito dei diversi meccanismi navigazionali, appartenenti alla
struttura di navigazione generale.
Nella creazione di questo sistema bisogna considerare alcune regole
di base:
Visualizzazione dei moduli navigazionali
Un template completo indica con precisione tutti quei moduli
navigazionali che possono apparire in una pagina, a seconda della
tipologia di quest’ultima. Tra questi è poi necessario scegliere quegli
elementi che sono obbligatori per un corretto funzionamento della
pagina.
Posizione dei meccanismi navigazionali
I moduli navigazionali tendono ad occupare sempre una stessa
posizione nel layout generale delle pagine. Tuttavia è necessario
considerare gli eventuali aggiustamenti del layout qualora si
decidesse di non far comparire un determinato elemento
navigazionale in una pagina.
Ad esempio, determinati link possono apparire o meno su una pagina,
in relazione alla sua tipologia e alla sua posizione all’interno
dell’architettura.
Limiti
Le regole relative alla realizzazione di template navigazionali devono
tenere conto ovviamente dei “limiti” delle pagine. Tali limiti sono
dettati dall’estensione delle pagine stesse. Pertanto determinati
collegamenti devono adeguarsi allo spazio disponibile, a seconda
delle pagine in cui dovranno comparire. Ad esempio è possibile avere
una navigazione associativa che generalmente mostra tre o quattro
link. Cosa succederebbe se in una pagina si avesse la necessità di
inserirne almeno dieci? Pertanto il template deve tenere conto anche
di questa eventualità e gestire correttamente gli spazi.
Esempio di template navigazionale a “moduli” di una pagina prodotto di un sito e-
commerce
Mostrare la progressione navigazionale
Pur scegliendo di utilizzare un unico template navigazionale è
possibile fare in modo che questo venga visualizzato in maniera
leggermente diversa a seconda della pagina di riferimento. Questo
utilizzo “progressivo” di un template navigazionale serve a
differenziare i moduli navigazionali a seconda delle funzioni e a
conferire una maggiore enfasi a determinati contenuti.
Tali cambiamenti nel layout navigazionale servono a creare proprio
un senso di progressione tra le pagine del sito, modificando la
visualizzazione del template della pagina di partenza nei nodi
successivi, da questa dipendenti.
Esempio di progressione navigazionale, template 1 (dal sito www.nps.gov)
Negli esempi sopra riportati è visibile un cambiamento progressivo
nel template navigazionale di partenza, nella visualizzazione dei
sotto-contenuti dipendenti dalla home page di partenza.
In particolare vediamo che gli elementi navigazionali della prima
pagina includono una barra navigazionale come meccanismo di
navigazione principale, affiancata sul lato destro da un meccanismo
di ricerca.
L’esempio 2 mostra il template di una pagina situata ad un livello al
di sotto della home page. Il template navigazionale è cambiato in
maniera significativa: il meccanismo di navigazione principale si è
spostato più in alto nella pagina, lasciando maggior spazio agli
elementi di navigazione locale per il raggiungimento di pagine ancora
più interne nella struttura del sito. Al contrario il meccanismo di
ricerca interna è rimasto sul lato destro della pagina.
L’ultimo passaggio (template 3) mostra infine un ulteriore
cambiamento del template navigazionale. La pagina relativa al parco
del Gran Canyon in Arizona, più interna nella struttura generale del
sito, presenta un meccanismo di navigazione locale più ampio, sul
lato sinistro della pagina, insieme a nuovi elementi per la navigazione
associativa: una serie di “link veloci” collegati ai contenuti specifici
del parco selezionato. Inoltre è senz’altro significativo il
cambiamento, rispetto alla pagina di partenza, della dimensione
dell’immagine di sfondo che va ad occupare sempre meno spazio per
privilegiare invece il contenuto.
In altri casi tuttavia è possibile anche trovare template non
progressivi. Molto spesso si incontrano siti che adottano volutamente
un template navigazionale completamente differente nella sola home
page, per differenziarla nettamente rispetto ai contenuti da questa
dipendenti.
Queste tecniche di progettazione non vengono riconosciute
consapevolmente dagli utenti, tuttavia il loro valore è ugualmente
importante nell’organizzazione del sistema di navigazione. Se usati
correttamente, tali variazioni nella posizione e nell’aspetto dei
meccanismi e delle aree navigazionali possono guidare naturalmente i
visitatori attraverso i contenuti.
Wireframes
I cosiddetti wireframes non sono altro che i modelli preliminari delle
pagine. Vengono realizzati per mostrare lo scheletro del sistema
navigazionale, indipendentemente dalla sua visualizzazione grafica
finale. L’utilizzo delle tecniche e degli accorgimenti che abbiamo
brevemente analizzato nel modulo dedicato al web design grafico,
unite alla realizzazione dei wireframe navigazionali, produranno la
versione definitiva della pagina, così come apparirà attraverso i
browser.
Esempio di wireframe relativo ad una pagina galleria
Esistono diversi criteri per la realizzazione di un framework
navigazionale.
Fedeltà
Esistono dei wireframe ad “alta” e a “bassa fedeltà”. Wireframe a
bassa fedeltà possono non mostrare alcun tipo di layout ma elencare
semplicemente una lista di tipologie navigazionali, contenuti e
funzionalità necessarie per ogni pagina. Al contrario i Wireframe ad
alta fedeltà vengono utilizzati anche per suggerire il design grafico
finale delle pagine, indicando le dimensioni e la posizione degli
elementi navigazionali.
Posizionamento delle etichette e dei testi
Nella realizzazione di un wireframe è possibile utilizzare dei testi e
delle etichette temporanee oppure indicare queste direttamente, così
come dovranno apparire nella visualizzazione finale.
Formato
I wireframe possono essere realizzati su diverse tipologie di supporti.
Possono infatti essere inizialmente progettati su carta per poi venire
elaborati attraverso l’utilizzo di un software dedicato. In quest’ultimo
caso è importante menzionare l’esistenza di wireframe HTML,
programmi specifici che offrono il vantaggio di collegare
direttamente le pagine.
Questo processo permette di controllare la transizione tra le diverse
pagine e pertanto di verificare il “feel” del sito senza considerarne
l’apparenza, il “look”.
I programmi utilizzabili per la realizzazione di un framework sono
molto spessi gli stessi utilizzati per la creazione di sitemap come
ancora una volta Microsoft Visio oppure, in ambito open source, il
software Cacoo (cacoo.com).
La realizzazione dei wireframe precede la creazione del design finale
di un sito. Tuttavia i wireframe non indicano ogni aspetto del layout
di una pagina. I web designer hanno ancora la possibilità di
modificare l’aspetto grafico delle pagine, determinando l’esatto
posizionamento e allineamento degli elementi.
Creare un wireframe
Nella creazione di un wireframe è necessario coordinare tre fonti
primarie di informazione, precedentemente realizzate.
1. Site map
La mappa del sito servirà a mostrare in dettaglio la struttura
navigazionale di ogni pagina: un passo senz’altro fondamentale nella
progettazione di un wireframe.
2. Requisiti
E’ importante identificare subito i requisiti di base che influenzeranno
la realizzazione visiva finale del sito. In alcuni casi può venir
richiesto che un determinato elemento sia presente in ogni pagina,
come ad esempio il marchio di un prodotto o il simbolo di
un’azienza. In altri casi chi commissiona il sito potrebbe richiedere
espressamente l’inserimento, in pagine specifiche, di “carrelli per gli
acquisti”, specifiche note legali, condizioni di utilizzo, ecc.
Pertanto i wireframe delle pagine di un sito dovranno considerare fin
dal principio l’inserimento di tutti quei requisiti espressamente
richiesti.
3. Analisi del contenuto
Durante l’analisi preventiva del contenuti, vari aspetti di questo sono
stati già identificati. Al momento della creazione di un wireframe si
dovrebbero già conoscere tutte le tipologie di contenuto (file pdf, file
multimediali, file immagine, ecc.) presenti nelle pagine.
La natura dei contenuti (estensione e caratteristiche specifiche dei
vari elementi) dovrà essere indicata anche all’interno del wireframe.
La creazione di un wireframe, secondo i parametri analizzati, servirà
pertanto a unire e consolidare tutte quelle informazioni fondamentali,
a cominciare da quelle navigazionali, necessarie alla realizzazione
finale di un sito.
FINE LEZIONE