Elementi di Information Architecture e Web Styling

Transcript

Elementi di
Information Architecture e Web Styling
Fonte:
Louis Rosenfeld & Peter Morville,
Information Architecture for the World
Wide Web, O’Reilly & Associates, 1998
Marco Porta - CIM: Web Design & Technologies
1
L'architetto dell'informazione
Information Architecture per il Web
Compiti principali dell’architetto dell’informazione
– determinare lo scopo del sito (sia dalla parte di chi lo
commissiona, sia da quella dell’utenza che avrà)
– stabilire quali saranno i contenuti e le funzionalità del sito
– definire l’organizzazione del sito e i criteri di navigazione e
reperimento delle informazioni al suo interno
– prevedere come il sito evolverà una volta realizzato
Chi è il buon architetto dell’informazione?
chi è in grado di porsi contemporaneamente dalla parte dell’utente e
da quella del cliente…
2
1
Sistema di organizzazione dell'informazione
Organizzazione dell’informazione
L’organizzazione di un sito è un fattore fondamentale per
determinarne il successo
Sistema di organizzazione = schema di organizzazione +
struttura di organizzazione
Schema di organizzazione
definisce un criterio secondo cui l’informazione è organizzata a
livello "locale" (es. pagina)
Struttura di organizzazione
definisce il modo in cui l’utente può “navigare” per accedere
all’informazione (es. struttura ipertestuale dell'intero sito)
3
Tipologie di schemi di organizzazione dell'informazione
Schemi di organizzazione dell’informazione…
Schemi esatti, ambigui e ibridi
Schemi esatti
dividono l’informazione in sezioni ben definite e mutuamente
esclusive
Tre organizzazioni tipiche:
• organizzazione alfabetica
es. elenchi telefonici, dizionari, …
• organizzazione cronologica
es. articoli di giornale, guide televisive, …
• organizzazione geografica
es. destinazioni di viaggi, …
4
2
Tipologie di schemi di organizzazione dell'informazione
… schemi di organizz. dell’informazione
Schemi ambigui
dividono l’informazione in categorie "non ben definite"
Q tt organizzazioni
Quattro
i
i i tipiche:
ti i h
• organizzazione per argomento (topical)
es. pagine gialle
• organizzazione orientata al compito (task oriented)
es. i comandi dei menù delle interfacce grafiche (File, Modifica, Inserisci, …)
• organizzazione dipendente da chi dovrà fruire delle informazioni
(audience-specific)
es. sito di un’azienda con sezioni per i clienti, i rivenditori, ecc.
• organizzazione
i
i
b
basata
t su metafora
t f
( t h di
(metaphor-driven)
)
es. sito per la vendita di PC in cui i componenti a cui si è interessati devono
essere selezionati sulla rappresentazione grafica di una motherboard…
Schemi ibridi
uniscono schemi esatti e ambigui; possono portare a confusione…
5
Progettazione del contenuto
Scelta delle “porzioni” di informazione
Scelta migliore: brevi porzioni di testo organizzate in modo
uniforme
– pochi utenti dedicano molto tempo alla lettura sullo schermo
eventualmente stampano…
– brevi porzioni si prestano ad essere meglio indicizzate attraverso link
quando clicca su un link l’utente si aspetta di accedere solo a ciò che gli
interessa…
– brevi porzioni di informazione vengono meglio visualizzate sullo
schermo
che ha un’area di visualizzazione limitata…
– un formato uniforme di rappresentazione dell’informazione permette
all’utente di applicare una certa “esperienza” alla navigazione
può “prevedere” come saranno strutturate le pagine che visiterà
6
3
Tipologie di strutture di organizzazione dell'informazione
Strutture di organizzaz. dell’informazione…
Definiscono (da un punto di vista logico) il modo in cui
l’utente può navigare
g
nel sito
Struttura sequenziale
l’accesso alle pagine avviene sequenzialmente;
adatta solo a siti di dimensioni molto piccole
Struttura a griglia
utile se le pagine condividono una strutturazione
uniforme in argomenti e sottoargomenti
es. sito medico dedicato alle varie malattie: prima
riga della struttura  malattie, seconda riga 
sintomi, terza riga  cure, ecc.
7
… strutture di organizz. dell’informazione…
Struttura gerarchica (approccio top-down)
lla b
base d
della
ll maggior
i parte
t d
delle
ll b
buone architetture
hit tt
è una struttura
t tt
gerarchica ben progettata
Regole generali:
• le gerarchie dovrebbero essere sempre
mutuamente esclusive
• occorre bilanciare attentamente larghezza
e profondità della gerarchia
Piante
da evitare gerarchie troppo strette e profonde
e gerarchie troppo larghe e piatte…
Fiori
Annuali
Alberi
Perenni
8
4
… strutture di organizz. dell’informazione…
Struttura a ipertesto
è un modo
d ““nuovo”” e non lilineare per organizzare
i
l’informazione
il collegamento tra porzioni diverse di informazione
avviene senza uno schema preciso; l’utente può
“perdersi”… meglio usarlo come complemento ad
altre strutture
Modello relazionale (approccio bottom-up)
strutturazione tipica dei database (collezioni di record, raccolti in
tabelle, formate da un certo numero di campi)
in pratica, i vari link riflettono la struttura dell’informazione nel database
(caso particolare di ipertesto)
9
… strutture di organizz. dell’informazione
Visione d’insieme
• i siti più complessi possono
essere basati su più di una
struttura di organizzazione
• qualunque siano le strutture
adottate, l’utente tenderà ad
accedere all’informazione
secondo uno “stile Web”
10
5
Il sistema di navigazione
Progettazione di sistemi di navigazione…
Due fattori di cui tenere conto: contesto e flessibilità
C t t
Contesto
– tutte le pagine dovrebbero contenere il nome/logo dell’organizzazione a cui il sito fa riferimento
– tutte le pagine dovrebbero avere titoli autoesplicativi sul loro
significato
– dovrebbe essere sempre chiaro dove ci si trova nella struttura del sito
Flessibilità
la gerarchia può essere limitativa: i link sono solo tra porzioni di
informazione tra loro “connesse” (navigazione verticale)  occorre
trovare un buon compromesso tra struttura gerarchica e struttura
ipertestuale (che permette anche una navigazione laterale)
11
… progettazione di sistemi di navigazione
L’utente dovrebbe essere il più possibile facilitato nella
navigazione
– dovrebbe poter ritornare facilmente alla home page da
qualunque pagina… andrebbero evitate le “pagine morte”
– se esiste un percorso di navigazione prefissato, può essere utile
inserire nelle pagine link alla “pagina precedente” e alla “pagina
successiva”
evitare menù con più di 5-7 link
12
6
Tipologie di sistemi di navigazione…
Sistemi di navigazione gerarchici
il passaggio
i ttra i varii d
documentiti
può avvenire solo secondo la loro
organizzazione gerarchica
Sistemi di navigazione globali
sono ammessi “salti” a documenti al
di fuori della struttura gerarchica
esempio tipico: barra di navigazione
nelle varie pagine del sito
13
… tipologie di sistemi di navigazione
Sistemi di navigazione locali
titipici
i i dei
d i ““sottositi”
tt iti” ((es. un’azienda
’ i d che
h ffornisce
i
un catalogo
t l
d
deii suoii
prodotti…); è ragionevole che un sottosito abbia un proprio sistema
di navigazione
Sistemi di navigazione ad hoc
– sono realizzati dai link all’interno del testo (approccio problematico
se i link sono importanti…)
– occorre sempre considerare se le parole/frasi selezionate per
essere collegamenti sono sufficientemente significative per
l’utente…
14
7
Elementi di navigazione integrati (interni)
Barre di navigazione
insiemi di link raggruppati
gg pp in una p
pagina…
g
Frame
possono presentare seri problemi (non vanno usati!):
• occupano spazio
• infrangono il “modello” della pagina a cui è associato un unico URL
(confusione con l’effetto del “back”, il reload della pagina e la stampa…)
• rallentano il download
• complicano la progettazione del sito
Menù a tendina
forniscono diverse opzioni (link) in modo compatto
15
Elementi di navigazione remoti (esterni)
Sommario (table of contents)
utile
til per siti
iti con struttura
t tt
gerarchica
hi
Indice
utile per siti con struttura non gerarchica; presenta parole o frasi in
ordine alfabetico
Mappa del sito
fornisce una rappresentazione grafica dell’architettura del sito
Tour guidato
introduce i nuovi utenti alle varie arre di un sito
16
8
Scelta delle "etichette"
Sistemi di labeling
labeling…
…
Il labeling si riferisce alla scelta delle parole/frasi/icone
chiave per identificare le sezioni importanti di un sito
ad esempio (ma non solo) per i link…
Label all’interno del sistema di navigazione
– sono fondamentali (in quanto indicano i percorsi per l’accesso
al sito…)
– vanno usate in modo consistente:
• non devono cambiare da una pagina all’altra
• le stesse label non devono essere usate per indicare cose diverse
(es. label News usata per indicare sia le nuove modifiche al sito, sia le
notizie del giorno…)
17
… sistemi di labeling…
Label come sistema di indicizzazione
utili per classificare il contenuto dei siti
siti, attraverso i tag <title>
<titl > e
<meta>
Esempi:
<title>CIM – Comunicazione, Innovazione, Multimedialità</title>
<meta name="keywords" content="laurea, comunicazione,
multimediale, interfacoltà, inovazione, media, economia,
ingegneria, lettere, scienze politiche, giurisprudenza">
<meta name="description" content="Corso di Laurea
Interfacoltà in Comunicazione, Innovazione,
Multimedialità">
18
9
Label come link nel testo
– non è strettamente necessaria una consistenza semantica tra le
stesse label usate in contesti diversi
– è fondamentale la consistenza semantica tra la label e
l’informazione (pagina) a cui è collegata
problema complesso… dove ci porta ad esempio un link con il nome di
una persona? Alla sua biografia, alla sua foto, alla sua home page,
all’apertura
all
apertura del client di posta per l’invio
l invio di una mail al suo indirizzo
indirizzo…
Attenzione: i link nel testo possono essere difficili da identificare
l’occhio tende a effettuare uno scanning veloce…
19
Label come titoli
si appoggiano a testo supplementare per spiegarne il significato
ma non c’è nessuna garanzia che l’utente legga questo testo…
Label iconiche
utilizzano rappresentazioni grafiche al posto di (o in aggiunta a)
parole/frasi chiave
• possono rendere il sito più “gradevole” ma costituiscono un linguaggio
molto più limitato…
• è più
iù diffi
difficile
il comunicare
i
concetti
tti complessi
l
i per via
i grafica
fi
• le icone sono utili per rappresentare i concetti chiave di un sito,
identificabili senza ambiguità dall’utente (es. la casa per la
home page, una lente di ingrandimento per la ricerca…)
• soluzione di compromesso: uso congiunto di grafica e testo…
20
10
Creare sistemi di labeling efficaci
– consistenza in terminologia
il wording utilizzato deve essere uniforme e coesivo
evitare di mescolare verbi (azioni), nomi, categorie…
– consistenza in granularità
i “pezzi” di informazione identificati da label “sullo stesso livello” devono
essere di importanza simile
– evitare label autoreferenziali
• es. clicca qui, questo sito…
• evitare parole/frasi che si riferiscono all’uso del Web (e perdono senso
al di fuori di questo contesto…)
21
… sistemi di labeling
Esempio di sistema mal progettato
Label della Home page
Contattaci
Pubblicazioni
Vuoi lavorare con noi?
Cerca nel sito
Domande/risposte
Pagina Pubblicazioni
…
…
…
…
…
• mancanza di consistenza di terminologia nella
home page
• differenza di terminologia per l’ordinazione nelle
pagine delle pubblicazioni
• i dati della prima pubblicazione entrano troppo in
dettaglio rispetto alla seconda
Pagina pubblicazione 1
Introduzione a JavaScript
- Cos’è JavaScript?
- Prefazione
- Informazioni sull’autore
- Informazioni sull’ordinazione
Pagina pubblicazione 2
Java per il principiante
- Ordina
22
11
Fasi nella progettazione di un sito di grosse dimensioni
Progettazione di un sito: ricerca iniziale
1. Incontro diretto con il cliente
raccolta p
prime informazioni,, commenti e critiche dei siti esistenti
2. Definizione degli obiettivi
(a) Qual è la “missione” dell’azienda/organizzazione? (b) Come
questa missione deve essere supportata dal sito? (c) Quali sono gli
obiettivi di breve e lungo termine del sito? (d) Qual è la previsione
dell’evoluzione del sito da qui a qualche anno?
3 Identificazione del contenuto e delle funzionalità del sito
3.
(a) Analisi del contenuto di siti analoghi esistenti; (b) Raccolta delle
informazioni da inserire (intervistando gli “esperti”)
4. Scelta della modalità di organizzazione del contenuto
23
Progettazione di un sito: analisi concettuale
1. Brainstorming
es. tramite “whiteboard” (schizzi concettuali…)
2. Identificazione di possibili “scenari”
come le diverse possibili categorie di persone potrebbero navigare
3. Creazione di modelli (blueprints) ad alto livello
forniscono una mappa dell’organizzazione del sito
4. Creazione di mockup
documenti cartacei che a grandissime linee mostrano il contenuto
delle pagine principali
5. Creazione di “schizzi di progetto”
descrizione pseudo-grafica di come saranno fatte le pagine
24
12
Produzione del sito…
1. Creazione di modelli di basso livello
mappe dettagliate
d tt li t dell’organizzazione
d ll’
i
i
d
dell sito
it
non si arriva ancora all’identificazione precisa di tutte le pagine da
implementare…
2. Creazione del contenuto (content mapping)
scelta effettiva del contenuto da porre nelle pagine
fase particolarmente critica: si risponde a domande del tipo: (a) può
essere utile suddividere un documento in documenti multipli? (b) Quali
sono le porzioni elementari da indicizzare?
3. “Inventario” delle pagine
determinazione precisa delle pagine da creare
25
… produzione del sito
4. Produzione effettiva
ll’architetto
architetto dell’informazione
dell informazione segue tutte le fasi della produzione del
sito, per assicurarsi che tutto venga svolto secondo i piani…
5. Creazione di linee guida per chi verrà…
in modo che le eventuali successive modifiche da parte di chi dovrà
aggiornare/modificare il sito rispettino certi criteri…
6. Valutazione del sito
– attraverso test
– raccogliendo i suggerimenti degli utenti
– analizzando i log file degli utenti (“usage tracking”)
26
13

Elementi di Information Architecture e Web Styling

Transcript

Documenti analoghi

cantiere in movimento

Guida al sito - M. Night Shyamalan

Aspetti avanzati dell`interazione multimediale

case history outdry.indd

Scarica la scheda `Bambini e Internet` in formato pratico da stampare

Grafica e animazioni per il Web

Pillole di ...Informagica ovvero l`informatica per le

Per Opera

FlightSimulatorCity

Internet Explorer 5.0

Commission Arc Atlantique