XR Design: Patterns for Interactions

Evolution of XD Principles

Challenging XD conventions

A column by Dashiel Neimark
January 7, 2019

In my previous two columns in this mini-series about extended reality (XR) design, I discussed some building blocks of XR, as well as some fundamentals to consider when designing an XR experience. Now that I’ve covered some of the broader aspects of this design space, I’d like to shift gears a bit and discuss some specific concepts you should be aware of once you’ve gained some traction in the XR space and want to improve the experiences you’re creating.

In this installment of my mini-series, I’ll cover five additional design concepts:

  1. Field of view (FOV) and retention versus exposure in virtual reality (VR)
  2. Foveated rendering
  3. Multimodal interactions
  4. Hologram placement
  5. Locomotion and disorientation
Champion Advertisement
Continue Reading…

1. FOV and Its Effect on Retention Versus Exposure in VR

A key challenge in the design of any VR experience is choosing an appropriate field of view. To ensure user comprehension and retention, limit the field of view. A narrower FOV—for example, 90 degrees or even 45 degrees for highly focused moments or interactions—enables users to retain more information, but at the expense of your not having a larger canvas to expose additional affordances.

If you need to expose more elements, go wide. Rendering a broader FOV gives UX designers the opportunity to expose additional elements, which is particularly useful when you want to quickly show off an exciting design for a new VR experience with many elements. Having a more expansive FOV gives you a larger canvas to utilize. But, if you’re not careful, a broader FOV can also result in cognitive overload for users and diminish their memory retention overall. Plus, the additional stimuli can distract users’ attention from the intended points of focus.

Choosing a FOV’s scope can be difficult. If there are a just few key concepts you need to introduce to the user, consider a smaller FOV to significantly aid focus and memory retention. You can even accomplish this through a temporarily focused FOV state within a larger FOV—for example, using foveated rendering, which I’ll touch on next. However, you must design the transition between these two states carefully.

If your focus isn’t introducing new, critical concepts to the user, consider going wider so you can expose users to many elements at once. Using a wider FOV can be a great design strategy for giving users a taste of what’s possible and letting them preview elements that might come into focus later in the experience.

2. Using Foveated Rendering

To focus the user’s attention for the sake of better retention, you can use a VR concept called foveated rendering. This essentially involves tracking users’ eyes and dynamically rendering a scene depending on where they’re focused at any given moment, blurring elements in their peripheral vision. Use this technique sparingly because, if you constantly restrict the FOV to only a small focus point, the contrast between the focal point and the peripheral environment can become wearing to users.

However, in moments when retention and focus are more valuable than anything else, consider using this technique. Foveated rendering also works quite well in situations where there is greater demand for precise user input. For example, think about an educational VR experience for learning massage therapy, in which the user must focus on very specific points of the human body. Or perhaps a VR golfing experience in which the user must demonstrate laser-like focus and a steady hand.

3. Designing for Multimodal Interactions

Research has shown that relying too heavily on a single sensory channel for user interaction is not a good thing. Within reason, multimodal interactions are the way to go. So, as much as possible, but without forcing things, plan the interactions within your XR experience to take advantage of multiple sensory channels. Relying only on touch or speech or gestures can be exciting for a short period of time, but the lack of diversity that results from an overdependence on one sensory channel ultimately becomes wearing. A feeling of single-channel sensory overload can be detrimental to the length of user engagement and forestall repeated interactions.

In the days of mouse and keyboard, the user’s input channels were limited, but people recognized and accepted this limitation. However, this is changing. Within multimodal media such as XR, the number of sensory input channels is increasing and now includes options such as speech, gaze, gesture, six degrees of freedom (6-DOF), controller-assisted input, and direct physical interaction using special gloves.

As you design each XR interaction, keep in mind the many options that are available to you. Users aren’t limited to using only one or two sensory channels in real life so in XR, if your goal is immersion, you must try to give users the freedom to interact in many different ways.

Hologram Placement

