Prerequisites

Chapter 1 | Hello Virtual World
Chapter 2 | Panoramic Road Trip
Chapter 3 | Outdoor Movie Theater
Chapter 4 | Transitions and Animations
Chapter 5 | Star Wars Modeling
Chapter 6 | Vector Graphic Exploration

Scope of This Chapter

It’s most likely that you are learning React VR coming from a background doing development in a different sphere (i.e. web development). Because of that, there’s a strong tendency to apply the user experience from that sphere of development in VR. However, VR is quite unlike any other experience for a user.

The most important consideration to make for user experience is the fact that the user will be wearing headgear and moving their head frequently to navigate through the virtual world. This means we have to make special considerations. This is especially important as a bad UX design in VR can lead to nausea while a bad UX design in a different sphere won’t have those same consequences.

In this chapter, we will go over different user experience principles for VR design. While some advice may seem obvious, it never hurts to reiterate good design principles. This chapter will also be an easy read with no coding so you can catch your breath before we crank it up to finish this book.

Distance

When it comes to distance, there are a few considerations to make.

Avoid focus on objects of different distance

Imagine you had two objects that required your focus in a virtual world. If you had to continually alternate between focusing on an object of short distance and an object of great distance, this could an uncomfortable sensation for a user.

Keep a Comfortable Distance

The closer an object comes to the line of site of a user, the larger it appears even if the size is retained. Additionally, an object came become blurry and out of focus when too close to the user.

Always keep a comfortable distance for the user in your design.

Text

When it comes to text, the most important thing is to consider is to avoid forcing the user to move their head to read text.

If you’ve ever been looking at your phone or reading a book while in a car, then you have experienced the physically uncomfortable sensation that follows.

There are three points to note to assist with avoiding this sensation.

Avoid Wide Text Blocks

In VR applications, traditional text blocks are going to appear much wider.

Therefore, it is crucial to shorten the width of text so the user doesn’t have to constantly move their head left to right in order to read.

Avoid Tall Text Blocks

The opposite extreme to avoid is text blocks that are too tall.

This can be uncomfortable for a user as they have to move their head up and down.

Shrink the height of the text block so that the height is manageable.

Avoid Static Text Cues

As a general rule of thumb, replace text cues with audio cues when providing instructions to a user. In the image above, “A Shoot” could be provided as an instruction through audio.

If you really need to use text, either make sure the text is huge or is displayed with animation.

Layout

Adjust width and placement

Similar to text, a good UI layout in VR takes into account width limitations.

Video games, for example, usually have icons and maps on the corners of the screen:

Smaller components of a UI should be placed closer to the middle. In addition, the entire UI layout should be a comfortable width for the user.

Another option is to use a curved design.

Toggling Items

In order to avoid clutter and unnecessary movement for the user, you can emphasize toggle elements on and off.

Try to toggle on elements in front of a user and them toggle them off based on a user’s input.

Overall Experience

Lots of Feedback

In VR applications, it is always good to provide frequent feedback to the user (more than usual). This is important because a user can feel a bit overwhelmed in a 3D environment and there isn’t as much certainty as to how their inputs will be registered. Feedback can be provided by sound, animation, or vibration.

Don’t Force Actions in a New Environment

If you were to teleport to a new environment, what would be your first reaction?

Most likely, you would look around to become antiquated with your new surroundings. The same applies with a user experience in a VR application.

Don’t force the user to make an action until they are antiquated with their new surroundings.

Concluding Thoughts

As promised, this chapter was short and sweet as to provide a nice break from the flow of the book up to this point.

While there is a lot to discuss and explore in terms of UI/UX in VR applications, I think this chapter successfully highlights the major considerations a new VR developer should make. If you are interested in learning more about UX in VR, there is a great resource called The UX of VR. This resource provides a curated list of videos and other resources to help you consider UX design for virtual worlds.

Support the Author

If you would like to support me as I write this book, you can purchase the book here.

The book is published through a platform called LeanPub which allows me to update my book as it progresses. Each time a chapter is added, you will be notified via email. The book will be free to read on Medium, however, purchasing it through LeanPub allows you to download the ebook as a PDF, EPUB, or MOBI file and helps support me financially.

Additionally, I have created a special package that will provide you with a secret link to a Discord server where you will be able to help influence how I write this book.

So go ahead and purchase this book on LeanPub if you would be so kind.

Cheers,
Mike Mangialardi
Founder of Coding Artist