How to Prototype for VR without Coding
--
Using the Adobe Suite, Cinema 4D, and very.gd
I believe that many interaction designers may not be ready to move to 3D environments, so the design community should share as much information and advice as possible. For this project I only needed to communicate the idea and the technology to the CTO and Creative Director of Helios Interactive. This meant that I spent most of my time tweaking files rather than designing and developing every scene I imagined.
This article is a mix of a post-mortem and prototyping insights for visual/product designers. It covers designing for VR without coding.
I’m Chris Locke, a New Media Design student at Rochester Institute of Technology, and I did a class assignment with Helios based on shopping at Target in VR. I chose Target because it’s a bold and familiar brand that wants to stay ahead of the curve; they’re also redesigning their stores so there’s a great opportunity to embrace VR shopping. My full client presentation is here.
Technology, eyesight and focus
The best way to design for a VR device is to put on a headset.
It’s practically impossible to understand the limitations of the hardware without trying it first. Using a heads-up display limits our eyesight in a few ways: centered focus, blurred peripheral vision, and less eye movement.
I used the Google Daydream for this project, and the only problem I noticed was that the screen is more blurry then you’d expect. This limits the screen size so you have to be wary of putting UI elements in a blurry or uncomfortable area.
Dimensions for AI and C4D
A 2:1 ratio for the canvas, with lots of iterations
In Adobe Illustrator I started with the very.gd template (which is also available for Photoshop and Sketch). This template has recommended sizes for UI as well as markers for users’ comfort zones, periphery, etc.
I only used the template as a starting point rather than exact dimensions. Every user is different so one person’s comfort zone may be bigger or smaller than somebody else’s. To accommodate these conflicting perspectives, I uploaded exports to very.gd and had classmates try different scenes, and each scene had UI containers with different sizes.
They told me which panels they liked then I used those to develop a grid system. This part of the process is very similar to designing digital products. Import sketches, choose fonts, develop a grid, add content, animate…
To make a proper environment for my very.gd scene, I used Cinema 4D. I created a floor with a tile material (from the Content Browser) and a physical sky. Then I created planes floating in the air, and some cylinders that acted as product stands.
To make all of this more believable, I created a quick rendering of a product from Target: a lip crayon. I chose it because it was on the front page and it’s an easy product to model and texture.
I used this tutorial to create a 360 export of the whole scene. All you do is create a small sphere (the “camera”), add a Compositing tag so it doesn’t show up in the render, add a reflection material, and add a Bake Texture tag. Once you bake the texture — with only Reflection checked — you bring the PNG into Photoshop to flip horizontally then export again. I recommend baking the texture at a 2:1 aspect ratio so there’s no seams; I chose a 10,000 x 5,000 pixel PNG so you can see lots of sharp details.
This took me nearly 100 iterations! My main pitfalls were text sizes and the UI’s distance from the viewer. There are templates and recommendations from various developers for text sizes and such, but I believe the best way to make decisions is to iterate as much as possible.
Retail versus Online
The largest benefits to using VR are accessibility and leveraging the on-demand economy. Lots of people don’t want to spend their whole day shopping, especially if they need help moving around large stores or if they’re sensitive to large crowds and busy parking lots. Other people only shop online because they can find good deals and act quickly with little to no effort.
By using VR, you keep the luxury of a boutique environment and combine it with the comfortability of online shopping.
I did some basic research on online shopping and Target’s new stores. The store will be divided into two parts, a quick-stop essentials section and a slow boutique area with lots of different products.
I believe that users would like to start with a Welcome screen that shows sales and Wishlist items, then choose to go to either section; once they’re in they can move across the store and browse at their own leisure. If they see a product they don’t like, they can remove it so the store personalizes each section.
If the user looks towards their feet, a Map would pop up and shows them where other products are. If they’re still having trouble, they can use the Phone — based off of existing phones in Target stores — to call for personal assistance.
Why bother?
There’s a couple reasons in my mind: experimenting on a new hardware is fun, and Interaction Designers already work on tons of different devices. Adding another medium to your skill-set will only make you better at making creative solutions.
If you’d like to learn more, I provided lots of links for further learning:
- Gamasutra Gaming UI’s article
- Smashing Mag’s Getting Started with VR and Developing for VR articles
- Usability and Motion Manifesto article
- Mike Alger’s YouTube videos
- Google I/O videos
- UX of VR
- and Jama Jurabaev’s Panoramic Photoshop files.
