VR website: News media prototype

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.

Alexa Top500 webistes in categories

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 Regular website
360 video Regular flat screen video
Customized browsing sessions – empowering the user to detach parts of the website and pin them near him (video) Use 2 monitors
3D game/ team real-time statistics Flat screen statistics
More fun ads: 3D ads Regular 2D ads
3D transitions 2D transitions
Spacial audio Stereo audio
More natural Input Mouse & keyboard

We chose to test three of the benefits:

  1. A detachable website empowering users to change the website layout
  2. Watching a 360 video instead of 2D
  3. 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.

ESPN in VR

Diving right into VR, we used Tilt Brush to draw the wireframes. 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.

3D VR website

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.

Cube animation Blender

Cube transition A-framePro 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.

VR Cube transition

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 touchpad 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.

controls

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)

 

Detachable VR website

 

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.

 

VR Website prototype

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.

VR Ad: 3D basketball

Note: VR ads should non-intrusive as it would be very annoying if unwelcomed 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.

Advertisements

6 thoughts on “VR website: News media prototype

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s