Web Interface
Design based on Cognitive Maps: Generative Dynamics in Information Architecture
Prof. L.
Bollini, PhD.
Università
degli Studi di Bologna, Computer Science Department
Dr. G. Palma
Politecnico di Milano,
Facoltà del Design
giuseppe.palma@polimi.it
Although the
paper is a result of the joint work of both authors, Letizia Bollini is in
particular author of parts 1, 2, 3 and 5, and Giuseppe Palma is author of part
4.
Abstract
The paper is
aimed to introduce the application of the Cognitive Maps concept to the web
design interfaces. Cognitive Maps allows the graphical representation of the
information architecture highlighting the hierarchies, the nodes the physical
(hypertextual) and conceptual connections between site contents.
The
interaction with the Information is based on a generative dynamics of ryzomatic
connections where the cognitive and perceptive richness Human User is evident,
giving a more direct representation than
the usual static structure tree.
Multimedia
Authoring software tools are exploited to produce Multimodal cognitive Maps.
The
experimental Project Designing-X (design of a biomorphic Web Site) shows a
practical, specific realization of the concepts the paper is based on.
1. MUI and cognitive
maps: new paradigms in interface design
The navigation
through the hypertextual Web space can be easily performed if the user can
benefit from visual and conceptual tools. Based on efficient tools, the user
can search and explore the information. In the same time the user will build up
a mental model of the site, in order to understand and to learn how the site
works.
The user does not
read the text exposed in a Web page, as Krug [1] states; he is going through
(scanning) the page looking for the information he is interested on. Then the
information shall be reached easily and in a short time. However the design of
the GUI presently used in Web navigation is based on visualization tools that
are using a communication model derived directly from the publishing and paper
world.
The web page is
organized by columns and boxes, in the same way a newspaper is and the text and
the navigation menu lines are predominant. In order to support the user
interaction with the Web, the interface shall communicate the site typology,
its richness and complexity. The difficult usage of the hypertextual system
must be kept hidden.
It is clearly
difficult that a structure based on the concept of direction , of exploration
and of the navigation dynamics can be represented by a text.
The application of
Multimodal Interfaces, based on the simultaneous exploitation of a multiple
communicative channels and on a spatial and visual representation of the
information is an emerging challenge to the presently used GUI and a possible
future evolution.
Cognitive
Maps allows the multimodal representation of the information
architecture highlighting the hierarchies, the nodes the physical
(hypertextual) and conceptual connections between site contents. The
interaction with the information is based on a generative dynamics of ryzomatic
connections where the cognitive and perceptive richness Human User is
evident, giving a more direct
representation than the usual static structure tree [2].
2. Cognitive
maps as learning tool
Asubel introduced the cognitive (or conceptual) maps investigating the human learning [3]. The concept of meaningful learning is the opposite of the mechanical learning, say as mnemonic and instructional. The meaningful learning indeed produces a connection between the new information and the previous knowledge; it produces an improvement of conceptual and proactive kind to the subject. Following this approach, the maps are a metacognitive tool to mark up the meaningful connections between the concepts used to build up propositions (or semantic units) composed from many concepts linked by words.
Conceptual maps are a tool to schematize and articulate those units; the maps also make evident the connections used to organize the units on hierarchy and pertinence criteria.
Furthermore they make evident
the key concepts and the prepositions linking the concepts; the maps use the
visual communication channel to improve the learning and the retaining of the
concepts. Verbal communication and the related verbal transcription are a
sequential, linear process.
The cognitive maps have a
mesh-like and hierarchical structure, where the typical hierarchical structure
of an hypertext is reproduced. The learning principle stated by Asubel can be
transferred also to the dynamical cognitive model for the learning the Website
exploration: this is a continuous, dynamical and interactive process.
The concept has been revised
and developed by Novak and Gowin in the seventies; the proposed and developed the application in order to
produce a graphical representation of the knowledge. As a geographical map
allows to be directed inside an unknown land, in the same way a conceptual map
allows the interpretation, the transmission and to revise the knowledge, the
information and the data. The visualizations of the links between the different
concepts makes evident the path of the possible reasoning.
The cognitive maps then are: 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.[5]
3. Web
Information Architecture and cognitive maps
The evolution of the
discipline of the Information Architecture is developing methodologies for the
search and for the information organization and systems for the visual
representation of data. his proposed solutions are always closer and more
similar to the complexity of the human cognitive approach [4] less based
on the navigation hierarchy through hypertextual structures, more based on the richness of the cognitive and
conceptual maps.
If we examine the
tools used in information Architecture, maps are used to give a spatial, visual
presentation; they are used also to convey a detailed description for a
synoptic, parallel perception of
information , replacing a conventional, serial communication.
The
application of cognitive maps as representation systems for the web produces a
better interpretation and a more effective support for the user associative
logic, exploiting a non mediated learning of informative elements and of
specific relations between elements. In some aspects this solution is more
efficient than the tree structure usually applied in many Web Sites.
The maps
indeed:
· produce a
visual hierarchy simple and evident
· allows the
visualization of thematic nodes in the hypertext, and more mark up the logical and physical
connections, say the links
· allows the
visualization of many nesting levels of information at the same time in the
same page
The solution based on
the application of conceptual maps, as proposed by Novak and Gowin, overcomes
the simple translation of contents to maps; a new interpretation of the method
for setting up map is introduced, suggesting a critical approach to the
structuring and to the navigation of the site.
The site interface
can be designed as a single structured map, where the user can navigate to the
full extent. The map is able to produce the information when explored and to
develop the contents starting from the main sections, in some way conceptually
equivalent to the key concepts of the structural maps. Applying the map method,
the site is getting a visual, synoptic representation where all is shown at the
same time, and the structure, the branches, the connections and the links will
be easily perceived.
At every time the
user is able to get a complete knowledge about the kind of information
contained in the site and about the number and the type of the sections inside
the site.
He is directed to
understand how the sections will be structured and how the sections will be
connected; furthermore he will learn
how the proposed contents are linked and why.
The activity of the user
is not limited to the basic navigation searching for contents; starting from
this navigation model, the user experiences a total cognitive commitment and is
driven toward the discovery of the site and of the services provided by
the site.
The user experience
is justified because: the visual characteristics of the map produce the activation of the right side of
the brain and the lateral thinking , which integrates with the left side brain,
the side of the logical, linear processes. The understanding, the learning, the
communication will be empowered [5].
The site map is not
exposed since the very beginning of the
process; the map is produced and developed gradually as the user makes its own
choices and grows in the interaction with the contents of the site sections.
4. Designing
a cognitive site: Designing-X a case study
The Designing_X project
represents an experimental design for the realization of a cognitive,
experiential Web site . User does not
interact act only using a GUI, but can
also exploit a tool for the exploration of a complex reality: a site container
of a five different realities relating to the design world. The site collects
contents, services, databases, papers, research reports in an homogeneous,
complex and structured context. This site is not a “simple” portal hosting design news and information, neither is a
concept association to collect other associations. The site is more a “common
place” of realities sharing a strong interest for the education and for the
information; they are virtually associated in an effort to create a room of contents useful to (to
support) a designer continuing his
education [6].
The aim of Designing_X
is to develop inside a coherent project all the services proposed by the
formation actors (professional associations) using a relational modality. That
is, the contents will be presented as a part of a homogeneous proposal,
highlighting the relations existing between the contents outlined in the
different sections. Lesser evidence will be given to the formal division in sections and to the consequent
structuring in subsections.
This choice is aimed
to produce a direct and necessary perception of the complexity of the contents
structure inside the sections and between the sections; at the same time a
simple and direct content navigation can be produced, and an efficient use of
information.
|
1.
homepage: www.designing-x.com/demo.htm |
In the Home Page,
only the key concepts of the site are present, say five sections. With the mouse_over
event further information will be presented: the activity declaration
of the contents of the selected section. Using this tool, the first elements
will be exposed and the user can start a personal elaboration of the Designing_X
concepts. The mouse_over can be repeated on every section
and supports the user during the navigation. At the mouse_click event
the displayed structure of the map will change. Every content in the selected
section is displayed providing a complete structural map, where relations between the contents-menu items contained
in the section will be visually presented. |
|
2. first level page |
Once the section is
opened, on the display is present the map of the contents which compose the
section. The relations they have with the contents (or some of them ) of the
different site sections are visualized. In this level an eventual mouse_over
has a twofold function: it displays the content of every menu item or it
displays the relations existing between a content of the section we are at
the present exploring and the content of the section where the element is
contained. Once upon one of
the possible section has been entered, the mouse_over steers the user
during the choice for the different menu items present in the section. |
Unnecessary informations do not be displayed at every time; they
will be exposed only at the time they are needed on user demand.
It is necessary to mark up that only two mouse_click
selections are necessary to explore contents on the site: the first to enter
one of the main sections, the second to select an option displayed inside the
selected section. We have proceeded to the second level of interaction; at the
same time it looks as if we are in the first one. However this is the deepest
level of interaction with the map; not withstanding that we can perceive on the
display all the site structure. A clear advantage is that we can master at any
time all the site contents , and we do not risk to get lost in our navigation.
|
3. contextual information in pop-up
window |
As soon we mouse_click
, we will get all information we are interested on. The information will be
displayed in a Pop_Up Window, based on a simple HTML page, overlaid to
the site map. This way we can get full control over the Window (we can
move, resize, reduce to an icon or simply close without dismissing the display of the complete site map). Inside the pop_up
Window information will be presented by two different lecture level. On
the left a Visual menu: in example if we choose the menu item Calendar,
place and time of any proposed meeting (Event) will be given. |
This allows a fast search by eye flash in order to select meeting
I can possibly attend. On the right side a description is presented to evidence
subjects and contents expected. On the upper right side we can easily select
inside a pop_up menu a further presentation of the meetings classified
by subjects. When the requested information has been collected, the pop_up
menu can be closed, and we can go back to the site sections map.
|
4. visual relations between contents |
Once the section is
opened, on the display is present the map of the contents which compose the
section. The relations they have with the contents (or some of them ) of the
different site sections are visualized. In this level an eventual mouse_over
has a twofold function: it displays the content of every menu item or it
displays the relations existing between a content of the section we are at
the present exploring and the content of the section where the element is
contained. Once upon one of
the possible section has been entered, the mouse_over steers the user
during the choice for the different menu items present in the section. |
Going back to the
main Sections map, we can proceed to a further navigation to the contents of
the other sections along the links of the actual section.
We know that 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
[5]. This difficult problem has been solved by the mouse_over: the event
makes visually explicit the relation
between the content of the selected section and the linked contents of an
external section.
A last remark: in Designing_X
it is useless to provide the usual “go back to the Home Page” feature;
in every Windows of Designing_X is always allowed the possibility to go
from the present Window to a new one.
The mouse_over produces the same information displayed in the Home Page.
Inside this project has been decided that go back to the Home
Page is not provided because is useless in navigation , harmless in
cognition: an holistic vision of the contents and of the links of the sections
will be lost.
5. Conclusion
Cognitive Maps are
tools to represent the knowledge and to support learning and retaining.
The maps are
organized by means of conceptual-semantic nodes interconnected by prepositions-links; they can be used in
order to represent the learning and the knowledge using a non linear processes.
The network structure
of the maps is very similar to the information hypertext, based on information
nodes, say communications unit self sustaining, autonomous and correlated.
The application of
the cognitive map concept to the Web interfaces supports the user with a tool
simple and direct for the site exploration.
The maps presents a
simultaneous visualization of the site macroareas and at the same time the
different layers of information nesting.
The maps visualize
the connections and the hierarchy between the contents; they allows to reach in
a short time the information core the user is interested on.
Exploiting the
visual-hypertextual-relational structure the are more efficient than the usual
hierarchical-verbal tree structure in order to cope with the human cognitive
processes to explore and to learn in an complex, rich information structure.
References
[1] Krug, Steve. 2000. Don’t
Make Me Think! A Common Sense Approach to Web Usability, New Riders,
Indianapolis.
[2] Bollini, Letizia. 2003.
“MUI: design of the Human Computer Interfaces as a directing of communications
modes targeted on human senses”. Senses and Sensibility in Technology,
IADE, Lisbona: 182-186.
[3] Ausubel, David. 1968. Educational
Psychology: a Cognitive View. Holt, Rinehart, and Winston, New York.
[4] Bollini,
Letizia. 2001. “Multimodalità vs. multimedialità”. Il Verri, 16: 144-148
[5] Novak, J.D.
and Gowin, D.B. 1985. Learning How to Learn, Cambridge University Press,
Cambridge
[6] Palma
Giuseppe, 2003. Designing-X. Designing a cognitiv site, Dissertazione di
Tesi, Politecnico di Milano.