GrabDuck

Virtual reality: Templates for UI design in VR – Kickpush design

:

Kickpush is a product design studio in London founded in 2014 by Alex Deruette and Sam Applebee.

This article follows the piece: Virtual reality: VR won’t kill UI design, AR will

Read the updated article on Smashing Magazine
Download our updated Sketch templat e

Subscribe for updates on our adventures in VR.

We’re on a mission to bridge the gap between traditional UI design and virtual / augmented reality. We wrote a provocative article and conducted some experiments to ignite discussion between designers like us and the pioneers in the emerging fields of VR and AR.

After penning our first impressions of this space two weeks ago we’ve received a tonne of feedback. So first of all, a big thank you to all the inspiring people and companies who have engaged in the discussion so far!

We feel that we’ve been given a mandate by the design community to explore this area in more depth and clear the path ahead. In this article we summarise our recent experiments, share our learnings, and lay out a tentative plan to guide our next steps.

And just in case anyone is still wondering why this is such an exciting space:

With great design comes great responsibility

Our early experiments

We began with the aim of making the VR and AR space more accessible to traditional UX/UI designers. The first thing that we noticed was the lack of guidance for designers wanting to design interfaces for 3D environments using the skills and tools they’ve mastered already.

We quickly became aware of a whole host of related and interconnected problems, and it dawned on us that we couldn’t bridge the gap in just a few short weeks. More on that later.

It dawned on us that we couldn’t bridge this gap in just a few short weeks.

After some research we began designing a set of guidelines to enable UX/UI designers to start making things for VR. We looked at the comfort zone for VR users, the optimal range of view for interfaces, a GUI canvas for VR and how we might deal with depth.

It’s a long way from from the comprehensive guide we would like it to be, but it’s a start!

Comfort zone

Comfort is key to creating an enjoyable VR user experience. Head movement needs to be restricted to the limitations of the human body.

Virtual reality interfaces — Comfort zone

Assuming the user is sitting on a static (non-spinning) chair, the user interface should operate within a 94° horizontal space and a 32° vertical space (Source: Mike Alger).

This assumption is the starting point for defining a virtual UI canvas that can be used by designers to create their virtual interfaces.

User interface playground

Based on a 180° horizontal and vertical playground (half a sphere representing the front vision), we’ve isolated the area where the virtual user interface lives (represented by the red square in the image below).

Virtual reality interfaces — UI Playground

While virtual reality environments can seem overwhelmingly large, UI designers can only focus on a fraction of this environment.

GUI Canvas

Interfaces always need to be tested in a real VR environment, but the following step can help designers whom are testing out compositions and styles within 2D design software. The suggested canvas size is detailed below.

Virtual reality interfaces — GUI Canvas

Canvas size: 3840px x 1440px

You can download our Sketch Template here.

Depth layers

Another aspect that must be considered is depth. One canvas is not enough to create a solid VR user experience. In a 3D environment, at least 2 levels of depth need to be considered: background and foreground.

Virtual reality interfaces — Depth layers

The main UI elements that fall within the background can be designed within a 3840 x 1440px canvas. The foreground is closer to the user and therefore, represents a small playground, this can be designed within a 1920 x 960px canvas.

You can download our Sketch Template here.

So what did we learn?

One of the biggest unknowns was the level of engagement we would see from UI designers. Would people be excited about this new domain or be content sticking to what they know? After all, traditional UI design is in high demand right now, what’s the rush?

We needn’t have worried. We’ve been blown away over the last two weeks by the excitement around VR and AR, there is a huge amount of enthusiasm (and therefore potential) in the design community for these new frontiers!

The problem that we’re trying to solve is that the bulk of UX/UI designers are unable to put their expertise to use in 3D environments right now. They can’t just draw an interface and see how it works in a virtual or augmented world.

The bulk of UX/UI designers are unable to put their expertise to use in 3D environments right now.

Our recent article sparked a lot of discussion about the role of designers in these emerging spaces. These early experiments with canvases for VR lead to some great conversation, but ultimately fall short of being practically useful in the immediate term. There are pieces of the puzzle missing.

The truth is that most UX/UI designers are unprepared for the coming changes in their industries, and there is a huge disconnect between the work that they’re currently doing (most design agencies’ bread and butter, including us) and the work that they’ll likely be required to do in the near future.

Depending on who you ask, we’re between 3 and 15 years away from VR and AR being mainstream mediums for content consumption and human interaction. The sooner that we can stop staring at our phones to send emails while walking down the street, the better!

Affordable AR is coming

Collectively there are things that we know we know (known-knowns), things we don’t know we know (unknown-knowns), things that we know we don’t know (known-unknowns) and things we don’t know we don’t know (unknown-unknowns).

There are known-knowns, unknown-knowns, known-unknowns, and unknown-unknowns.

Broadly speaking, the known-unknowns that we’ve seen so far fall in three baskets: Markets, Tools and Skills.

Markets

  • How will demand for VR and AR interfaces change over time?
  • How will this affect the demand for traditional UI design?
  • What will the job market look like for designers?

Tools

  • Can 2D designers adapt their work for 3D environments or will they need to learn to use 3D tools?
  • Will new 3D tools dedicated to designers emerge (similarly to the way that Principle has opened up UI animation)? Or will design tools like Sketch an InDesign evolve to accomodate 3D?
  • Are we likely to see tool convergence or increasing specialisation and integration?

Skills

  • How applicable are existing UX/UI skills to the domains of VR and AR?
  • As designers’ skill sets change, which skills will be mainstream and which specialist?
  • Will the production process for VR and AR products remain integrated or fragment and become specialised?
  • What team structures can we observe and what structure will they take in the future?

What tools, disciplines, workflows and digital elements and will make up the Periodic Table of Design in in two years? Five years? Ten years?