Microsoft has done quite a bit of research on how to make the use of holograms in 3D space comfortable for users. Three primary scientific concepts regarding the way our eyes work are relevant to hologram placement:

  1. Accommodation—Our eyes must adjust their focus when shifting from a focal point that is near to a focal point that is far and vice versa.
  2. Vergence—When an object moves closer to you, your eyes verge—that is, images move closer to each other—while an object moving further away causes them to diverge.
  3. Vertical disparity—This occurs when a user focuses on multiple objects that are vertically misaligned.

Each of these three concepts suggests the appropriate hologram placement. If you don’t design holograms properly, by keeping these concepts in mind, this can cause unnecessary visual strain for the user.

A major takeaway from Microsoft’s research on these three concepts, as well as their usability testing of holograms: The ideal zone for hologram placement is within the 2m focal plane. The optimal placement for immersive content is within the 1.25m to 2.5m plane.

Locomotion and Disorientation

One of VR’s coolest superpowers is teleportation. People have always wanted teleportation, but because they’ve never had it in the real world, teleporting is a foreign interaction to them. Therefore, people aren’t biologically capable of handling teleportation all that well. In early VR experiences that included teleportation within 3D spaces, users often felt disoriented and sometimes even nauseous.

4. Reducing Locomotion Disorientation: The Blink Design Pattern

One design pattern that helps address locomotion disorientation is the blink teleportation interaction, which very briefly displays signs of motion upon the user’s teleporting, then almost immediately fades out the canvas, then fades it back in upon the user’s landing at the destination.

This design pattern effectively adheres to the metaphor of motion through a brief visual demonstration that implies, but does not explicitly show the full motion of travel from point A to point B. But by cutting out the vast majority of the motion indicating travel, the blink teleportation interaction reduces VR sickness and helps keep the user oriented.

5. Reducing Locomotion Disorientation: Foveated Rendering

Foveated rendering is not only great for enhancing user focus and precision, it is also helpful in reducing locomotion disorientation. A great deal of the user’s visual discomfort in locomotion is caused by the disparity between the object on which you intend the user to focus and the surrounding objects and environment.

Imagine an XR experience in which the user’s spaceship is in the midst of an action-packed, war scene in space, with missiles from other ships flying by, and space rocks and beautiful shooting stars constantly whirling past. This would be a visually impressive scene, and one that really demonstrates the wonders of XR. However, having too many objects moving around the user can be disorienting.

What if, to advance through this space scene, the user had to interact with various buttons and menus on the spaceship’s control panel? If the user were focusing on a still object such as a control on the spaceship’s control panel, the constant visibility of other objects flying past in space—as well as their related audio information—could be quite distracting and perhaps even disorienting.

One XR design pattern for preventing this disorientation in XR is an interface in which, once the user selects a stationary object, the rest of the scene is blurred, creating a foveated-rendering effect. Plus, you can mute the audio from the blurred objects or significantly reduce its volume to provide better focus.

Of course, implementing this design pattern effectively depends on the interaction at hand, as well as the user’s potential need to interact with multiple objects at once.

Wrapping Up

While there are certainly many more XR interaction concepts and associated design patterns, focusing on the five essential XR patterns I’ve described in this column will take you a long way toward creating more polished XR experiences.

The advent of XR media is giving UX designers great opportunity to impress, delight, and amplify the capabilities of human beings. With that opportunity comes a lot of responsibility to ensure that the XR experiences you design avoid the many potential experiential pitfalls that can result from human biology. While more research is necessary and our understanding of XR interactions is still developing, UX designers should carefully consider the evolving set of insights about XR design as they pursue its seemingly infinite possibilities. 

UX Design Consultant at Slalom Consulting

Chicago, Illinois, USA

Dashiel NeimarkDash designs usable, enjoyable digital experiences that are driven by research and guided by the needs and desires of internal and external stakeholders. In his work, he draws upon his past experience in startups, UX consulting, internships, and freelancing, as well as the wealth of UX knowledge he gained through his journey to earn an MS in HCI. From concept to launch, Dash incorporates Lean and full-cycle UX tools and methods. He is always excited by future opportunities to play his part in delivering innovative digital solutions.  Read More

Other Columns by Dashiel Neimark

Other Articles on Extended Reality Design

New on UXmatters