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.
Try new interfaces, test them out, iterate and improve. Ultimately enable content creators to create and manage web VR experiences.
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
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.
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.
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
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.