Architettura dell’informazione per il web e mappe concettuali: il caso studio Designing-X


Letizia Bollini e Giuseppe Palma




Indice


  1. Abstract dell’intervento

  2. Full paper

  3. Architettura dell’informazione per il web

1a. Sistemi di navigazione per il web

1b. Gerarchia dei sistemi di navigazione

  1. Architettura dell’informazione per il web e mappe cognitive

2a. Rappresentazione dei sistemi di navigazione

2b. Le mappe cognitive come strumento di apprendimento collaborativo in rete

  1. Progettare un sito basato su mappe cognitive: Designing-X un caso studio

  2. Conclusioni

  3. Referenze bibliografiche

  4. Biografie dei relatori



Abstract

Architettura dell’informazione per il web e mappe concettuali: il caso studio Designing-X


L’attuale evoluzione della disciplina dell’information architecture sta sviluppando metodologie di ricerca e di organizzazione delle informazioni e dei sistemi di rappresentazione visiva sempre più vicini e simili alla ricchezza dell’approccio cognitivo umano basato non solo sulle gerarchie di navigazione delle strutture ipertestuali, ma anche sulla ricchezza delle mappe concettuali e cognitive.


Il caso studio Designing-X che rappresenta un progetto sperimentale di sito cognitivo-esperenziale, nasce dalla collaborazione tra il gruppo editoriale Modo e il Politecnico di Milano.

Si tratta di una tesi di laurea quinquennale sviluppata all’interno del Corso di Laurea in Disegno Industriale in cui sono stati progettualmente fusi, in un caso studio reale, complesso e articolato, aspetti di architettura dell’informazione, progettazione di interfacce grafiche nella logica delle mappe concettuali.



1. Architettura dell’informazione per il web


La navigazione nello spazio ipertestuale del web prevede che l’utente abbia degli strumenti concettuali e visivi che gli permettano di orientarsi nella ricerca di informazioni e di crearsi un modello mentale della struttura di un sito per capire e apprenderne il funzionamento.


L’attuale evoluzione della disciplina dell’information architecture sta sviluppando metodologie di ricerca e di organizzazione delle informazioni e dei sistemi di rappresentazione visiva sempre più vicini e simili alla ricchezza dell’approccio cognitivo umano ponendo particolare attenzione, come fanno rilevare Morville e Rosenfeld (2001) ad una serie abbastanza vasta ed articolata di aspetti che vanno dalla necessità di organizzare la gerarchia delle informazioni in maniera efficace, creare un sistema di navigazione che consenta all’utente di raggiungere facilmente tutte le informazioni presenti fino alla progettazione di label sintetiche e autoesplicative in maniera tale che un sito risulti navigabile con la stessa efficacia sia se ricercato per parola chiave che navigato casualmente, sia per un utente esperto che un neofita del web.



1a. Sistemi di navigazione per il web


Gli attuali standard visivi adottati per rappresentare comunemente i sistemi di naviagazione e di orientamento all’interno di un’interfaccia web traggono spunto da altri media comunicativi ed in particolare dalla cultura editoriale. Il modello di interfaccia a T (Veen, 2000) con indice/barra di navigazione a voci indentate ha come modello l’indice di un libro in cui gli argomenti sono organizzati per capitoli, paragrafi e sotto paragrafi che nel mondo web corrispondono alle sezioni del sito, alle sotto sezioni ed alle singole pagine di ennesimo livello (nella gerarchia di annidamento dell’informazione)



1b. Gerarchia dei sistemi di navigazione


Questa organizzazione formale, visiva e strutturale dei sistemi di navigazione all’interno di un sito si sono ormai parzialmente così sedimentati da essere considerati uno degli standard correnti di organizzazione di un sistema di navigazione organizzato in genere secondo 4 macro famiglie o tipologie di sistemi di orientamento/ navigazione.

Nel dibattito e nella cultura anche teorica sul design delle interface per il web si parla infatti di sistemi di navigazione globale, locale, contestuale e utilities o navigazione di servizio per definire, organizzare e articolare quelli che sono i sistemi ed i livelli gerarchici fondamentali di un sito.

