As an interaction designer, I'm interested in how humans interact with interfaces and systems. Virtual reality was that emerging medium that presented a whole new set of challenges when it comes to designing usable experiences.
This was my thesis project for my graduate UX program at MICA, the Maryland Institute College of Art, in 2017. Over the course of 8 weeks we were tasked with finding a problem and applying UX principles to propose a solution. My project focused on creating a design pattern for dropped functionality that I noticed in a certain type of VR experience.
Narrative experiences told a story, informed, and educated users, primarily through the use of video and narration. Although well supported through smartphone VR, holding your phone an arm's length away, the experiences didn't scale up to headsets. Abilities to play/pause and select scenes were non-existent on many devices and this was due to a lack of standardization in VR design.
While trying out a variety of experiences to get a better understanding of the interaction landscape, I learned about 3 main types of menu designs:
1. Diegetic, meaning in the scene, was a type of menu that was located in the environment. For example, having to turn around and look towards the door marked 'exit'
2. Non-diegetic, not in the scene, is similar to a heads-up display (HUD) like in Iron Man—elements overlaid on screen
3. 2D menus were the most common and resembled the interfaces we see on 2D screens. These existed in the scene but were visually and physically separated from the environment
I also looked into guidelines from Google Cardboard/Daydream, Oculus, and Unity. I understood the usage of interaction patterns like reticles which give users feedback when hovering over items and fuse cursors which can make a selection for a user when controllers are not present. I also understood some of the human factors involved with designing VR experiences and physical constraints like neck strain and field of view.
My design process was a deep dive into a variety of tools that helped me prototype and iterate on my initial idea.
This physical space by the Inner Harbor in Baltimore drew a parallel to the narrative experiences that I was researching. At the harbor, I look at the ships, water, and landscape and then look down to the sign to get more information about what I was looking at. I took a 360-degree image with my Ricoh Theta camera and viewed it in a headset to imagine what this experience would feel like.
I used Google Blocks to place shapes around the scene and saw the impact of an element's distance from you. I saw that objects up close can make you feel claustrophobic while placing them farther away can make them feel out of reach.
Using photoshop, I started with an image of an equirectangular grid and turned it into a panorama. I could rotate around the scene, draw UIs with the pen tool, and then continue rotating around the scene as if that element was in 3D space. This let me narrow in on how and where elements should be placed in the scene.
Framer let me test characteristics of the interaction. By using the exact degree of a device, I could see how far a user needed to look down to trigger the menu.
I made two prototypes to test with. The first was an 'I Spy' game where users needed to find items around the room and could see the list of items to find by looking down.
In this prototype I learned how important the field of view was. Originally, menu items were horizontally aligned. Although the items were still in the field of view, items on the edge were in the peripheral zone and were hard to focus on. I found that a centered grid was a better than laying them out in a line.
The second prototype was a picture viewer where you could explore 3 different scenes and bring up the menu by looking downwards.
In this prototype I learned about human factors involved with VR interactions. Originally, I kept the menu locked in one location. When they were facing away from the menu, they needed to turn their head and body, in addition to looking down. This required more effort and increased the interaction cost. The solution was to have the menu appear in front of them whenever and wherever they looked down.
I performed in-person moderated usability tests to gauge the effectiveness of the designs. I received a funding grant from the Graduate Research Development Grant Committee at MICA so that I could pay testers a financial compensation. I posted to local slacks like UX Baltimore and Free Code Camp in order to find participants. I tested with 5 users which lasted about 30 minutes each and involved watching users interact with the prototype and asking them questions afterwards.
The workstation is a head-tracked interaction which brings up an interface that helps users access a contained set of controls or secondary information.
It was important to keep the interaction accessible and readable:
1. The action of 'looking down' can be hinted to through affordances, similar to how websites have a 'scroll down' icon in the hero section of the site
2. It's advised to keep the menu low and out of the way, but be aware that users may be sitting down so their neck movements are limited
3. Dimming the scene helps the user focus on the menu and this technique follows the game design principle of 'guiding users with light'
4. Keeping content well within the field of view helps the user avoid exerting extra effort which would increase the friction with the experience. Always keep the workstation in front of the user when the user looks down. The workstation may move with the user only if the items in the menu just need to be read, not selected or interacted with
Implementing the Workstation
The SPACED challenge involved creating an app prototype for a fictional space travel company. I used Framer to create an experience that allowed the user to look around "space", select a planet, and then customize the flight. While rotating, the user could look down to bring up the Workstation, a 2D menu interface containing flight attributes like dates and number of passengers.