April 11-14, 2007
San Francisco, California

Design of an Interactive Web Site for the NanoAventura Exhibition

Marcelo Knobel, Djana Contier, Sandra Murriello, Universidade Estadual de Campinas (UNICAMP), Campinas, Cezar Nunes, Oort Tecnologia, São Paulo, Renato A. Prado, São Paulo, SP, Brazil


NanoAventura (NanoAdventure) is an interactive exhibition designed to attract the interest of the audience in nanoscience and nanotechnology. It was specially designed for children and teenagers (9-14). After 9 months of operation, the exhibition Web site was completely reformulated. With an attractive environment and visual emphasis, the new Web site can communicate better with its target public and better represents the exhibition. The idea was to build an environment that looks more like a visual experience than an informational Web site with textual content. The information levels were restructured and the arrangement of the information was reorganized.

The new Web site has two separate areas. The first is for communication of the project itself, NanoAventura, where there is a virtual map tour with the main information on the exhibition (infographic). The second area is designed to communicate nanoscience and nanotechnology to the general public. This area was projected as a blog to allow the exchange of information between the public and the NanoAventura staff. This blog can be personalized by every user as a powerful tool for specific searches. Also included were three games designed to extend the NanoAventura experience.

Keywords: nanoscience, nanotechnology, games, infographic, redesign


NanoAventura (NanoAdventure) is the first exhibition organized by the new Science Museum of the State University of Campinas (UNICAMP) in the city of Campinas, state of São Paulo, Brazil. It was opened to the public in April 2005, and during its first year of operation was exhibited in the Brazilian cities of Rio de Janeiro (RJ), Porto Alegre (RS), São Paulo (SP) and Campinas (SP), and had over 25,000 visitors. The exhibition was developed in partnership with the Sinchrotron Light National Laboratory (LNLS) and the Sangari Institute, both Brazilian institutions. The project received financial support from the Vitae Foundation and the State of São Paulo Foundation for Research Support (FAPESP), as well as the patronage and support of other partners.

The proposal was to create an interactive exhibit that would attract the interest of children and teenagers (9 to14 years old) to nanoscience and nanotechnology by generating a space for learning and entertainment. With this perspective, NanoAventura was conceived as an invitation to explore the nanoscopic world in a playful fashion through images, music and simulations.

Nanoscience is currently referred to as a new science. However, the study of elements on a nanometric scale existed before being denominated as such. The development of appropriate instruments to observe and manipulate these elements has had a strong push in the last two decades, leading to the emergence of a new technology with its share of promises and uncertainties.

Nanotechnology is the engineering of materials from atoms and molecules, making it possible to use the results of nanoscience in order to manipulate and reorganize nanoparticles and thus promote other combinations and thus elaborate new materials and devices. This is an emerging technology that is among the science and technology, investment priorities which have exponentially multiplied in the last decade (Stephens, 2005) but which, according to research in this field in different countries, is still far from the concerns and interests of the greater part of the population.

A Web Site For An Exhibition Under Construction

The first Web site created for the NanoAventura project was conceived during the process of creation of the exhibition itself, with a rather broad perspective and without a clear picture of its main utilization. Should it be a Web site to be used by the eventual partners and patrons, and therefore should it have a strong institutional appeal? Should it be for visitors (or potential visitors) of NanoAventura to search for more information regarding nanoscience and nanotechnology? Or should it be for those same visitors who are looking for a means to continue the ludic-interactive experience they started during the in-person visit to the project? Should it be for Web surfers looking for information available in Portuguese on nanoscience and nanotechnology?

At that initial moment it was not possible to answer all such questions, because we did not even know what the impact and acceptation of the exhibition itself would be. However, the proposal to create a site from the beginning, even knowing it might not have the ideal format, was aimed to create a fundamental communication channel, not only to promote the project, but also to make available several extra resources on the complex subject that the exhibition was designed to show and discuss.

The initial site was created in a traditional format with five areas:

  1. NanoAventura, in which there was information on the history of the project, credits, booking and agenda;
  2. NanoWorld with bibliography, interviews, etc.;
  3. Support resources, such as didactic materials for teachers, and other digital materials;
  4. A press section, with clippings and press-releases, and finally
  5. A section with a description of the partners and supporters of the project.

There was also a contact form, which was the only communication channel available to the visitors.

Immediately at least two problems were identified.

Problems and Solutions

The first problem was related to the hierarchy of information provided. Although it was not so clear at the design stage, it became obvious when the project was maturing that one of the main uses of the site was for prospective visitors looking for practical information such as place, hours, how to arrive, price, booking information, calendar, etc. In the initial site there was no special space for such kinds of information. In an attempt to solve this problem, we added some ad-hoc space for practical news and some links, and eventually a pop-up window. However, we knew that the problem was yet to be solved.

The second problem was the lack of agility for updating information in a project that from the very beginning had a stretched working team. This lack of speed was eventually detrimental because it resulted in bad communication with the public, both from the practical and additional resources viewpoints. Some updates were performed, but the use of static HTML pages was a major drawback for the team formed by non-IT specialists. The development team was clamoring for tools that would allow the democratization of contributions to the Web site, avoiding an excess of bureaucratization and hierarchy in the expected dynamic content of the Web site.