Per navigazione globale si intende in genere quei sistemi di navigazione corrispondenti ai link che portando alle macro aree di un sito e quindi ne rappresentano una descrizione del primo livello di annidamento delle informazioni e sopratutto i macro contenuti in cui è organizzato il patrimonio informativo del sito. Presenti in tutte le pagine in una posizione anche visivamente rilevante e evidente sono in genere la struttura portante e ricorrente del sistema di interfacciamento.

All’interno delle singole sezioni di secondo fino all’ennesimo livello la struttura di navigazione è garantita dai sistemi locali cioè da link variabili grafici o ipertestuali variabili da sezione a sezione. Più tipicamente pertinenti alla struttura ipertestuale della rete i link ipertestuali grafici o testuali annegati nel corpo del testo o dello specifico contenuto informativo della pagina web permettono approfondimenti puntuali e legati allo specifico contesto/unità informativa, come i glossari contestuali, gli approfondimenti etc.

Infine i link di servizio, sistema di navigazione anch’esso presente in ogni pagina ma con una funzione trasversale rispetto allo specifico contenuto del sito e di supporto all’esplorazione dell’utente come mappe, link a indirizzi di posta elettronica per contatti, maschere di ricerca o di log-in etc.

La difficoltà organizzativa, logistica e progettuale che la presenza e necessità di realizzare un sistema d’interfacciamento con l’utente in grado di restituire tutte le potenzialità di navigazione ma nello stesso tempo di non sovraccaricarlo di informazioni sta alla base del processo di elaborazione dell’architettura concettuale dell’informazione, da un lato e strutturale del sistema ipertestuale dall’altro.





2. Architettura dell’informazione per il web e mappe cognitive


Tra gli strumenti che nell’architettura dell’informazione si usano per rappresentare relazioni e percorsi, le mappe sono un modo per visualizzare spazialmente le informazioni e per veicolare maggiori dettagli in maniera contemporanea anziché sequenziale. L’uso delle mappe cognitive, come sistema di rappresentazione nelle interfacce web, permette di interpretare e soddisfare le logiche associative di un utente in maniera spesso più efficace rispetto alla tradizionale struttura ad indice utilizzata nei siti, grazie ad una lettura immediata di molti elementi informativi e delle loro relazioni.


Le mappe, infatti:





La soluzione di adottare mappe concettuali come quelle proposte da Novak e Gowin: non è una semplice traduzione dei contenuti in mappe, ma una rilettura del metodo che sta alla base della costruzione di tali mappe per un uso ragionato della strutturazione e della navigazione.



2b. Rappresentazione dei sistemi di navigazione


L’interfaccia del sito può essere pensata come un'unica mappa strutturale, interamente navigabile dall'utente secondo multimodalità comunicative, che vanno da quella visiva a quella acustica (Bollini, 2004), in grado di fornire le informazioni attraverso la sua esplorazione e il suo sviluppo dei contenuti a partire dalle sezioni principali, equiparabili concettualmente ai concetti-chiave propri delle mappe strutturali. In questo modo il sito diventa una rappresentazione visiva sinottica, dove tutto viene mostrato nello stesso momento, e se ne percepisce la struttura, i rami, le derivazioni, le relazioni. In ogni istante l'utente del sito è in grado di avere un quadro completo di quali siano i contenuti del sito, da quali e quante sezioni è composto, come si sviluppano, come si relazionano tra di loro e in che modo i contenuti proposti si legano in relazioni e perché.


Non c'è più, solo, la navigazione per arrivare al contenuto: con questa formula navigazionale, l'utente è coinvolto interamente in un'esperienza cognitiva che lo guida alla scoperta del sito e dei servizi che esso offre. Questa forma esperenziale è poi giustificata dalla “caratteristica visiva della mappa, che mette in gioco la parte destra del cervello e il pensiero laterale, che va ad integrarsi con la parte sinistra dei processi logici lineari, potenziando la comprensione, l'apprendimento e la comunicazione” (Novak e Gowin, 199885). La mappa del sito non viene svelata immediatamente: essa si sviluppa e si crea man mano che l'utente fa le sue scelte e procede nell’interazione con i contenuti delle sezioni del sito.



