Creating the best UI experience in Virtual Reality!

ID 671696
Updated 10/3/2018
Version Latest



Hey guys welcome to a new week of our Dev Diary of Minerva Labs! (I am so glad we finally chose this name :D). This last week was intense, as I said in our previous post I attended the Oculus Connect 5 I got a glimpse of what the future of VR can be. Luckily our team never stops and we have done A LOT this week, check it out:

I had the pleasure to meet one of the most influential persons in the history of PC Computer Graphics (and Games), John Carmack, and heard him speaking of the powers of VR for education. Of course, living in Brazil that gave me also two flights of 12+ hours (not counting connections) and I really got exhaust.

If you just got here and don’t know what I am talking about I suggest to take a look into our previous entries so you can understand the full picture, either that or you can just follow us into this journey into Virtual Reality User Interfaces!

But, wait! Firewatch is not a VR Game. Yeap, it is not. But here I am trying to show one of the most beautiful aspects of a GREAT VR USER INTERFACE, Diegeses. By the Wikipedia definition:

Diegesis (/ˌdaɪəˈdʒiːsɪs/; from the Greek διήγησις from διηγεῖσθαι, "to narrate") is a style of fiction storytelling that presents an interior view of a world in which:

  1. details about the world itself and the experiences of its characters are revealed explicitly through narrative.
  2. the story is told or recounted, as opposed to shown or enacted.[1]
  3. there is a presumed detachment from the story of both the speaker and the audience.

Meaning that when we talk about a Diegetic Interface we are talking about an interface that doesn’t break the natural sense of that world, as they are part of it or complement the natural environment. In the gif from Firewatch we got to see a map as a virtual map in the player’s virtual hands, it is not an option inside a menu that brings a screen over the view of the player.

This article explain in a very detailed way how the developers of Firewatch made a very smart use of mixing both non-diegetic and diegetic experiences, as you can see there are several kinds of UIs, Non and Diegetic, Meta and Spatial. In our article we will focus mostly on the first 2.

Dead Space is an “older” game that also took use of very natural diegetic interfaces, this article explores it in detail, from health bars through holographic interfaces and information on monitors around the deadly Spaceship. If you haven’t played this game you should, not only because it is really scary, but also because it had so many great ideas well put together as an amazing experience.

Wanting to hear a more “educated” lesson? Why not Coursera? It is a very well know portal of online courses that has approached VR in a very simple and efficient way. They also made a free lesson that talks about UI interfaces in VR, and as we are doing here talks about Diegetic UI.

Ok, that is enough examples of other people doing it right. You are a more hands-on person? I am. Why not trying to implement that directly on the engines we are using? I talked about how much I love Unreal Engine and how it has been amazing to work with it, and here is a piece of documentation from it that teach how to use 3D Widgets, an easy way to put common UI in elements of the game, like screens or holographic projections.

This doesn’t make that too clear how to use it in VR, right? Try to watch some of the AWESOME Mitch’s VR Lab course such as Episode10 and Episode 11, on which he not only explain how to use, but also advice to use the Stereo Layers that are amazing tools to create interfaces that are unlinked to your game’s framerate, meaning that they render out of the game cycle and (should) always run as smooth as your HMD can render.

But I can’t deny the better documentation from Unity on this subject. Their approach on the theme not only covers how to configure the interfaces, but also shows the many different kinds of interfaces and has VERY nice examples of it. At the end of this article they finish with one of the most common feedbacks, which also John Carmack gives in every App Review, that is to use the right antialiasing for a better reading of your texts in VR.

If you want to dig deeper and are not afraid of academic text you should take a look into this Thesis that goes into MANY aspects of how a proper User Interface and Experience can be fine tuned to increase immersion. To keep shorter you can just watch this to videos: His manifesto and a Final Summary.

Nevertheless, remembers that Virtual Reality is a very experimental field right now, and there are no silver bullets. Everything you implement should always be tested over and over again, and most of the time is better to put someone from outside of the developer team to try it out. Feedbacks are the most important thing to really develop a pleasant and natural experience for VR.

Next time I hope we can talk more about Locomotion in Virtual Reality and approach even more complex themes. If you have any questions or suggestions from what to talk in the next post, please contact us!