aprile 2003
HOME  |  INDICE  |  CORSI  |  DIZIONARIO  |  ABBONAMENTI  |  SITO  |  HELP
 
   
  CORSI OPENMASTER
  MUSICA DIGITALE  
  WEBMASTER  
 
Lezione 1  
Lezione 2  
Lezione 3  
Lezione 4  
Lezione 5  
Lezione 6  
Editor HTML  
Esercizi  
Risorse  
 
  WINDOWS EXPERT  
 
 

Tecniche di progettazione del sito

  Fase 3: Organizzazione delle informazioni
 
 

Questo è un lavoro concettuale che richiede precisione e che deve tener conto delle future espansioni del sito. Di solito è semplicemente un disegno che indica l’alberatura del sito, vale a dire la collocazione delle varie pagine rispetto alla home page e alle eventuali home page di secondo livello (quelle a cui si accede direttamente dalla home e che costituiscono a loro volta il punto d’ingresso per eventuali “canali” del sito).

Due libri utili in questa direzione sono “Architettura dell'informazione” di Louis Rosenfeld e Peter Morville (edito da Hops Libri) e “Principi di Web Design” di Joel Sklar (Apogeo, € 20,14). Il primo dei due costituisce la vera e propria “bibbia” dell’architetto informativo e nessuno può definirsi un Webmaster o Web designer professionista senza averlo letto. Il secondo offre invece una serie d’indicazioni più pratiche che vi permettono di partire rapidamente con un progetto, per affinare gli aspetti teorici in un secondo momento.

Schemi di organizzazione delle informazioni
Scoprirete che esistono diversi schemi con cui si possono organizzare le informazioni, indipendentemente che queste siano contenute in un sito Web, in una biblioteca o in una qualsiasi altra raccolta (per inciso la disciplina dell’architettura informativa viene precisamente dal mondo delle biblioteche e gli architetti Web più famosi sono stati spesso bibliotecari nella loro "vita precedente").

Il primo schema organizzativo è quello esatto: le informazioni vengono divise in categorie reciprocamente esclusive, ossia le voci che compaiono in una categoria non compaiono in nessun'altra. Un esempio tipico è un’organizzazione alfabetica, come nel caso di un dizionario, oppure cronologica, come nel caso di un archivio di articoli di giornale, oppure geografica: i locali di una città. Un sistema di organizzazione esatto è facile da progettare e mantenere e, soprattutto, è facile da usare per il navigatore, poiché richiama concetti che gli sono già familiari, tuttavia non sempre è utilizzabile nella sua forma pura.

Esempio di schema organizzativo esatto - alfabetico
Il sito dell'Enciclopedia Britannica è un classico esempio di strutturazione esatta, in questo caso secondo regole alfabetiche. Nella categoria "A" compaiono unicamente le parole che cominciano per A, mentre quelle cominciano per B sono nella categoria successiva, e via di questo passo.


Clicca per ingrandire

Esempio di schema organizzativo esatto - geografico
Qui vediamo l'esempio di un portale, Virgilio, che nella zona Mappe propone i negozi e i servizi relativi a una determinata zona della città, oltre che una mappa della zona interessata. La suddivisione è precisamente regolata dal contesto geografico.


Clicca per ingrandire

Esempio di schema organizzativo esatto - cronologico/geografico
Qui vediamo la sezione meteo di un tipi co portale (MSN Italia). Le informazioni sono classificate in modo esatto in base alla data e alla località.


Clicca per ingrandire

Poiché lo schema esatto non è sempre utilizzabile nella sua forma pura, esiste anche lo schema di organizzazione ambiguo: dove le categorie non hanno una definizione assolutamente precisa e dove ci si affida alla comprensibilità del linguaggio per spiegare che cosa c’è in una particolare pagina o canale. Gli schemi di organizzazione ambigui sono difficili da progettare e ancora più difficili da mantenere, perché è facile collocare le cose sbagliate nel posto sbagliato, ma sono spesso più importanti e utili rispetto agli schemi esatti, poiché si avvicinano maggiormente alla realtà, dove la precisione assoluta di uno schema esatto non è riproducibile e finisce per essere troppo vincolante.

Le persone trovano spesso più utili gli schemi ambigui rispetto a quelli esatti e questo perché molto spesso il navigatore non sa che cosa sta cercando e perciò ha bisogno di schemi approssimati che lo portino vicino alla destinazione che vuole raggiungere, ma che non riesce ad articolare con precisione.

Questi schemi prevedono perciò una ricerca delle informazioni interattiva e iterativa (si affina l’obiettivo ripetendo il percorso di ricerca più volte) e si reggono su un sistema di classificazione arbitrario che il progettista definisce all’inizio e che costituisce di fatto una gerarchia di categorie e sotto-categorie che a loro volta possono essere centrate su quattro elementi: argomento, azione, pubblico e metafora.

Nel caso di un sistema ambiguo basato sull’argomento avremmo un’organizzazione simile a quella delle pagine gialle, dove le varie aziende sono divise in base a categorie merceologiche definite a priori che ci aiutano a cercare l’idraulico piuttosto che l’elettricista.

