Wireframe e struttura del sito internet

Daniele Moraschi

Email: daniele.moraschi@gmail.com

Accademia di Belle Arti LABA di Brescia

Computer Graphics

Wireframe e struttura del sito

La categorizzazione dei contenuti è un'attività su cui si punta poco

l'attenzione nonostante sia imprescindibile, indipendentemente dalla tipologia del sito che vogliamo

realizzare.

Molto spesso raggruppiamo e strutturiamo i contenuti partendo da quello che è ovvio per noi, basandoci

in questo modo sui nostri modelli mentali personali.

Di fronte a un sistema informativo gli utenti cercano di costruirsi dei modelli

mentali.

Attraverso questi modelli l'utente valuta le relazioni tra i temi proposti

cercando di indovinarne l'intera struttura.

Non sempre l'architettura delle informazioni corrisponde alle

aspettative degli utenti.

La suddivisione dei contenuti in aree e sezioni incide direttamente sulla

"findability": la capacità che hanno gli utenti di reperire in maniera semplice e intuitiva le informazioni ricercate.

In molti casi, una progettazione efficace del sito web è frutto di un

bilanciamento ottimale tra il rapporto dei menu principali in homepage e il

contenuto delle sotto pagine.

Per contenuto si intendono informazioni e dati, che posso essere testuali o di altro tipo (es. orario dei treni, mappe,

software da scaricare etc).

Una struttura poco nidificata può generare elenchi di menu lunghi, che

mandano in confusione l'utente.

Una struttura eccessivamente profonda potrebbe "seppellire" le informazioni

sotto troppi strati di menu, rendendole inaccessibili.

SEQUENZE

Il modo più semplice e familiare per organizzare le informazioni potrebbe essere quello di inserirlo all'interno di

una sequenza.

L'ordine sequenziale può essere cronologico: dal più generico fino a

quello più specifico; o anche alfabetico, come gli indici, le enciclopedie e i

glossari.

I siti web più complessi possono sempre essere organizzati seguendo

una sequenza logica, ma ogni pagina della sequenza può

avere collegamenti a una o più pagine correlate, parentesi d'informazione,

sezioni relative ad altri siti web.

GERARCHIE

I siti web ruotano attorno alla Homepage, che collega

gerarchicamente tutte le sotto pagine.

La più semplice forma di struttura gerarchica del sito è quella a stella,

detta anche hub-and-spoke.

Il sito è composto da un unico livello gerarchico.

La navigazione tende ad essere un

semplice elenco di sottopagine, oltre al link che riporta alla home page.

Il primo step diventa quindi la definizione dei contenuti del sito, e l'organizzazione degli stessi, anche qualora il sito fosse già esistente.

Avere in mente gli argomenti da includere nel sito è solo il primo passo.

Una volta individuati; come vanno presentati sul sito? Come devono essere strutturati? In che rapporto

stanno i contenuti tra di loro?

WIREFRAME

E' prima bozza del sito.

Non ha elementi di web design ma ne definisce visivamente la struttura,

traducendo in immagine ciò che prima era solo testo scritto.

E' solitamente composto da vari blocchi senza colore detti anche

ingombri; con un testo bozza al loro interno piuttosto che una didascalia.

Serve a vedere la struttura delle pagine e il comportamento dei loro contenuti.

LOGO

Il wireframe presenta, sotto forma di immagine, gli elementi di una pagina e

le modalità di navigazione.

E’ il passo intermedio tra il progetto e il web design.

Fornisce le indicazioni sui pesi comunicativi dei vari elementi, sul

funzionamento di determinate aree, su cosa potrebbe fare l’utente ecc.

Usando i wireframes possiamo scatenare una serie di quesiti e

domande a cui nessuno aveva pensato finora.

Inoltre contribuiscono a mantenere

una traccia “su carta” delle decisioni che vengono prese sulla struttura del

sito.

Links

http://wireframes.linowski.ca/

http://en.wikipedia.org/wiki/Website_wireframe

http://www.wireframeshowcase.com/

http://www.digital-web.com/articles/redesigning_the_expressionengine_site

http://www.loop11.com/wireframe-usability-testing/

http://it.wikipedia.org/wiki/Mappa_mentale