{"id":14019,"date":"2018-01-02T11:30:04","date_gmt":"2018-01-02T11:30:04","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=14019"},"modified":"2021-02-11T12:00:25","modified_gmt":"2021-02-11T12:00:25","slug":"designing-vr-beginners-guide","status":"publish","type":"post","link":"https:\/\/marvelapp.com\/blog\/designing-vr-beginners-guide\/","title":{"rendered":"Designing for VR: A Beginners Guide"},"content":{"rendered":"<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The VR age is rapidly approaching.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">When the world\u2019s largest tech companies (Google, Facebook, Microsoft, Apple) are investing billions into VR<span style=\"font-weight: 400;\"> development\u00a0<\/span>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 design a consumer virtual reality product that is adopted by the masses will win big. Really big.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">So why should designers care?<\/strong><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">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>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>*Note: Realizing there is a lot of overlap between virtual reality, augmented reality, and mixed reality (VR\/AR\/MR), I\u2019ve decided just to use the term \u2018VR\u2019 in this article for the sake of simplicity. I will explore AR\/MR in more detail in a future article.<\/em><\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Getting Started with Virtual Reality Design<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">I wrote this article to help people get oriented with the processes, tools, and principles when creating VR experiences. Let\u2019s dive in!<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">The Best Way to Learn about VR design\u2026Is in\u00a0VR<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">In VR you\u2019re not just an observer, but you\u2019re 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\u2019s critical to experience it first hand and really understand how it works.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/vr.google.com\/cardboard\/\">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 class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.oculus.com\/rift\/\">Oculus Rift<\/a> or <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.vive.com\/us\/\">HTC Vive<\/a> are the best options. The Oculus and Vive both have natural hand controllers, which let\u2019s you interact with your virtual spaces. The <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.tiltbrush.com\/\">Tilt Brush<\/a> and <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/vr.google.com\/earth\/\">Google Earth VR<\/a> apps are great interactive experiences to try first.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/p>\n<div id=\"attachment_6580\" style=\"width: 490px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/12\/1_-tP4u2kA0wEXSi-zmheVA.gif\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6580\" class=\"wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/12\/1_-tP4u2kA0wEXSi-zmheVA.gif\" alt=\"Tilt Brush\" width=\"480\" height=\"270\" \/><\/a><p id=\"caption-attachment-6580\" class=\"wp-caption-text\">Tilt Brush<\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><span class=\"long-quote\">&quot;We\u2019re finally going to be free of the 2D monitor. It\u2019s been a window into virtual reality that we\u2019ve all looked into for 30\u201340\u00a0years.&quot; \u2014 Brendan\u00a0Iribe<\/span><\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Think Beyond the Rectangle<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">After you have an idea of what VR feels like, it\u2019s time to think about what kind of experience you want to design. We\u2019ve all grown so used to designing for rectangles because every viewing device is a rectangle. When you\u2019re in immersive 360 space, your environment is boundless.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Do you want to create a first person game? Maybe an educational VR app? An interactive movie? Whatever it is, start simple and think about what you need to start an MVP.<\/p>\n<div id=\"attachment_6580\" style=\"width: 877px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/12\/1EhGSnlexmlZBvi1lixyYhw.jpeg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6580\" class=\"wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/12\/1EhGSnlexmlZBvi1lixyYhw.jpeg\" alt=\"Oculus Home\u00a0UI\" width=\"867\" height=\"465\" \/><\/a><p id=\"caption-attachment-6580\" class=\"wp-caption-text\">Oculus Home\u00a0UI<\/p><\/div>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Sketch Ideas<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Getting started designing your VR experience isn\u2019t too different than the process for designing applications or a web or mobile product. You will need user personas, conceptual flows, <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvelapp.com\/blog\/getting-started-wireframes\/\">wireframes<\/a>, a <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvelapp.com\/blog\/vr-prototyping-marvel\/\">VR prototype<\/a> and an interaction model.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">As you ideate on design ideas, consider some of these fundamental questions:<\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li>How do people get started?<\/li>\n<li>What affordances are provided to guide people without overwhelming them?<\/li>\n<li>Do you want to err on the side of providing too much guidance or create a minimalist environment that doesn\u2019t overload the user with too many choices?<\/li>\n<\/ul>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Don\u2019t 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>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Don\u2019t Reinvent UI\u00a0Patterns<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">VR apps with intuitive user interfaces \u2014 similar to what people use on their wearables, phones, tablets and computers \u2014 are what will make VR accessible to the masses. Novel interactions are fun to come up with, but it increases user\u2019s learning curve.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Similar to designing 2D interfaces, VR 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\u2019s 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>\n<div id=\"attachment_6580\" style=\"width: 1066px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/12\/1NovlZovfHpeV-FYvBYTLbg.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6580\" class=\"wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/12\/1NovlZovfHpeV-FYvBYTLbg.png\" alt=\"Billboard; Samsung Gear Home\u00a0UI\" width=\"1056\" height=\"1068\" \/><\/a><p id=\"caption-attachment-6580\" class=\"wp-caption-text\">Billboard; Samsung Gear Home\u00a0UI<\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">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\u2019m 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>\n<div id=\"attachment_6580\" style=\"width: 1530px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/12\/1k6Y3he2zPbyBZP5Xi_OiKA.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6580\" class=\"wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/12\/1k6Y3he2zPbyBZP5Xi_OiKA.png\" alt=\"Google Cardboard UI Guidelines\" width=\"1520\" height=\"720\" \/><\/a><p id=\"caption-attachment-6580\" class=\"wp-caption-text\">Google Cardboard UI Guidelines<\/p><\/div>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Tools<\/h2>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Pencil and\u00a0Paper<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Before getting into any software, it\u2019s crucial to get your ideas out on paper. It\u2019s 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>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Software<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">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\u2019ll want to use Unity or Unreal Engine. Cinema 4D and Maya are also widely used, but mostly for complex animations and renderings.<\/p>\n<div id=\"attachment_6580\" style=\"width: 2890px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/12\/1BLMJY3jL6en7XJ1W3uTWsA.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6580\" class=\"wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/12\/1BLMJY3jL6en7XJ1W3uTWsA.png\" alt=\"Unity dashboard\" width=\"2880\" height=\"1798\" \/><\/a><p id=\"caption-attachment-6580\" class=\"wp-caption-text\">Unity<\/p><\/div>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Frameworks<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">There are three major frameworks to choose from when designing for VR: Mozilla A-Frame, Daydream VR, and Unity VR\/Unreal SDK.<\/p>\n<ol class=\"pageWrap pageWrap--s list list--ordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li>Mozilla A-Frame is for Web VR and can be used platforms such as Google Cardboard, Samsung Gear, and Oculus Rift.<\/li>\n<li>Daydream VR is for midrange VR and works with mobile phones only.<\/li>\n<li>Unity VR\/Unreal SDK are for high end headsets including Oculus Rift, HTC Vive, and HoloLens (AR).<\/li>\n<\/ol>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Experience Principles<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">When you\u2019re designing for VR, you\u2019re designing for the capabilities of people as much as you\u2019re designing for the capabilities of the system. So it\u2019s essential that you understand your users and the issues that may come up while they experience VR.<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"Virtual reality is the ultimate empathy machine. These experiences are more than documentaries. They\u2019re opportunities to walk a mile in someone else\u2019s\u00a0shoes.\" -Chris\u00a0Milk<\/p><\/span><\/blockquote>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Physiological Comfort<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Designing an experience that is comfortable for people is the most important consideration (and a difficult one). If you\u2019ve ever used a VR headset for more than 20 minutes, you\u2019ve likely experienced some sort of fatigue or nausea. VR can confuse your brain because your body is stationary but you\u2019re 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\u2014 accelerating, zooming, jumping\u2014 it must be controlled by the users or they will become sick.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Environmental Comfort<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Just like in the physical world, people can easily get uncomfortable in small, large, or high spaces (<em>claustrophobia\/agoraphobia\/vertigo<\/em>), so it\u2019s important to understand scale as a <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvelapp.com\/blog\/getting-started-vr-interface-design\/\">VR designer<\/a>. If you design a space that\u2019s too big, users may get lost. If a space is too small, users may get claustrophobic.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">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>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Ergonomics<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">When first designing for VR it\u2019s exciting to think about creating futuristic interfaces like we\u2019ve 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>\n<div id=\"attachment_6580\" style=\"width: 2058px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/12\/1prDI5rSBAHnRDlSh8laAGQ.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6580\" class=\"wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/12\/1prDI5rSBAHnRDlSh8laAGQ.png\" alt=\"viewing zones in VR applications\" width=\"2048\" height=\"1068\" \/><\/a><p id=\"caption-attachment-6580\" class=\"wp-caption-text\">Source: Mike Alger, Alex\u00a0Chu<\/p><\/div>\n<div id=\"attachment_6580\" style=\"width: 1628px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/12\/1kBEkxgQOvcoIhLtO4Iaf7w.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6580\" class=\"wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/12\/1kBEkxgQOvcoIhLtO4Iaf7w.png\" alt=\"\" width=\"1618\" height=\"1068\" \/><\/a><p id=\"caption-attachment-6580\" class=\"wp-caption-text\">Source: Mike Alger, Alex\u00a0Chu<\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">We\u2019ve all been affected by some sort of \u201ctext neck\u201d 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>\n<div id=\"attachment_6580\" style=\"width: 842px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/12\/1hhC8N8JBi_5BZUUhySvXiA.jpeg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6580\" class=\"wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/12\/1hhC8N8JBi_5BZUUhySvXiA.jpeg\" alt=\"Torrance Memorial Medical\u00a0Center\" width=\"832\" height=\"423\" \/><\/a><p id=\"caption-attachment-6580\" class=\"wp-caption-text\">Image: Torrance Memorial Medical\u00a0Center<\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">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 \u201cnatural computing\u201d paradigm \u2014 that is, interactions that no longer have to adapt to the limited form factors of the computer (keyboard, mouse, touchscreen) \u2014 will allow us to interact with the digital world in the same way we interact with the physical world.<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"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.\"<\/p><\/span><\/blockquote>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Input Methods<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">When you\u2019re wearing a VR headset, you can\u2019t see what is in your hands. Unlike gaming controllers that we\u2019ve grown accustomed to (Playstation, Xbox, Wii), VR hand controllers have to be suitable for \u201cblind mode\u201d use.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">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>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/12\/1hA6STKRYF1JeIUKY-C_Rvw.jpeg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6580 size-full\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/12\/1hA6STKRYF1JeIUKY-C_Rvw.jpeg\" alt=\"VR controllers for Vive and Oculus\" width=\"1912\" height=\"1175\" \/><\/a><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Sound<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">While sound is often annoying when using the web or mobile apps, it is a integral part of VR development. 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>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">3D Sound \u2014 aka Holophonic sound \u2014 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>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">VR Design Guidelines<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">In closing, I recommend checking out a few resources that will give you a broader understanding of how to design for VR. <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.google.com\/design\/spec-vr\/designing-for-google-cardboard\/a-new-dimension.html#\">Google VR Guidelines<\/a>, <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/developer3.oculus.com\/documentation\/intro-vr\/latest\/concepts\/bp_intro\/\">Oculus VR Best Practices<\/a>, and the <a class=\"link link--blue fontWeight-4\"href=\"http:\/\/www.uxofvr.com\/\">UX of VR<\/a> are the best places to start. After reading through these resources, you\u2019ll easily be ahead of the crowd.<\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">Further reading:<\/h3>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li><a class=\"link link--blue fontWeight-4\"class=\"LinkSuggestion__Link-sc-1mdih4x-2 dcwLhi\" href=\"https:\/\/marvelapp.com\/blog\/design-practices-virtual-reality\/\" target=\"_blank\" rel=\"noopener noreferrer\">Design Practices in Virtual Reality<\/a><\/li>\n<li><a class=\"link link--blue fontWeight-4\"class=\"LinkSuggestion__Link-sc-1mdih4x-2 dcwLhi\" href=\"https:\/\/marvelapp.com\/blog\/design-beyond-screen-primer-vr-ar-multiverse\/\" target=\"_blank\" rel=\"noopener noreferrer\">Design Beyond a Screen: A Primer for VR, AR and the Multiverse<\/a><\/li>\n<li><a class=\"link link--blue fontWeight-4\"class=\"LinkSuggestion__Link-sc-1mdih4x-2 dcwLhi\" href=\"https:\/\/marvelapp.com\/blog\/stop-talking-start-sketching-guide-paper-prototyping\/\" target=\"_blank\" rel=\"noopener noreferrer\">Stop Talking and Start Sketching: A Guide to Paper Prototyping<\/a><\/li>\n<li><a class=\"link link--blue fontWeight-4\"class=\"LinkSuggestion__Link-sc-1mdih4x-2 dcwLhi\" href=\"https:\/\/marvelapp.com\/blog\/crash-course-ui-design\/\" target=\"_blank\" rel=\"noopener noreferrer\">A Crash Course in UI Design<\/a><\/li>\n<li><a class=\"link link--blue fontWeight-4\"class=\"LinkSuggestion__Link-sc-1mdih4x-2 dcwLhi\" href=\"https:\/\/marvelapp.com\/blog\/mixed-reality-user-flows-new-kind-template\/\" target=\"_blank\" rel=\"noopener noreferrer\">Mixed Reality User Flows: A New Kind of Template<\/a><\/li>\n<\/ul>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Think, Explore,\u00a0Create<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">What\u2019s exciting about designing for VR right now is there are very few established conventions and very few experts \u2014 it\u2019s 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>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Just like the process of coming into any new field, it\u2019s 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>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>This article was originally published on <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/blog.prototypr.io\/designing-for-vr-a-beginners-guide-d2fe37902146\">Blake's Medium page<\/a>.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The VR age is rapidly approaching. When the world\u2019s largest tech companies (Google, Facebook, Microsoft, Apple) are investing billions into VR development\u00a0technologies, 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 design a consumer virtual reality product that is adopted&#8230; <a class=\"link link--blue fontWeight-4\" href=\"https:\/\/marvelapp.com\/blog\/designing-vr-beginners-guide\/\">Read More &#65515;<\/a><\/p>\n","protected":false},"author":197,"featured_media":21026,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[493],"tags":[],"class_list":["post-14019","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-product-design"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v15.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/marvelapp.com\/blog\/designing-vr-beginners-guide\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Virtual Reality Design (VR): A Beginners Guide to VR Apps Development\" \/>\n<meta property=\"og:description\" content=\"The VR age is rapidly approaching. When the world\u2019s largest tech companies (Google, Facebook, Microsoft, Apple) are investing billions into VR development\u00a0technologies, 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 design a consumer virtual reality product that is adopted... Read More &#65515;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/marvelapp.com\/blog\/designing-vr-beginners-guide\/\" \/>\n<meta property=\"og:site_name\" content=\"Marvel Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/marvelapp\" \/>\n<meta property=\"article:published_time\" content=\"2018-01-02T11:30:04+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-02-11T12:00:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2018\/01\/Artboard.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2048\" \/>\n\t<meta property=\"og:image:height\" content=\"896\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:site\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"8 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\",\"name\":\"Marvel\",\"url\":\"https:\/\/marvelapp.com\/blog\/\",\"sameAs\":[\"https:\/\/www.facebook.com\/marvelapp\",\"https:\/\/www.instagram.com\/marvelapp\/\",\"https:\/\/www.linkedin.com\/company\/marvel-app\/\",\"https:\/\/twitter.com\/marvelapp\"],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#logo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/marvelapp.com\/wp-content\/uploads\/2018\/06\/Logo-Light.png\",\"width\":1605,\"height\":1130,\"caption\":\"Marvel\"},\"image\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#website\",\"url\":\"https:\/\/marvelapp.com\/blog\/\",\"name\":\"Marvel Blog\",\"description\":\"Ideas and words on user experience, design, collaboration and more\",\"publisher\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/marvelapp.com\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/designing-vr-beginners-guide\/#primaryimage\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/marvelapp.com\/wp-content\/uploads\/2018\/01\/Artboard.png\",\"width\":2048,\"height\":896,\"caption\":\"Designing for VR: A Beginners Guide\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/marvelapp.com\/blog\/designing-vr-beginners-guide\/#webpage\",\"url\":\"https:\/\/marvelapp.com\/blog\/designing-vr-beginners-guide\/\",\"name\":\"Virtual Reality Design (VR): A Beginners Guide to VR Apps Development\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/designing-vr-beginners-guide\/#primaryimage\"},\"datePublished\":\"2018-01-02T11:30:04+00:00\",\"dateModified\":\"2021-02-11T12:00:25+00:00\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/marvelapp.com\/blog\/designing-vr-beginners-guide\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/marvelapp.com\/blog\/designing-vr-beginners-guide\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/designing-vr-beginners-guide\/#webpage\"},\"author\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/3a95a6da6e94f4a6f686f4bd0ac0f69c\"},\"headline\":\"Designing for VR: A Beginners Guide\",\"datePublished\":\"2018-01-02T11:30:04+00:00\",\"dateModified\":\"2021-02-11T12:00:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/designing-vr-beginners-guide\/#webpage\"},\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/designing-vr-beginners-guide\/#primaryimage\"},\"articleSection\":\"Product Design\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/marvelapp.com\/blog\/designing-vr-beginners-guide\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/3a95a6da6e94f4a6f686f4bd0ac0f69c\",\"name\":\"Blake Hudelson\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#personlogo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/af37c6172a983c4699afd3c891fcf747f64be5f01c51252510d563d5ea88c6ef?s=96&d=mm&r=g\",\"caption\":\"Blake Hudelson\"},\"description\":\"Designing the future at @method_inc | Emerging Tech + Cities + Connected Environments\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","_links":{"self":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/14019","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/users\/197"}],"replies":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/comments?post=14019"}],"version-history":[{"count":0,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/14019\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media\/21026"}],"wp:attachment":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media?parent=14019"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/categories?post=14019"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/tags?post=14019"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}