preston.so

Immersive Content and Usability is the first-ever book on immersive content and spatial content design, available now from A Book Apart.

Writing

How to storyboard immersive content for three-dimensional spaces

March 15, 2023

Preorders are now available for my new book Immersive Content and Usability, coming April 18th! Want to know more about A Book Apart’s first-ever title on voice interface design? Preorder the book, learn what’s inside, read my announcement, and subscribe for more insights like this article.


Common in cinematic circles and visual design practices, storyboarding is a paradigm of illustrating user journeys that focuses on how content looks and works from the user’s standpoint first and foremost, especially in flows that straddle multiple digital channels. Storyboarding is an extraordinarily useful tool in immersive content, however, because the copy we work with is fundamentally about how users move through spaces and consume content in the context of those environments.

Storyboarding, in both two-dimensional and three-dimensional forms, is just one of the many topics I cover in my new book Immersive Content and Usability, the first-ever book on immersive content design and spatial content strategy. Last week, I announced A Book Apart’s first-ever book on immersive experiences is coming on April 18th, and I’m happy to share that preorders are now available as of today. This blog post will give you just a quick taste of what’s coming, but if you can’t wait to read more, take a peek inside the book and sign up for my newsletter!

Storyboarding for immersive content

Storyboards are commonly used in filmmaking to depict the entire narrative track that users undergo, from an initial conflict to the resolution of that tension, and this is just one of the reasons for their popularity. That doesn’t mean they’re easy, however, as storyboards are time-consuming and seldom optimal for depicting all possible journeys a user might embark on within a digital experience. When used in conjunction with other design artifacts, they can be a powerful tool to deeply empathize with a user by forcing us to perceive the world through their senses and not our own, whether that means sight, sound, or other sensory modalities.

Flow diagrams are another common approach—and one we’re typically already familiar with as designers—to depict end-to-end narratives through cohesive digital experiences. Both flow diagrams and storyboards approach the problem of describing a user’s journey from different but equally compelling angles. You might storyboard before drawing flow diagrams, as a user-first means of validating your direction, or you might build flow diagrams before sketching storyboards, as a content-first means to evaluate how your journeys look and feel in the mind of a real user. You might even push forward both design artifacts at the same time incrementally, leveraging both flow diagrams and storyboards to check your assumptions and evaluate your journeys from both angles.

There are two types of storyboards you should be aware of for immersive content:

  • Traditional cinematic storyboards. Animated and live-action films often share this same initial step in planning and ideation: the famous screen-by-screen storyboard, which is used by directors and filmmakers to illustrate sets, character traits and actions, and important plot elements. Generally drawn in a two-dimensional grids, these storyboards are also commonly found in web, mobile, and especially game design, though like the movie screens they emulate, they’re limited by their narrow rectangular focus.

  • Panoramic and 360º storyboards. Storyboards today are witnessing unprecedented innovation in the XR design space, and today there are new templates (from multiple vantage points) and products (like Storyboard VR) available to experiment with. These typically entail a bird’s-eye 360º view of your immersive space This is perhaps the most unstable area when it comes to XR design, as there is substantial and diverse progress happening in a variety of exciting directions.

Think about these things when drawing storyboards:

  1. Decide what a scene is, which should map onto some key moment in the user’s journey such as an illustration of the key tension and final resolution of the user’s friction

  2. Decide what a movement is, which depends on how your users navigate your space, whether physically by moving or virtually by navigating through a joystick or mouse—and how to depict it across two or more scenes

  3. Decide what a representative sample of storyboards is that give you confidence about the possible journeys you enable, especially if your journeys are nonlinear or unpredictable

As more concrete depictions of what users experience, storyboards have their advantages and disadvantages. Illustrating in high fidelity what users will interact with might be useful in its exactitude and faithfulness to both the space and your content’s eventual result, but it might not surface each individual content item or “atom” prominently enough in its description of what’s going on. As with any design artifact we use for content-driven user experiences, the most important principle is to show a narrative from start to finish, portraying the user’s journey each step of the way.

Traditional cinematic storyboards

It can seem a bit strange to use movie making techniques to ideate on and prototype content, but interaction designers and content designers alike have used traditional approaches to storyboarding for years now in more established realms like web and mobile design. I’d argue as well that storyboards can make essential questions like how cross-channel interactions influence user behavior and their reactions to content easier to answer thanks to their lack of dependence on a single screen. Now that our physical environments, real or virtual, have become our “screens,” we can finally free ourselves from the biases that tie us to designing for the individual device screens in our midst.

