How Facebook Designs for VR Environments

Anne Lee
UX Planet
Published in
5 min readDec 2, 2017

--

On November 8th, I attended the UX World Fall 2017 Conference hosted by IDG Korea at the Kimkoo Museum & Library. During the third session, ‘Designing Beyond the Screen’, Gabriel Valdivia (Lead Product Designer at Facebook) introduced some of the VR design research currently in progress at Facebook. Here is a quick summary and some personal thoughts regarding the session.

Gabriel Valdivia (Photo Credit : http://www.itworld.co.kr/news/107137)

*This is a more detailed version of my original review : UX World 2017 Fall Conference Summary (Read it now!)

As Mark Zuckerberg demonstrated in his keynote speech last year, Facebook is currently looking for new ways to connect people through virtual reality. Some of the ideas include playing games, taking pictures ‘together’, and exploring both real and virtual spaces together. Because all of these interactions take place in a computer generated 3D environment, as opposed to a traditional mobile screen, it is bringing up many new design challenges regarding how the user is to interact with his or her surroundings.

Luckily, Facebook has already pioneered out into the world of VR design, and answered some of the questions for us already. Valdivia explains that their examples can be grouped into three core categories : Presence, Comfort, and Input.

1. Presence

  • Presence is defined as the feeling that you actually exist in the virtual world, and believe that your perceived surroundings are real. This is crucial to the experience as a lack of presence may lead to a lack of immersion; and considering the fact that people tend to judge a VR experience based on just one try, they might end up abandoning the attempt to try out products once and for all.
  • Some products, like Leap Motion, use holographic hands to represent the user.
Leap Motion uses a holographic skeleton model to represent the user.
  • Facebook, however, decided to use avatars to maximize the feeling of presence. The great thing about avatars is that they are highly relatable, and considering the fact that Facebook will have to design billions of avatars for people all over the world, it seems like a great design choice in that they have great potential for variations and customisations.
  • When designing these avatars, Valdivia explained that adding hand gestures and eye movement (such as eye contact, eyeball movement, and blinking) are the crucial factors for the users to perceive the avatars as ‘real beings’. Through testing, they found out that the more natural these gestures become, the more likely the users will be engaged with the characters.

2. Comfort

  • The second important factor when designing for VR is ‘Comfort’, the state in which a user does not feel nausea that comes from the deviation between perceived movement and actual staying stationary.
  • In order to reduce the feeling of dizziness, Facebook uses a method they call ‘teleporting’; where a user feels like they are stable, while their surroundings are moving instead. (Example : 0:30–0:40) This is possible because people can perceive if they are moving or not by comparing how the ‘ground’ they are standing on (in the video, the boat acts as the ‘ground’) is moving in relation to the objects around them.

3. Input

  • Facebook quickly learned that 3D worlds require different input methods compared to the 2D interfaces we are so accustomed to.
  • One example would be the circular UI that is becoming a rapidly popular choice for most inputs in the 3D world. In the 2D world, most menus and options are designed in a linear fashion. However, in the 3D world, a circular UI works better because it increases accessibility for the user. (Please refer to the ‘like’ interface below.) The user no longer has to spread out their arms to choose an option that is at the far end, and merely flick their control device in the direction of the option they wish to choose.
  • Also, when showing a list of contents, they found out that it is better to use a ‘gallery’ view, instead of the common one-content-at-a-time list interface optimized for mobile devices.
An example of the gallery view and circular UI
  • Sometimes, the fact that most users are usually seated when using a VR device acts as a constraint to the design. For example, if someone wanted to ‘scroll’ to the opposite side in the 3D world, the ideal solution would be to literally turn around 180 degrees. However, because the user is seated in most settings, this method becomes a bit problematic.
Person using a VR device (Photo Credit : https://www.uvea.sk/en/news/item/513-nove-moznosti-liecby-tupozrakosti)
  • In order to solve this problem, Facebook decided to introduce scrolling through eye gaze. The scroll speed accelerates based on how far ‘left’ or ‘right’ the user is gazing, so the user does not have to actually move in order to ‘go’ to the intended area.
  • Finally, because it requires a lot of time for users to learn new interfaces, Valdivia also mentioned that Facebook is currently testing out ‘tool’ interfaces; where you grab a tool that is resemblant of a real life object (such as a camera), and operate it like you would normally do (e.g. Take a picture with it by pressing the shutter button).

You can find out more about designing for VR on the Facebook VR Resources page. Many thanks again for this insightful session.

This is a third person interpretation of the session held by Gabriel Valdivia (‘Designing Beyond the Screen’). All content belongs to its’ respective owners.

--

--

Product Designer @ Framer / Previously @ NAVER and The Princeton Review