Interactive 360° Video UI

The Dutch Ministry of Defense (MOD), contracted Sonic Foundry to create an Interactive 360° video interface for VR headset and desktop use. This interface is used for Dutch military recruitment.

The vision

“Imagine you enter a mobile military recruitment van, slip on a VR headset and you are able to choose your own adventure to explore what the Dutch military can offer you. That’s what we want.”

Lead designer and researcher - Natalie Woodford
Collaborators - scrum team software developers

Let’s break it down

Bringing this vision to life was no easy task - not only has Sonic Foundry never delved into the virtual reality space, neither have I. To get started, I had to jump head first into research and keep in mind several key factors to VR success: spacial awareness, interactivity, navigation, comfort, and consistency.

To make this project manageable, I broke it down into three main deliverables:

  1. Design a selectable video library, and VR headset Playback controls

  2. Design an interaction editor to add hotspots, text, and questions to videos

  3. Testing and feedback

Selectable video library

The use case for the selectable video library is to give the user (in this case, a potential military recruit) the choice to watch videos related to their interests.

To create the video library view, I had to first determine if it should be designed in a in a spherical layout (part of the 360° space) or flat layout (video tiles in front of the the spherical 360° space).

vs.

We chose a flat layout to give user a grounding point to reduce motion sickness before they select a video and enter the 360° spherical space. When you use a VR headset you select interactive elements by eye gaze. As the user gazes across the video tiles, the tiles enlarge with show a border to identify which video you select.

Playback controls in VR headset

After playback begins, the users need to have a way to trigger playback controls via gaze. The order, style, and location of these controls went through many iterations, and were a large part of user testing. These controls are:

  • Play/Pause

  • Home

  • Skip back to previous video

  • Skip forward to next video

  • Close playback controls.

Sketches of the gaze-triggered playback controls

The playback controls are triggered when the user looks down (toward their feet) and the controls fly up into view. The user selects a control by gazing at the icon for 2 seconds. To close the controls, you can move your gaze somewhere else, or select the down arrow.

Screenshot of how playback controls look in a 360° video, in a VR headset (buttons shift/rotate depending on gaze)

Interactive videos

Want to see more?
Check out the full <<Interactions Editor project.>>

“Too zoomed in”

The video library tiles felt too close to the user and they users were unable to see all 6 video tiles at once.

An important business requirement for this project was the ability to add interactive elements to videos to aid higher engagement and content retention. These interactions include:

  • Hotspots - clickable elements in a video that would take the user to another video

  • Text - clickable or non-clickable text that can be placed in a video

  • Questions/Quizzing - displaying on-screen questions, selectable answers, and upon selection, navigate to another video.

The Interactions Editor is a robust video interactions authoring tool designed to add clickable or static visual elements to your video. To start you select the time where you want your interaction to appear, choose the type of interaction you want, and edit the properties, such as Shape, color, size, opacity and finally choose what you link to; another video or URL.

Screenshot of Interactions Editor, editing a Hotspot

How did it go?

Early draft designs of Interactions Editor

Usability testing

Testing for VR was a unique experience due to some obvious limitations - You cannot wear a VR headset with the users, but the team and I were able to follow along on a connected laptop.

Test Plan

  • I recruited 7 participants for in-person user testing. The user pool included a mix of first time VR headset users to advanced users.

  • 3 users from the MOD (located in the Netherlands) participated in virtual user testing via Teams.

  • The participants completed a series of tasks while the team tracked their movements on screen as well as their physical movements

  • The participants answered a series of questions about their experience with selecting a video, location of the playback controls, size of buttons, and overall feelings with the interface.

Results

I grouped all participants feedback by category and started to see themes develop across the users responses.

“Physically uncomfortable”

Users had to look down too low to trigger playback controls to pop-up, which was a strain on their necks.

Draft interactive quizzing mock-up

“What does X do?”

Users assumed an X button on the player controls would close the video and bring them back to the video library.

User testing notes

After all comments and observations were categorized, I added a corresponding action items for the project team to review together. During the review, we created GitLab tickets for the action items to then be prioritized by the scrum team.

This project is still in-progress. All tickets and follow-ups that came from the first round of usability testing have been updated and approved. The next deliverable is to add interactive quizzing to the interface and I look forward to updating this portfolio piece as new developments are available.