Virtual reality: Templates for UI design in VR – Kickpush design
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:
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 is key to creating an enjoyable VR user experience. Head movement needs to be restricted to the limitations of the human body.
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).
While virtual reality environments can seem overwhelmingly large, UI designers can only focus on a fraction of this environment.
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.
Canvas size: 3840px x 1440px
You can download our Sketch Template here.
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.
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!
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.
- 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?
- 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?
- 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?
It looks as though shared learning will be key to opening up VR and AR markets. We intend to seek answers through collaboration as much as we can.
Meanwhile there are are evidently opposing views within the design / VR / AR communities (names redacted):
PS: “What extra value does AR provide…“
CB: “AR’s potential surpasses VR“
RK: “There wont be mass adoption of existing 3D tools..they’re way to overkill for UI“
BD: “Designers, like everyone else, have to learn new tools“
We all evidently have a lot left to understand, and a lot to learn from one another.
So where do we go from here?
There are lots of missing links. We know that we don’t know enough… that’s about the only certainty! We set out to try to find some answers, but simply raised more questions. This is no bad thing, though, as it’s provided us with some direction.
Our aim now is to map the road ahead with the help of partners like Jerome and Adam @ Neutral Digital, Petar @ SiliconPlain and Christian @ Visualise. Their guidance to date has been invaluable. Thanks guys!
In the short term we want to enable more designers like us to start creating interfaces for 3D environments.
Short term: We want to enable more designers to start creating interfaces for 3D environments.
In the medium term we want to formalise the skills and technology stacks for the production of VR/AR experiences – taking into account the product and job markets from the perspective of traditional designers, as well as that of 360 video, VR and AR production houses.
Medium term: We want to formalise the skills and technology stacks for the production of VR/AR experiences.
In the long term we want to pave the way for a full integration of VR and AR into our everyday lives.
Long term: We want to pave the way for a full integration of VR and AR into our everyday lives.
Ultimately we just want to learn alongside fellow adventurers who are un-phased by the mammoth challenges posed by understanding our role as designers in the evolution of our field.
They say that it’s good to be on the cutting edge, but that there’s no money on the bleeding edge… We’ve decided that we don’t care. This is what we’re interested in. We’re doing it!
If you’re excited about the future too, please do get in touch at firstname.lastname@example.org and we’ll look for ways to collaborate.
If you liked this, click the 💚 below so other people will see this here on Medium.
Special thanks to the following (in no particular order) for getting stuck into the debate:
Vlad Drimbau, Kevin Flores, Daniel Kolodziej, Aaron Benjamin, Alexander Toporov, rmtwrkr, Chris Kelly, drreeds, James Brocklehurst, Andrew Edwards, Ángel Sánchez, Nestor Vera Ramos, Benny Schmidt, Dick, Maciej, Dwinawan Hariwijaya, Ramotion, Zajno Crew, Riho Kroll, Rob Palmer, Liam Tucker, Bjarke Daugaard, Ian Goode, Taulant Sulko, Patrick Smith … you guys rock!