Designing UI and UX for VR
April 12, 2018

UI and UX in Virtual Reality is an extremely raw frontier. It's not directly translatable from print, web, or other formats. The monitor is attached to the user's FACE, quite the dilemma for designing user interaction and experience. Everything has to be within arms' reach, eyes' glance, just like reality. Sure, you can move around and make users interact with the room space, but, for something requiring stationary actions, menu options, or inputs, keeping everything centralized becomes paramount.

Today, I'm going to talk about some of the UI and UX design process, theory, and results from the Schuco Virtual Reality application development. Here are a few orthographic views of the Schuco Residential House -- a two story, single bedroom residence, with a balustrade overlooking a poolside yard. The green lined pattern area marks where the user can teleport to in this particular level. Interactive windows, sliding door systems, and units are shown in blue. The orange area represents the maximum interaction area I wanted users to have to move around in per system interaction. We found that about 1.5X of one of our navigation squares was ideal.

Keeping the user centralized.

According to Mike Alger's abstract, "Visual Design Methods for Virtual Reality" he finds that the comfort zone for virtual reality users lies in a central viewing of about 94°. Frontal vision is capped at around 154°. Keeping this in mind, I designed all of the product interactions to occur within this space. The first step is to keep the user focused and centralized at all times. Lockable teleport nodes were created so that before entering an interaction, the user can simply aim their teleport arc at the nodes to transport to the optimal interaction location and distance.

Architectural Product System UI and UX

Schuco is in the business of architectural systems. As a native German company, they products to support their global market. Their product catalog includes facades, windows, sliding doors, all kinds of componentry for residential and commercial spaces of all kinds. Let's examine windows for this example. In the US, double-hung windows are the defacto standard. They operate quite easily; slide either partition up or down to vent whichever opening you'd like. On the other end of the spectrum, Europeans are standardized with tilt-turn windows. These windows can swing inward or outward depending on hinge location. Certain operations require the handle position to be in a certain spot in order to proceed to a separate operation. It can all get quite confusing quickly, especially across such a vast international product line.

Now, with an application designed to allow users to test a vast number of window system, how do we get an international community to understand individual operability? The answer we found was visual cues. Language barriers become irrelevant, the simple mechanics of arrow directionality, colors, and operation states proved incredibly effective.

How does it playtest?

Let's look at a user operating a standard tilt - turn window. Looking at the screen in proportionally, we can centralize all of the actions into the inner third. Specifically in VR, the eye draws slightly below the central horizon.

The red "hot spots" are a way to visualize the focal point of the VR user. We don't want too much head movement for simple operations, UI interfacing, or centralized tasks. Too much headmovement in a VR experience can cause nauseau or fatigue.

Looking pretty good! Each interaction zone had to be customized to ensure a smooth, easily understandable, virtual experience. Having a great start on the base product interactions, I moved into the UI and UX for the Product Information Module. A total of 9 unique Schuco products are in this particular residential house, with virtual experiences consisting of motion detetcted passages, foldable sliding door systems, video conference communication, and digital keycode door access.

Text, Reading, and Interfacing in VR.

Here we have a user testing the Product Information Module. We designed it to feel natural, with users grabbing & swiping or using a button system to advance through the cards. It's all completely modular, as well as collapsable, with the user able to grab the entire product information and reposition it if necessary. We found this useful in users who wanted to revert back to the information module after testing the product.

Legibility of text is a huge issue in virtual reality. Currently, the hardware simply cannot render block text effectively. The characters are either too small, the font weight too thin to read, or the screen content space is too cramped. Within the Schuco Virtual World, I wanted to integrate as much technical information as possible. Anyone ranging from architects, investors, fabricators, or home owners would be entering this virtual world to test out the vast product system of Schuco's architectural repertoire. From the most intimately knowledable client, all the way to a brand new user, I wanted there to be content, facts, information, video, and media to captivate all parties. Through iterative testing, feedback, and constant trials, we formulated a 16:9 screen module. This proportionality was able to house our important content, give range for block text if necessary, and also allow for video, animations, or digital content to be embedded seamlessly.

Early process and iterations.

The process of creating this base UI started from early hand drawn sketches, through wireframes, and then into iteratives tests in virtual reality. We knew that we had to nail the UI of the Product Information module. It was an integral part of information transfer and one of the base sources of user interactivity. From early pre-production design, I concepted 3 different User Interfaces for this module.

The first was a square based design, will pull tabs to complete actions. It fit nicely into the rule of thirds on the screen, but seemed to be lacking in potential content area.

The second concept took a more modern design approach. Using web and app based influences from commonplace, this option looked and felt like a computer monitor or tablet interaction. Navigation is done with grab and swiping on the controller, or using a more conventional arrow carrot system. Expanding the width of the dimensions gave us plenty of room to begin populating with longer form content.

The third concept was a mixture of the first two concepts. It had a more rectangular based dimensionality, while adding an "index card" feel to it -- shuffling animations of cards as you navigate through, but keeping the multi-tab visible. The inter-card navigation was done through a button system located at the bottom.

After getting some user and client feedback, we settled on the second option. First time users were easily able to grasp the UI of this concept. Getting your users all on the same page with a vital module was key, so we were thrilled with the ease of use from this option. Developing forward we kept all these design options in hand, while focusing on what made our second option so successful.

Website Update
April 3, 2018

WEBSITE UPDATES!! It's been a long time coming. Stay tuned as I post some of the cool stuff I've been working on the past few years.

Christopher Chin

a real cool guy

ABOUT

learn a little more about a real cool guy

BLOG

ramblings and studies

VISUAL WORK

2009 to right now
SCHUCO VIRTUAL REALITY VIRTUAL REALITY FOR ARCHITECTURE
ARCHITECTURE ANIMATION & PRODUCT DEMONSTRATION
SONNYMOON FT. ANNA WISE - BLUE MUSIC VIDEO ANIMATION
THE CAFÉ CURRENTLY UNRELEASED SHORT ANIMATED FILM
DELIVERY SHORT ANIMATED FILM