www.ecapp.co.uk

For more information and Demo:

Email: Contact form

VRW - VR Gui for HTML5 & Flash
by Virtual Reality Websites

Virtual Reality (VR) style websites. This is a bit of guidance for designers wanting to design interfaces for 3D environments. After some research and web/interent surfing here are a few guidelines to help UX/UI designers to start making things for VR. We looked at the comfort zone for VR users, the optimal range of view for interfaces, a GUI canvas for VR and how we might deal with depth. Please note all screens can be viewed in VR, plus these are my thoughts and findings and are not fixed in stone. :-)


Virtual Reality - VR Comfort Zone. (Part 1 of 5)

Virtual Reality Websites by Ecapp comfort is the key to creating an enjoyable VR experience. Movement is restricted to the limitations of the human body. Say users are sitting on a non-spinning chair, the interface should operate within a 90° to 100° (L:-45°/R:+45°) horizontal and a 32° to 44° vertical space.

Effortless VR
Fullscreen


Krpano Virtual Reality Websites Effortless VR
Iphone

Virtual Reality - VR User Interface. (Part 2 of 5)

User interface play area, Based on a 180° horizontal and vertical playor visual area zone "half a sphere representing the front looking area", We have isolated the area where the virtual user interface lives, represented by the pink square in the VR area to the right.

Effortless VR
Fullscreen


Krpano Virtual Reality Websites Effortless VR
Iphone

Virtual Reality - VR GUI Canvas. (Part 3 of 5)

Interfaces need to be tested in a VR environment. A suggested canvas size is: 3840px x 1440px (This can vary on various conditions, an example of this is: Dependant on which program is reading the VR environment.)

Effortless VR
Fullscreen


Krpano Virtual Reality Websites Effortless VR
Iphone

Virtual Reality - VR Depth layers. (Part 4 of 5)

Another aspect that must be considered is depth. One canvas is not enough to create a solid VR user experience. In a 3D environment, at least 2 levels of depth need to be considered: background and foreground.

Effortless VR
Fullscreen


Krpano Virtual Reality Websites Depth
Iphone

Virtual Reality - VR Game in play area. (Part 5 of 5)

Game in play area. Visually view all aspects of ideas and suggetsions from above.

Effortless VR
Fullscreen


Krpano Virtual Reality Websites GameAreaVR
Iphone

Virtual Reality Websites (VR) What I used for HTML5 & Flash
by Virtual Reality Websites

Virtual Reality (VR) style websites. I created all test areas above within and using Krpano. Programmers/Developers Info:
The canvas size I created and used is: Width=2100 X height=740 and visual depth=1800 angles/position is: ath=0 atv=0 To position items and objects I used: ox and depth. You can also use oy, rx, ry and rz to position objects to improve the 3D virtual reality experience.

VRW | A computer-generated simulation of a three-dimensional image or environment that can be interacted with in a seemingly real or physical way by a person.