Progettare un framework navigazionale

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 Qual è il tema della pagina?

Marcatura 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 è Indicare le sezioni con un simbolo divisa? stella.

Qual è il primo livello in alto rispetto a questa Indicare con un piccolo quadrato. pagina?

Come raggiungo la Home Page?

Indicare con un triangolo.

Come raggiungo il livello superiore di questa Indicare con un rombo. sezione del sito?

Che cosa rappresenta ogni gruppo di link?

Indicare con: pallino verde – dettagli maggiori, sottopagine. 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â&#x20AC;&#x2122;esistenza e lâ&#x20AC;&#x2122;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â&#x20AC;&#x2122;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â&#x20AC;&#x2122;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â&#x20AC;&#x2122;inserimento di frame leggermente diversi da quelli originali possono tuttavia venire ancora utilizzati attraverso lâ&#x20AC;&#x2122;utilizzo dei CSS. Esempio della creazione di frame per la navigazione attraverso lâ&#x20AC;&#x2122;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 ecommerce.

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â&#x20AC;&#x2122;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â&#x20AC;&#x2122;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â&#x20AC;&#x2122;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â&#x20AC;&#x2122;interno del sito.

Ogni pagina non è altro che un potenziale fulcro allâ&#x20AC;&#x2122;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 â&#x20AC;&#x153;a ragnatelaâ&#x20AC;?

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 ecommerce. Tuttavia anche un sito web costituito da poche pagine può essere strutturata secondo unâ&#x20AC;&#x2122;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â&#x20AC;&#x2122;organizzazione dei contenuti secondo architettura gerarchica Musica Rock Rock classico Beatles Abbey Road Sgt. Pepperâ&#x20AC;&#x2122;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â&#x20AC;&#x2122;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 Stile

Artista

Valori Rock Rock classico â&#x20AC;Ś..Rock sperimentale Classica Johann Sebastian Bach Beatles Pink Floid

Titolo

Prezzo

Frank Zappa Igor Stravinskij 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, 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â&#x20AC;&#x2122;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â&#x20AC;&#x2122;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â&#x20AC;&#x2122; possibile inoltre attraverso lâ&#x20AC;&#x2122;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â&#x20AC;&#x2122;obiettivo finale del sito. Tale indicazione sarĂ poi fondamentale nella progettazione e realizzazione di eventuali cambiamenti.

Titolo e legenda (key) Nellâ&#x20AC;&#x2122;intestazione di una sitemap è bene indicare oltre al titolo, la versione della mappa realizzata, a differenziarla da eventuali pianificazioni successive. Fondamentale è inoltre lâ&#x20AC;&#x2122;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â&#x20AC;&#x2122;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 macroazioni 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â&#x20AC;&#x2122;esempio seguente mostra una high-level sitemap con tre tipologie differenti di siti collegati ad unâ&#x20AC;&#x2122;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â&#x20AC;&#x2122;eventuale acquisto dei prodotti.

I siti web rivenditori (dealer web-sites) Questi siti costituiscono il mezzo per effettuare quelle diverse transazioni rivolte poi allâ&#x20AC;&#x2122;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â&#x20AC;&#x2122;utilizzo dei connettori evidenzi sempre i diversi livelli gerarchici e eventualmente poligerarchici.

Lâ&#x20AC;&#x2122;esempio seguente mostra come, anche utilizzando rappresentazioni grafiche diverse, lâ&#x20AC;&#x2122;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â&#x20AC;&#x2122;interno dellâ&#x20AC;&#x2122;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â&#x20AC;&#x2122;usabilitĂ di un sito e lâ&#x20AC;&#x2122;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â&#x20AC;&#x2122;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â&#x20AC;&#x2122;obiettivo è quello di realizzare uno schema generale per lâ&#x20AC;&#x2122;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 â&#x20AC;&#x153;moduliâ&#x20AC;? di una pagina prodotto di un sito ecommerce

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 â&#x20AC;&#x153;progressivoâ&#x20AC;? 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â&#x20AC;&#x2122;organizzazione del sistema di navigazione. Se usati correttamente, tali variazioni nella posizione e nellâ&#x20AC;&#x2122;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â&#x20AC;&#x2122;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â&#x20AC;&#x2122;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