Schema ambiguo catalogato per argomento
Le Pagine Gialle sono un classico esempio di schema organizzativo "ambiguo", dove le informazioni sono catalogate in base all'argomento a cui si riferiscono e non secondo un schema rigido esatto. Questo genere di catalogazione risulta più utile, anche se più complesso da gestire.


Clicca per ingrandire

Gli schemi ambigui basati sull’azione elencano l’insieme di azioni tra loro correlate: un esempio tipico sono i menu di un programma, dove alla voce Modifica, abbiamo tutte le operazioni di modifica che possiamo eseguire su un documento: ricerca, sostituzione, copia, incolla e via dicendo.

Schema ambiguo basato sul tipo di azione
Un esempio classico di catalogazione "ambigua" in base al tipo di azione è il menu di un programma, dove sotto una voce che definisce una classe di azioni troviamo l'elenco dettagliato delle azioni previste.


Clicca per ingrandire

Gli schemi ambigui costruiti in base al pubblico funzionano al meglio quando un sito è frequentato da un gruppo omogeneo di navigatori con interessi relativamente stabili, magari interessati a una particolare sezione e non all’intero. Prendiamo ad esempio un sito dedicato al modellismo: le divisioni sarebbero in base alle varie forme di modellismo possibili, con una categoria, ad esempio, dedicata esplicitamente alla costruzione di navi in bottiglia.

Schema ambiguo basato sul tipo di pubblico
Quando il sito è costruito in base al pubblico, le informazioni vengono strutturate di conseguenza, ripartendole nei temi che sono interessanti ai diversi tipi di persone che frequentano il sito. In questo caso troviamo i consigli per i Webmaster, le indicazioni per i creativi, eccetera.


Clicca per ingrandire

L’ultimo tipo di schema ambiguo è orientato alla metafora. Qui si usa qualcosa di familiare per il navigatore al fine di semplificare la comprensione del sito. Esempio classico: uno shopping center virtuale che riproponga sul Web la struttura fisica di un centro commerciale, con vetrine e negozi, a loro volta suddivisi in corsie, con un carrello per gli acquisti. Le metafore sono state molto di moda per un certo periodo perché rendono immediata la comprensione della struttura del sito, ma ne limitano moltissimo l’espansione. Infatti, non appena si cerca di proporre un servizio che sia realizzabile unicamente sul Web e che non abbia una diretta corrispondenza nel mondo reale, la metafora va in pezzi e confonde anziché aiutare.

Schema ambiguo basato sulla metafora
Questo è un esempio di sito basato su metafora che abbiamo preso a prestito dal libro "Information Architecture for the World Wide Web" di Loius Rosenfeld e Peter Morville. Mostra un esempio povero, ma significativo di una metafora di appartamento usata come elemento di organizzazione dei contenuti dell'intero sito.


Clicca per ingrandire

Naturalmente, poiché la perfezione non è di questo mondo, i siti di una certa complessità finiranno per utilizzare tutti o quasi gli schemi indicati sopra e perciò ci troveremo con schemi ibridi, più difficili da progettare e mantenere, ma estremamente più flessibili e potenti perché vi consentiranno di usare lo strumento adatto caso per caso.

Tutti i documenti relativi a questo articolo:
Introduzione
Fase 1: raccolta d'informazioni sugli scopi del sito
Fase 2: analisi della concorrenza
Fase 3: organizzazione delle informazioni
Fase 4: costruzione della mappa - gerarchia
Fase 4b: mappa - ipertesto
Fase 4c: mappa - struttura lineare
Fase 5: strumenti di navigazione - URL e cronologia
Fase 5b: strumenti di navigazione - preferiti
Fase 5c: strumenti di navigazione - tasti dedicati e altro
Fase 5d: regole di navigazione
Fase 5e: sistemi di navigazione
Fase 5f: elementi di navigazione
Fase 5g: sistemi di labeling

 

  < Precedente   Prossimo >

 

Corso - Webmaster
 
  Prima lezione:
  Competenze e strumenti
1. Che cosa fa un Webmaster
2. Gli strumenti di lavoro
  1. Editor orientati al testo
  2. Editor visuali semplificati
  3. Ambienti di sviluppo integrati
3. Le altre figure con cui opera
4. Le risorse online
5. Tecniche di progettazione
del sito
  1. Raccolta d'informazioni sul sito
  2. Analisi della concorrenza
  3. Organizzazione delle informazioni
  4. Costruzione della mappa - gerarchia
  4b. Mappa- ipertesto
  4c. Mappa - struttura lineare
  5. Strumenti di navigazione - URL e cronologia
  5b. Strumenti di navigazione
- preferiti
  5c. Strumenti di navigazione
- tasti dedicati e altro
  5d. Regole di navigazione
  5e. Sistemi di navigazione
  5f. Elementi di navigazione
  5g. Sistemi di labeling
6. Definizioni dei termini comuni
7. Esercizi
  1. Riepilogo dei concetti della lezione
  Seconda lezione:
  Siti statici e linguaggio HTML
  Terza lezione:
 Modelli di pagina e tabelle
  Quarta lezione:
  HTML 4.01 e CSS
  Quinta lezione:
  Design e multimedialità
  Sesta lezione:
  Siti interattivi

 Copyright© PC Open - 2002 - 2003

Credits