How is a VR website going to look like?
This year I had the chance to be part of the largest event for VR creators — Oculus connect. The least I can say is that the conference was amazing, providing great networking opportunities and featuring insightful talks. Still, there was something missing on the agenda — talks covering non-gaming VR content. Games are a powerful driver of growth in VR adoption but if we hope for VR to become a mainstream technology, we have to look beyond gaming.
WebVR could be the bridge between VR and non-gaming content. Imagine being able to consume all the web content you do on a daily basis through VR. Will you be buying a VR headset? Honestly, most probably not — there should be significant benefits for you to move from browsing the web on PC to VR, right? We decided to go ahead and test what the benefits of browsing the web in VR could be.
Currently, a regular website can be displayed in VR through a VR-compatible browser like Chromium and Samsung Internet on a large flat screen. If the website owner wants to use any real VR benefits such as 360 view, 3D objects, spatial audio etc., she should hire someone to create a website from scratch using WebVR. None of the two seems efficient, the first option is boring giving no reason for a user to use VR instead of PC. In the second case — let’s be realistic, there are 1 billion websites online and very few of their owners will invest in rebuilding them with WebVR. How could we then get the same variety of content in VR? Our vision is that there should be a standard which will allow a developer to create VR through CSS and HTML. In such a way she will add a few lines of code to already existing website and it will be visible in VR. The next question that arises is how would a 2D website look in VR?
This is exactly what we have been exploring in the last weeks.
Getting our hands dirty
We started our research by looking into the Top 500 Alexa global sites. For the first prototype, we decided to try to translate the UX of the largest category — news media website, to VRUX.
Leading news media websites such as The New York Times and BBC are already using VR to tell compelling stories and show groundbreaking news. Still, none of them has brought their 2D website to VR. Our goal with this prototype was to show how these websites could translate to VR without any major restructuring.
Goal: “Show how the website could translate to VR without any major restructuring”
Thus, we took a real website (ESPN) and based the VRUX of it. ESPN shows a lot of data about game results, team stats, schedules, news. It was challenging to test how they would look in VR.
Conceptualization of the VR website
The second step of the process was to identify the benefits a VR website could offer compared to a regular website. Here is a list of what we came up with:
VR website vs Regular website
- 360 video vs Regular flat screen video
- Customized browsing sessions — empowering the user to detach parts of the website and pin them near him (video) vs use 2 monitors
- 3D game/ team real-time statistics vs flat screen statistics
- More fun ads: 3D ads vs regular 2D ads
- 3D transitions vs 2D transitions
- Spacial audio vs stereo audio
- More natural Input vs mouse & keyboard
We chose to test three of the benefits:
- A detachable website empowering users to change the website layout
- Watching a 360 video instead of 2D
- 3D ads instead of regular banners
The hardware we used was GearVR + GearVR controller. First, GearVR is the most popular VR device. Second, the controller is simple so if we come up with convenient interactions based on it, they will work well with the other VR controllers as well. The prototype was built with A-frame and tested in all available VR browsers.
Designing layout and movements for VR
The three column layout of the ESPN website offered a natural way of splitting it into 3 separate columns. Also, each piece of content (an article, power ranking, game schedule, etc.) could be an independent interactive panel.
Diving right into VR, we used Tilt Brush to draw the wire-frames. It took us less than 30 minutes to play around with concepts and find what works best. At first, we did all transitions and animations in Blender.
We decided to start the experience by showing a flat webpage and then create a splash animation effect. This would highlight the difference between Big screen VR and real 3D VR experience.
Notice how the website naturally splits into three columns curving around the user.
One of the big issues VR currently experience is the low resolution of the displays. The texts should be large in order to be easily readable. Thus, we had to increase the size of the game results in the top menu. Naturally, it meant reducing the number of results. One way to overcome this issue could be by adding an animation that changes each result with a different one after a while. ( we did not have time to implement this idea in the final prototype)
The second transition we had to come up with was the one between the main page and an internal section of the website. Here, we wanted to do something simple. Inspired by the Windows 10 start menu we tested the concept of a turning cube.
Pro tip: When designing for VR keep in mind that some users are sensitive, thus the movements of large parts of the scene could cause dizziness. To account for this we decided to animate only the central column of the website and leave everything else static.
The Detachable website
One of the main concepts we wanted to test with this prototype was:
“How could VR empower the users to alter the website in any way they want.”
A website could support two modes — Normal and Edit during which a user would be able to modify each panel. We wanted to create simple and intuitive interactions. We decided that the edit mode would be activated when a user points at an element and holds the trigger button for 3 seconds. Once in edit mode, she would be able to move the panel left or right on a fixed axis by holding the trigger button. The additional commands would be available through the touch-pad of the controller — left click for scaling down, right click for scaling up, upper part for sending further a panel and the lower part for bringing it closer.
Here’s what we discovered the first time we tested the prototype with users:
- Distinguish the edit mode form a normal mode was hard. Thus, we added a light yellow glow to indicate when a panel is in an edit mode.
- Using the touchpad of the controller was not intuitive. ( A good suggestion was to add a UI overlay over the virtual image of the controller to guide the users through)
One of the most empowering features of a VR website would be not only to modify the layout but also to be able to pull content out of a page and save it. For example, pin a video and watch it while browsing the other news. Facebook introduced a similar feature a while ago. To simulate this experience we added a pin button to the website panels, once pinned the content would not disappear when the user moves to a new page.
Pro tip when designing for VR:
- Make the pointer larger so it would be clearly visible
- Curve the screen/ UI around the user
- Test what would be the most convenient space in between a user and the screen so it does not feel overwhelming. In our case, it was 4 meters from the user. You can find more on the topic in UX 101 for Virtual and Mixed Reality — Part 1: Physicality
360 video instead of a flat video
The second benefit of browning in VR we wanted to test was watching a video in 360. We allowed the user to “turn on” a full-screen option which opened a sphere in front of the other content of the website.
Honestly, it was an awesome and truly immersive experience to watch an American football game highlights in 360. However, I see a problem here — for this to be a real benefit of browsing in VR, there should be a lot more 360 video content available.
Could VR make ads less annoying?
Most people, including I, find banners and pop-up ads to be annoying. Still, I recognize the need for a website to sustain itself, especially when the content is free of charge. The hypothesis we decided to test was if VR could make ads more fun.
Google already introduced their concept for VR ads. I am a Blade Runner fan though and wanted to test a concept of a 3D image and instead of a flat screen.
Here is what we did: once a user goes to the internal page of NBA, he would see an ad for a basketball. He would be able to pull out a realistic 3D model of the ball and toss it around. Throwing stuff is one of the most fun things you could do in VR.
Note: VR ads should non-intrusive as it would be very annoying if unwelcome 3D objects appear while browsing a page.
The blog post came up quite long but I hope it was insightful. Let me know what you think in the comments below or reach out on twitter.
Originally published at productmanageronthego.wordpress.com on November 16, 2017.
