My Journey in WebVR

WebVR will revolutionise the world. Perhaps. It’s either one of those technologies that you don’t notice until it sneaks up on you, takes over, and you wonder how anyone managed without it. Or it’s a technology destined for the scrap heap of failed innovations, lost dreams and pickled cabbage.

For the uninitiated, WebVR is virtual reality created in the browser. No holographic Star Trek monitor is required — all you need is a mobile phone with a browser and a handy VR headset in your back pocket and you’re away. Occulus Rift and HTC Vive users will also be delighted at the twists and turns of the newly three dimensional web, yet to be fully realised as designers grapple with issues of practicality, usability and the all important accessibility. Without these, WebVR will be too inconvenient for the modern man, let alone the Homo sapiens sapiens sapiens of the future destined to peer into a kaleidoscopic digital history of mankind.

WebVR — the latest in 3D web technology — has yet to produce the online window-shopping experience, the streaming 3D movie, or indeed the virtual holiday to Barbados. The technology is so new that the official API has yet to be released in anything but experimental beta versions of the major browsers, but the excitement is palpable among those of us who enjoy debating the finer points of ECMAScript 6.

There are many contenders for the WebVR crown. ReactVR, Three JS and Unity can all be used with the new WebVR API. WebVR Polyfill mimics the functionality of the WebVR API, and can be used to enable WebVR on existing browsers. Furthermore, Janus VR provides a special browser, and promises to usher in a new age of browsing. For the curious mind, the likes of Occulus Rex (http://oculus-rex.com), WebVR Experiments (https://www.webvrexperiments.com) and DrawVR (http://drawvr.com) explore concepts in WebVR, and set the stage for future innovation.

A-Frame is among the pack leaders for online VR dominance, and it has the edge when it comes to backward compatibility with existing browsers. That’s right — you can download the Javascript library and build glorious VR scenes right in your browser without the need for the additional Polyfill library. Very Notable (http://www.verynotable.com) is one such example that I built with A-Frame.

Very Notable is a 3D VR noticeboard, built as an experiment in user interface design. The idea of virtual reality is so tantalising that you can almost touch, taste and smell it — but the problems of creating a VR user interface that is universally compatible with all web-enabled devices are profound. Different hardware manufacturers are all creating their own unique methods for interfacing with the virtual world, and there is hardly a consensus like the keyboard and mouse that we take for granted in the real world. The only commonality that can be guaranteed between the different devices is that the display moves with your head. And yet, developers can’t put users into a position where they are forced to look directly upwards or move their head in a way that might cause neck strain. Head movements are ideally to the left or right, or gently inclining to look at something in a way that you might in real life.

The complexities of UI design in WebVR are nothing short of monumental, and I put Very Notable through a battery of interaction design strategies to get to the final version. If you take a look at the final design, it may seem obvious that it should be that way, but at the start of a design process with an unfamiliar technology, it was anything but obvious.

Very Notable had humble beginnings as a paper prototype, threatening to cause some confusion to colour-blind users. This was an easy problem to fix. The coloured squares could be changed from red and green to blue and orange, or whichever seemed to be most suitable. The key at the bottom of the screen seemed to be clear enough; focus your gaze on a coloured square to zoom the camera in or out — and when you had zoomed out so that you were viewing the board from a short distance, the whole board would appear as coloured squares. Coloured squares was all I could think about.

The coloured squares evolved rapidly into coloured rectangles, which followed from user feedback from the prototypes and a Nielsen’s Heuristic Analysis of the problem — a standard strategy in user interface design.

This design update proved to be an important stepping stone for the next iteration, which resulted from more thought on the user feedback from the paper prototype. This time you could align the camera by focusing on a note, and you could turn your head to use an arrow control to zoom in and out. This was a little cumbersome, but it seemed like a good idea at the time.

Cue some more user testing, and additional feedback. This led to the bigger and better version that turned out to be the final one. Now you could focus on a note and it would zoom in automatically. Focusing on another note would zoom you out and align the camera with that note. Bliss and harmony rules. Job done? Not quite — this new design called for some A/B testing to find out for certain that the latest, greatest design truly was the bee’s knees. So I turned to User Testing (http://www.usertesting.com) — and if you’re looking for a way to earn some spare cash this is a great way to do it. They will pay you $10 for each website that you test for those wide-eyed designers with a hunch for a niche market. I asked two people to test each design, not enough for statistical rigour, but sufficient to confirm that the new version of the notice board did indeed withstand the scrutiny of the masses.

Welcome to Web 3.0! From the depths of the imagination to an Internet near you comes Very Notable, the cutting edge of technology promising to free your wall, save the trees and avoid getting a pin stuck in your finger. But seriously, if you do want endless board space, the ability to save boards, retrieve boards and link boards together then don’t hesitate to get in touch via the website. Thanks for reading, and I hope you enjoy exploring the new technology as much as I do!