However, in order to have real interactivity with users, we needed something else. We wanted somehow to provide navigation throughout the site to extend the exhibit experience in which, according to the evaluation performed, games were the major attractions for our target audience. Within this context, new games were designed developed for the Web site (see below).

Another problematic aspect of the initial site was the aesthetics that did not reflect the strong visual appeal of the exhibition itself. Therefore, with the exhibition already running, a new Web site began to be delineated. This proposal needed to consider the previously related points: organizing information hierarchically, providing update facility and agility, recovering interactive aspects of the project, and following a layout and visual design closer to the exhibition itself.

Interface Architecture and Communication Structure of the New Web Site

What kind of site did we need? The discussion regarding the new Web site of the NanoAventura project started with really basic definitions and main objectives. There was an institutional character to show and diffuse through the exhibition, keeping in mind the basic idea of using the site as a channel to make scientific content also available. Therefore the project was designed with two main environments:

Both areas display a similar basic structure. At the top of each of the sections is an interactive box where the on-line games are located. In the case of NanoAventura, additional information related to the exhibition is also displayed. Below this interactive box, wider content is shown. For both areas, the main idea is always to show at the top of the page a rather interactive communication with nice illustrations. However, each section has well defined characteristics that were fundamental to the detailed design of each structure. While NanoAventura is unidirectional, and information is produced by the team of the Science Museum of UNICAMP to show to the public, NanoWorld is bidirectional, and allows the exchange of information both between the development team and the visitors, and among the visitors themselves. The entire Web site has a Web-based Content Management System (CMS) that allows Museum staff to edit and add texts, images, documents, tags.

NanoAventura (NanoAdventure)

The design of the main environment predicated that several pieces of information should be presented simultaneously. The idea was to break down the traditional Web page concept that is directly related to the press media (Manovich, 2001). Instead of an alphabetically ordered menu to provide access to just one piece of information, different pieces of information are presented together, creating a concept similar to an environment rather than a printed page (Prado, 2006). At the top of the screen, interactivity predominates: the visitor, through a video, images and a map, can “visit” the exhibition with rather good detail. Also in this area are two on-line games inspired by the games of the exhibition itself: as in the case of the exhibition, they allow the public to have first contact with the nanoscience world by playing.

Although this section is usually employed as a one-way communication channel between the Museum and the public, there is the possibility of inserting opinions and comments that can be shown if approved by the Webmaster or museum team.

Fig 1: The Home Page of the Project NanoAventura. Main Section.

Fig 1: The Home Page of the Project NanoAventura. Main Section.

NanoMundo (NanoWorld)

The structural idea for the NanoWorld area started from the concept of a blog, a simple interface that would allow the insertion of news, articles, interviews, images, links, and that would also allow public participation through opinions, comments, suggestions and questions. However, the conventional tools found in a blog were not enough for the project. The text organization in a temporal history – weeks, months, years – would not allow a more specific search. Thus, for each insertion of a piece of content in NanoWorld, there are several indexers that construct the search system developed specifically for this blog. The index is predetermined by the Museum team. As NanoWorld is a search system, it was important to develop tools for a rather broad search. It is worth noting that each visitor can build a personal NanoWorld by choosing the type of information, the theme and the ordering of information to be presented.

Fig 2: The Home Page of the Project NanoAventura. NanoWorld ambient.

Fig 2: The Home Page of the Project NanoAventura. NanoWorld ambient.

The information is divided into five categories: opinion, articles, interviews, bibliography, and other. The “opinions” are any comments inserted by visitors, while the other categories are inserted by the Museum team. The themes are dynamic, and can be edited and created through the CMS.

The format of the answers to a specific search are not similar to the traditional format of a blog. We tried a mixed response between a search system (with the respective answers) and the blogs (with the respective content presentation). In the blogs, even if there is content paging, the last information of each page remains distant from quick access, and some scrolling is necessary to reach it. Also, two interesting and related pieces of information can remain distant one from the other, a fact that can hinder reading. Therefore, at NanoWorld, the result of a search is presented only with title, date and type of information (not showing the content) – similar to traditional search systems. Thus, initially one looks for information through the title, to go deep into the content afterwards. If the visitor opts for any information by clicking on it, instead of opening a new window or page, as in traditional systems, its content is opened in the very same place, keeping the ordering. In other words, the insertions appear all “closed”, keeping only the titles visible, and they can be opened by the visitor. It is a way to separate the content, but keep a defined organization and avoid rather long pages.

There are three types of ordering for a search: by recommendations, by popularity, and by chronology. The standard ordering system first presents content that was tagged by the museum team through its CMS (represented by a star in the title). This function is usually used to call attention to a specific subject. The second option, frequently used in blogs, is to order all information chronologically. In a third option, when a user asks for order by popularity, the system provides a list ordered by the content that was more discussed, i.e., the ones with a greater number of comments.

