VR Accessibility Design: User Experience (UX) and User Interface (UI)

When we include accessibility in our designs, we are creating experiences that are more usable not only for people who may have difficulty with things like mobility, perception, or cognition-- we are creating experiences that are more usable for everyone.

Accessible UX Design

Everything about your application drives the user experience, the tutorial, interaction methods, branding, and more. For example, applications that contain elements that unintentionally block a person from progressing, don’t convey important information, or that force the user to interact in uncomfortable ways can be said to have problematic UX design. A person, regardless of their level of ability, should be able to meaningfully interact with and progress through your application.

For inclusive UX, avoid designing solely for the average user

One of the most effective ways to ensure an inclusive user experience is to identify the accessibility issues that are currently excluding users and design for them instead of an ‘average person.’ The ‘average’ user is already being designed for, and very few people actually fit perfectly into the ‘average,’ if at all. For a hypothetical example, we could estimate that an average playspace for an experience is 6ft x 6ft. If you focus your efforts on creating the best experience possible for players with a 6ft x 6ft playspace, you’d be leaving those with a smaller play area or those with standing/sitting room only with a subpar experience at best and an unplayable experience at worst. When you recognize how designing for averages can be exclusionary and begin designing for broader ranges of human ability you include individuals with disabilities and inherently extend your experience to everyone.

Recognize the varying degrees of a disability

It’s important to note as you consider UX design that disabilities are not always lifelong. They can be permanent, temporary, or situational. For example: someone with hearing loss (permanent), someone with an ear infection (temporary), someone wearing ear plugs (situational). Solving issues for people with permanent disabilities allows you to extend that solution universally to benefit people in varying circumstances.

Consider adding alternatives to certain motions. For example, if you are asking a user to continuously reach their arm down and pull a lever, consider offering a different way for them to complete this action without this strain. Maybe you can allow them to move upwards or move the lever to a different location. Being creative with the ways users can progress through your application will allow you to account for varying degrees of disability.

Test accessibility design during your next playtest

To ensure inclusive UX in your app, try running silent playtests, or test your app without giving the user any instructions on how to proceed (outside of what is provided in application). If your application has well-designed UX elements, a user should be able to complete the application without getting blocked and without any verbal communication from the developer.

To design appropriate UX for people with varying levels of ability, try running these tests with audio disabled or with a monochromatic filter to remove color. Even with these settings, people should still be able to progress in the application. Optimizing your application based on the insights your gain from these test scenarios can help you drastically improve your app experience for all users.

For more information about playtesting, see the Playtest Guide.

Accessible UI Design

A key part of the UX of an application is the user interface (UI) -- Anything that a person can interact with in your VR application such as menu overlays, buttons, and more. On 2D display platforms such as PC, console, or phone applications, the UI is framed within a fixed screen. In VR, there are different challenges to UI design as the elements exist in spatialized 360° environments. It’s important to rely on a combination of cues such as audio, visual, and haptics,and make sure your UI is legible, understandable, and navigable.

Text

There are many factors to take into account when it comes to designing and rendering text within VR including font type, size/scale, distance, contrast, layout, etc. These factors can make the difference between a clean, easily understood + legible UI and one that is generally frustrating and even blocks user progress. To read more about text, see the Captions and Subtitles section.

Font style and size are crucial to accessibility

When designing your menus, buttons, tutorials, captions, and other app elements, font is the most important thing to consider. As a general rule, sans serif fonts (fonts that don’t have serifs or extending markings at the ends of the characters) are more legible than serif and stylized fonts. You can also consider fonts like OpenDyslexic, Arial, and Comic Sans that are easier to read for people with dyslexia.

Text size and distance go hand in hand when it comes to VR design. We recommend asking yourself the following as you hone in your final design:

  • How far away will your user typically be from a menu or heads up display (HUD)?
  • Would they be able to comfortably read the text if they move slightly further away?
  • Can people with lower vision increase the size of the text?
  • Does changing the font size break any of the UI layout, like text overflowing out of its box or getting cut off for the parts that don’t fit inside the box?

A key part of designing for the widest possible audience is enabling your audience to edit their settings. This includes font settings like size and color.

Make sure there is enough contrast between the text and the background underneath it. It’s best to keep the background as simple as possible for legibility. Some developers use dark outlines on their text or the frame of the textbox to differentiate it from the environment. The ideal design will really depend on the colors and contrast of your environment. For more information on contrast, check out the section on Display in accessible design.

User mobility and how you space your UI text

Beyond text in UI elements, reading in VR in general can be a difficult experience especially for people experiencing challenges with vision or cognitive disabilities. If your game requires more text, be sure to pay attention to the layout of bigger blocks of text. It’s easiest to read text that’s left-aligned without justification.

As you assess your application for accessibility, ask yourself questions like: How long is each line of text? Does the layout require the user to constantly rotate their head left and right to read each line? Try to keep lines shorter, or if you need to display a large amount of text, try to break up the text into smaller sections, it will help those with dyslexia as well as people who have mobility issues and struggle with certain degrees of head movement.

Offer a custom brightness setting

UI elements should be clear, legible, safely implemented, and generally usable. For example, many people are sensitive to light and would prefer to experience your application with a lower degree of brightness. To account for this, you could have high contrast between UI elements or offer a high-contrast mode that works with lower intensity brightness settings. To test this facet of your design, ask yourself, do visual features and indicators disappear when brightness is reduced because you haven’t used enough contrast?

Remember those who are sensitive to intense flashing

Another visual element that can cause user discomfort is intense flashing. Visuals that flicker faster than once per second can cause epliptic seizures. To combat this, consider providing a setting that reduces the intensity of this flashing effect, or simply avoid this sort of flickering that might negatively impact a segment of your audience. You should also include a warning message in your app or within your product description page to ensure users are aware of any content that could be potentially harmful.

Consider color blindness when designing for accessibility

Avoid relying on the use of color to differentiate between user options and communicate important information. For those who experience color blindness, a heavy reliance on color in your app design can drastically diminish their experience. This is not to say that you shouldn’t use color, but instead, use color as a supplement.

For example, if you have a visual system that requires a team of players to hit a “Ready” button to indicate they’re ready for a new round to start, be sure to think through how each player will know when this button is toggled on or off. Is it red in the off state and green when players have hit “Ready”? In addition to making the button green, you could include an audio cue for each of these states, as well as icons to reflect each input, maybe an X when the player isn’t ready and an O when the player is ready. Moreover, you could apply different filters as custom colorblind modes, enabling new levels of player agency and accessibility.

UI Layout and Placement

UI elements in VR can be placed in a variety of locations in the users field of view. They can be in a fixed location, meaning they appear in the same location, everytime, independent of how a person is moving or looking around the space. They can also be attached to a person’s gaze, showing up in front of their view point and moving with the player as they turn their head and navigate the area.

See below for an example of a fixed menu from Dead and Buried II.

Example from Dead and Buried 2, user views settings menu but menu is locked as they look around the environment.

How UI elements appear in the scene can be dependent on the function of the element itself. A HUD or heads up display, for example, might serve the user more if it is always on screen, fixed to the user’s viewpoint so they can quickly reference it in combat. In contrast, an in-application button might be fixed over a door in the virtual environment to indicate its relation to that point in space. Perhaps the door opens on button press or teleports the user into the next room. While the placement can vary, what’s most important is that the UI elements are usable and that people are able to interact with them, regardless of their ability to move, stand, raise their arms, or any other facet of ability.

To read more about color, contrast, brightness, and other display factors that affect UI, check out our section on Display in Accessible Design.