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)

Esempio di progressione navigazionale, template 2 (dal sito www.nps.gov)

Esempio di progressione navigazionale, template 3 (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