You are here

Web Design, Contributed

VR and the Future of Web Design

April 12, 2018

WebVR technology has the potential to revolutionize the way we use the web. It allows users to experience VR through a web browser, and several companies have already developed WebVR apps. Here's how WebVR works.

The immersive environment of virtual reality (VR), while still in its infancy as a technology, has companies thinking about the future.

Facebook, Microsoft, Google, and others have deeply invested in the development of VR. It won’t be long before both the hardware and software become available for mainstream use.

While VR is most prominent in gaming and marketing right now, other useful, real-life applications of the tech also exist. This article is an overview of VR’s evolution and how the technology could change the web as we know it.

Samples of VR Applications in Today’s World

The goal of virtual reality is to make things more efficient. In today’s visually-inclined world, companies have tapped VR to package their goods and services in the most efficient, immediately way possible.

Consider the IKEA VR system.

IKEA vr app

IKEA’s VR lets prospective customers design their own kitchen. They can:

  • choose different fixtures
  • sample various colors
  • set room dimensions

All customers need are an app and a VR headset. The experience not only lets customers see IKEA’s products, but allows them to walk around the entire virtual rendering.

This try-before-you-buy approach has also been used by brands like Audi to let customers test and customize features. VR takes sales presentations to an entirely different level.

Meanwhile, KindVR developed a VR app designed to help medical patients reduce pain and stress. The VR experience transports patients to a virtual world, which distracts them during moments of pain. Patients using KindVR’s system have said that it alleviates pain-related stress as well.

The VR Numbers

There’s a reason why large companies are investing heavily in VR. According to Statista, the VR global market will reach $40.4 billion by 2020. Meanwhile, the projected economic impact of VR technologies for companies with medium adoption is projected pegged at $15.6 billion.

In addition, VR could soon bridge the experience gaps between shopping at a brick and mortar store and browsing e-commerce sites, says Red Stag Fulfillment.

The Evolution of Virtual Reality

WebVR makes it possible to have an immersive VR experience on your web browser.

The JavaScript API (application programming interface) makes use of a VR headset and a VR-capable device, such as a smartphone, to bring the VR experience to browsers.

Though WebVR is still under development, you can try WebVR 1.1 in Chrome Beta (M56+ via an Origin Trial), Firefox Nightly, and Samsung Internet for Android/Gear VR.

New web APIs enable WebGL content (which brought 3D visuals to the web) to be displayed with VR headsets. The APIs also provide headset and controller tracking information to make users feel like they’re really present in the virtual world.

How VR can change the web

WebVR means that users don’t have to download independent apps to enjoy the VR experience on browsers. This opens up opportunities for both consumers and marketers.

Imagine that you’re on a hotel booking website and aren’t sure about booking a room at a particular hotel. WebVR would allow you to virtually walk around the entire hotel, giving you more information to make an informed decision.

WebVR also takes away real-world distractions, like checking your phone or seeing something interesting on TV.

A comprehensive WebVR may not be available right now, but with companies like Google deeply invested in its development, that technology will hopefully come soon.

VR User Experience

Both WebVR APIs and more affordable VR hardware have created an exciting climate for user experience (UX) designers. These new technologies also create new challenges, though

UX professionals who design for VR will have to consider spatial layout, which entails close collaboration between the creative and 3D architect. The UX and 3D architect team will have to consider questions like:

  • Can users walk around?
  • Can they only use head movement?
  • Are sensorial gloves included?
  • What about a trackpad?

Below are some examples of how to design UX for VR.

Emotion-based

Playing to consumers’ emotions is a popular marketing tactic, and VR’s immersive environment provides opportunities to do so.

Consider USC’s Institute of Creative Technologies, which uses VR for mental health rehabilitation. According to team director Skip Rizzo, their VR apps place people in simulations designed to bring up specific emotions. The apps then teach students how to deal with those emotions.

For example, Bravemind is a VR app that helps combat veterans work through post-traumatic stress disorder (PTSD). VR helps therapists in facilitating graduated exposure therapy, or slowly accustoming patients to stressful triggers.

Live action-style UX

WebVR can transport users to places and experiences they might not be able to enjoy in real life. UNIT9’s Wild Within Experience, which uses gaze interaction, enables users to explore Great Bear Rainforest in British Columbia.

Another VR app that lets users explore new environments is Chase the Thrill, which uses the WizDish—an omnidirectional low-friction treadmill – to let users rollerblade around a Blade Runner-esque virtual city.

These games demonstrate the many possibilities marketers can tap into with WebVR.

Challenges of WebVR

Designers and creatives still have a lot to tackle before WebVR becomes a part of everyday life.

Here are some of the design challenges the industry is currently facing.

VR Mode/Normal Mode

Google envisions a web where users don’t ever have to leave VR, but the technology isn’t up to speed with that idea.

As noted by Elegant Themes, most implementations of WebVR entail toggling between VR and regular modes—which is the opposite of immersive UX.

Lack of Bandwidth

Users are only willing to wait a few seconds for a page to load. Will they wait for massive VR videos to load?

Some hardcore fans would probably wait as long as necessary, but everyday browsing on WebVR seems like a pipedream when you consider how much bandwidth VR would require.

Bandwidth infrastructure would have to get much more reliable for WebVR to truly be possible.

Motion Sickness

VR users must be able to move freely. If users don’t have full control, they’re susceptive to motion sickness.

To combat this, UX designers should use visual and sound triggers. Designers should stay away from automated transitions, such as zooming in or out too fast.

Best VR websites

Try these websites for some of the most elegantly-executed WebVR technology.

Google Earth

Google Earth VR

Google, one of the leading proponents of WebVR, showcases what’s possible with Google Earth. On Google Earth, users can “stroll the streets of Tokyo, soar over Yosemite, or teleport across the globe.”

Google Earth VR, which is available to HTC Vive and Oculus Rift users, puts the whole world in users’ reach. The result: a mesmerizing UX.

Mozilla VR

Mozilla VR app

Mozilla wants to change the future of web interaction by opening a VR platform to innovators, creators, and builders on the web.

The portal allows creators to build VR UX for the browser with A-Frame, which is Mozilla-supported, open-source, and easy to learn.

WebVR: Simple, but Revolutionary

Think about the first iPhone. The device seems simple now, but it was revolutionary when it came out. VR right now is a lot like that iPhone: people are still figuring out how to use the technology, and every day brings more advances.

Widespread WebVR could come sooner than you think. If you’re in the web design industry and you’re not already looking at how to leverage WebVR technology, then you risk getting left behind.

Keep up with VR news, continue learning about UX, and you’ll be able to use WebVR when it becomes popular with mainstream technology users.


About the Author

Jolina Landicho Avenew Media headshotJolina Landicho is a marketing strategist working with various brands online, and the content manager of Avenew Media. She is devoted to helping businesses bridge relationship gaps by providing in-depth, actionable advice on online marketing, business development, and growth hacking.