top of page

WEB VR

A research and design project to understand a new technology, inform the design of future web-based virtual reality experiences, and build a web VR editorial tool

THE PROBLEM

In 2017, web-based VR technology was nascent and untested. We suspected there were opportunities to make it better and easier to use. We were interested in building a system to allow content creators to create amazing VR experiences without knowing how to code.

Engineers and designers built a prototype of a web-based VR experience. The UX team conducted usability tests on two variations of this interface to understand what worked and what didn't for web VR.

HIGH LEVEL TIMELINE

The research was conducted in September of 2017. The EditVR product was released in Spring 2018.

MAKE OF THE TEAM

I led and conducted the research with a UX strategist. A third strategist helped analyze the data and all three of us co-wrote the report.

KEY GOAL

Try new interfaces, test them out, iterate and improve. Ultimately enable content creators to create and manage web VR experiences.

PROTOTYPING

We created two versions of a web-based VR experience to test interface variations with users.

We were primarily interested in navigation and interaction designs within WebVR, so we tested two concepts.

The Version A prototype:

  • Navigation: footprint icon to move to a new space

  • Linear navigation from space to space: the user could only move to an immediately adjacent space

The Version B prototype:

  • Navigation: uses the location icon with an image preview of the location to move to a new space ("portal")

  • A "home" button to enable users to view a menu and navigate to any space in the experience

  • Arrows directing users to look up to see elements much higher than the horizon line in one 360° photo

Version A

Version B

USABILITY TESTING

We borrowed office space from friends and recruited nine kind folks for our usability test over the course of a couple of weekends.

All our users tested on both versions of the prototype. We had some of our participants use the Google Daydream device and some use the Google Cardboard. The Daydream has a hand-held pointing device for clicking, and the Cardboard requires the user to keep the center focus point on an item to click.

 

Read more about the study details on this page of the final report.

MAJOR FINDINGS FROM USABILITY TESTING

We found that the equipment being used has a significant impact on the experience.

  • Using a swivel chair means that a user can safely access content in the entire 360° photo or video.

  • Using an interface with a handheld pointer (a Google Daydream) instead of using a headset with a pointer reticule is a very different experience. Users generally liked the pointer better, even if it was still very buggy

  • High resolution phone screens are essential to a good experience

Equipment can make or break the experience

Using real life cues like doors to move between spaces in VR makes intuitive sense for users. Design metaphors that do not translate well to standard web or software experiences translate much better in VR.

Orientation and wayfinding cues should resemble real life

Users who wore glasses struggled a bit more to make the equipment to work for them. Users with bulky glasses or bifocals/trifocals especially complained about being able to see the content clearly and feel comfortable wearing the headsets.

Accessibility issues

Good 360 photography and videography make a big difference in engagement and overall experience. Lighting, photo resolution, and camera height can make an enormous difference in perception and enjoyment for the end user. We even had feedback to remember personal space boundaries for one photo, as the user felt like their personal space was being invaded by a person standing too close to the camera. VR content can be so realistic that it can make the user feel awkward or frightened. 

Content is king

If user and business goals involve exploration of a space, a linear navigational structure works well. If users need to be able to search for or navigate to specific items or spaces, giving users a "home" navigation will better serve that need.

Exploration vs. navigation goals should impact design

We wrote and published a white paper report on the usability study.

After the R&D was complete, we updated the demo site based on the findings and began designing a product for content creators to create and manage web VR experiences.

Read the full report on gitbook.

READ THE REPORT

BUILDING AN EDITORIAL TOOL

Four Kitchens specializes in building content management systems. We became interested in creating an interface to allow editors to create web-based VR experiences on top of a Drupal backend. 

After conducting the research project, we created a new product: EditVR. EditVR is a decoupled, Drupal-backed React-fronted VR editor to combine 360 photographs, annotations, sounds, and images into experiences which can be delivered in the browser, on mobile devices using Cardboard or Daydream, or on desktop computers with VR hardware. View a demo video of EditVR below.

EditVR demo video

Like what you see?

Let's chat.

bottom of page