Published on | Prototyping: From UX to Front End — Medium Nitin Sampathi

Quickly simulate VR experiences for testing and validation

The why

Prototyping is one of the most valuable tools that a designer can leverage throughout their design process. Creating something that can be used, tested, analyzed, and judged is how we decide if design decisions stay or go. And when done quickly, prototyping really becomes dangerous.

Prototyping is especially useful in virtual reality (VR). VR experiences can be extremely abstract, often hard to visualize, let alone explain to another person. A simple prototype can make sense of that mess.

Throughout my thesis project for my graduate UX program at MICA I created a series of prototypes to see if my VR designs and interactions were headed in the right direction.

The How

Remember this — The prototype’s fidelity depends on what you want to learn.

The following is a series of explanations on how to create VR prototypes at different levels of fidelity, so pick the method that’s best for you.

Panoramas and 360 photos

Who would’ve thought you could prototype an experience with the snap of a button?

I digitally recreated this physical space for my UX thesis project

Here’s How:
Take a panorama with your smartphone camera or stitch together individual images and view that image in a Cardboard viewer.

The best images to use in these types of simulations are 360-degree images. Cameras like the Ricoh Theta V take an equirectangular image, capturing everything in front, behind, above, below, and all around you!

Google Blocks

Use simple 3D geometry to simulate a sense of scale and depth.

I placed a series of planes at different distances to understand scale and depth

Here’s How:
If you have a rift or vive, you can use Google Blocks to prototype your ideas. This isn’t something you’d put in front of a user, but you can begin to see how your 3D environment might look and feel. Place boxes and planes closer to and farther from you in order to simulate interfaces in your environment. Poly is a user-created 3D resource library of assets to use in our Google Blocks scene.

Cinema 4D

Using a 3D modeling application you can create a 3D scene to simulate the experience.

Using a 3D model and a few planes, I could quickly communicate the layout of this interface

Here’s How:
Do you have a subscription to Creative Cloud or After Effects? Cinema 4D lite comes with that package but there’s also Blender which is free. Download 3D models from TurboSquid and position the camera to show a third-person or first-person POV.

Photoshop

Photoshop lets us use core image editing tools like the pen and brush tool, to draw elements that appear to be in 3D space.

Start off with an equirectangular photograph to create a more realistic scene

Here’s How:
Open up an equirectangular image and select 3D > Spherical Panorama > New Panorama From Selected Layer(s). Now, your Move tool (V) has turned into an Orbit The 3D Camera tool so grab the canvas and look around the scene.

Find an angle you like and draw out a box using the pen tool. Make sure you’re drawing on the panorama layer and not on a separate layer. You can even start off with an equirectangular photograph so that the scene has a background that you can visualize and interface on top of.

Sketch

Sketch to VR is a sketch plugin that uses another tool that I mention later called A-Frame. The Sketch to VR plugin automatically creates an A-Frame website, but all we need to worry about is creating our design in sketch.

Source: Liu Liu

Here’s How:
Download the plug-in and double-click the ‘SketchToVR.sketchplugin’ file. This will download the plug-in to Sketch.

Then, make a copy of ‘demo.sketch’, rename it, and open it up. Place in your equirectangular image and draw your UI. Afterwards, go to Plugins > Sketch to VR > Export. Find the folder of files you just created and load it up in a SimpleHTTPServer.

Framer

Framer is a high-fidelity prototyping tool that uses coffeescript, a language similar to javascript but easier to comprehend. Programming lets use concepts like functions and events in order to make more dynamic experiences.

Listening to the camera rotation, we can trigger events when the elevation passes a certain threshold

Here’s How:
Download a trial of Framer and the VRComponent. Place the VRComponent.coffee into the /modules directory of your new Framer project.

Your’e going to first want to read over the Framer docs (at least layers and events) and understand a little bit of programming. After getting to know Framer, you’re going to want to understand Framer and VR.

A helpful snippet of code when creating VR experiences comes from this project by Jonas Treub. Copy the code that outputs device orientation data to the screen. You can use this information to trigger events on certain types of gazes.

A-Frame

A-Frame allows you to create web VR experiences with HTML, CSS, and Javascript. We could create prototypes that are identical to the final product, or even the final product!

Javascript provides more control of your scene allowing you to create in higher fidelity

Here’s How:
You may have never built a website before but the following steps should be easy to follow — hopefully.

Open up your terminal or search for it in spotlight (cmd + spacebar). Type “cd”, drag and drop a folder where you want to create an A-Frame project in, and then click enter. Type “ls” and click enter to see the other folders in that directory, to make sure you’re in the right place.

You’ll have to download a few things through the terminal.

Download homebrew (It lets you download other stuff easier)

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

2. Download node (It lets you download other stuff easier)

brew install node

3. Install Angle (create A-Frame projects with a simple command)

npm install -g angle

Awesome. All of that helped you get Angle, which creates a folder of files that makes up your A-Frame project. To create a new A-Frame project type the following command:

angle initscene

After naming the project and following the prompts you should see that folder, in your finder, where you typed the “cd” command previously.

Open up a text editor like Atom, Go to File > Add Project Folder and find your A-Frame project and open up index.html. Edit everything between the <a-scene> tags to alter the VR scene. Read the A-Frame docs to see everything that’s possible. Since this is still html, you can grab elements from the DOM as you typically would with javascript.

To see your project in a website, return back to the terminal. Make sure you’re in the correct project folder (cd + the file path of your project), type “npm install” (sets up your project so that you can download other components) and “npm run start” (runs your website at http://127.0.0.1:7000/)

Virtual reality is a medium that involves a responsive design approach to creating interactive and usable experiences. Ideas that are hard to explain, can be visualized, communicated, and iterated upon through the help of prototypes. Prototyping helps us improve our designs and is a crucial aspect of the process.

<a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a>

Prototyping for Virtual Reality was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Prototyping for Virtual Reality

Cool stuff, every week

More Articles