Making an Interactive VR Infographic

Virtual reality allows you to display information in a very engaging way. And making a VR infographic is not as complicated as it may sound.

With the following instructions, you can build a responsive three-dimensional info space and explore it on a computer screen or in mobile VR. Here is an example: https://cospac.es/Tp3K

What you will need:

• a laptop or computer
• a smartphone with the free CoSpaces app (Android or iOS)
• a cardboard headset, preferably with a magnet switch

Before you start making your VR infographic, you should have a rough overview of the facts you want to present. At best, already write them down as a list on your computer.

Since it’s not comfortable to read long texts in VR, you should better use small portions of information. This is an example for an infographic with interesting facts about penguins:

Take your computer/laptop and go to the CoSpaces browser app. If you don’t have an account yet, create one for free before opening a new space.

Take the first fact from your list and think of something that could represent it visually. It might be an image or a 3D object from the library. It could also be a combination of different objects. Add this representation to your stage.

If we look at the list above, the first point of information (about the smallest penguin species) could be represented by a little penguin with a panel telling its height. Point 4 (that penguins live monogamously) might be symbolized by two penguins and a heart.

In most cases, the visual won’t convey all the necessary information. To add further explanations, you can use a responsive text box. It will open once you look at a certain object in VR — or hover over it with your mouse (if you’re exploring the space on a computer).

To create interactive speech bubbles, you will need some programming. Don’t worry if you have no experience with coding! With the visual programming language Blockly, it’s super easy. This short video shows how you can unlock Blockly in your CoSpaces account and explains the basic features: https://youtu.be/0x-jdrwE7Ng

Here is what you need to do in order to add a responsive info panel to an object.

1. Name the object that you want to make interactive.
2. Go to the code editor and open the Blockly tab.
3. Get the “On hover” block and the “Item say” block. Add an "Item say" block to each free slot of the "On hover" block
4. Set the right values: Chose the name you gave to the object in all three drop-down menus. Then fill in the information you want to convey as the first phrase. The phrase in the second block should be completely empty.
5. Hit the Play button to test your Blockly code. If you did everything correctly, your text will appear as a speech bubble as soon as you hover over the object.

Go back to the build mode and add as many interactive objects and text bubbles as you like.

To save time, you can copy the group of blocks in the code editor (using a right-click) and just change the values.

Once you have added all the facts you want to present, take some time to design the surroundings. You might want to choose a background environment that fits the theme of your infographic or add a few objects that work as decoration.

Also put some thought into how you arrange the objects on the stage. For infographics that are supposed to be explored in virtual reality it makes sense to arrange them in a circle facing the middle. By the way, rearranging objects is easier with the grouping or multi-selection feature.

Once you’re done building, it’s time to share your infographic with the world. If you press the share button, you will get a link that enables others to see your creation.

Of course, it’s especially exciting to explore a VR infographic in VR. You — or anyone you want to see your masterpiece — can do so easily:

1. Take your smartphone and install the CoSpaces app.
2. Open the sharing link of your project on your smartphone. You will be redirected to the CoSpaces app. Click “Play” to start the experience.
3. You can now click the little VR goggles icon in the lower right-hand corner to go to the VR mode.
4. Place your phone into your cardboard headset. You’re ready to explore!

Inside the infographic, you can walk around by pushing the button on your headset. As soon as you look at an object that you made responsive, the little info speech bubble will appear.