UX tips for creating WebVR experiences

In Fall 2017, Four Kitchens conducted a usability study on two WebVR prototypes. Our objective was to start to document and understand web-based VR experiences and how to best design for WebVR. Here are some key tips and takeaways from that study.

Concepting and space design

Keep the overall concept exploratory and allow users to discover and find things. If your users have had any VR experiences so far, they’re most likely to have experienced VR games.

Don’t design your WebVR experiences like a website or mobile app with menus and hierarchy. It’s easy to subconsciously borrow behaviors from these types of interfaces since we use them more. Think about creating films or games rather than websites — scenes and storyboarding are a better way to think about structuring content and conveying a message.

Have items at the edges of the frontal view, inviting users to explore the entire 360° space.

Designing user interfaces for VR

Text: Reading in VR experiences is a balancing act of the amount of text used, the position of the text along the y and z axises, and the size of the font used.

• Ensure that text is appropriate distance along the z axis from the user. Text that is too close to the user will feel imposing or having a conversation with a close talker.
• But then make sure the text is adequately large enough to be legible within the headset. Always double check legibility within the headset since it is a very different viewable experience.
• Placement in the 3D space will impact the readability of the text. The text is easier to read just below eye level than when the user needs to tilt their head to read.

Interactivity: Users will likely be using a device without a controller, so “clicking” will involve focusing the center of their view on an area for a small amount of time or “fusing”.

• Ensure the interactive target is large enough for users to easily fuse with.
• Provide visual feedback to the user, so they know that they have initiated an interaction – feedback can be enlarging the item (or moving it closer to the user along the z axis), changing color of the target, or create an “animation countdown” to single when the interaction will take place.
• Don’t put too many fusible items near each other, or the user may end up accidentally fusing on something and feeling frustrated.

Photo: The desire is to get clear, evenly lit and sharp focused photos.

• Items that is important for the storyline needs to be photographed within 3 feet of the camera lens for it to have sharp focus and enough detail to engage the user.
• Take additional photos with a standard camera (DLSR) to be used for additional assets. For example using these photos in pop displays allowing the users to get more information and a closer view of an object. The “magnifying glass” icon is widely understood as a way to get a closer look of an object.

Audio:  At the moment think of audio as an additional sensory input but don’t rely on it.

• All sounds should be optional as many mobile devices and browsers still will not play sound reliably in WebVR. Ensure that the content is understandable without sound.
• Enable sound toggle on/off.
• There should be no auto-playing audio elements; let the user control audio.
• Keep audio elements short (especially if they are sound effects), but when if someone is talking, keep the clip to no more than 30 seconds.
• The traditional “speaker” icon is understood for additional audio content being available.

Storytelling

Provide a narrative when tying 360° photos together. Tidbits of story make the bigger picture.

• If sound is an option you can use a voiceover to connect concepts and storyline for the user.
• Another option is to make the experience first person, where the viewer is the character and the WebVR experience is what is happening to them. There is potential for gamification if this is the point of view.

Navigation

Try to create natural ways to lead from one image to the next. Make transitioning from scene to scene as logical and sensical as possible. The “teleportation” feeling from one scene or photo to another can be disconcerting and confusing for users.

When moving from room to room, make sure there is a match between what they traveled through, i.e., the same doorway. If the rooms are not attached to each other, you will need to explain to the user where they are and where they are going to next and what is the connection between the locations.

Create a home screen with different locations or experiences to visit that are labeled to better orient the user. Use the same labels as are listed on the home screen when moving to a new location.

Safety notes

At the beginning of the experience, right before or after loading the experience, we recommend that the user is seated. The mobile device will limit awareness of the outside world and unlike a Vive or other high-end headset, the experience won’t constrain user’s movements to a small area. The interface could even recommend sitting in a swivel chair so that the user can explore comfortably and safely.

EditVR

Once you’ve mastered these tips to structure your WebVR experience, you’re ready to create it. Four Kitchens has developed an open source tool, EditVR that makes creating WebVR experiences as easy as creating a blog post.

Special thanks to Caris Hurd and Emily Sapp whose work went into the creation of this post.