{"__v":0,"_id":"58f7a4c9cbd001190056cc4a","category":{"version":"58f7a4c8cbd001190056cbf8","project":"578c4badbd223d2000cc1441","_id":"58f7a4c8cbd001190056cbfd","__v":0,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-07-18T04:52:29.094Z","from_sync":false,"order":4,"slug":"vr-overview","title":"Design"},"parentDoc":null,"project":"578c4badbd223d2000cc1441","user":"578c4a62bd223d2000cc143e","version":{"__v":1,"_id":"58f7a4c8cbd001190056cbf8","project":"578c4badbd223d2000cc1441","createdAt":"2017-04-19T17:56:24.172Z","releaseDate":"2017-04-19T17:56:24.172Z","categories":["58f7a4c8cbd001190056cbf9","58f7a4c8cbd001190056cbfa","58f7a4c8cbd001190056cbfb","58f7a4c8cbd001190056cbfc","58f7a4c8cbd001190056cbfd","58f7a4c8cbd001190056cbfe"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.1.0","version":"1.1.0"},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-07-18T06:39:30.929Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":0,"body":"Virtual Reality is an exciting new frontier for immersive experiences. Virtual reality is a new medium with emerging standards, so figuring out fool-proof best practices is a collaborative effort which, within the growing VR community, will be achieved in time. But for now, we believe starting with these principles in this guide may aid you in designing great and comfortable experiences for your audience. If you come from a traditional background making flat user experiences, there are a few differences we believe you need to consider when designing for virtual reality. This guide offers suggestions based on internal research and shared best practices from the VR community.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Comfort\"\n}\n[/block]\n**Simulator Sickness**\nWe should start with the biggest challenge when designing for VR: simulator sickness. Nothing will prevent a user from enjoying or re-using your app more than simulator sickness. Much like motion sickness, simulator sickness occurs when the brain receives mismatching signals from what you see compared to the physical motion that the body is experiencing. A user will feel simulator sickness if what they feel does not perfectly match what their mind expects them to feel.\n\n*How do you prevent Simulator Sickness? *\n  * **Maintain High Framerate:** Consistent *60 FPS* (90 FPS for supporting devices) is the minimum for a comfortable VR experience. Research has shown drops in framerate and latency in rendering makes users feel sick.\n  * **Avoid Acceleration:** Keep the user at a constant velocity when they are moving inside your app. Avoid acceleration and deceleration inside the experience. The easiest solution is to keep the user stationary and allow them to teleport to new spots instantaneously rather than have them move through space. But, there are some promising new developments in traversing in VR that appear better than teleporting here: [The Design of the Portal Locomotion](https://medium.com/neat-corp/the-design-of-the-portal-locomotion-2677f3b3f9b5#.y88sqwwen)\n  * **Ground User with Fixed Objects:** A user generally prefers fixed objects to ground them within the experience; this helps them reconcile the sensation of movement within VR when it does not match what is happening in real life.\n  * **Maintain Focus:** Always maintain an experience that is in focus, without causing the user's eyes to strain. Stereoscopic 3D experiences are great for adding depth to your app, but having the user's eyes strain from focusing on objects too close, too far, or objects that are not clear can lead to discomfort. (See: Viewable Distance section below)\n  * **Head Tracking:** Always maintain head tracking in your app. Never turn it off, even for a short period. Head tracking is what helps objects in virtual space maintain their fixed positions regardless how the user moves their head. This creates the wonderful illusion of a virtual world surrounding the user in 360. Not maintaining head tracking throughout the entire experience will lead to discomfort.\n  * **Everything in 3D Space:** Fixing a large graphic, like a splash or loading screen to the user's head, will lead to discomfort. Make sure all your objects and content are grounded in 3D space to be head tracked.\n\nFor more, check out:\n[Designing for Google Cardboard](https://www.google.com/design/spec-vr/designing-for-google-cardboard/a-new-dimension.html) \n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"From Traditional UI Design to VR UI Design\"\n}\n[/block]\nTraditional UI design is limited to fixed dimensions for its canvas. VR allows creators to utilize a full 360 canvas, with depth, so presenting information and guiding the user can be a bit trickier, but more rewarding if done well.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/da0bad2-viro_comfort_zone.png\",\n        \"viro_comfort_zone.png\",\n        600,\n        276,\n        \"#c8c8c8\"\n      ],\n      \"caption\": \"The Comfort Zone\"\n    }\n  ]\n}\n[/block]\n**Comfort Zone** \nIf a user needs to strain too much physically, or make movements that go beyond the limitations of the human body, chances are they won't come back. Make sure the experience is effortless for your user. (Source: [Sam Applebee](https://blog.kickpush.co/beyond-reality-first-steps-into-the-unknown-cbb19f039e51#.hailq9p4q))\n\nAssuming the user is sitting on a static (non-spinning) chair, the main user interface should operate within a 94° horizontal space and a 32° vertical space (Source: [Mike Alger](https://www.linkedin.com/in/mikealger)).\n\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/bd7fcb9-viro_comfort_zone_2.png\",\n        \"viro_comfort_zone_2.png\",\n        350,\n        367,\n        \"#b0b0b0\"\n      ],\n      \"caption\": \"Viewing distance based on comfort and strength of stereoscopic depth perception.\"\n    }\n  ]\n}\n[/block]\n**Viewable Distance**\nThe minimum comfortable viewing distance for UI, before a user starts going cross-eyed, is 0.5m. Beyond 10-meters the sense of 3D stereoscopic depth perception diminishes rapidly until it is almost unnoticeable beyond 20-meters. This gives us a sweet spot between 0.5-meters to 10.0-meters where we can place important content. (Source: [Vincent McCurley](https://medium.com/:::at:::vmccurley/storyboarding-in-virtual-reality-67d3438a2fb1#.t6b3lubtq))\n\n  * **.5m** - Minimum Comfortable Viewing Distance\n  * **10m** - Strong Stereoscopic Depth Perception\n  * **20m** - Limit of Stereoscopic Depth Perception\n\nFor more information, check out these links: \n[VR Design: Transitioning from a 2D to a 3D Design Paradigm](http://alexchu.net/Presentation-VR-Design-Transitioning-from-a-2D-to-a-3D-Design-Paradigm)\n[Storyboarding in Virtual Reality](https://medium.com/@vmccurley/storyboarding-in-virtual-reality-67d3438a2fb1#.t6b3lubtq) \n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Storytelling in VR\"\n}\n[/block]\nMovies are confined to telling a story within a frame, and many techniques are used to help direct the user's focus. Since VR is not confined, but all around the user, how do you lead the user's eyes when there is no frame? Presenting a great story in VR allows you to display material outside of the traditional frame enabling new storytelling opportunities. \n\n\"Instead of controlling what the audience sees in VR, we work with probabilistic areas of user attention based on ergonomic data.\" (Source: [Vincent McCurley](https://medium.com/@vmccurley/storyboarding-in-virtual-reality-67d3438a2fb1#.rdplewedl))\n\nThis is a great resource for storytelling in VR: [The Storyteller’s Guide to the Virtual Reality Audience](https://medium.com/stanford-d-school/the-storyteller-s-guide-to-the-virtual-reality-audience-19e92da57497#.jwettxlax)\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Resolution and Displays\"\n}\n[/block]\nHead Mounted Displays and phones are continually improving the density of pixels in their displays. Due to the low density in resolution of current available hardware, it produces a \"screen door\" effect where the imagery is not perfectly sharp for the user and they can discern the pixels. Until major  improvements are made, consider the size of your UI elements and text. For example, small text does not display well in VR. \n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Press Start\"\n}\n[/block]\nUpon entering the VR experience, give the user an opportunity to acclimate to the new experience. Create a buffer to allow the user to intentionally begin the experience. One solution is to display a \"Start\" button so the user can activate the experience once they are ready to begin.   \n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Test Frequently\"\n}\n[/block]\nTraditional UX/UI design has a lot of fairly established rules and best practices. Don't assume they all apply to VR. Always remember VR is a new medium that still needs a lot of experimentation with many new, undiscovered UX issues. It is critical to iterate and test often!","excerpt":"Designing for VR, the new medium","slug":"design-principles","type":"basic","title":"VR Design Principles"}

