Part 6 of Ideas in Form series in my design studio: Extending the element of Interaction. Ideas in Form was a project to select a domain and a lens within or through which one would like to conduct research. Given your lens, develop a concept derived from any idea you have identified with your domain. This concept will then move through a series of forms, where each form is a prototype of the idea.
“How can I give a minimal but clear understanding of the 7 ancient and new wonders of the world, using an element of curiosity, without overwhelming the user?”
Following up from 5D, while it had a web interaction, I proceeded to extend this into another form, here WebVR so that the interaction is more immersive with sight and hand control, with the experience of sound too. Note that, this is not a well-defined interaction design project and only uses interaction elements to help satisfy the basic criteria as mentioned above. This is not a perfect product for my design statement and criteria but only an extension prototype of the 5D version.
Interaction using Web-VR
This uses jQuery behind a simple Web VR frame with 360 images that helps achieve to teleport between the 7 wonders of the world, by clicking or touching the screen to teleport. The animations and music add the curiosity factor, the entire experience helps educate and the interface and information exposed are kept minimal.
I finally ended up making my first VR product, and that too on my favorite platform, the web. I was intrigued by AFrame when I landed at the RealityVirtually Hackathon at MIT Media Lab, this October 2017. This provides a more immersive experience with WebVR as compared to the above simple browser prototype. I built this with all the basic info that I learned in the first two days of the hackathon. It was difficult to understand the difference in tags with the a-frame semantics and the regular HTML but with a little trial and error, I was able to work around it. With more time, I could add CSS animations, transitions and include hand gestures by coding for HTC Vive, DayDream and other accompanying handsets.
Also, I hope this serves as an inspiration to those who want to build quick VR apps. This is a good start to help children get virtually into the real experience so that they can understand stuff better. Here are the user reactions with mostly kids, and felt good to just see a simple smile on their faces.
How to experience ‘VR the World’
- Get any phone with a good screen
- Get any VR headset that can click or touch the phone screen. Any headset that can do this will do.
- Go to https://mariodcunha.github.io/7wotwvr/ on your phone and insert your phone into the headset in VR mode.
- Make sure headphones are connected as well for a complete experience.
- Enter into the VR world. Click the screen of the mobile using the headset/handset to teleport yourself to the other 7 wonders of the world (only the New ones are added here).
- Here’s the code at GitHub
The 360 images and background music is borrowed from Google Images and Youtube and they do not belong to me or made by me. The voice narration is from Amazon Polly.
The scope of this project does not include user-testing or user-reactions and hence not all deductions are free from assumptions. These ‘final products’ are merely prototypes of one single idea in many forms.
This completes the Ideas in Form project… for now.