2b. Le mappe cognitive come strumento di apprendimento collaborativo in rete


Ausubel ha introdotto il concetto di mappa cognitiva (o concettuale) durante gli studi effettuati sulle dinamiche di apprendimento umane (Ausubel, 1968). Durante questo lavoro di ricerca egli introdusse il concetto di apprendimento significativo, così definito in contrapposizione all’apprendimento meccanico basato sull’acquisizione mnemonica di nozioni e di istruzioni. Al contrario l’apprendimento singnificativo attiva una capacità di correlazione tra le nuove informazioni acquisite e la conoscenza precedentemente sviluppata coinvolgendo in maniera attiva il soggetto. Secondo questo approccio, le mappe sono uno strumento meta cognitivo per rappresentare ed indicare le relazioni significative tra i concetti realizzati per costruire le proposizioni, o unità semantiche, costituite da più concetti interrelati da parole.

Le mappe cognitive sono uno strumento per schematizzare ed articolare queste unità e risultano particolarmente efficaci per mettere in evidenza il nesso logico-concettuale adottato per organizzare le unità stesse secondo criteri di gerarchia e di pertinenza.

Inoltre le mappe permettono di evidenziare i concetti chiave e le preposizioni logiche che legano questi concetti tra loro: le mappe usano il canale di comunicazione visivo per rafforzare le dinamiche di apprendimento e di memorizzazione.

Se la comunicazione verbale permette una trascrizione di tipo sequenziale del processo di apprendimento, riducendolo ad un processo lineare; le mappe cognitive, hanno al contario una struttura gerarchica che riproduce quella tipica diun’ipertesto

I principi e le dinamiche di apprendimento indagati e descritti da Ausbel possono essere riportati, per analogia, alle dinamiche cognitive attivate nell’esplorazione e nell’apprendimento dell’interazione di un sito web: un processo continuo, interattivo e dinamico

Questa teoria è stata ripresa ed ampliata da Novak e Gowin negli anni ’70 che hanno proposto e sviluppato il concetto di mappa concettuale cercando di realizzare una rappresentazione grafica della conoscenza.

Così come una cartina geografica permette di orientarsi all’interno di un territorio sconosciuto, analogamente una mappa cognitiva è uno strumento di interpretazione, di trasmissione e di revisione della conoscenza, delle informazioni e dei dati.

La visualizzazione delle relazioni significative tra i diversi concetti rende visibili i percorsi e le connessione logiche attraverso i possibili ragionamenti. Le mappe cognitive dunque sono: a graphical representation of concepts synthetically described (words, concepts) inside a geometrical form (a node) and linked together by lines showing the relations by means of words-links [una rappresentazione grafica dei concetti descritti sinteticamente (parole e concetti) all’interno di una forma geometrica (un nodo) e collegati l’uno all’altro tramite linee che evidenziano le relazioni di significato delle parole-collegamenti] (Novak e Gowin, 1985).




3. Progettare un sito basato su mappe cognitive: Designing-X un caso studio


Il sito Designing-X rappresenta un progetto sperimentale per realizzare un sito di tipo cognitivo-esperenziale.

L’utente non interagisce semplicemente con una GUI, ma ha disposizione uno strumento di apprendimento di una realtà complessa: un sito contenitore di cinque realtà diverse legate al mondo del design. Il sito, infatti, riunisce in sé contenuti, servizi, basi di dati, pubblicazioni, ricerche, in un discorso omogeneo, strutturato, complesso. Non è un “semplice” portale sul design, non è neanche un'associazione che riunisce in sé altre associazioni. è piuttosto un mediatore di realtà unite tra loro da un forte interesse per la formazione e l'informazione, che si sono “virtualmente associate” per creare una “stanza dei contenuti utili ad un designer in continua formazione” (Palma, 2003).

