<p>Published on <a href="http://ift.tt/2rxW1h0">| Prototyping: From UX to Front End &mdash; Medium</a> Blake Hudelson <img alt="" src="http://ift.tt/2qYXEre">Image: Natsuo Nama</p>
<p>The VR age is rapidly approaching.</p>
<p>When the world’s largest tech companies (Google, Facebook, Microsoft, Apple) are investing billions into the development of VR technologies, you know something big is on the horizon. Experts say that this VR revolution will be bigger than the advent of the mobile phone, and the first company to create a consumer VR product that is adopted by the masses will win big. Really big.</p>
<p>So why should designers care?</p>
<p>Designers should care because the market that has provided them with reliable work over the past few decades and is about to shift towards a new paradigm of immersive 3D content. Sound, touch, depth, and emotion will all be integral to the VR experience, making even the most novel 2D screen experiences feel boring and dated.</p>
<p><em>*Note: Realizing there is a lot of overlap between virtual reality, augmented reality, and mixed reality (VR/AR/MR), I’ve decided just to use the term ‘VR’ in this article for the sake of simplicity. I will explore AR/MR in more detail in a future article.</em></p>
<h3>Getting Started</h3>
<p>I wrote this article to help people get oriented with the processes, tools, and principles when creating VR experiences. Let’s dive in!</p>
<h4>The Best Way to Learn about VR design…Is in VR</h4>
<p>In VR you’re not just an observer, but you’re a participant in the story with an option to influence its outcome. Pretty cool, right? So before you even start thinking about designing for VR, it’s critical to experience it first hand and really understand how it works.</p>
<p><a href="http://ift.tt/27BpzKx">Google Cardboard</a> is a great entry point for newbies, as it is affordable ($15) and works with any smart phone. For people who want the best quality experience and are willing to pay for it, <a href="http://ift.tt/1DGq8pQ">Oculus Rift</a> or <a href="http://ift.tt/2dz0pZE">HTC Vive</a> are the best options. The Oculus and Vive both have natural hand controllers, which let’s you interact with your virtual spaces. The <a href="http://ift.tt/214DZ0L">Tilt Brush</a> and <a href="http://ift.tt/2fgYINt">Google Earth VR</a> apps are great interactive experiences to try first.</p>
<p><img alt="" src="http://ift.tt/2rxPh2L">Tilt Brush</p>
<blockquote><p>We’re finally going to be free of the 2D monitor. It’s been a window into virtual reality that we’ve all looked into for 30–40 years.</p></blockquote>
<blockquote><p>— Brendan Iribe</p></blockquote>
<h4>Think Beyond the Rectangle</h4>
<p>After you have an idea of what VR feels like, it’s time to think about what kind of experience you want to design. We’ve all grown so used to designing for rectangles because every viewing device is a rectangle. When you’re in immersive 360 space, your environment is boundless.</p>
<p>Do you want to create a first person game? Maybe an educational app? An interactive movie? Whatever it is, start simple and think about what you need to start an MVP.</p>
<p><img alt="" src="http://ift.tt/2qYwKzx">Oculus Home UI</p>
<h4>Sketch Ideas</h4>
<p>Getting started designing your VR experience isn’t too different than the process for designing a web or mobile product. You will need user personas, conceptual flows, wireframes, and an interaction model.</p>
<p>As you ideate on design ideas, consider some of these fundamental questions:</p>
<p>How do people get started? What affordances are provided to guide people without overwhelming them? Do you want to err on the side of providing too much guidance or create a minimalist environment that doesn’t overload the user with too many choices?</p>
<p>Don’t expect people to know what to do and where to go. Slow and progressive familiarization, visual clues, and guidance from the software should all be used to help the user.</p>
<h4><strong>Don’t Reinvent UI Patterns</strong></h4>
<p>VR apps with intuitive user interfaces — similar to what people use on their wearables, phones, tablets and computers — are what will make VR accessible to the masses. Novel interactions are fun to come up with, but it increases user’s learning curve.</p>
<p>Similar to designing 2D interfaces, designers should use size, contrast and color to denote hierarchy. In VR, size is based on the <em>distance</em> between the user and a piece of content, so it’s important to understand the scale of content and appropriate viewing distance. For example, knowing how large to design your type is tricky, but fortunately there are many precedents in the real world. The same considerations made for print design (billboards, posters, books) are helpful when designing content for VR.</p>
<p><img alt="" src="http://ift.tt/2rxPi6P">Billboard; Samsung Gear Home UI</p>
<p>Consider how you interact with a touchscreen monitor today. There are a number of patterns that we have all grown to understand such as swiping, pinching to zoom, and long tapping to bring up more options. These are all considerations that should be made in VR as well. I’m confident that as more designers come into the VR field, there will be more minds to create and vet new UI patterns, helping the industry to move forward.</p>
<p><img alt="" src="http://ift.tt/2qYKCtP">Google Cardboard UI Guidelines</p>
<h3>Tools</h3>
<h4>Pencil and Paper</h4>
<p>Before getting into any software, it’s crucial to get your ideas out on paper. It’s fast, cheap, and helps you express ideas that may take hours in software. This is especially important because moving from sketches to hi-fidelity can cost much more in 3D than in 2D.</p>
<h4>Software</h4>
<p>Some designers start with tools they already know like Sketch, others use it as an opportunity to learn new tools. It really depends on what engine you are going to use to build your app. If you are building a 3D game, you’ll want to use Unity or Unreal Engine. Cinema 4D and Maya are also widely used, but mostly for complex animations and renderings.</p>
<p><img alt="" src="http://ift.tt/2rxPiDR">Unity</p>
<h3>Frameworks</h3>
<p>There are three major frameworks to choose from when designing for VR: Mozilla A-Frame, Daydream VR, and Unity VR/Unreal SDK.</p>
<ol>
<li>Mozilla A-Frame is for Web VR and can be used platforms such as Google Cardboard, Samsung Gear, and Oculus Rift.</li>
<li>Daydream VR is for midrange VR and works with mobile phones only.</li>
<li>Unity VR/Unreal SDK are for high end headsets including Oculus Rift, HTC Vive, and HoloLens (AR).</li>
</ol>
<h3>Experience Principles</h3>
<p>When you’re designing for VR, you’re designing for the capabilities of people as much as you’re designing for the capabilities of the system. So it’s essential that you understand your users and the issues that may come up while they experience VR.</p>
<blockquote><p>Virtual reality is the ultimate empathy machine. These experiences are more than documentaries. They’re opportunities to walk a mile in someone else’s shoes.</p></blockquote>
<blockquote><p>— Chris Milk</p></blockquote>
<h4>Physiological Comfort</h4>
<p>Designing an experience that is comfortable for people is the most important consideration (and a difficult one). If you’ve ever used a VR headset for more than 20 minutes, you’ve likely experienced some sort of fatigue or nausea. VR can confuse your brain because your body is stationary but you’re viewing an environment that is moving. Providing a fixed reference point, such as a horizon line or a dashboard that stays with you as you move, helps ease nausea. If there is much movement in your app— accelerating, zooming, jumping— it must be controlled by the users or they will become sick.</p>
<h4>Environmental Comfort</h4>
<p>Just like in the physical world, people can easily get uncomfortable in small, large, or high spaces (<em>claustrophobia/agoraphobia/vertigo</em>), so it’s important to understand scale when designing in VR. If you design a space that’s too big, users may get lost. If a space is too small, users may get claustrophobic.</p>
<p>There are many ways to guide people through your virtual environment. Non-spatial methods including audio and light can be especially useful. Audio can be used for spatial positioning and light can be used to reveal a path to follow. The gaming industry has used these techniques for years to help guide people through their journeys.</p>
<h4>Ergonomics</h4>
<p>When first designing for VR it’s exciting to think about creating futuristic interfaces like we’ve seen from Hollywood blockbusters like Iron Man or Minority Report, but the reality is those UIs would be exhausting if used for more than a few minutes. The following diagrams help to illustrate the comfortable range of motion zones:</p>
<p><img alt="" src="http://ift.tt/2qYT8cl">Source: Mike Alger, Alex Chu<img alt="" src="http://ift.tt/2ry0W1p">Source: Mike Alger, Alex Chu</p>
<p>We’ve all been affected by some sort of “text neck” syndrome at some point (the soreness felt from looking down at our smart phones for extended periods). Depending on how far you lean over, poor posture can create up to 60 pounds of pressure on your spine. This can lead to permanent nerve damage in your spine and neck.</p>
<p><img alt="" src="http://ift.tt/2qYOSJJ">Image: Torrance Memorial Medical Center</p>
<p>As VR is adopted by a wider audience, it will be essential to establish healthy habits and movement standards. Instead of trying to adapt ourselves to fit the limited interactions supported by our existing technologies, our interactions with VR platforms will need to be as natural and intuitive as possible. This “natural computing” paradigm — that is, interactions that no longer have to adapt to the limited form factors of the computer (keyboard, mouse, touchscreen) — will allow us to interact with the digital world in the same way we interact with the physical world.</p>
<h4>Input Methods</h4>
<p>When you’re wearing a VR headset, you can’t see what is in your hands. Unlike gaming controllers that we’ve grown accustomed to (Playstation, Xbox, Wii), VR hand controllers have to be suitable for “blind mode” use.</p>
<p>Every platform has different methods to engage with the VR environment. For example, Google Cardboard has only one button, Oculus and HTC Vive both have two hand controllers which provide six degrees of freedom. The controllers enhance the VR experience by allowing users to pick things up and physically engage with the others.</p>
<p><img alt="" src="http://ift.tt/2rxKYVb"></p>
<h4>Sound</h4>
<p>While sound is often annoying when using the web or mobile apps, it is a integral part of VR. Consider the phenomenon of synesthesia, where stimulation of one sense leads to the automatic triggering of another sense. For example, you smell something and get the illusion of taste. This also works with sound. Since tactile feedback is still lacking in VR, sound is a great way to provide feedback when users touch objects.</p>
<p>3D Sound — aka Holophonic sound — is still in its infancy, but will be transformative in how we experience VR. We are all used to stereophonic sound, which provides sound coming from two channels (left/right), but holophonic sound allows us to tell if sound is coming from above, below, or behind us. Think of when you are outside and hear an airplane. You intuitively look up, right? Having this sound experience in VR is what will make it truly immersive.</p>
<h3>VR Design Guidelines</h3>
<p>In closing, I recommend checking out a few resources that will give you a broader understanding of how to design for VR. <a href="http://ift.tt/1QeWARi">Google VR Guidelines</a>, <a href="http://ift.tt/2eyCbhQ">Oculus VR Best Practices</a>, and the <a href="http://www.uxofvr.com/">UX of VR</a> are the best places to start. After reading through these resources, you’ll easily be ahead of the crowd.</p>
<h3>Think, Explore, Create</h3>
<p>What’s exciting about designing for VR right now is there are very few established conventions and very few experts — it’s a completely open field! If you start designing for VR now, you could be the expert in one year. If you already have experience in gaming or architecture, you already have an head start. This industry shift from 2D to 3D is not only a great opportunity to rethink paradigms of human-computer interaction, but be involved in the creation of a entirely new field.</p>
<p>Just like the process of coming into any new field, it’s essential to be constantly reflecting on the new opportunities in this industry. There are infinite opportunities to innovate, improve, and create brand new experiences in this space. So think big, be critical, and break out of your 2D thought process!</p>
<p><em>Thanks for reading! If you’d like to continue the conversation, leave a comment or message me on Twitter </em><a href="https://twitter.com/BlakeHudelson"><em>@blakehudelson</em></a><em>.</em></p>
<p><img src="http://ift.tt/2qYwLDB" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="http://ift.tt/2rxR7AR">Designing for VR | A Beginners Guide</a> was originally published in <a href="http://ift.tt/2cAqCpx">Prototyping: From UX to Front End</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


Designing for VR | A Beginners Guide

Top Stories