Web Interface Design based on Cognitive Maps: Generative Dynamics in Information Architecture

 

Prof. L. Bollini, PhD.

Università degli Studi di Bologna, Computer Science Department

bollini@cs.unibo.it

 

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.