{"_id":"59bc03d51d2d8d001a3445d7","category":{"_id":"59bc03d31d2d8d001a344582","version":"59bc03d31d2d8d001a34457d","project":"578c4badbd223d2000cc1441","__v":0,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-07-18T04:52:29.094Z","from_sync":false,"order":5,"slug":"vr-overview","title":"Design"},"user":"578c4a62bd223d2000cc143e","parentDoc":null,"project":"578c4badbd223d2000cc1441","version":{"_id":"59bc03d31d2d8d001a34457d","project":"578c4badbd223d2000cc1441","__v":2,"createdAt":"2017-09-15T16:46:11.721Z","releaseDate":"2017-09-15T16:46:11.721Z","categories":["59bc03d31d2d8d001a34457e","59bc03d31d2d8d001a34457f","59bc03d31d2d8d001a344580","59bc03d31d2d8d001a344581","59bc03d31d2d8d001a344582","59bc03d31d2d8d001a344583","59bc284b7c3f420010f965e6"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"2.0.0","version":"2.0.0"},"__v":0,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-07-18T05:54:29.271Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":2,"body":"[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/14a74a9-viro_1_button.png\",\n        \"viro_1_button.png\",\n        900,\n        672,\n        \"#747474\"\n      ],\n      \"caption\": \"Google Cardboard - 1 Button Interaction\",\n      \"sizing\": \"smart\"\n    }\n  ]\n}\n[/block]\n**1 Button Interaction**\nGoogle Cardboard on mobile is currently the most popular platform to experience VR, and a great way to introduce your audience to VR. Although there is hardware controller support, you should design your apps with the 1 button interaction model to appeal to the most users. Due to the mobile device's touch screen being encased in some form of a holder, interaction with the screen is currently limited to 1 button. You can utilize the gyroscope and allow the user to tilt or rotate the device, but we have found it to be uncomfortable for users as it requires them to briefly exit the experience or perform awkward gestures. \n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/7818138-viro_reticle.png\",\n        \"viro_reticle.png\",\n        600,\n        454,\n        \"#747474\"\n      ],\n      \"caption\": \"Pointing at objects with the reticule\"\n    }\n  ]\n}\n[/block]\n**Reticle and Gaze Interaction**\nAim and interact with what's in the center. That's the principle of mobile interaction design for VR. With that in mind, a targeting reticle is recommended as a visual aid so the user can easily target objects by just moving their gaze.  A reticule should be used when there are available interactions in your scene.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/6b89835-viro_reticle__fuse.png\",\n        \"viro_reticle__fuse.png\",\n        600,\n        454,\n        \"#747474\"\n      ]\n    }\n  ]\n}\n[/block]\n**Fuse Button**\n[block:callout]\n{\n  \"type\": \"info\",\n  \"body\": \"\",\n  \"title\": \"Native support for Fuse Button, coming soon!\"\n}\n[/block]\nA Fuse button has a timed countdown to activate it when the user hovers the reticle over it for a set amount of time. This needs to be represented visually so the user knows to wait for the interaction to take place. For instance, hovering the reticle over a fuse button sets off a 2 sec. loading bar countdown before it activates it.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/2b9f006-viro_daydream_control.png\",\n        \"viro_daydream_control.png\",\n        800,\n        532,\n        \"#747474\"\n      ],\n      \"caption\": \"Pointing at objects with the controller\"\n    }\n  ]\n}\n[/block]\n**Daydream Controller**\nThe Daydream Controller has these key features:\na) Touchpad — Swipe to scroll and press to click.\nb) App button — This button depends on the app you’re using. For example, it might show menus, pause, go back, or change modes.\nc) Home button \nd) Volume buttons\n\n(Source: [Daydream Help](https://support.google.com/daydream/answer/7184597?hl=en))\n\nThe Daydream Controller is like the Wii controller that it does not track perfectly but it is a great pointer device that also tracks gross gestures. This opens up many interaction possibilities within your VR experience that goes beyond just 1 button.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/04de480-viro_gear.png\",\n        \"viro_gear.png\",\n        800,\n        532,\n        \"#737373\"\n      ],\n      \"caption\": \"Controls built onto the headset itself.\"\n    }\n  ]\n}\n[/block]\n**Samsung Gear VR**\na)TouchPad — The controller is embedded on the right hand side of the Samsung Gear VR. Tap or swipe up, down, right, left on the touchpad controller to select items. Tapping the middle of the controller selects the item.\nb) Home Button— Click it once to go back to Oculus Home\nc) Back Button — Click it once to go back or hold it for 3 seconds to return to the main menu.\nd) Volume Buttons\n\nNote: Facebook's [research](https://medium.com/:::at:::gabrielvaldivia/designing-facebook-for-mobile-vr-df4823282d02#.wvgtkvdt2) showed users found it cumbersome to be interacting with the headset's touchpad for long periods of time. Therefore, try making most of the interactions [passive](https://medium.com/@gabrielvaldivia/designing-facebook-for-mobile-vr-df4823282d02#.wvgtkvdt2) without the need to engage the controller.\n\n**Feedback** \nReward the user's interactions with UI with expected feedback. This will help ground the user and further accept their virtual surroundings as something more tangible. If a button is pushed, show a button pushed in, as one would expect in real life. \n\nConsider using audio for instructions or cues for the user. If using text for instructions, make sure they are concise and large enough for the user to read quickly.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/c5f51c5-viro_3dof.png\",\n        \"viro_3dof.png\",\n        600,\n        553,\n        \"#747474\"\n      ],\n      \"sizing\": \"smart\",\n      \"caption\": \"3 DOF\"\n    }\n  ]\n}\n[/block]\n**3 Degrees of Freedom (3DOF)** \nMobile-based VR is currently limited to a 3 axis (X,Y,Z) rotational view using the phone's internal gyroscope. This means positional 6 axis tracking (tracking based on the actual location of your head in space) is not available.","excerpt":"Considerations when designing for mobile VR.","slug":"designing-for-mobile","type":"basic","title":"Designing for Mobile VR"}

Designing for Mobile VR

Considerations when designing for mobile VR.

[block:image] { "images": [ { "image": [ "https://files.readme.io/14a74a9-viro_1_button.png", "viro_1_button.png", 900, 672, "#747474" ], "caption": "Google Cardboard - 1 Button Interaction", "sizing": "smart" } ] } [/block] **1 Button Interaction** Google Cardboard on mobile is currently the most popular platform to experience VR, and a great way to introduce your audience to VR. Although there is hardware controller support, you should design your apps with the 1 button interaction model to appeal to the most users. Due to the mobile device's touch screen being encased in some form of a holder, interaction with the screen is currently limited to 1 button. You can utilize the gyroscope and allow the user to tilt or rotate the device, but we have found it to be uncomfortable for users as it requires them to briefly exit the experience or perform awkward gestures. [block:image] { "images": [ { "image": [ "https://files.readme.io/7818138-viro_reticle.png", "viro_reticle.png", 600, 454, "#747474" ], "caption": "Pointing at objects with the reticule" } ] } [/block] **Reticle and Gaze Interaction** Aim and interact with what's in the center. That's the principle of mobile interaction design for VR. With that in mind, a targeting reticle is recommended as a visual aid so the user can easily target objects by just moving their gaze. A reticule should be used when there are available interactions in your scene. [block:image] { "images": [ { "image": [ "https://files.readme.io/6b89835-viro_reticle__fuse.png", "viro_reticle__fuse.png", 600, 454, "#747474" ] } ] } [/block] **Fuse Button** [block:callout] { "type": "info", "body": "", "title": "Native support for Fuse Button, coming soon!" } [/block] A Fuse button has a timed countdown to activate it when the user hovers the reticle over it for a set amount of time. This needs to be represented visually so the user knows to wait for the interaction to take place. For instance, hovering the reticle over a fuse button sets off a 2 sec. loading bar countdown before it activates it. [block:image] { "images": [ { "image": [ "https://files.readme.io/2b9f006-viro_daydream_control.png", "viro_daydream_control.png", 800, 532, "#747474" ], "caption": "Pointing at objects with the controller" } ] } [/block] **Daydream Controller** The Daydream Controller has these key features: a) Touchpad — Swipe to scroll and press to click. b) App button — This button depends on the app you’re using. For example, it might show menus, pause, go back, or change modes. c) Home button  d) Volume buttons (Source: [Daydream Help](https://support.google.com/daydream/answer/7184597?hl=en)) The Daydream Controller is like the Wii controller that it does not track perfectly but it is a great pointer device that also tracks gross gestures. This opens up many interaction possibilities within your VR experience that goes beyond just 1 button. [block:image] { "images": [ { "image": [ "https://files.readme.io/04de480-viro_gear.png", "viro_gear.png", 800, 532, "#737373" ], "caption": "Controls built onto the headset itself." } ] } [/block] **Samsung Gear VR** a)TouchPad — The controller is embedded on the right hand side of the Samsung Gear VR. Tap or swipe up, down, right, left on the touchpad controller to select items. Tapping the middle of the controller selects the item. b) Home Button— Click it once to go back to Oculus Home c) Back Button — Click it once to go back or hold it for 3 seconds to return to the main menu. d) Volume Buttons Note: Facebook's [research](https://medium.com/@gabrielvaldivia/designing-facebook-for-mobile-vr-df4823282d02#.wvgtkvdt2) showed users found it cumbersome to be interacting with the headset's touchpad for long periods of time. Therefore, try making most of the interactions [passive](https://medium.com/@gabrielvaldivia/designing-facebook-for-mobile-vr-df4823282d02#.wvgtkvdt2) without the need to engage the controller. **Feedback** Reward the user's interactions with UI with expected feedback. This will help ground the user and further accept their virtual surroundings as something more tangible. If a button is pushed, show a button pushed in, as one would expect in real life. Consider using audio for instructions or cues for the user. If using text for instructions, make sure they are concise and large enough for the user to read quickly. [block:image] { "images": [ { "image": [ "https://files.readme.io/c5f51c5-viro_3dof.png", "viro_3dof.png", 600, 553, "#747474" ], "sizing": "smart", "caption": "3 DOF" } ] } [/block] **3 Degrees of Freedom (3DOF)** Mobile-based VR is currently limited to a 3 axis (X,Y,Z) rotational view using the phone's internal gyroscope. This means positional 6 axis tracking (tracking based on the actual location of your head in space) is not available.