Prototyping for Virtual Reality using Framer JS
Excerpts of some interaction considerations I learned of while prototyping for a Virtual Reality experience in Framer JS
Two weeks ago, I purchased a Cardboard Viewer to check out some of the virtual reality content available for Android. The platform does have some really interesting applications in its store including Google’s own Cardboard app which was a joy to play with, and delightful also from a UX perspective.
Around the same time, while browsing the interwebs I came across a great blog post about the VR module for Framer JS. I had never used Framer before, but I heard a lot about the program through my peers and also seen some prototype outcomes.
So, stricken by the world of VR and bored by the holidays, I decided to take up a project that’d help me learn CoffeeScript and Framer JS while exploring a little about UX design for virtual reality. As a kick off project I chose to make a VR based ViewMaster — essentially a slideshow of 360° panoramic images that is controlled by a ‘trigger’.
In the process of making this prototype, I learnt a few things to do with designing experiences for this new 3-dimensional medium. Through this post, I wish to summarize and present some excerpts of the considerations that went into designing the micro interactions inside this prototype.
Before we dig into the the examples of interactions, let’s briefly understand the setup of the 3-dimensional framework that we are working with.
Some basics on the framework of a VR environment
When placing elements in any virtual environment we need to assign them to co-ordinates. In a 2-dimensional field, like much of our flat screen interfaces are, elements are generally positioned along x and y axes. For a VR environment, in order to accommodate the 3-dimensional space, Framer’s VR Module utilizes the Spherical co-ordinate system.
In this module’s framework, the three values by which we can assign an element’s position are Heading, Elevation and Distance. Additionally, through the module, we can also determine the direction in which the the phone (thus, also our user). (Jonas Treub explains the working of the VR module really well in his post on the Framer blog. A must read if you are looking to get into prototyping for VR)
The three values by which we can assign an element’s position are Heading, Elevation and Distance
Considerations while designing the interactions
In order to explain the micro interactions I experimented with while prototyping, I isolated the different interactions and created 3 examples on Framer.
As the interactable element for the examples ahead, I have used a circular flat ‘button’.
Interactions with this button will be utilized to illustrate the various behaviors that I attempted to create.
Note: In the captions of some of the GIFs below, I have included a link to an interactive Framer prototype that can be tried out on your device. And, sorry for the GIF overload coming ahead :]
#1. Inviting attention of the user and reducing visual clutter
When there are elements in the environment that can be interacted with, one of the ways to let the user know of it, is through responsive behavior of the respective element.
In the example below, we modulate the opacity of the button responding to its proximity to the reticle. The reticle, denoted below by the tiny white circle, is essentially a visual aid to help the user aim at elements in a VR environment. This modulation also helps in reducing visual clutter in the virtual space.
#2 . Conveying active state (hover vs scale)
On selection, an element can convey its active state with a multitude of transitions. For the purpose of my prototype, I chose to utilize the transition of size. Actually, lets call it perceived size. Given that we can change the distance of the element from the viewer, thus creating an offset from the ‘background’, the perceived size of an element can be manipulated.
Just for the sake of comparison, in the examples below, I tried out two kinds of transitions on the button - hovering and scaling.
#3. Element positioning and behavior
The 3D environment certainly allows us a lot of freedom with placement and positioning of elements in the space. Thus there’s a plethora of variations a designer can play with in order to create the kind of experience he/she aims to deliver.
The examples below illustrate two methods of placing the interactable button. In the first example, the button is locked to pre-defined and constant heading and elevation values. While in the next one, the elevation is locked to a certain angle, but the heading of the button is free to move. In fact, it tracks the user’s heading to stay parallel to the direction in which the he/she is facing.
Psst: Notice that because the button is slightly offset from the “floor”, the movement creates an interesting parallax effect.
Summing up the exploration, described above were some of the variations I experimented with while and designing the UX for my prototype. Trying out different setups helped me learn more about the design possibilities in the VR environment. Through this I hope to improve the way I harness this medium, towards creating richer overall experiences.
Outcome of the work so far
So, how did the button on my final prototype turnout? Check it out below.
And here’s the link to my latest Framer prototype-
VR ViewmasterYou can play around with the prototype on your phone or alternatively on your computer browser (by using the direction keys to move around). I’d recommend your phone though, it’s more fun that way.
Next steps
I would surely continue to develop the prototype and explore UX design in general for VR, while I continue to further learn more advanced coding with Framer. Some things that I’d like to do as the ideal next steps towards furthering this project are:
(a). Making the prototype stereoscopic. (b) Connecting with the cardboard button. (c) Clean up the final code and make a tutorial out of it.
And that’s about it for now. If you are looking to dig deeper into prototyping with VR some of the references below may come handy!
Thank you for reading! Do share your thoughts :)
References and credits
- The ‘slide images’ in the final prototype were generated from 3D models under CC-BY licences . The source files can be found in this collection. Credits to users: CactusArtz, Jake12314, Hoboo and PigArt
- Design for virtual reality by Jonas Treub
- Best practices for VR by Google Design
Other material referenced along the way while learning Framer:
I am a design student recently graduated from Umeå Institute of Design, Sweden.
You can find me at keyurjain.com
Thanks to Dayna for proofreading, and Caio for title suggestion
