My favorite VR prototyping tool
I have been looking for a prototyping tool in VR that would allow UX designers to easily test and present concepts without writing any code. So far, what I’ve tried had limited capabilities. For example, Quill Brush, Tilt Brush and Google blocks allow you to create 3D scenes and objects but do not offer great ways to create smooth transitions. In Quill for example the animations look more suitable for videos instead of UI transitions and interactions.
A few weeks ago, I discovered Tvori. At first glance it seemed to me that it would not be a good fit for UX designers as it was kind of similar to the other art tools I already mentioned. Anyway, I decided to give it a try and was pleasantly surprised. I could easily create animations with keyframes and animation curves. It does not allow you to design real prototypes that users can test, but you can visualize interactions and prototype ideas in 3D instead of 2D.
Instead of going through all the features, I will show you how I created a prototype of a bookmarks database in VR.
Prototyping Concepts with Tvori
So, the idea I wanted to show visually was how would it feel if the bookmarks library of a browser is organized like a universe with cluster of interconnected bookmarks. This is something we’ve discussed with my team but have not had a chance to try yet.
Prototype: Universe of bookmarks
- Each folder/ tag of bookmarks is represented by a planet surrounded by the bookmarked websites related to this topic in the form of smaller planets
- The user can drag each cluster of planet closer in order to see it better
- When the user hovers over a planet it becomes larger and the name becomes more visible
Creating the Universe prototype in Tvori
I’ve already tested this concept in Quill but I was not able to create the interactions. To simulate the whole prototype in Tvori I needed the following features:
- Be able to bundle together all planets belonging to a single topic
- Be able to drag a cluster closer
- Be able to create an animation showing the hover effect
- Shoot a video of the whole experiment
I started by creating a single 3D sphere with a cluster of smaller spheres around it. Tvori allowed me to group them together so I could simply copy the group instead of creating new clusters from scratch. The second step was to create the connections between the planets and the user. When brainstorming the prototype, we thought of adding physics to the system to make it feel more realistic. It would also hold the planets of a cluster together but prevent them from clashing with one another.
Unfortunately, I could not simulate the physical connections between the planets properly with Tvori — I simply drew lines in between them. Still, for the purpose of the visual prototype, it looked neat.
Here is how one cluster looked like in the end. I added a long string so the user could drag it closer the way he/she would drag a bunch of balloons for example.
Adding animations
The next step was to test the animation functionality. It was intuitive and easy — I just had to start the clock and then move the objects I wanted to animate one by one. I added a 3D model of a human to show more realistically how the user would be interacting with the prototype. I first moved the hand of the model, stopped the animation mode, turned back the timer to zero, and then dragged closer one of the clusters of bookmarks as if the model was pulling it.
The cool thing was that after stopping the animation I could alter the animation curve and make it exactly the way I wanted. The animation process for the hover effect was the same. One thing that bothered me was that I could not get how to remove an animations I did not like. There was a bin icon at the end of the video timeline, so I tried to drag the keyframes of the animation towards the bin. I managed to delete them but the animation was still there and there was no way to edit it in any possible way as the keyframes were gone. This meant I had to start the whole project from the beginning which was quite annoying. Only later I discovered that if I drag the keyframes of an animation to the zero point of the animation timeline the animation did not play. So if you need to remove an animation, here is how you to do so:
Shooting a video
The last part of my experiment with Tvori was to export a video of the whole interaction which I was going to show to my team to visually present the bookmarks universe idea. Tvori offers a useful video functionality that allows you to position one or more cameras within the scene, zoom in and out and export a video from each camera angles. Here is how the end result looks like:
Tvori is probably the best tool I’ve used so far for visualizing UX concepts in VR. It allows UX designers demonstrate interaction without the need to write code. The animation panel is intuitive and simple to use. I hope to see more features implemented which would allow me to build and test real prototypes. IF you want to try Tvori you can get it both on Oculus Store and on Steam.