Lo scopo di designing-x è sviluppare in un progetto coerente tutti i servizi offerti da questi attori in una modalità di relazione. I contenuti trattati verranno presentati come parte di un'unica offerta evidenziando non tanto la suddivisione tra le sezioni e il relativo sviluppo in contenuti, ma la relazione esistente tra i contenuti appartenenti alle diverse sezioni. Questa scelta si giustifica con la necessità di rendere immediatamente percepibile la complessità della strutturazione dei contenuti nelle sezioni e tra le sezioni, garantendo allo stesso tempo una profonda semplicità di navigazione e di fruizione.



Homepage: www.extrasmallstudio.com/designing-x


Nella Home Page le informazioni che abbiamo sono semplicemente i concetti-chiave del sito, cioè le sue cinque sezioni.

Con il mouse-over si potranno ottenere informazioni aggiuntive, come la dichiarazione dell'attività di ogni sezione. In questo modo all'utente vengono forniti i primi elementi per la propria elaborazione mentale della realtà designing-x.

Questo tipo di mouse-over è ripetuto su ogni sezione e guida l'utente nella scelta di navigazione. Al click, la struttura visiva della mappa cambia e si dispone in modo che i contenuti appartenenti alla sezione selezionata appaiano sul monitor e formino una mappa strutturale completa delle relazioni tra i concetti-voci di menù che la compongono.



















                                        pagina di primo livello


Una volta entrati nella sezione, abbiamo la mappa dei contenuti ad essa appartenenti e strutturati in modo da evidenziarne le relazioni che hanno con i contenuti (o parte dei contenuti) relativi alle altre sezioni del sito. Un eventuale mouse-over, a questo livello, ha una duplice funzione: è rilevatore del contenuto di ogni voce di menù e identificatore del tipo di relazione che esiste tra un contenuto della sezione nel quale stiamo e il contenuto della sezione al quale appartiene.


Entrato in una qualsiasi delle sezioni disponibili, il mouse-over guida l'utente nella scelta tra le diverse voci di menù che la compongono. In questo modo le informazioni vengono dilazionate nel tempo e fornite solo quando sono richieste. Da sottolineare che per arrivare a questa schermata si sono effettuati solamente due "click": il primo è servito per entrare nella sezione principale, il secondo per effettuare una scelta tra le opzioni scoperte all'interno della voce scelta. Siamo al secondo livello di interazione, anche se apparentemente sembra ancora il primo. Ad ogni modo, pur essendo questo l'ultimo livello d'interazione con la mappa, abbiamo sempre sott'occhio tutta la struttura del sito. Il vantaggio che ne otteniamo è quello di possedere la padronanza costante dei contenuti del sito, senza correre il minimo rischio di perderci durante la navigazione.

Al click, otterremo le informazioni che abbiamo richiesto.


informazioni contestuali presentate in una pop-up