The information cataloguing is, however, not limited to the text. NanoWorld has a column where images and links related to nanoscience and nanotechnology can be found. As in the case of texts, the images and links can be indexed with pre-determined terms by the team responsible for the site; this facilitates and provides more resources for a specific search.

As previously mentioned, the top of the page has a ludic functionality with a rather strong visual appeal. In NanoWorld we have developed a game that considers the scale of things and the necessary instrument to observe them, a central question in nanoscience and nanotechnology.

The Games

It is worth remembering that the Web site was conceived to reach several different types of visitors. One type is composed of young people who come either through their own curiosity or through proposed school projects and research. Games in the Web site can play a fundamental role for such a public: while having fun playing the games, young people start developing a new vocabulary and gain a sense of purpose for such advances in human knowledge. With these aims in mind, three games were produced:

Fig 3: Screenshot of the Nanomedicine game. (under jogos - jogos on-line)

Fig 3: Screenshot of the Nanomedicine game. (under jogos - jogos on-line)

Fig4: Screenshot of the Nanocircuit game. (under jogos - jogos on-line)

Fig4: Screenshot of the Nanocircuit game. (under jogos - jogos on-line)

Expectations of the Game Creators

When creating such games, certain expectations were taken into account (Nunes & Gaible, 2002). The content specialists who are responsible for the site and who participated in the production process may want to add new images, update texts, consult scores and maybe eliminate items from it. All the games have an administration page, accessed through a usual browser, where it is possible to make changes without having to enter the Flash software used to develop the games. All the “changeable” parts of the games are saved in XML files that are accessed and changed through the administrative pages. The Flash games read such XML files in runtime.

Another expectation was that these are classes of games that will possibly be reused in other games or even other Web sites. With this in mind, the construction process was modular: it is possible and easy to reuse the matching engine, the administration engines, the score engine, etc. Such engines could be considered cornerstones for the construction of more elaborate learning engines that allow the use of game-like simulations. This could alter the educational landscape (Foreman and Aldrich, 2005).

The last important point to consider with respect to the games in the NanoAventura Web site is the possibility of reusing them as “learning objects”. That means they could possibly be reused as “ready” resources to be inserted in other Web sites or even in Learning Management Systems used for course administration. The rich and interactive simulations used for the games include communication to a background system for identification of users, and storage of states and scores. The construction of such games followed specifications that facilitate their reuse in other environments. Although some popular specifications for communications among learning objects and LMS exist, e.g. SCORM, there are limitations in using such specifications for game-like learning objects. For instance, in the case of the games presented here, just plugging in and playing the learning object (the game) does not make it possible to access high scores without manual modifications in the databases – not the philosophy of the SCORM model. Another possibility, richer than this, is to pack the game as a content package that is used in IMS Learning Design course engines (Burgos et al, 2005). The advantage of doing this is that is possible to track how students used the game. By accessing and comparing their steps and scores, it is possible to create a discussion environment to complement and deepen the experience of using the game for educational purposes. The simulations were constructed with this frame in mind: exporting data about the use of the simulations may be useful someday.


The extension of the museological experience of NanoAventura into the virtual environment presents the possibility of reaching new visitors from different places, not only leading to a diffusion of the exhibition, but also opening the ludic-learning experience. With the new version of the Web site already on-line, the challenge now is to convert it into a reference space on nanoscience and nanotechnology to permit coverage of the inherent interdisciplinarity of nanoscience and the huge amount of debate regarding these new technologies. The existence of a site with updated information in Portuguese is a contribution to better communication of a scientific-technical area in development that, however, is still far from the everyday life for most of the population.


Financial support for the project was provided by Fundação Vitae, FAPESP and CNPq.


Burgos, D., C. Tattersall, R. Koper (2005). Re-purposing existing generic games and simulations for e-learning, available

Foreman, J., and C. Aldrich (2005). The design of advanced learning engines: An interview with Clark Aldrich. Innovate 1 (6), available at, consulted August 1, 2005.

Manovich, L. (2001). The Language of New Media. Cambridge, Mass: MIT Press.

Nunes, C.A.A., E. Gaible (2002). “Development of Multimedia Materials”. In Haddad, W. D. and A. Draxler (Eds). Technologies for Education: potentials, parameters, and prospects. UNESCO, 94-117.

Prado, R. A. (2006). Arquitetura de Interface. Análise de formas de organização da informação na interação entre pessoas e códigos. Dissertação de mestrado no programa de Comunicação e Semiótica da Pontifícia Universidade Católica de São Paulo, São Paulo, Brazil.

Stephens, L. (2005). “News narratives about NanoS&T in major U.S. and Non-U.S. Newspapers”. Science Communication, 27, 2,175-199.

Cite as:

Knobel, M., et al., Design of an Interactive Web Site for the NanoAventura Exhibition, in J. Trant and D. Bearman (eds.). Museums and the Web 2007: Proceedings, Toronto: Archives & Museum Informatics, published March 1, 2007 Consulted

Editorial Note