VR Design Principles

Designing for VR, the new medium

Virtual Reality is an exciting new frontier for immersive experiences. Virtual reality is a new medium with emerging standards, so figuring out fool-proof best practices is a collaborative effort which, within the growing VR community, will be achieved in time. But for now, we believe starting with these principles in this guide may aid you in designing great and comfortable experiences for your audience. If you come from a traditional background making flat user experiences, there are a few differences we believe you need to consider when designing for virtual reality. This guide offers suggestions based on internal research and shared best practices from the VR community. [block:api-header] { "type": "basic", "title": "Comfort" } [/block] **Simulator Sickness** We should start with the biggest challenge when designing for VR: simulator sickness. Nothing will prevent a user from enjoying or re-using your app more than simulator sickness. Much like motion sickness, simulator sickness occurs when the brain receives mismatching signals from what you see compared to the physical motion that the body is experiencing. A user will feel simulator sickness if what they feel does not perfectly match what their mind expects them to feel. *How do you prevent Simulator Sickness? * * **Maintain High Framerate:** Consistent *60 FPS* (90 FPS for supporting devices) is the minimum for a comfortable VR experience. Research has shown drops in framerate and latency in rendering makes users feel sick. * **Avoid Acceleration:** Keep the user at a constant velocity when they are moving inside your app. Avoid acceleration and deceleration inside the experience. The easiest solution is to keep the user stationary and allow them to teleport to new spots instantaneously rather than have them move through space. But, there are some promising new developments in traversing in VR that appear better than teleporting here: [The Design of the Portal Locomotion](https://medium.com/neat-corp/the-design-of-the-portal-locomotion-2677f3b3f9b5#.y88sqwwen) * **Ground User with Fixed Objects:** A user generally prefers fixed objects to ground them within the experience; this helps them reconcile the sensation of movement within VR when it does not match what is happening in real life. * **Maintain Focus:** Always maintain an experience that is in focus, without causing the user's eyes to strain. Stereoscopic 3D experiences are great for adding depth to your app, but having the user's eyes strain from focusing on objects too close, too far, or objects that are not clear can lead to discomfort. (See: Viewable Distance section below) * **Head Tracking:** Always maintain head tracking in your app. Never turn it off, even for a short period. Head tracking is what helps objects in virtual space maintain their fixed positions regardless how the user moves their head. This creates the wonderful illusion of a virtual world surrounding the user in 360. Not maintaining head tracking throughout the entire experience will lead to discomfort. * **Everything in 3D Space:** Fixing a large graphic, like a splash or loading screen to the user's head, will lead to discomfort. Make sure all your objects and content are grounded in 3D space to be head tracked. For more, check out: [Designing for Google Cardboard](https://www.google.com/design/spec-vr/designing-for-google-cardboard/a-new-dimension.html) [block:api-header] { "type": "basic", "title": "From Traditional UI Design to VR UI Design" } [/block] Traditional UI design is limited to fixed dimensions for its canvas. VR allows creators to utilize a full 360 canvas, with depth, so presenting information and guiding the user can be a bit trickier, but more rewarding if done well. [block:image] { "images": [ { "image": [ "https://files.readme.io/da0bad2-viro_comfort_zone.png", "viro_comfort_zone.png", 600, 276, "#c8c8c8" ], "caption": "The Comfort Zone" } ] } [/block] **Comfort Zone** If a user needs to strain too much physically, or make movements that go beyond the limitations of the human body, chances are they won't come back. Make sure the experience is effortless for your user. (Source: [Sam Applebee](https://blog.kickpush.co/beyond-reality-first-steps-into-the-unknown-cbb19f039e51#.hailq9p4q)) Assuming the user is sitting on a static (non-spinning) chair, the main user interface should operate within a 94° horizontal space and a 32° vertical space (Source: [Mike Alger](https://www.linkedin.com/in/mikealger)). [block:image] { "images": [ { "image": [ "https://files.readme.io/bd7fcb9-viro_comfort_zone_2.png", "viro_comfort_zone_2.png", 350, 367, "#b0b0b0" ], "caption": "Viewing distance based on comfort and strength of stereoscopic depth perception." } ] } [/block] **Viewable Distance** The minimum comfortable viewing distance for UI, before a user starts going cross-eyed, is 0.5m. Beyond 10-meters the sense of 3D stereoscopic depth perception diminishes rapidly until it is almost unnoticeable beyond 20-meters. This gives us a sweet spot between 0.5-meters to 10.0-meters where we can place important content. (Source: [Vincent McCurley](https://medium.com/@vmccurley/storyboarding-in-virtual-reality-67d3438a2fb1#.t6b3lubtq)) * **.5m** - Minimum Comfortable Viewing Distance * **10m** - Strong Stereoscopic Depth Perception * **20m** - Limit of Stereoscopic Depth Perception For more information, check out these links: [VR Design: Transitioning from a 2D to a 3D Design Paradigm](http://alexchu.net/Presentation-VR-Design-Transitioning-from-a-2D-to-a-3D-Design-Paradigm) [Storyboarding in Virtual Reality](https://medium.com/@vmccurley/storyboarding-in-virtual-reality-67d3438a2fb1#.t6b3lubtq) [block:api-header] { "type": "basic", "title": "Storytelling in VR" } [/block] Movies are confined to telling a story within a frame, and many techniques are used to help direct the user's focus. Since VR is not confined, but all around the user, how do you lead the user's eyes when there is no frame? Presenting a great story in VR allows you to display material outside of the traditional frame enabling new storytelling opportunities. "Instead of controlling what the audience sees in VR, we work with probabilistic areas of user attention based on ergonomic data." (Source: [Vincent McCurley](https://medium.com/@vmccurley/storyboarding-in-virtual-reality-67d3438a2fb1#.rdplewedl)) This is a great resource for storytelling in VR: [The Storyteller’s Guide to the Virtual Reality Audience](https://medium.com/stanford-d-school/the-storyteller-s-guide-to-the-virtual-reality-audience-19e92da57497#.jwettxlax) [block:api-header] { "type": "basic", "title": "Resolution and Displays" } [/block] Head Mounted Displays and phones are continually improving the density of pixels in their displays. Due to the low density in resolution of current available hardware, it produces a "screen door" effect where the imagery is not perfectly sharp for the user and they can discern the pixels. Until major improvements are made, consider the size of your UI elements and text. For example, small text does not display well in VR. [block:api-header] { "type": "basic", "title": "Press Start" } [/block] Upon entering the VR experience, give the user an opportunity to acclimate to the new experience. Create a buffer to allow the user to intentionally begin the experience. One solution is to display a "Start" button so the user can activate the experience once they are ready to begin. [block:api-header] { "type": "basic", "title": "Test Frequently" } [/block] Traditional UX/UI design has a lot of fairly established rules and best practices. Don't assume they all apply to VR. Always remember VR is a new medium that still needs a lot of experimentation with many new, undiscovered UX issues. It is critical to iterate and test often!