Cousteau is an interactive installation about the deep sea.

Project Description

Cousteau is a fun, interactive way for children to learn about the deep sea. It is targeted at primary-school pupils and can be set up in a museum as well as at home.

The user becomes the captain of a submarine. The view through the porthole is shown on a large screen. Through this window into the sea various fishes, plants and historical events can be discovered. With an iPad the user can control the depth of the submarine. The iPad also gives access to detailed information about the things discovered in the sea.

Porthole

We had many discussions about using a two-screen setup: Would it confuse the users to much, would they be distracted? In the end we decided for it – it proved to be the right decision, providing an immersive experience. To keep the distraction to a minimum we kept each screen as simple as possible.

The large screen simply displays the view through the window. There are minimal displays for depth and pressure that disappear when they are not needed. This part of the setup is not for learning, but for discovering and experiencing the deep sea.

User Interface

The iPad’s accelerometer is used for intuitive steering: Tilt the iPad forward to dive down and backward to dive back up.

As the submarine dives deeper card representing elements that are displayed on the large screen start to appear.

The cards displayed can be filtered by category.

A card can be tapped to display more detailed information. The large card shows an image gallery, interesting facts in a table and text.

A photograph of the illustrated fish is shown on its large card.

The header is used to either display a timeline or the scientific classification.

If the user wants to get to a certain depth faster the depth display can be tapped and held …

… a scale overlay is shown and the submarine can be moved up or down by pulling in either direction.

Move your mouse over the hotspot to start a tour through the interface!

To make the UI appropriate for our target audience we minimized it down to a single, natural-language interface element. It can be used to filter for specific content types and control the depth of the submarine.

Because we wanted the users to be able to watch the view through the porthole while descending into the depth the main interaction for controlling the depth doesn’t require eye contact: Tilting the iPad forward makes the submarine sink, tilting it backwards makes it ascend.

The greater part of the screen is filled by little cards. Everything that can be seen on the large screen at a moment is represented by one card. When the user wants to get more information on one of the fishes, historical events or alike he can tap the card. A bigger card is shown that includes an image gallery, a table with interesting facts and a long form text, that can be read by a parent or teacher.

Fishes

Ceratias Carunculatus
Ceratias Bispinosus
Cottunculus Microps
Halosaurus Machroir
Trachichtys Traillii

We tried various graphic styles but in the end settled for a low-poly look. We didn’t want the app to look too childish, but also not too serious and boring. We figured that illustrations that were representative of the fishes, but not naturalistic, were the way to go. I created illustrations of several fishes and animated their fins and mouth.

Observations

Since we built a working prototype we were able to observe how users interacted with Cousteau. On the exhibition at our university we noticed that while adults sometimes had problems coordinating between the two screens, children were far more secure. Kids as young as three years managed to control the system and seemed to be intrigued by discovering new fishes. Controlling the depth by tilting the iPad came natural to them and the interface was understandable without explanation. The general response was very positive.

Process & Technology

My focus in this project was on screen design, illustration and partly prototyping.

We developed a native prototype running on an iPad. It streamed to the second screen via an AppleTV.

After playing around with different graphic styles and having settled on a 3D world built with Unity for a while, in the end we decided to go all 2D and use Apple’s own game API SpriteKit. We developed the prototype in Swift (which had been introduced less than a month earlier). My part was developing the SpriteKit components for the second screen.

Meta

This is a student project created during summer semester 2014 as part of a course in Interactive Communication Systems by Roger Walk.

Team partners

Aaron Abentheuer
Sarah Mautsch