1. Introduction
This paper attempts to explain our approach to an exhibition website. The next sections cover MisterDarwin.eu from conception through the development process. It is a website launched on February 12th, 2011, to celebrate Darwin's 202nd birthday.
MisterDarwin.eu is a tri-lingual site (English, Spanish and Galician), born to complement the physical exhibition but with its own value. We hope to get people to want to visit the exhibition, but we are also trying to reach bigger audiences and to stimulate curiosity around Darwin and evolution.
We plan to create a platform based on this microsite, to easily develop websites for our other flagship exhibitions. We also want this platform to be open to other institutions' participation in the near future. But, first of all, we would like to share our work, thoughts, doubts, decisions, accomplishments, needs... with colleagues; and learn from other different approaches how to bring the museum to the Web.
2. Background
Some years ago, we did a major redesign at Science Museums of Coruña's website, in order to provide better access to visitor info.
After that big effort, we sat down and nothing happened. Then we went to hunt for new visitors. As Internet users often feel like Hansel and Gretel, lost in a deep forest, we left breadcrumbs leading to our site: we started to promote our institution by using free Web 2.0 services
First, we uploaded photos of our new exhibits to Flickr and provided links back to our website. Yet we knew that many users do not follow the links. We also knew the risks of using breadcrumb trails. Sometimes they end up leading to other candy houses, as happened with Hansel and Gretel.
This is the end of that story. No matter if that strategy was really successful. We had learned the lesson of getting new features for free: by using those Web 2.0 services, we got interactive photo albums in our website with no developing costs. And what is more important, we realized the possibilities of those tools (Flickr, YouTube, Google Maps...) for informal science learning. We had found a new trail, a trail that was been explored by other museums, mainly art museums.
Bringing the museum to the Web
Soon we realized that the Web has many things in common with science centers. To a certain extent, they are like brother and sister. Interaction and curiosity are main ingredients in both media, and make it easy to connect ideas. The Internet, like science centers, opens the way for a multidisciplinary and divergent speech. And a web page is more flexible than an exhibition's panel: it is easier to show information at different depths, to satisfy different kinds of visitors.
This is why the Web is an ideal medium for informal science learning. It is the natural place to extend our museums' experience.
So science centers have now a sister medium, with many distinctive features in common. However, are we really making good use of the possibilities of the current Web? How can we bring a science museum to the Web?
One way is the virtual museum, with 3D immersive experiences. That has not much to do with the current language of the Web. And we should also consider whether it makes sense to try to bring the science center itself to a flat screen. Are we really able to virtually recreate the sensations and the scenography of our exhibition halls? We chose not to follow that route.
Then what can we do to bring the Museum to the Web? After some years of trying many little things, at Science Museums of Coruña (=mc2), we have no magic formula, and we only know one thing for sure: the whole institution website is a tough place to start, because it is a corporate site and its main goal is to give visitor information. It may also be too complex a project to start (and more complex in our case, considering that we are three different museums under the same brand).
This is why we considered something simpler. Instead of trying to bring the whole museum to the Web, we thought of bringing just one exhibition. Instead of redesigning our whole website, we started creating a new microsite.
Web exhibitions as e-brochures
We decided to start with the microsite of an exhibition because exhibitions are our flagship products. We chose the exhibition To the Astonishment of Mr. Darwin, which was self-produced by our team and which aims to get the visitors to follow the track of questions and answers that led Darwin to the Theory of Evolution.
First we checked what other similar museums were doing. In every exhibition's site that we analyzed, we found interesting details, but the whole picture was not too inspiring. In general, science museums tend to approach an exhibition's website as an electronic brochure that explains the different thematic areas of the exhibition, covered in sections and subsections. These are some characteristics of those e-brochures:
- Design is determined by the graphic style of the exhibition (or the graphic style of the printed brochure), and also by the style and structure of the museum's website.
- Navigation, determined by that design, usually lacks agilility.
- Multimedia is not naturally integrated. E.g. users are often required to download a video and find the right player to view that format, instead of watching it embedded in a page. Pictures are usually thumbnails, with no option to zoom in.
- Interactivity is low. It mainly consists in clicking hypertext links.
- Content, especially good stuff, is often hidden under very long texts.
Great printed brochures do not work so well when converted into Web pages. The e-brochure approach to an exhibition's website is something like a newscaster reading a newspaper in a radio bulletin; or something like a TV news program recorded with one fixed camera. Both things happened in the early days of radio and TV, when the codes and formats of those new media were hardly developed.
The Web's codes and formats have experienced great development in the last decade. E-brochure-style websites have been left behind on that evolution, and they also fail to bring the science museum experience to the Web. We must go beyond the electronic brochure.
So we decided to pay attention to any kind of websites, not just museum websites. We looked for good sites, in the sense that they convey the essence and characteristics of a product. We took ideas out of Web pages of cell phones, iPhone apps, or hit TV programs. And we wanted the website of our exhibition to resemble those sites in certain aspects.
Online exhibits
Secondly, we focused on the things that characterize the science center experience, and specifically at the Science Museums of Corunna. These are the features of our approach to science communication:
- The exhibit is the atom of the museum, the unit in which exhibitions are divided, the core of our speech.
- In each exhibit visitors touch, play, experiment, feel, and that sparks their curiosity.
- Information placed in our exhibits aims to stimulate visitors' curiosity; it is not intended to satisfy that curiosity. Instead of answering questions, we try to generate more questions.
- There is no planned route in our exhibitions. There is an implied script but not a thematic discourse, divided into sections and subsections, as in a textbook.
- We are an institution of informal education: our Darwin exhibition does not attempt to explain evolution, but to provide experiences that stimulate to the knowledge of Darwin's theory.
Taking this into account, when we wanted to bring an exhibition to the Web, our main goal was bringing to the Web the idea of an exhibit.
When we thought about making an online module, the first idea was a stunning multimedia presentation. One example is the interactive We Chose The Moon (http://wechoosethemoon.org), produced by the John F. Kennedy Presidential Library and Museum. They digitally recreated the Apollo 11 mission to celebrate the 40th anniversary of the arrival of man on the Moon.
Soon we discarded that idea, because we had no budget to address such a development, which is not only expensive but also difficult to produce and update. Besides, we ruled out a development like this, even on a smaller scale, because we doubt that Web surfers actually use this type of interactive features.
If we wanted to attract people, we had to go and hunt for visitors where they are browsing the Internet. A very limited budget, due to the economic crisis, made us devise a low-cost strategy and seek maximum impact. We were determined to create a digital experience that allows visitors to explore, to spark their curiosity and questions, and to give them elements to start to look for the answers.
Our question was, "How and where are Internet users wandering around?" The answer: in social networks and other Web 2.0 services. Perhaps our visitors do not usually browse sites like We Chose the Moon, but they may often discover videos on YouTube, or follow links on Facebook and Twitter. They may even create contents and share information on those social networks.
3. Web 2.0 tools to communicate science
The idea is to use Web 2.0 services to develop interactive experiences that are the online equivalents of the physical exhibits. For example, Darwin's exhibition has a large Earth globe for visitors to use to follow the route of the Beagle around the world; it is accompanied by a touchscreen showing information on each stop. On the website, an analogous 2.0 exhibit will be based on Google Maps.
Our approach to an exhibition's website relies on a strategy of developing low-cost interactive content. This has a double benefit. By using Web 2.0 services that are free or almost free, we can do more with fewer resources. And we can also connect better with the public, because visitors may discover our interactive content in these social networks and end up in our website, following the links back to it.
With the huge growth of social networks in the last years, Web 2.0 has gone mainstream. Being on the Internet is not just having a website anymore. Many museums started a Facebook profile to promote the institution or got a Twitter account to stay in touch with visitors. However, Web 2.0 is not only about social contact or promotion. What if we are missing an important point? What if those free Web 2.0 services were the most powerful multimedia tools we have to communicate science?
First, by using these tools we can get the most of our previously edited material, such as learning guides or videos, with little effort. Let's see some examples. With YouTube you can rescue a video from your museum's archive so thousands of people worldwide can watch it. YouTube made our institutions see the benefits of publishing content beyond our own websites.
Is there a youtube-for-documents? Yes, there are several services, like Issuu, which let you embed a document on your web page so visitors can read it without downloading. Fullscreen view and flipping-page animations are nice options that make a great user experience. And you get for free all these new features for your website.
Uploading a photo to Flickr also opens new possibilities. You can create interactive notes that tell the story of the image or reveal small details.
Secondly, free Web 2.0 services provide new smart and interactive formats to show information. They are constantly evolving, and now you can map any information, as Internet users did with swine flu cases. This is also a whole new way of showing collections, linking the objects or species with their places of origin.
Connection possibilities multiply with timeline services, like Dipity, which links data, place and time. A visitor to the Smithsonian National Air & Space Museum made this timeline after visiting the gallery of Flight Milestones: (http://tinyurl.com/65ysb3z). It is easy to think of similar applications for many museums.
The third reason is easy content creation and open distribution. There are open source platforms like Pachyderm that allow museum professionals with no programming skills to create their own multimedia presentations. This service was created by SFMOMA for easily development of virtual guides, for their website and for interactive kiosks.
Another example of a multimedia presentations service is Prezi, which arose last year as an alternative to PowerPoint. Prezis may be a great complement for a speaker, but can also work well by themselves. They are a new way of storytelling and connecting ideas.
Twitter is a great example of delivering Web 2.0 contents to multiple devices: computers, mobile phones or even TVs with network connection.
So these are some of the possibilities that Web 2.0 tools open for informal science learning. Users are already exploring these tools, but many institutions are overlooking them - maybe because they are free; maybe because we are too focused on the classic approach to developing digital learning contents as stunning presentations that are hard to create and update.
The new low-cost approach may be not just the only chance for small museums, but also a more effective and open way to deliver contents from any museum to wider audiences. At Science Museums of Coruña we have been exploring this creative road, and the result is the website MisterDarwin.eu, introduced below.
4. Project MisterDarwin
The project consisted in developing a multilingual (English, Spanish and Galician) website of the traveling exhibition To the Astonishment of Mr. Darwin. This site is addressed to the general public who visit our science museums, with special attention to students and teachers.
Objectives and contents
The site MisterDarwin.eu is an extension of the physical exhibition on the Internet, with the following objectives:
- To offer an autonomous self-learning product, sharing common grounds with the exhibition (same ideas and pedagogic approach), but with its own interactive contents.
- To promote the exhibition: to motivate and to facilitate visits and to get better use of the exhibition, besides promoting its circulation to other institutions.
- To serve as a model for quickly developing future sites of other flagship exhibitions produced by the Science Museums of Coruña.
It is an interactive website which encourages participation, designed to complement the physical exhibition and to follow it during its travels around different museums. MisterDarwin.eu has its own value, even after the end of the exhibition. It is not a virtual exhibition that replicates the contents of the physical exhibition.
Above all, it is conceived to be a good website: an efficient communication product providing a comfortable and intuitive user experience. So MisterDarwin.eu uses typical and current Web formats to achieve the same goal as our exhibitions: to provide experiences that stimulate knowledge of science and that exercise scientific attitudes such as curiosity, perseverance, skepticism and critical thinking.
Misterdarwin.eu is a microsite with its contents grouped into three sections:
- Interactive trip: a journey around a series of interactive online exhibits.
- The exhibition: visitor and technical info about the physical exhibition.
- Extras: media library of resources related to the exhibition and its subject.
Feedback: In addition, visitors are encouraged to rate and comment on every single piece of content of this website, and to share their views on different social networks.
Overview
The following screenshots work as a quick tour around the microsite, covering its three sections, the home page and some distinct elements of the user interface:
Screenshot 1: Interactive trip
The core of this website is a collection of 2.0 exhibits, which are Web equivalents of the physical exhibits. The first thing we want is people interacting in these pages. So we gave maximum prominence to the online exhibit (based on 2.0 services), showing it at full width and ready to use. Visitors play, explore, think... and that sparks their curiosity.
The second thing we want is people's feedback. So we provide visitors with different ways to express their views: star ratings, a Facebook 'Like' button, a comments board, and the option to share links on different social networks or via e-mail.
We also want to keep piquing the visitors' curiosity. This is the purpose of the texts in the lower part of the page, written to engage and to provoke new questions rather than to give answers. External links are provided to get visitors started at finding their own answers.
Screenshot 2: The exhibition
The exhibition is introduced with a trailer and a picture gallery. Next to this visual tour, we provide practical information on how to visit the exhibition. The lower area is covered with further information: a dossier to prepare for the visit, a press kit of high-resolution images, a technical sheet, and information for other museums interested in renting this exhibition.
Screenshot 3: Extras
This section, named after DVD Extras, is a collection of multimedia resources such as videos, audios, publications, wallpapers, articles or apps, which are offered in a way easy to view. Not only are videos embedded in the page, and with fullscreen option (as in YouTube), but also audios, articles or documents: there is no need to download and open them with the appropriate player/reader. The goal is to provide excellent multimedia-content integration.
'Extras' is the place for complementary products (like a teacher's guide), and for footage or materials from parallel activities. This section also gives a second chance to review certain exhibition contents (panels, touchscreen interactive games) that it may be more comfortable to consult at home/work/school.
Screenshot 4: Home page
As online exhibits are the core of this website, an exhibit navigator gets prominence in the home page, next to smaller boxes that introduce the other two sections. The lower area contains a short video featuring the exhibition and the web as complementary products. Last added, most viewed and best-rated contents also have their own place in the home page.
Screenshot 5: Interface elements
Main menu: a simple menu reflects the simple structure of this microsite and provides quick navigation. Agility is also the reason to use a submenu that takes visitors directly to any online exhibit from any page on this website: there is no need for an intermediate page to select the destination exhibit.
Popovers: there are no individual pages just for the credits, or the license, or the contact form. These contents appear as a floating panel over every page of this website. The same goes for the comments. That implies a conscious decision to give comments less prominence than on a blog, assuming the risk of getting fewer people to make comments.
Search is instant, like Facebook search or iOS / Mac OS Spotlight. As you type a word, matching results are shown. Being a fairly small site, there is no need for a search engine like Google with a series of result pages. We use an index similar to those found at the end of reference books. This instant index is achieved by using a controlled vocabulary. It is also built into a popover because very few results are expected.
A multimedia-content viewer
Going beyond the e-brochure concept, our approach to an exhibition microsite is a webapp: a multimedia-content viewer of pictures, texts, videos, documents or online exhibits related to the exhibition.
| e-brochure | 2.0 Exhibition | |
|---|---|---|
| Concept | Exhibition guide in electronic format | Multimedia-content viewer |
| Design | Graphic style of the exhibition, structure of the museum's website | Based on actions, not on graphic style |
| User experience | Navigation lacks agility, poor integration of multimedia |
Quick, intuitive, multidevice, excellent integration of multimedia |
| Interactivity | Low (only text links) | Use of web 2.0 services and social networks to connect ideas and people |
| Contents | A lot of text, good materials hidden | Recycles promotion materials and ideas from the exhibition |
Table 1: Going beyond the e-brochure
- Features: The viewer allows users to navigate between contents items, examine them in detail, comment/rate/promote them on social networks, and download some of them.
- Content strategy: The idea is to recycle exhibition contents (and media/school dossiers), making the most of those materials or using the same ideas to produce new online exhibits. These recycled contents have their own value and the multimedia viewer will make them shine.
- Multidevice user experience: The guideline is to show these contents, and to offer the above features, in multiple devices such as personal computers, cell phones, tablets or museum kiosks, using the appropriate format for each device or giving alternative contents, but never offering a blank space and requiring the installation of a browser plugin.
The webapp approach emphasizes:
- The goal of getting a good interface which can be reused for future exhibitions
- The design being determined by the user interface rather than by the exhibition's graphic style. Therefore, with some aesthetic retouching, the template will be ready for another exhibition.
- The fact that the webapp can be updated, by improving the interface or adding new features. Also, the websites of the exhibitions made with this system will automatically benefit from these improvements.
Moreover, compared to the classic approach to developing interactive presentations and custom media viewers (expensive and difficult to update), we rely on Web 2.0 services that are free (or require only a small fee) to:
- Store, display and spread multimedia content
- Develop interactive online exhibits.
By relying on those external services we lose full control over the tools, but we save costs, we get our contents better spread, and we reach wider audiences. Furthermore, as Web 2.0 services are designed for easy content creation, museum professionals with no programming skills are provided with tools to develop and update their own online exhibits.
Development
The microsite described above was designed to fulfill these general requirements:
- Automatic adaptation to the device and browser used by the visitor
- Easy and intuitive content management
- Accessibility and use of Web standards
- Easy adaptation when the exhibition travels to other museums
- Browser plugins like Flash required only when they are the best way to get the desired features. Even then, alternatives to plugins will always be provided.
Project MisterDarwin involved three main developments: the online exhibits, the content management system, and the viewer. Moreover, multimedia-content integration is an outstanding feature of this website. It required special attention during the development and should also be covered here.
Online exhibits
The first option to create online exhibits was to use external Web 2.0 services and then embed the interactive elements in our Web pages. So we did this with the three exhibits planned for the website's launch:
- Google Maps. A little work with this service's API was needed to customize an online exhibit on Darwin's trip around the world.
- Prezi provided a spectacular way of covering Darwin's research on fossils in different levels of detail and giving visitors the freedom to follow a marked route or to explore on their own.
- Dipity allowed us to create a timeline with milestones in the lives of Darwin, Harriet (the tortoise collected by Darwin at the Galapagos Islands), and the theory of evolution.
Recent Dipity transition from Flash to HTML5 makes the timeline viewable in iOS and Android devices, although it is not very usable with those touch interfaces.
Meanwhile, as Prezi is still Flash-only based, that exhibit does not work on iPhones, iPads and many Android phones. However, in these cases when the visitor does not have Flash installed, we avoid the typical blank space requiring the plugin installation. We provide alternative contents (an image or a slideshow), and suggest the visitor get Flash in a full-featured computer in order to make the most of the exhibit.
Content Management System (CMS)
The chosen Content Management System is WordPress, a free open-source software that is simple to install and has a big developer community behind it. The use of WordPress let us meet Web standards.
The customization of our own theme made it easier to manage contents, while preserving the core of the CMS with no modification. So this theme, with some plugins, can be used with any WordPress 3.0 or higher, meaning that it is quite easy to install a microsite like this one on many Web servers.
Custom Post Types guide this site's editors and administrators in managing the website and its contents in an intuitive way. Content areas related to the museum that hosts this traveling exhibition have their own place in the control panel, so it will be easy to update this information. The 'qTranslate plugin' for Wordpress helps with multilingual content management.
Viewer
Our custom WordPress theme controls the appearance and the features of the multimedia-content viewer, with a different template for each section.
The user interface of the viewer is built on JavaScript functions. Combining the jQuery library and the Prototype framework, we achieved good results from simple animation and interaction to more complex elements, like popovers and image galleries with lightbox effect. Special care was needed to avoid conflicts between jQuery and Prototype.
By using JavaScript modules for the open-source library and framework, we simplified the development of a rich, dynamic and intuitive interface that is cross-platform. It works with multiple devices and browsers, without requiring Flash or Java.
We built this interface to work with touch devices. So controls are bigger, and hover or rollover techniques are only ornamental rather than functional.
Multimedia-content integration
The first option to embed multimedia content in this microsite was to use external services, like YouTube and Vimeo for videos, or Issuu for documents.
These services have a highly customizable embedding code, to control aesthetic details. They also have a very easy-to-use interface. Also, their constant and quick evolution makes it easy to view contents on multiple devices. E.g. With YouTube and Vimeo new embedding code, the browser will first try to play a video using HTML5 (supported by modern smartphones and desktop browsers) before having to rely on Flash.
Moreover, external video services give us free storage, and they manage to get the appropriate format, size or encoding for each device. However, we did not find a similar service to embed audio, so we had to install our own player to automatically play audio via HTML5 tag or Flash plugin. This 'Degradable HTML5 audio and video plugin' for WordPress (http://tinyurl.com/yeer3jj) is a good alternative for embedding media without relying on external services.
With documents, besides embedding them in pages (and allowing download of the pdf file), we made reading easier by adding other options: a text-only version is provided, either for viewing on screen / print (see the new Reader feature in Safari and the Readability service for any browser), or for downloading the epub file to an e-book reader.
Technical Specifications
- CMS: WordPress 3.0.2
- HTML document type: XHTML 1.0 Transitional
- Web encoding (charset): UTF-8
- Supported standards: W3C - CSS2.1
Kudos to the working team
The Science Museums of Coruña's staff took the creative leadership of this project and also took an active part in the development, as we always do with exhibitions and other products.
Galinus (http://www.galinus.com) was the company that carried out the development of this microsite, with the invaluable contribution of Predanet (http://www.predanet.com) in programming and layout. MisterDarwin.eu would not have been possible without Galinus' bet on accepting this R&D project in the middle of a deep economic crisis in our country. Their consulting skills, their great technical advice and their efforts to share our view on the project were key factors to getting the objectives accomplished.
Long working sessions were devoted to prototyping. Designers and programmers were involved in this early stage of development, so there were no big hassles in the implementation phase, and the final product was extremely close to what it was planned to be.
Screenshot 6: Wireframe, first iteration
Screenshot 7: Wireframe, last iteration
Launch strategy
One month before launching, we started to promote on Facebook and Twitter a teaser site that included a trailer of the exhibition and screenshots of the coming website. Half the exhibits and the multimedia resources were planned to be online on the launch date, set for February 12th, 2011 (Darwin's birthday). The publication of the remaining contents was planned for the next few weeks, step by step. This strategy was devised to keep the website alive, and to help promote it on social networks.
5. Final bits
As this paper was written before the launch date of MisterDarwin.eu, we cannot convey serious conclusions. Just two little thoughts:
- Keep it small. Choosing a small project and a small working team made it easier to experiment and innovate. Eventually, we found solutions that will be used in bigger projects, like our institution's website redesign.
- Stop talking, start doing. General use of social networks and Web 2.0 services is talking about what people do. Let's use the same tools to do things!