With a simple 2D grid of rectangles, like we see above, we can tie each of the individual moves a user makes, whether they’re physical movements or digital interactions, to individual scenes, framing them with scenes that depict the starting and ending point of the user on their journey across the space we’re designing for. Below, you can see a storyboard for the connecting passenger’s experience at the airport covered in my book Immersive Content and Usability.

I’m a terrible sketch artist, but you don’t need to be an animator or otherwise skilled in art to create a basic storyboard. Nonetheless, if you’re worried about the varied and imaginary interpretations your team, your stakeholders, and even a future you might mistakenly glean from your chicken scratch, you might want to consider authoring additional narrative text that describes the events in each given scene.

While 2D storyboards are excellent for getting a sense of how users will engage with your content and interact with your immersive environments, they’re not always the best tool for our needs. That’s because today’s head-mounted displays confer much more visible area than the rectangular screen a movie theater experience would suggest. As XR headsets become more commonplace and powerful, as content designers and interaction designers, we need better tools to guide our users to the content they need at any given moment, especially those that allow us to depict our spaces as 180º, 360º, and fully realized VR storyboards.

Panoramic and 360º XR storyboards

Over the past several years, storyboarding for XR experiences has seen a stunning amount of innovation, rapidly outpacing the ability for traditional design and prototyping tools to keep up. One of the most intractable challenges for designers looking to implement XR interfaces has been the fact that XR design requires a fundamentally different approach from other forms of immersive design, such as for digital signage and locational content. A third dimension adds substantial complexity, and moreover, XR headsets differ from devices with flat screens in that they can accommodate a panoramic 360º perspective.

These are still early days for panoramic and 360º XR storyboards, and the teams I’ve worked with sadly didn’t ever have an opportunity to incorporate them into our design process. Fortunately, however, this is a space in design tooling with a formidable amount of innovation happening at a rapid clip. In this section, we’ll cover just a few of the ways you can illustrate storyboards for extended reality that accommodate how immersive headsets work today and how users will experience them. They also present thrilling questions for how storyboarding techniques could improve in two dimensions.

  • God’s-eye-view storyboards. Vincent McCurley, based on the foundational work of Mike Alger on content zones, created a storyboard template that places the user at the center of a circle viewed from above, enabling a 360º perspective of what the user might see within a reasonable distance of 20 meters. The light gray area before the user represents Alger’s main content zone, while the mid-gray areas to the left and right of the user represent Alger’s peripheral zones.

  • Point-of-view storyboards. Based on this model, Andrew Leitch and Saara Kamppari-Miller separately created storyboard templates that surface both McCurley’s God’s-eye view and a depiction of the user’s given FOV at that moment, allowing both the God’s-eye-view perspective and a forward-looking perspective to shine through, making the storyboard more easily understandable. Leitch’s storyboard template also includes a rear-facing view.

  • ​​Panorama grid storyboards. Finally, Saara Kamppari-Miller and Michael C. Albers have demonstrated their excellent work with panorama grid storyboards, which endeavor to depict every possible FOV from an immersive headset at a single point by leveraging a 360º panorama grid or equirectangular grid, which “maps a 360º spherical space onto a rectangle with 360 degrees equally spaced from the left to right and 180 degrees equally spaced up and down,” as Albers writes. Templates are available with Chu’s ranges of motion and Alger’s zones. These equirectangular grids can then be exported as a panoramic image and viewed in XR headsets to simulate what a user would actually see as they reorient themselves.

Conclusion

It’s a truly exciting time for immersive storyboards, and these emerging techniques can also inform how we present our design work to stakeholders beyond just virtual reality use cases. In the XR projects I pursue moving forward, I’ll certainly continue using these templates and looking for others to explore how best to represent immersive content in its natural habitat.

On April 18th, my new book Immersive Content and Usability hits bookshelves! Thanks to my new book, your content will finally journey to the final frontier of content design: the spaces around us and the environments that define our analog lives. To learn more and to be notified when my newest book officially launches, sign up for my newsletter, check out what’s inside, and preorder it at A Book Apart’s website!

Before you go ...

Subscribe to my occasional newsletter. No spam. Just resources and exclusive ideas about omnichannel content and more. Also, be the first to know when my book Immersive Content and Usability is launched.

Trusted by

  • Genero
  • Srijan
  • Tag1 Consulting