How to diagram circulation through three-dimensional spaces for immersive contentApril 18, 2023
My new book Immersive Content and Usability is now available as of April 18th from my publisher A Book Apart! Take a look at what’s inside, learn about immersive storyboarding, read my launch announcement, and subscribe to my newsletter for more in-depth content about immersive content strategy and spatial content design.
To think about flow through physical environments, we have to think both like architects planning grand spaces and like users visiting these places for the very first time. Typically, many designers use flow diagrams to depict an individual journey across an interface, and we can do the same with immersive environments, as I discuss in my newest book Immersive Content and Usability. But sometimes, that isn’t enough.
We also have to consider, as a whole, all of those possible journeys users may take through the spaces in our midst as a single unit. In architecture, the sum of flows people take through spaces is known collectively as circulation: how people move through and interact with a building in myriad ways, mediated by “elements that affect our perception of the forms and spaces of the building,” as Francis D. K. Ching writes in Architecture: Form, Space, and Order. Circulation diagrams in building architecture look like how we’d imagine water coursing through corridors, down stairwells, and across thresholds—or like a school of fish dividing where needed when approaching obstacles before them.
There’s just one problem: how architects determine the ways in which users circulate through spaces might not match how immersive content designers determine the ways in which users circulate through them. After all, building architects are focused on how to move users through spaces efficiently, not necessarily how users access content most efficiently in those spaces. This holds especially true for scenarios in which content designers are conceiving of content in pre-existing spaces whose original construction they had no say in. That’s where we have to consider circulation diagrams as part of our toolbox for dealing with immersive spaces.
Since I don’t cover circulation diagrams in detail in my newest book Immersive Content and Usability—as they can quickly get esoteric in formal architecture and are difficult to create without complex software—this article covers it from a more basic, simplified perspective. For more insights like these, you can now order my book directly from my publisher A Book Apart, and while you’re waiting for it to arrive, take a sneak peek inside the book, check out a tutorial about immersive storyboarding, read the announcement blog post, and sign up for my newsletter!
Types of circulation through spaces
From my perspective, when it comes to content-driven immersive experiences, there are three types of circulation that each journey we undertake through spaces can fall into depending on the nature of the immersive content we present to users:
Hub-and-spoke circulation. In hub-and-spoke circulation, users begin in one of several central areas before dispersing to various other spaces, returning to those central areas later to embark on new stages of their journeys or to end them. Museums, hotels, and convention centers often fit this pattern.
Point-to-point circulation. In point-to-point circulation, users flit from point to point, perhaps with a variety of aims in mind, depending on their needs from that journey. Grocery stores, shopping malls, department stores, and open-world video games often fit this pattern.
Linear circulation. In linear networks, users follow one or several commonly shared journeys with only a few deviations from a usual path and with a clear destination in mind. Airports, transit hubs, subway stations, and VR worlds built around “stories” often fit this pattern.
Let’s take a look at how each of these models fits into how we can articulate circulation for journeys traversing our immersive content.
Hub-and-spoke circulation allows people to use large central spaces as a launchpad for journeys into progressively smaller, more specific spaces. Many physical spaces are designed like the hub-and-spoke networks familiar to us already in other contexts like airline route maps and subway systems. Physical environments such as museums, for instance, like the Field Museum in Chicago or the Los Angeles County Museum of Art, often have a single focal point that all visitors pass through before moving, tendril-like, into galleries and exhibits, thus allowing them to see museum spaces in any sequence they prefer while maintaining a center of gravity, or several centers of gravity, in a central hall or location. Whenever museum visitors want to see a different exhibition or gallery, they return to a grand lobby or other primary space to access those smaller spaces.
Hotels and convention centers, too, generally have grand lobbies or halls that people use to fan out into progressively smaller spaces: hotel rooms in the case of hotels and lecture halls in the case of convention centers. Both also have additional large spaces where guests often congregate: hotels have breakfast restaurants and evening bars, while convention centers have exhibition halls for sponsor booths. In all of these architectural examples, the functions of these buildings determine how we use them and how we travel through them.
Hub-and-spoke circulation, of course, is also a mechanism we also find on content-driven websites to organize information. From a home page, we use a navbar or sitemap to drill down in the website’s hierarchical structure in search of the content that suits our needs, often in growing specificity. We might alight on landing pages that further pivot us toward the information we’re seeking. When we return looking for new or different content, we head first to the home page to follow the same navigational pattern again and again.
When we illustrate hub-and-spoke circulation on the point and range maps we’ve drawn for our immersive content (see Chapter 4 of my book Immersive Content and Usability for more on mapping immersive content), we need to depict all possible paths the user might take and imagine we’re accounting for all possible journeys we’ve already compiled—no small task.
Let’s take, for instance, the common example of an art museum that enables visitors to use machine vision on the institution’s smartphone app to scan an artwork in front of them and acquire more information about that piece in an AR overlay. Drawing a circulation map for this AR interface entails superimposing all realistic journeys a user can take across the museum’s gallery spaces onto points that represent the sum of all possible journeys. This might mirror how the museum already expects visitors to traverse its galleries, with the caveat that some people might abandon a gallery if they’re less interested in it and reemerge into a higher-traffic area to explore others.
A simplified example of a hub-and-spoke circulation diagram, showing a natural history museum with a grand space acting as a “hub,” while individual exhibit rooms and galleries serve as “spokes.”
Unlike hub-and-spoke circulation, point-to-point circulation prizes the path of least resistance from one point to the next, and to the next, and to the next, rather than prioritizing the return of a user to a central location for their following step.
Many brick-and-mortar department stores and supermarkets follow this pattern, with products that customers want situated in a variety of different areas or aisles throughout the sales floor. Consider your own regular visits to a grocery store, for instance. With a shopping list in hand, you may have a particular sequence in mind—produce, then deli, then dry goods—that bears no resemblance to the order in which other shoppers move through the store, who might make a beeline for the dairy section and then the deli instead.
Point-to-point circulation is characterized by one undeniable truth: it’s impossible to predict how each and every person will move through a grocery store or department store to find what they need, because no two journeys are the same. A Saturday at the shopping mall, too, follows this pattern, as families aimlessly wander around, finding a store that might pique their interest—or heading directly to the one or two stores that they know carry the products they need.
And if you’re walking into an unfamiliar place, like a shopping mall in a new city, a recently renovated department store, or a brand-new supermarket, the act of journeying through a point-to-point network can feel a lot like typing in search terms into Google until you come across what you need or a real-life Wiki Game, a race game on Wikipedia in which you start at a random encyclopedia article on the site and click through the smallest possible number of links to arrive at a set destination without typing the URL directly.
For many immersive content experiences, particularly those that deal with brick-and-mortar locations supporting people looking for goods or services, point-to-point circulation will often be the most efficient way to compose flows within a given physical space, simply because our needs differ each and every time we visit these environments. And it’s for this precise reason that depicting point-to-point circulation is challenging, especially for supermarkets with a large variety of products, because there’s simply no way to illustrate every possible permutation of journeys through individual lines and arrows without coloring each aisle in a solid color.
A point map demonstrating why brick-and-mortar stores such as supermarkets don’t follow a more straightforward pattern.
Because of this, I recommend that designers choose a representative sample of journeys through the space, like a subset of the flow diagrams from Chapter 4 of my book Immersive Content and Usability, and depict those and only those to keep the circulation map as readable as possible. For instance, here’s an example of a point map depicting point-to-point circulation for our grocery store prototype, where we delineate several representative journeys the user can pursue without going too far as to render the map unusable.
A simplified example of a point-to-point circulation diagram showing just one of the possible paths users can take to access all individual points of interest and associated product information.
Linear circulation generally follows a set pattern with little deviation regardless of the user, because everyone starts from either one or few origins and proceeds to one or few destinations. Though there might be a few forks in the road that accommodate slight detours, linear circulation typically returns to a small subset of possible paths.
There are many physical environments where a linear approach to user journeys is appropriate, like airports, transit hubs, and subway stations, all of which are intended to get a user from their origin to their destination as quickly as possible with as few detours as possible. Though many of these buildings look hub-and-spoke from a bird’s-eye view, their purposes and the journeys users take through them hew to a tiny list of possible paths. Consider train stations, which are structured in a hub-and-spoke form but aren’t intended for single journeys to leverage them that way. Unless their train is delayed, users don’t typically go to a track and then return to the central hall to explore a different platform.
Linear circulation in physical spaces is most similar to onboarding flows and wizards in web and mobile apps—like account sign-up and online checkout processes—because it’s in the user’s interest to remain relatively focused on a single track to complete a transaction rather than to search willy-nilly to find what they need. Many online checkout processes even hide website headers and navbars to discourage users from abandoning the checkout flow, and they often also instruct users not to hit the back button or reload the page after submitting credit card information for fear of double-charging or interrupting a payment in progress.
The vast majority of airports follow this same trajectory, regardless of whether a user is connecting at, departing from, or arriving at the airport. There are only a few possible journeys that the user can take, apart from a few deviations to a food court, an airline lounge, or public restrooms, for instance. If we’re using beacon technology to deliver content based on a user’s relative location, not only does this mean that we can position a few beacons at certain key locations we can rest assured every user will pass through, it also means that our range map (see Chapter 4 of my book Immersive Content and Usability for more information about range maps) depicting those beacons can also capture the full spectrum of realizable journeys any passenger can take.
Here’s an example of how we can combine all of these possible journeys, including the flow we represented in the range map earlier in this chapter, into a simplified linear circulation diagram.
A simplified example of a linear circulation diagram demonstrating why subway stations tend to demonstrate more linear journeys; there are specific origins and specific destinations, and there are seldom points of interest in between or areas considered “hubs” and “spokes.”
Depending on the complexity of the physical environments you’re working in, whether they’re brick-and-mortar or virtual and imagined, these three categories might not effectively encompass the possible types of circulation that you’ll need to consider for your immersive content. You might need to combine some of these types depending on the needs of your user at a given time or in a given part of your space, and there might be other ways to illustrate how users circulate around their spatial surroundings that work for you and your team. For my past projects, I’ve found these approaches worked quite well in illustrating what we needed as we presented our work to stakeholders and neared actual implementation.
It isn’t easy to map immersive content, but it’s the final step that fully synthesizes the spaces we’re designing for with the content we want to deliver to our users. Spatial maps and circulation diagrams that depict all the possible journeys that users can take across that content makes the immersive content you’ve designed feel real and substantial. It can also be either the final step of your design process before a handoff to developers and engineers or a bookend to another iteration before another return to the drawing board.
One of the discoveries I’ve made over the years is that how we think about content in physical space also enriches how we approach web and other content. When we stretch our content, formerly housed comfortably in screens and never breaching those boundaries, to well beyond its limits by positioning it in a real-world or fantastical setting, our understanding of our content’s potential widens considerably. And as the lines continue to blur between the abstract web and concrete spaces, we’ll soon also see more cross-pollination between these two worlds, something we already see in the interpolation of websites and apps in virtual worlds and vice versa.
If this article was of interest to you, or if you’re looking for ways to extend your two-dimensional design canvas or content strategy into the three-dimensional universe, check out my just-launched book Immersive Content and Usability! Get a paperback or ebook version directly from my publisher today, see what’s inside my book, read my tutorial on immersive storyboarding and my teaser blog post, and subscribe to my newsletter.