ARCHITETTURA DELL’INFORMAZIONE

Nel suo uso originale e più comune,il WEB può essere inteso come un’unica,grande applicazione
distribuita,costituita dall’insieme di tutti i server web accessibili su Internet e dai browser che gli
utenti connessi impiegano per navigare. Tale applicazione è finalizzata a rendere accessibili agli
utenti i file memorizzati in particolari directory del file system del calcolatore su cui ogni server web
è in esecuzione. ASPETTI DEL WORLD WIDE WEB : Il web è dunque un servizio applicativo,un
sistema distribuito (world wide) di documenti e risorse accessibili pubblicamente tramite protocollo
http. Si combinano quindi: ▸ aspetti tecnologici e ▸ aspetti comunicativi e sociali.

ASPETTI E VINCOLI TECNOLOGICI sono principalmente:

▸ limiti di banda (possibilità di trasmettere contemporaneamente grandi
quantità di dati; ▸ limiti in velocità di connessione e capacità di download; ▸ scarso (nessun)
controllo di come l’utente vedrà la pagina: i dispositivi possono essere:
▸ browser di pc (ma che browser? che monitor?) ▸ browser di dispositivi portatili ▸ screenreader e
tecnologie assistive. ASPETTI COMUNICATIVI: il web è anche un mezzo di comunicazione
specifico con caratteristiche diverse dai media tradizionali (stampa, radio,tv…):
▸ ipertestualità; ▸ interattività; ▸ multimedialità .
TESTI E IPERTESTI
▸ Nel testo tradizionale l’ordine di lettura è sequenziale.
▸ Nell’ipertesto non c’è sequenza o ordine: i percorsi possono essere infiniti. L’ipertestualità
completa è un’astrazione: nella pratica gli schemi sono più gerarchizzati ma non comunque
rigidamente vincolanti.
IL WEB NON È UN LIBRO:
L’ordine di lettura in un libro è fondamentalmente sequenziale (se non è un dizionario o un elenco
del telefono).Il formato di un libro è noto a priori,un libro non è aggiornabile (al massimo si
ristampa), un sito web è un’opera “aperta”. La lettura su carta è meno faticosa.
IL WEB NON È UN GIORNALE: Nel giornale c’è una forma debole di ipertestualità (“continua
dalla prima”, “segue a pagina..”),ma l’informazione non è strutturata. Il formato è noto a priori.
IL WEB NON È LA TV: A differenza della tv (con cui condivide la multimedialità) il web permette
molta più libertà: è un medium “on demand”, non broadcast; dall’altra parte non c’è uno spettatore
passivo ma un utente attivo,è un medium interattivo (non solo col telecomando…)
IL WEB È’: ▸ una fonte di informazioni e di contenuti strutturati; ▸ una fonte di servizi realizzati
da applicazioni di vario tipo (funzioni di ricerca, servizi al cittadino, e-commerce…) ▸ l’utente del
web ha bisogno di qualcosa (un’informazione, un servizio, un prodotto): la pagina web è
l’interfaccia attraverso la quale potrà ottenere quello che cerca.
ESEMPI DI INTERFACCIA ▸ esempi cui non facciamo più caso: l’interruttore della luce, il
volante dell’automobile.L’interfaccia sta tra noi e certi dispositivi per “aiutarci” ad
usarli,conoscendo un’interfaccia posso astrarre dalle caratteristiche specifiche di un
dispositivo,volante e leva del cambio sono gli stessi in una 500 e in una ferrari.
INTERFACCE ▸ l’interfaccia migliore è quella che non si fa notare (trasparenza). Quando
abbiamo familiarizzato con un’interfaccia tendiamo a non vederla più, a considerarla come
“naturale”; è importante insistere su elementi standardizzati e entrati nell’abitudine.
HCI: HUMAN-COMPUTER INTERACTION
La hci (interazione uomo-macchina) è una disciplina che studia le modalità di interazione tra
l’utente e il computer. Analizza gli aspetti psicologici connessi all’uso dei computer ed elabora
teorie e paradigmi per sviluppare sistemi che facilitino l’interazione con l’utente. Ha carattere
multidisciplinare perché in essa convergono: ▸ informatica e intelligenza artificiale; ▸ ergonomia
▸ psicologia e scienze cognitive.
HCI: I PARADIGMI
▸ anni 50-60
nessun paradigma: l’interazione avveniva tramite schede perforate
▸ anni 70
paradigma della macchina da scrivere: interazione a riga di comando
▸ anni 80
paradigma della scrivania e delle finestre: nascono le GUI
▸ anni 90 e successivi
paradigma della naturalezza
INTERFACCE E USABILITÀ
L’usabilità è quella disciplina (branca della HCI) che studia i meccanismi per valutare e migliorare
gli strumenti informatici nella loro interazione con l’utente. L’usabilità nel web riguarda la facilità
dell’interazione tra utente e sito e la corrispondenza tra design model e user model.
Possiamo vedere il sito web come un ambiente (più o meno familiare, più o meno ostico) in cui
l’utente deve muoversi per perseguire i propri scopi.
COS’È L’USABILITÀ? ▸ il "grado in cui un prodotto può essere usato da particolari utenti per
raggiungere certi obiettivi con efficacia, efficienza e soddisfazione in uno specifico contesto d'uso."
▸ norma iso (international standard organization) 9641
ATTRIBUTI DELL’USABILITÀ (1)
Secondo il Sun Usability Lab i principali attributi dell’usabilità sarebbero:
▸ utilità: un sito è usabile se l’utente riesce a comprenderne gli scopi e l’utilità che il sito ha per lui
▸ facilità di apprendimento: un sito è usabile se le funzionalità che propone sono fruibili con un
tempo di apprendimento ragionevole
▸ efficienza: un sito è usabile se i suoi contenuti sono consultabili in maniera veloce e
proficua
ATTRIBUTI DELL’USABILITÀ
▸ facilità di ricordo:il funzionamento di un sito deve poter essere ricordato facilmente
▸ prevenzione degli errori: se gli utenti continuano a commettere errori cercando di compiere delle
azioni il sito non è usabile
▸ soddisfazione: un sito deve poter essere usato senza frustrazione
COSA COINVOLGE L’USABILITÀ All’ usabilità concorrono:
▸ la struttura dell’informazione nel sito;▸ l’impianto grafico della pagina;▸ la chiarezza dei contenuti.
ORGANIZZAZIONE VISUALE DELLA PAGINA
▸ strumenti; ▸ vicinanza: gli elementi spazialmente vicini in una pagina web sono percepiti
dall’utente come un’unità di contenuto omogenea (es. Barra di navigazione, menù); ▸ somiglianza:
gli elementi simili sono percepiti come funzionalmente identici (i link andrebbero formattati allo
stesso modo...)
COERENZA: gli elementi di un sito web dovrebbero ripetersi in modo coerente per tutte le pagine,
es. posizione del logo nell’intestazione, posizione dei menù. La gerarchia tra i vari elementi deve
sempre essere chiara,gli elementi strutturali vanno distinti a colpo d’occhio da
quelli specifici della pagina. METAFORE ▸ le metafore riconducono l’ignoto e l’astratto al noto e al
concreto: se ben usate possono aiutare il visitatore,forniscono una “cornice” concettuale e aiutano
l’apprendimento,irischi: se non vengono comprese creano difficoltà senza dare alcun valore
DON’T MAKE ME THINK! ▸ è il titolo di un famoso libro di Steve Krug e si riferisce al fatto che
l’utente del web non vuole perdere tempo a imparare complesse modalità di interazione ma
ha fretta,vuole ottenere al più presto quello che cerca; meglio aderire alle convenzioni e agli
standard.
LA STRUTTURA DI UN SITO
▸ Contesto: il sito contiene una grande quantità di informazioni di natura diversa (notizie,
documenti, elementi multimediali ecc.). Normalmente non è possibile presentare tutta
lʼinformazione in unʼunica pagina e nemmeno presentare in unʼunica pagina i collegamenti a tutte
le informazioni presenti.
▸ Condizioni: lʼutente deve riconoscere lʼidentità del fornitore delle informazioni; deve conoscere
rapidamente il contenuto generale, per poter poi eventualmente accedere ai particolari;
deve disporre di contenuti di buona qualità; non vuole perdersi..
▸ Problema: come si può organizzare il contenuto del sito in modo che lʼutente ne abbia
consapevolezza e possa esplorarlo liberamente, senza dover seguire percorsi
obbligati ovvero senza vincoli eccessivi alle proprie scelte?
▸ Soluzione: raggruppare i contenuti in aree che contengono informazioni concettualmente
omogenee tra loro.
DAL GENERALE AL PARTICOLARE
Per Aggregare informazioni rilevanti ci si deve muovere in base a due criteri principali:
▸ le informazioni aggregate siano concettualmente omogenee tra loro e la descrizione del
contenuto vada dal generale a particolare.
▸ Si sviluppano allora aree, sezioni e sottosezioni nelle quali i contenuti si arricchiscono man mano
di un crescente dettaglio di informazione.
▸ Il criterio della omogeneità del raggruppamento dovrebbe rispecchiare il punto di vista dell’utente,
non quello del progettista.
LA HOME PAGE
▸ La home page è il principale punto di accesso al sito Web, in cui si devono capire con
immediatezza l’organizzazione dei contenuti e dei servizi offerti e i sistemi di navigazione. Nella
home page dovrebbe esserci una sintetica “Dichiarazione della missione”, il cui scopo è di offrire
una sintesi sugli obiettivi, i
contenuti e l’appartenenza del sito web. La struttura della pagina home è diversa da tutte le altre,
anche
se alcuni elementi devono essere omogenei a tutto il sito, come la testata, la navigazione
principale, la metanavigazione e il piè di pagina (footer).
I TITOLI DI SEZIONI, AREE E PAGINE
In un sito Web ci sono elementi come il titolo di una pagina (page title), il testo di un collegamento,
il titolo del testo di un documento che hanno una grande importanza. Questi elementi sono infatti
utilizzati, oltre che per gli scopi propri, anche per navigare il sito, per far percepire i contenuti e per
facilitare la lettura delle pagine.
Si consiglia di utilizzare parole di uso quotidiano (plain language) e brevi frasi che descrivono cose
reali prima che concetti. Si tratta di elaborare piccoli testi (40-60 caratteri) che vanno considerati
come veri e propri microcontenuti utili per farsi una idea veloce e precisa di ciò che sta
consultando. In particolare, è necessario dare un titolo significativo e pertinente a tutte le pagine
(page title). Si dovrebbe indicare prima il particolare (la pagina specifica) e poi il generale (il nome
del sito).
GLI ELEMENTI DELLA PAGINA
La struttura della pagina web tipica è composta da quattro zone distinte:
▸ la testata
▸ il corpo
▸ la barra di navigazione
▸ piè di pagina
LA NAVIGAZIONE
Gli scopi della navigazione web sono:
▸ presentare ai visitatori, con il percorso più user friendly, la classificazione degli elementi del sito,
così che possano trovare velocemente il contenuto che cercano;
▸ assicurare che i visitatori sappiano sempre in che parte del sito si trovano;
▸ permettere ai visitatori di muoversi velocemente e in modo logico attraverso il sito web;
▸ dare ai visitatori i riferimenti appropriati del contenuto che stanno leggendo;
▸ fornire esempi di contenuti che l'organizzazione vuole promuovere.
Con “architettura del sito” viene generalmente indicata l’organizzazione del sito nelle sue pagine,
ovvero come si articola e da che elementi è costituito. La struttura del sito è strettamente connessa
alla navigazione: l’una non può prescindere dall’altra. L’architettura di base di un sito Web è
gerarchica: da una home page si possono raggiungere pagine di secondo, terzo, quarto livello ecc.
GLI ELEMENTI CHIAVE DELLA NAVIGAZIONE
▸ La navigazione principale: La navigazione principale è spesso posizionata su una colonna a
sinistra della pagina. Questa soluzione mantiene il vantaggio di essere sempre in primo piano e si
adatta facilmente alle dimensioni reali della finestra ed è chiaramente distinta da tutti gli altri
sistemi di navigazione presenti. Di fatto è la più usata nei siti Web.
▸ La barra di navigazione è uno dei componenti più importanti della pagina perché consente
all’utente di avere una percezione chiara dei contenuti e di navigare la struttura senza perdersi.
LA BARRA DI NAVIGAZIONE
Per una buona barra di navigazione è importante che:
▸ l’utente possa ricordarne facilmente il contenuto: il numero di elementi che la costituiscono non
deve superare sei o sette. Questo è il limite comunemente riconosciuto alla capacità umana di
memoria breve;
▸ gli elementi devono avere un nome significativo che evochi immediatamente i
contenuti della destinazione. Per maggiore chiarezza si può aggiungere informazione ridondante
ad ogni elemento, attraverso la piccola finestra che appare al passaggio del mouse sul
collegamento, inserendo una frase descrittiva sulla destinazione del collegamento.
▸ gli elementi devono essere presentati in forma di lista reale cioè costituita da testo e non da
immagini;
▸ la sua posizione sia sempre la stessa in tutte le pagine.
▸ La navigazione secondaria: un sistema di navigazione secondario (indice) separato da quello
di navigazione principale, che comprende solo la lista delle sotto- sezioni in cui è suddivisa la
singola area. Di solito si inserisce nella colonna a destra della pagina.
▸ La navigazione contestuale: Sistema di navigazione che collega concettualmente un documento
ad altri documenti del sito, come a formare un dossier tematico. La navigazione contestuale
è posizionata nella parte destra della pagina. I documenti possono essere:
▸ documenti di testo; ▸ documenti multimediali; ▸ collegamenti a siti esterni;
▸ Le briciole di pane (bread-crumbs): Indicano all’utente in quale punto della struttura ci si trova
durante la navigazione dei diversi livelli in cui è organizzato il sito. Costituiscono un sistema di
navigazione che permette all’utente saltare a punti precedenti il percorso seguito senza dover
ricorrere all’uso ripetuto del tasto “Indietro”. Si percepisce così la struttura dell’informazione
costruendosi una mappa mediante l’associazione della tipologia di un tipo di documento al
percorso effettuato per rintracciarlo. La briciole di pane mostrano il percorso dalla Home page alla
pagina corrente. Sono in ogni pagina, esclusa la Home page:
Home > Sezione > Sotto-sezione > Pagina corrente
▸ La meta navigazione: sezione della pagina in cui vengono messi a disposizione dell'utente
strumenti di aiuto pronti all'uso, con elementi per la comunicazione e le funzionalità generali, come:
▸ Home: indica il collegamento alla Home page.
▸ Cerca: collegato a motori di ricerca per l’individuazione di contenuti specifici all’interno del sito.
▸ Mappa: indica l’articolazione del sito in tutte le sue directory.
▸ Guida: contiene indicazioni generali sul sito e sul suo utilizzo.
▸ Contatti: consente il contatto rapido con i referenti del sito.
▸ Feedback: in genere rinvia ad un modulo per rilevare il gradimento degli utenti inviando
commenti e suggerimenti
USABILITÀ DEI LINK
▸ i link sono la caratteristica principale del web e dovrebbero essere sempre chiaramente
riconoscibili,soprattutto i link interni al testo: andrebbero sottolineati, nessuna altra parte di testo
dovrebbe avere caratteristiche che possono generare confusione. Il loro testo dovrebbe essere
breve e indicativo. ▸ usare sempre l’attributo title nei link: il title è la casella di testo che compare
quando il mouse si sofferma sopra il link.
ERRORI DA NON FARE
▸ incoerenza nella disposizione/presentazione degli elementi strutturali
▸ testi non chiari, etichette non rappresentative
▸ link poco evidenti
▸ sovraffollamento di formati
▸ materiali troppo pesanti da scaricare
LA USER EXPERIENCE: occorre adottare il più possibile il punto di vista dell’utente ▸ la user
experience è l’esperienza di navigazione che l’utente compie sul sito. Si compone di:
▸ comportamenti
▸ risultati
▸ sensazioni
LA USER EXPERIENCE: EMOTIVITÀ / RAZIONALITÀ
Ogni sito cerca di “pilotare” l’esperienza dell’utente, siti diversi propongono ambienti ed esperienze
diverse, puntando più sull’emotività o sulla razionalità,ciò comporta anche distinzioni di “genere” tra
siti di entertainment, siti di e-commerce, siti informativi o didattici...
I TEST DI USABILITÀ sono un insieme di metodologie e tecniche basate sullo
studio di utenti reali alle prese con prodotti reali,gli scopi:
▸ individuare i problemi
▸ capire come l’utente ragiona utilizzando l’interfaccia
Occorre creare un campione di utenti rappresentativo (variabili: competenze informatiche, titolo di
studio…),gli utenti vengono invitati a svolgere una serie di compiti individuali in maniera
sequenziale.
Tecnica del thinking aloud: ▸ Il Thinking Aloud è una tecnica che si utilizza nei test di usabilità con
l’obiettivo di comprendere al meglio le scelte e le motivazioni che spingono l’utente a compiere
determinate azioni. I partecipanti all’attività sono stimolati a esprimere a voce alta pensieri,
sensazioni e opinioni durante l’interazione con il prodotto o servizio.
LA “LETTURA” SUL WEB
La lettura sullo schermo è più lenta del 25% che sulla carta,da alcune ricerche risulta che gli
utenti del web non leggano, ma scansionino rapidamente la pagina alla ricerca del
contenuto di interesse: ▸ conseguenze sullo stile da adottare ▸ conseguenze sulla formattazione
REGOLE DI BASE
▸ la regola più importante: concisione! Sono assolutamente adatte al web le massime di Herbert
Paul Grice (filosofo):
▸ massima della quantità: “scrivi l’informazione necessaria, né di più, né di meno”
▸ massima della qualità: “scrivi solo ciò di cui hai le prove”
▸ massima della relazione: “scrivi solo ciò che è pertinente”
▸ massima del modo: “sii chiaro”
LA PIRAMIDE ROVESCIATA
▸ gli utenti del web non vogliono perdere tempo: hanno bisogno di capire immediatamente se il
testo che hanno di fronte è di interesse oppure no.
▸ la “piramide rovesciata” (informatico danese Jackob Nielsen) consiste nello scrivere partendo
dalle conclusioni ed esponendole in modo conciso, i dettagli e le informazioni utili alla spiegazione
vanno aggiunti solo in seguito.
SPEZZARE L’INFORMAZIONE
▸ i testi in rete non dovrebbero mai essere troppo lunghi
(meglio spezzarli in più testi) ▸ occorre spezzare l’informazione in paragrafi che contengano
una sola idea, una sola informazione
LABELING DEI LINK
Il testo dei link:▸ deve essere breve e chiaro;▸ deve essere rappresentativo della destinazione
(niente“clicca qui”); ▸ non deve essere autoreferenziale (tipo “vai alla pagina...”: tutti sanno che
attraverso un link andranno ad un’altra pagina)
GLI SPAZI BIANCHI E I GRASSETTI
Data l’abitudine di “scansionare” le pagine è molto utile dividere i paragrafi con uno spazio bianco
Usare il più possibile gli elenchi:
▸ puntati: se la sequenza non è importante
▸ numerati: se la sequenza è importante
▸ evidenziare le parole chiave
▸ preferire il grassetto al corsivo
▸ non usare sottolineature (caratteristiche dei link)
COLORI E CONTRASTO
▸ usare colori standard (possibilmente il nero) ed evitare di
usare più di un colore nel testo
▸ nero su bianco è la combinazione che assicura il contrasto
maggiore e quindi la miglior leggibilità possibile
ALLINEAMENTO
Gli allineamenti disponibili sono:
▸ a sinistra ▸ al centro▸ a destra ▸ giustificato
La leggibilità maggiore viene dall’allineamento a sinistra
▸ Arial, Helvetica, Tahoma, Verdana, Century Gothic sono caratteri a bastoni (sans)
▸ Times, Garamond, Palatino Linotype caratteri graziati (serif)
FONT PER IL WEB
Se sulla carta sono preferibili i caratteri graziati, la lettura su schermo è più agevole con caratteri a
bastone,il tipo di font dipende dalla macchina client: occorre usare sempre fontstandard, come
▸ Arial
▸ Verdana
▸ Tahoma
▸ evitare di mischiare i font tra loro (soprattutto se si tratta di grazie con grazie e di bastoni con
bastoni).
CHE COS’È L’ARCHITETTURA DELL’INFORMAZIONE?

TROVABILITÀ
METODI DI RICERCA

SISTEMI DI NAVIGAZIONE

NAVIGAZIONE PRINCIPALE: In alto (poche opzioni) o a sinistra (molte

opzioni). ▸ Serve a muoversi nelle aree principali del sito e dare un’idea dei contenuti principali
NAVIGAZIONE LOCALE: A sinistra, oppure a destra se il menù principale è a sinistra
▸ Serve a dare le opzioni di “azione” concreta all’utente nell’area che ha scelto e approfondire parti
NAVIGAZIONE CONTESTUALE
Tipicamente a destra e a centro della pagina, dentro il testo
Serve a dare accesso ai materiali, fornire link o associazioni ad altre pagine, effettuare azioni
NAVIGAZIONE DI ORIENTAMENTO
Tipicamente in alto, sotto al logo e al menù principale
Serve a dare la posizione in profondità nel sito e risalire per categorie
NAVIGAZIONE DI SERVIZIO
Tipicamente in alto, a fianco del logo e sopra il menù principale
Serve a dare informazioni sul sito, sull’azienda, e alcune istruzioni e servizi del sito. Serve a gestire
l’identità e le personalizzazioni .
REGOLE GENERALI PER LA PROGETTAZIONE DEI MENÙ
▸ Coerenza. Il titolo della voce di menù è anche il titolo della pagina
▸ Feedback. I menù attivi e i pulsanti cambiano stato (es. quello attivo non è cliccabile ed è di un
colore diverso)
▸ Memorizzabilità. Ogni box del menù non ha più di 7 collegamenti
▸ Learneability. I menù di navigazione rispecchiano il più possibile la struttura informativa del sito
▸ Prevedibilità. La tassonomia deve rispecchiare le aspettative dell’utente
▸ Scelte esplicite. Se il sito è grande i sottomenù principali stanno in sotto-home
page. No ai sottomenù a comparsa
▸ Convenzioni. Usate icone standard e convenzionali
LE NUOVE TENDENZE
▸ Classificazioni fluide (tag)
▸ Associazioni contestuali tra i contenuti (notizie correlate, task correlati)
▸ Inline navigation (es. Wikipedia)
▸ Navigazione globale stretta (poche voci – aumento navigazione contestuale)
▸ Navigazione centrata sui task (voci legate al “fare” dell’utente)
▸ Classificazioni a faccette (e commerce)
▸ Gestione identità (profili, personalizzazioni)
▸ Comportamenti emergenti (più visti, più scaricati ecc)
CLASSIFICAZIONI FLUIDE: TAG
I contenuti sono classificati con etichette e sparisce la navigazione classica. Un contenuto può
essere raggiunto da più punti ed è classificato in modo multidimensionale.
SISTEMI DI RICERCA