Prototype 2 – Biomes


To build a prototype that explores the concept of presenting information through segmented layers, a pattern recurring amongst a variety of topics.


Oculus Rift + Zed mini + Leap Motion

Development Process

Early Interaction Tests

We first brainstormed different ways that we could present layered information, and how the interactions would change between these different presentations.

Our main focus as we approached this problem was keeping the interactions as intuitive as possible, which is why we draw analogies to each of interactions (drawer pulling, block stacking) for each brainstormed idea. The reason for this was based on the feedback of our 3D Lines Demo, where many of the playtesters mentioned that not having to learn confusing controls made it easier to focus on the pedagogical material being presented. We created very basic prototypes to test the individual interactions of the Drawer and Block Stacking mechanics.

Early Prototype – Drawer Mechanic

The drawer demo has users inspect details within each layer of the overall demo by pulling out that specific layer like a drawer and picking out the objects inside. For example, in the context of our rainforest biome demo, the layers of the rainforest (forest floor, understory, canopy, etc.) are separate drawers that each contain their respective animals and plants that live within them.

On iteration, we re-added the pinch handles from the 3D Lines Demo to control the drawers, and had the drawers locked to only move in a forward/backward motion to behave like an actual drawer. Once a layer is pulled out all the way, it will fall down to table height to become more accessible to look at the objects inside. To return the layer back into the overall drawer, the user can lift on the handle to return the layer back to it’s appropriate height and then let go of the handle to snap it back into place.

Early Prototype – Block Stacking Mechanic

The early demo interaction for block stacking features two blocks and a white pedestal. The pedestal manages a stack of individual block objects. The user can create a stack by grabbing a cube and dragging it over to the pedestal (or the top of the current stack). A “ghost” version of the block will appear when the block is close enough to the top of the stack to indicate that it is ready to be placed.

If the user lets go of the block at this moment, it will snap to place at the top of the stack in the same location as the ghost cube. This also makes the current block the new top of the stack, and locks the lower blocks in the stack in place.

This mechanic was more experimental when it came to presenting layered information, since blocks are not always necessarily stacked in a particular order. Ultimately from playtesting, we determined this was not the best way to present mainly layered content, but it was still a mechanic we decided was worth using for other purposes.

Development Process

I. Deciding Main Mechanic + Early Technical Limitations

The final version of the biomes demo is a combination of the two demos from before. We chose to use the drawer mechanic as the main form of separating the layers of the rainforest, since trying to use stackable block layers as the main mechanic provided some other technical challenges.

The first was that stackable blocks encourage users to try to stack them out of order, and in the context of a rainforest that doesn’t make sense. We played around with the idea of displaying how factors like sunlight or organism density would change if layers were out of order, but quickly determined this was too out of scope to develop in a 2-week prototype. It seemed unnecessary to restrict blocking to stay in order when the drawer mechanic was designed to do this naturally.

The other technical challenge presented using block layers dealt more with the interactions of the organisms inside each layer. We wanted the users to be able to pick out plants/animals from each rainforest layer to learn more information about them, but this was incredibly difficult to do using the block layers approach. Leap Motion initiates object grasping by detecting when a tracked hand controller overlaps with a virtual object’s collider, and the user closes their hand. This poses an issue when you want to have graspable objects within another graspable object (organisms inside layers, both of which are graspable), since it would not be able to reliably distinguish which object the user intends to grab when the hand controller is overlapping with two objects at once.

II. Designing Pedagogical Task

To focus in on the intent of this being a prototype example of learner-content interactions, we wanted to design a pedagogical task about rainforests for students to complete while using the demo. To make the most of the drawer mechanic, we created a task that would incorporate the organisms inside each layer and how they relate to each other despite being in different layers. To maintain a realistic scope, we reduced the task to the most basic information a student needs to learn about biomes – the roles of different organisms and how they relate to each other.

Hence, our task pertains to the food web of the rainforest, where students pull individual organisms and learn about the overall food web by constructing individual food chains. Our prototype is based on the example food chain below.

We reintroduced the block stacking mechanic while implementing the construction of food chains. Much like the diagram, a food chain is constructed by stacking predators on top of their prey in a particular chain. If the student correctly places a predator on top of its prey, the blocks will snap together in a way similar to the original block stacking demo. Students can then pick up the combined chain and combine them with other partially constructed chains to their desire.

If the student tries to stack two cubes together incorrectly, they will not snap together to form a stack.

To aid with visualizing the food chain, the pedestal from the block stacking demo also triggers more information to swivel out when a stack is placed on top of it. A small tooltip will appear next to each organism cube that details the organism’s name and its role in the ecosystem.


We playtested the biome prototype with 32 people ranging from high schoolers to adults. We did not give them much instruction. The given task for the playtesters is create a food chain using the organisms in the rainforest. First we wrote down our observation from their interaction then performed a 5 minute interview to ask about what was engaging, frustrating, and what they would add if they could.

Hand tracking was the most noticeable issue. Using Leap Motion, users have to hold up their hands in front of the platform for the best hand tracking quality. However, since the interaction involves pulling, pinching, and stacking, users did not always stay within the trackable area. Especially for the drawer interaction, people tend to pull their hands from the front of the device to above the head. The Leap Motion then lost tracking, which resulted in some frustration. Some indication might be necessary to guide the users into moving their hands back into trackable space.

The drawer interaction itself was also not intuitive. We found that people often grabbed organisms directly out of the model. This was a problem because the model was placed farther from the users, with space for them to pull out a drawer that falls in front of the model. If the users were bypassing the drawer interaction, it meant that they were leaning too far forward to pick organisms out of the biomes, often losing Leap Motion tracking or straining themselves physically.

Quick Iteration

A quick modification to ameliorate this was to add layer names to the model. This indicated the sectioned-off nature of the drawers a bit better, and seemed to make it a little more clear that the layers had to be pulled out.

It was not immediately obvious how to use the pedestal. Playtesters did not put the stacked cubes to pedestal until we told them to do so. One is because the position of pedestal was on the right of the interaction zone, slightly out of their immediate field of view. So rather than looking around, playtesters preferred to focus on the organisms in front of them. The color of the pedestal could also have been made more eye-catching to make them more aware of its presence.

Lastly, the reactive animation on the drawer handles was problematic. The drawer handles move towards the user’s hands as they approach, but since there are multiple stacked handles, it looked confusing and glitchy to the users. Also, if they pulled the handle outside the tracked area, the handle would “stick” to their hand (since the Leap Motion would preserve the last known state of the hand as “grabbing” when the hand lost tracking) which was also frustrating.

Although we found many flaws to fix, playtesters enjoyed playing the biome model. Our block model and stacking interaction was engaging. Playtesters instantly grabbed the organisms, but with the visual hints, they understood that this is a cube that user can stack. The feedback for correctly stacked organisms on the pedestal was clear and engaging. A stronger negative feedback for incorrect stacking might be required.