In the year 2017, when doing an audio app project for PC manufacturers (where Creative’s PC chipset is built-in), I was assigned to explore about VR mode of the app. It was a few months away from Microsoft HoloLens, Oculus Rift and HTC Vive releases in 2016, when the VR market emerged. The scope was relatively limited, which is to provide VR mode for the video/music player and player’s basic control as part of the app, while the app mainly runs on PC as a conventional windows app.
Ergonomics and Interaction
VR is a new type of experience, away from the PC, mobile phone and TV. The VR headset is a new type of hardware device to deliver the VR experience to the user. Understanding the basic ergonomics of HMD and its interactions is fundamental to the design process.
Looking at its display, the so-called head-mounted display (HMD), has an infinite size covering all over the range the human head rotations. However, there is a comfortable range, covering the vertical tilt between 20° up and -12° down and ±30° horizontally, while there is also a maximum range vertically and horizontally in accordance with the capability of head rotation.
Talking about the interaction of the VR headset, typically, it comes with a handle with buttons and a motion sensor to pick up the user’s hand moving, rotating, and button pressing gestures. Furthermore, the headset itself would have a built-in eye contact sensor to monitor the gaze point of the user.
Wireframing
As the design goal is a VR mode for the conventional player app of PC, we nailed down the app UX on PC in a 2D display first. The app structure is as shown below:
Tapping on the ③ music current playing thumbnail will change the ⑥ main content area into a music visualizer; while when playing a video, the video will be streamed on the ⑥ main content area too. Then the user can either enter full screen or enter the VR mode. When in the VR mode, it provides a few controls at the side of the display, of which, one for audio sound scape settings and the other for the playlist in order for the user to easily pick the content to play.
VR mode has a desktop view as shown above to cast the screen currently showing on the left and right eye of the headset respectively. In the VR headset, the display drawn in 2D wireframe would be as below: (the actual VR view can refer to the Test section)
When the user presses the button on VR headset/ Keyboard/ Game Sticker, the Playback controls will appear above the video. User can pause the video by tapping the button again or pressing the pause button, and the controls will always appear on top if it’s paused.
The video is placed within the maximum view of content zones, with all the key controls of the video is parked in the comfortable view. Basically, these controls are visible when the head is in a natural position so that the user can easily gaze on the button. On the right side when the user rotates the head to 55°, the play queue lists the videos/songs vertically for an unlimited number of items; while on the left side 55°, the sound scape audio effect presets are listed horizontally with 5 options.
Test
Test the wireframe on actual display on VR headset:
The VR feature of the project was dropped due to the business concerns of the VR market. Thus, there is no further progress onwards after the wireframing. Yet, there are a few more to explore with VR such as the depth, the size of controls and text and etc, when the day of VR comes.