{"__v":0,"_id":"5841ca79ae05ac2500ba2628","category":{"version":"5841ca79ae05ac2500ba2621","project":"578c4badbd223d2000cc1441","_id":"5841ca79ae05ac2500ba2624","__v":0,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-07-18T04:52:29.094Z","from_sync":false,"order":2,"slug":"vr-overview","title":"Design"},"parentDoc":null,"project":"578c4badbd223d2000cc1441","user":"578c4a62bd223d2000cc143e","version":{"__v":1,"_id":"5841ca79ae05ac2500ba2621","project":"578c4badbd223d2000cc1441","createdAt":"2016-12-02T19:24:41.091Z","releaseDate":"2016-12-02T19:24:41.091Z","categories":["5841ca79ae05ac2500ba2622","5841ca79ae05ac2500ba2623","5841ca79ae05ac2500ba2624","5841ca79ae05ac2500ba2625","5841ca79ae05ac2500ba2626"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"0.0.46","version":"0.0.46"},"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":1,"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/7476417-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**\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\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 VR for mobile.","slug":"designing-for-mobile","type":"basic","title":"Designing VR for Mobile"}

Designing VR for Mobile

Considerations when designing VR for mobile.

[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/7476417-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** 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. **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.