VR Browsing Explorations
2014/15 — Over the course of two years the MozVR team explored various approaches to presenting and navigating the web in virtual reality. Multiple functional prototypes of VR browsers were created with different technology and design approaches, each enabling users to browse the web from inside a headset, moving from site to site (or world to world) seamlessly with new interfaces and input devices. My role was to lead these efforts while taking point on UX concepts and working prototypes. Casey Yee, Chris Van Wiemeersch, Kevin Grandon, Kip Gilbert, and Vlad Vukecevic built the front end and platform components, respectively.
The first of these prototypes, "Hiro", was a two person effort from Casey and myself. It used early experimental builds of Firefox Desktop with WebVR support and was released on November 10 2014 to coincide with the 10 year anniversary of Mozilla. The onboarding flows and performance were rough at launch, but the project was an extremely useful proof of concept for the promise of low-friction install-free exploration in VR on the open web stack.
Designing the VR web
The following are excerpts from the design process of Hiro and subsequent explorations.
After starting in spring of 2014 with a research sprint into the emerging best practices of VR experience design, we quickly began to brainstorm. We started by asking ourselves two fundamental questions: what do we love about the web, and what do we love about virtual reality? These were useful starting points for ideation into everything from the unique jobs we'd hire WebVR to do, to the interaction fundamentals of presenting and interacting with web content in VR.
Early conceptual inspiration was drawn from many sources. These moodboards captured drew on blends of surreal procedural geometric motion graphics, anime science fiction interfaces, and minimalist modern interfaces with bold colors and clean compositions.
A text-heavy medium like the web poses an interesting design challenge for the low resolution displays of current VR headsets, so research into legibility and human visual acuity started early. I experimented with new grid systems and text size guidelines for the interfaces we were starting to create.
Cinema 4D was enormously useful for exploring and communicating new interaction models within the team. I used it extensively to explore placement and scale of objects with the virtual environment.
Storyboards and animations were used to explore transition sequences between states (in this case, between a loading sequence and a user's home world).
We also explored input models. How would you interact with the world around you? What devices would you use, and what critical interactions would they map to? We defined our design priorities in one sprint as...
- Support both the old web and the new VR web, to maximize content compatibility.
- Minimize differences between navigation modes, to improve ease of use
- Design around interaction primitives that are agnostic of input hardware, in order to ensure future-friendliness.
Browser chrome ideation began early. We knew we'd probably need a more radical rethink of the browser interface given the gap between the 2D screens the browser had been born on and the spatial motion-tracked world of virtual reality, but in the early days we allowed ourselves to walk before we ran, exploring concepts that grafted existing browser paradigms into flat interfaces. These mockups were generated before motion controllers had been announced by Vive, and so assumed a gaze-based cursor and flat quads hovering in space.
I leveraged Cinema 4D again to explore the relationship of these browser-chrome-as-HUD approaches to user movement. The notion of introducing drag was interesting, although never ultimately prototyped.
The following were taken from explorations into the presentation of widgets, bookmarks, status indicators, contextual menus and notifications.
To accelerate prototyping I'd hit upon a system that enabled me to take a 2D mockup and drop it quickly into a WebVR boilerplate scene to check legibility, draw distances, etc. A tutorial on that workflow is available here. The process was simple: I worked on a 360cm-wide canvas in Illustrator and exported layouts as textures wrapped onto a cylinder in the WebVR scene. The 360cm canvas made layout incredibly intuitive. Each centimeter was one degree, and center of the composition was "straight ahead" in the VR scene. To ensure I worked within legibility and line of sight allowances I generated template layers and style guides.
We constantly sought to improve our tooling efficiency and iteration time. Once I switched to Sketch we were able to leverage it's command line tools to create an automated Sketch-to-WebVR workflow (called Sketch2Three) where each individual slice in the sketch scene was imported as an mesh and texture in the Three.js WebVR scene. The link was live, as you can see in the GIF below. This workflow was close to magic for rapid iteration, and I used it to great effect until it was broken by a Sketch regression.
We also explored interesting loading sequences. It's important on the web that we know a bit about the sites that we're visiting, from their name to whether they're using HTTPS. The following approach was inspired by the location placement tags that appear in movies like the Bourne Identity. A fly-through of an early Sechelt scene model was rendered in Cinema 4D and titles applied in After Effects.
As we approached a self-imposed publish date for the first public prototype of our VR browser efforts, I fell in love with a typeface called Montserrat and an 80's neon color treatment. The former was more functionally defensible than the later, but what the heck, innovation can be fun :) We settled on the following heads up display design. It was invoked by pressing space on the keyboard and presented a series of bookmarks. Each site was prepped to open in VR mode automatically when viewed in Hiro, enabling the "surf through worlds" experience that we wanted.
I created the landing page (aka "construct") of Hiro with text textures on curved quads and icons created in Cinema 4D. Again, not my finest hour aesthetically, but it was enormously fun to be building sites that were in fact "worlds".
After launching Hiro in November 2014 and sharing it at conferences like GDC, we collected what we'd learned and began work on second prototype, dubbed "Horizon". Unlike Hiro, which relied solely on WebGL, Horizon combined WebGL with CSS VR, which rendered DOM elements in stereoscopic using CSS 3D tranforms. With CSS VR a web developer could leverage pure HTML and CSS (plus a drop-in JS file for head-tracking support) to build VR scenes. The following screencap shows a simple heads up display with primary navigation controls and the experience of browsing seamlessly between VR and non-VR web experiences.
We also began to experiment with backwards compatibility and responsive design modes. These June 2015 mockups depict an approach to responsiveness wherein a loaded site detects whether the user agent is in VR mode, and if so, displays a 360° background in the viewport as defined by a one line CSS background property. The site content can also render with a transparent background and adjust font sizes for legibility on low-resolution HMD displays. The idea was to provide developers with means of adapting their existing sites to VR without having to do complete redesigns in WebGL. As seen in the A-Ma Temple example, we believed even a few new properties could go a long way.
The following were taken from the later explorations and depicts two-dimensional web content in a VR browsing context. Content is applied to a curved surface for optimal legibility and gestures reminiscent of pinch-to-zoom are used to zoom and focus content blocks.