Prototyping is critical for to the Interaction Design Process. It allows us to validate ideas and understand how a product feels. Designing for flat screens such as mobile and desktop, designers have excellent tools for rapid prototyping. Designs can be quickly built in Figma, Sketch and Adobe XD then quickly built into a prototype on the intended device, with animations. We can validate ideas, communicate with non-design teams and gain stakeholder confidence.
Designing for a 3D environment like Virtual Reality we don’t have the same all-in-one tools like Figma. 2D captures of Virtual Reality are notorious for lacking the depth of sensation that a VR experience offers. It’s quite difficult to know what an experience without full 6DOF experience. This is especially true for usability testing of UI. What may appear legible on a 2D design, may be viewed very different through a stereoscopic display. Interaction Design is built on a series of processes for understanding a problem space, iterative design, validation and testing. We can apply this same process to UX design for VR.
For my IxD grad project at Emily Carr I’m designing an experience to demystify the difficulty of reading classic literature through recontextualization in VR. Exploring how to adapt my process to a 3D project I developed a workflow for rapid prototyping in VR.
Sketching
Sketching on paper is our fastest tool to work through ideas. Shifting to 3D space can be a huge hurdle for 2D designers. These are a series of quick sketches I made to iterate on what VR could offer to the reading experience.
Paper Prototypes
Before we move into digital, paper prototypes allow us to move into physical and tangible interactions. Working with cheap materials like paper and cardboard, experiments can be quick and dirty. Below are a series of quick prototypes I made to expand on sketches, and get feedback from users.
The most important step in the development was one of the first, which we recommend to everyone developing for VR or even games in general: building physical prototypes.
-Zachary Flores and Ezra J. Robinson
Medium Fidelity: Spatial Prototyping
As 2D designers know, the faster you can test on device the better. Spatial prototyping allows us to sketch out ideas in a 3D environment in your VR device, without worrying about a game engine like Unity or Unreal. These will likely have no interaction or animation, they are usually 3D sketches often done directly in VR.
Google’s Tilt Brush and Blocks are both great entry points to sketching directly in VR. Both allow for exporting of assets to other apps, which is important to maintain a workflow. Sketching in an app that doesn’t integrate with other programs will be limiting if you want to use those assets further while prototyping. Tilt Brush creations can be brought directly into Unity and used for development.
I knew I needed to test UI assets to understand what reading text at different sizes and distances felt like. Microsoft Maquette and Sketchbox3D are designed specifically for spatial prototyping. You can import 3D objects and quickly place them in VR space, which immediately connects scale and immersion. They also allow for simple 3D editing and sketching. I found Sketchbox to import 3D models with their colors more accurately, but both are quite powerful. While animation and interaction are not supported, scenes can be created to walk a user through your scenario directly in VR. These are not native Oculus Quest apps, and will require PCVR to run over through Oculus Link or Steam VR.
2D assets can be designed as usual, and imported directly into your spatial prototype. I used Figma to quickly design wireframes and export them as PNGs. I highly recommend watching Googles’ video, Daydream Labs: Lessons Learned from VR Prototyping before designing 2D assets. It’s highly informative about what changes for UI in VR. They’ve developed a system called DDM (Distance-Independent Millimeters) that maintains angular sizes of fonts regardless of user distance.
360 Images can be brought in to create your skybox or even the entire background quickly.
- Google Images, panorama images are abundant with current smart phone technologies. Try searching for “360 HDRI” for high quality images.
- Adobe Stock was clearly a better experience if you’re want to pay the premium. Luckily they offer a free trial for 10 images you can grab, which is what I used.
3D assets:
- Sketchfab has free downloadable assets that are great for prototyping. You’ll find a huge assortment of objects, environments and lots of 3D scans. You can use these as OBJs in Unity. I found exporting as .GLB worked best for Sketchbox.
- Google Blocks can be used to quickly create assets. It has simplified controls, focusing your efforts on moving quickly.