Esse sono contenute in una finestra pop-up, in semplice linguaggio HTML, che si sovrappone alla mappa del sito. In questo modo avremo il totale controllo su di essa (possiamo spostarla, ingrandirla, ridurla ad icona o semplicemente chiuderla, senza mai perdere d'occhio il resto della mappa).

All'interno della pop-up le informazioni sono date su due livelli di lettura: a sinistra abbiamo un menù visuale (ad esempio nel caso scegliessimo una voce “Calendario”) con luogo, data e ora di ogni incontro proposto, in modo da permettere una ricerca veloce, a colpo d'occhio, di quali possano effettivamente essere gli incontri ai quali è possibile partecipare; a destra è fornita una descrizione degli stessi, così da poter avere un'idea di cosa ci si può aspettare da questi incontri. Gli incontri sono poi divisi in categorie, facilmente selezionabili dal menù a tendina in alto a destra. Una volta ottenute le informazioni richieste, basta chiudere la pop-up per tornare alla mappa della sezione.


Tornati alla mappa principale della sezione, possiamo scegliere di navigare anche fra i contenuti delle altre sezioni che si connettono a quella nella quale ci troviamo. Sappiamo che for a conscious building of a conceptual map, to allow the final user, which is not involved in the production of the map, to understand the meaning of the map, is necessary to make clear and explicit what relations can be possibly represented inside the map. If this fails, the reasons linking the different concepts will be difficult to be perceived [per costruire consapevolmente delle mappe concettuali e far sì che esse siano comprensibili anche a chi non le ha prodotte, è necessario esplicitare quali rapporti in esse sia possibile indicare, altrimenti rischierebbero di essere difficilmente decifrabili le ragioni che legano i diversi concetti.] (Novak e Gowin, 1985)

Questa necessità è soddisfatta dal mouse-over, che in tali circostanze esplicita la relazione esistente tra i contenuti della sezione selezionata con quelli di una sezione esterna ad essi collegati.


relazione evidenziata visivamente tra i contenuti


Un'ultima osservazione: in designing-x è inutile ritornare alla schermata di partenza, in quanto in ogni schermata è sempre disponibile la possibilità di passare da una sezione all'altra, ottenendo con il mouseover, tra l'altro, le stesse informazioni che abbiamo ricevuto nella schermata di inizio navigazione.

Nel progetto, ritenendo che non fosse necessaria alla navigazione, né cognitivamente utile (si perderebbe tra l'altro la visione olistica dei contenuti e delle relazioni tra le sezioni), questa possibilità di tornare alla Home è stata pertanto resa impossibile.



4. Conclusioni

Le mappe cognitive sono uno strumento per rappresentare il sapere e per aiutare ad apprendere e a memorizzare ciò che si impara. Le mappe sono articolate secondo nodi/unità semantico-concettuali interrelati da link/preposizione e possono essere utilizzate per rappresentare la conoscenza in una dinamica non lineare del processo di apprendimento.

La struttura reticolare delle mappe è molto simile a quella delle strutture informative ipertestuali basati su unità informative o nodi costituenti unità comunicative e di significato autonome e le loro correlazioni.

L’applicazione del modello delle mappe concettuali alle interfacce web sembra essere un valido ed intuitivo strumento per aiutare l’utente nell’esplorazione del sito.

Le mappe presentano in maniera visiva e simultanea le macro aree in cui la struttura di navigazione/contenuti sono articolati ed allo stesso tempo i diversi livelli gerarchici e di annidamento delle informazioni simultaneamente.

Le mappe inolte permettono di visualizzare anche le connessioni tra questi contenuti e di rilevare la presenza, nonché di raggiungere rapidamente le informazioni rilevanti per l’utente: da un lato permettono di rappresentare visivamente le relazioni strutturali e semantiche in maniera più efficace rispetto alle rappresentazioni verbocentriche-gerarchiche della tradizionale struttura ad albero, dall’altro rispecchiano più fedelmente in processi cognitivi umani di tipo associativo nell’apprendimento di strutture informative articolate e complesse.





Referenze bibliografiche:


Ausubel, D.

1968 Educational Psychology: a Cognitive View, Holt, Rinehart, and Winston, New York


Bollini L.

2003 “MUI: design of the HC Interfaces as a directing of communications modes targeted on human senses”, in Senses and Sensibility in Technology, IADE, Lisbona, ppgg. 182-186


Novak, J.D. and Gowin, D.B.

1985 Learning How to Learn, Cambridge University Press, Cambridge


Palma G.

2003 Designing-X. Designing a cognitiv site, Dissertazione di Tesi, Politecnico di Milano


Rosenfeld L. e Morville P.

2001 Architettura dell’informazione per il web, Hops libri, Milano


Veen J.

2000 Web design arte & scienza, Apogeo, Milano



Questo articolo è stato presentato alla 1st International Conference on Concept Mapping, CMC 14 – 17 settembre 2004 a Pamplona, Spagna e pubblicato in lingua inglese:

L. Bollini e G. Palma, Cognitive Maps: The Opsis Identifier Descriptive Model For Web Information Architecture., in A. J. Canas, J. D. Novak, F. M. Gonzalez, Eds., Concept Maps: Theory, Methodology, Technology, Proceedings of the First International Conference on Concept Mapping, Pamplona, Spain, 2004.




Biografie



Letizia Bollini, PhD


Ricercatore presso l’Università degli Studi di Milano Bicocca , Dipartimento di Psicologia

email: bollini@extrasmallstudio.com


Dottorato di Ricerca in Disegno Industriale e Comunicazione Multimediale presso il Politecnico di Milano, specializzazione in Digital Media Design presso la San Francisco State University, si occupa dal 1995 di progettazione di interfacce web, editoria multimediale e comunicazione visiva.

Socio fondatore di Bollini Studio Associato (1998) ora Extrasmall Studio, progetti di comunicazione ha svolto consulenze per: Interaction Design Institute di Ivrea, Ilsole24ore, RAI, 105 net, MediaWorld, Presidenza del Consiglio dei Ministri – Dip.to della funzione pubblica, Vodafone, Politecnico di Milano, Università di Ferrara, D&C (Benetton, Dresdner Bank, Merloni Eletrodomestici, Monte Paschi AM, Omnitel), Icon Medialab presso l'ufficio di Milano e Metadesign-Londra e Icon-Nicholson di New York (Alitalia, Banca Popolare di Milano, E-biscom, Gatorade, Roche, Seiko, RCS), Andersen Consulting, J. W. Thompson

Docente dal 2002 presso il corso di laurea Scienze della Comunicazione – e la specialistica in Teoria e Tecnologia della Comunicazione - Università di Milano Bicocca, presso CdL in Scienze di Internet - Università di Bologna (2002-05) e il CdL in Disegno Industriale del Politecnico di Milano (1998-2003), coniuga l'attività libero professionale con l'impegno nella ricerca teorica e metodologica, nella didattica e nella divulgazione.


Papers, articoli teorici e lavori professionali sono stati pubblicati su riviste di settore. Interviene a seminari, workshop e conferenze internazionali. Tra le pubblicazioni più recenti:



Segretario generale AIAP (Associazione Italiana per la Comunicazione Visiva) dal 1999 rieletto Consigliere nazionale nel 2002, rappresenta l’Associazione presso ICOGRADA (International Council of Graphic Design Associations).

Socio fondatore dell’IDA - Interaction Design Association associazione internazionale promossa dall’Interaction Design Institute di Ivrea nel 2005


Riferimenti:

http://www.extrasmallstudio.com/

http://uni.extrasmallstudio.com/

http://www.discorsivisivi.org/



Giuseppe Palma, Designer

Politecnico di Milano, Facoltà del Design

email: giuseppe@extrasmallstudio.com


Laureato in Disegno Industriale presso il Politecnico di Milano nel 2003, frequenta il Master In Ergonomia Cognitiva e del Prodotto Industriale presso il medesimo ateneo.

Dal 1997 si occupa di progettazione grafica editoriale e web con particolare attenzione agli aspeti di design tipografico e di digital publishing e collabora con il Gruppo Editoriale MODO dove, dal 2001 è responsabile degli aspetti di comunicazione web del gruppo.

Nel 2001 fonda OpsisDesign . strategic communication environment, ove lavora come art director e multimedia. Dal 2005 collabora con Extrasmall studio . progetti di comunicazione


Dal 2002 svolge attività didattica presso il Laboratorio di Industrial Design del Politecnico di Milano e dal 2005 è docente incaricato presso il corso di laurea Scienze della Comunicazione di Progettazione di Interfacce Grafiche per la Comunicazione, coniuga l'attività libero professionale con l'impegno nella ricerca teorica e metodologica, nella didattica e nella divulgazione.


Tra le pubblicazioni recenti:




Riferimenti:

http://www.extrasmallstudio.com/

http://uni.extrasmallstudio.com/designingx/

http://www.discorsivisivi.org/