How to display text in a 360º video experience

Craig Saila
5 min readMay 2, 2017

--

While creating purely virtual worlds remains the domain of experts, affordable 360º video cameras allow anyone to create immersive experience. Helped by Samsung (which is now selling a 360º camera with its phones), The New York Times launched a daily video franchise built around the experience. I’ve written about these micro-docs before, but the more I watch them, the more I’m distracted by one element The Times normally does best: Text.

Since its first video, the text has always maintained a consisted placement. For every Daily 360, the text will appear in the video’s “north” and “south.”

NYT 360 Video radar (left) compared with Facebook (right)

To determine which way you’re looking, though, viewers need to orient themselves using the radar at the bottom corner of the screen.

Cleverly, when the “eyes” at the centre of the radar are level, and the gaze is at the 12 o’clock position, the viewer is looking north. If the gaze is at 6 o’clock, the viewers looking south.

Months—and many videos later—later, I’ve find myself making a choice at the start of each video: Keep my viewpoint focused on the text, so I can follow the story or explore the space, and forget the story.

The compromise feels unfortunate given all the work being done by those developing virtual reality experiences. Alex Chu, Mike Alger, and others, have spent a lot time mapping the placement of items within a virtual reality viewport.

A screen capture from one of Mike Alger’s presentations on virtual reality.

These virtual reality designers have found that by effectively using these zones, viewers gain a better experiences. For example, placing elements at the edge of a screen inspires curiosity. Placing it in the centre enables focus and aides concentration.

These zones also suggest why my Daily 360 video experiences are often disorienting and occasionally frustrating. By placing the text at the the top edge of the “Content Zone,” the text feels almost peripheral, but its value proves otherwise.

The explanatory text, often critical to the narrative can be missed on first viewing.

The research also suggests a few simple things The New York Times could do to improve the legibility of the text, too. Following the example of good subtitles, a non-white text with a slight shadow placed just below the viewers gaze proves to be much more comfortable to read.

Concept: Text or menus placed just slightly below the viewers gaze, set at near the optimal 20 px. Adding a slight colouration and shading to the text helps makes the content more visible.

But how do you discover where the text appears?

One approach could be anchoring the text within the “Workplace Zone,” centered on the viewer’s gaze. This keeps it out of a normal view, and makes better use of the often ignored floorspace around the camera.

Concept: When viewed straight ahead, text in the “Workplace Zone” would feel like subtitles to a scene.

Knowing the text is always available, the viewer can quickly tilt their head down to read the text, or up to explore the scene.

Concept: A viewer can briefly look down to read the entire text off the “floor.”

Yet another approach would be to call attention to the anchor text in the radar that appears in the bottom left of the videos. The New York Times currently rotates the viewers “eyes” in the radar, and anchors the text at the top and bottom. The appearance of two small stripes when text is visible would reenforce this practice in the viewers mind without overly cluttering the experience.

Concept: Two indicators would help remind viewers the the text is visible when their “eyes” are level.

Alternately, the “eyes” could always be level in the radar, and the text markers would rotate. This method not only re-enforces the brand identity of The Daily 360 franchise, it also reflects the viewers own self-centric mindset while explore these spaces.

Concept: Text markers show the viewer where to look when text is present.

Another method to make the text more visible for the viewers is probably hindered by the desire to let as many people view the video as possible.

In the the Daily 360 videos, the text is always rendered as part of the scene. In essence, the messages appear as though they fixed in place. As a result, the text can appear at odd angles to the viewer. The preferred solution would be to render the text so it’s parallel to the viewer’s gaze, almost as if it was an augmented reality experience of the same scene. The way the videos are rendered, though, likely makes it impossible to know the viewer’s gaze direction.

While writing this, I did a quick survey of other 360º video experiences, looking for those mixing text into the interface. There’s not a lot out to be found, but just before publishing this, Google announced its new high-end Jump 360º video camera. The promo video showcased some stunning video, while calling out the camera’s feature as text overlays.

Screen capture of a promo video with anchored text and YouTube’s 360º viewing controls

Much like the Daily 360 videos, the text is anchored to the screen and not the viewer’s gaze. But, the text appears at all four compass points (north, east, south, and west) and has a slight background blur to make it more legible. Even these minor changes make the reading experience much better.

The results of a Crazy-8 style exercise around video UI

These few samples show that although there’s not a lot of mainstream work being done around the UI of 360º video, small changes can make big differences.

With that in mind, I’ve did some quick sketches on alternate radar designs to find ways to make viewing more intuitive.

There’s so much more that could be done, though.

If you’re exploring designs for 360º video interfaces, or know of someone who is, mention it in the responses below. Assuming there are others playing in the space, I’ll update this article—or post a new one—compiling some of the best examples so we can all build better immersive video experiences faster.

--

--

Craig Saila

Designer of things. Builder of ideas. Tearing it up in a hypernation.