Four Ways to Tell a Story with Place

Note: Since this story was originally published, a new block—guided tour—has been added to the ArcGIS StoryMaps builder. This block provides another way to achieve some of the techniques described below. Learn more about when and how to use guided tour in  this blog post .

Interesting arrangements of visual content are key for a fun and engaging experience. But layout isn't just fun—it's serious business.

The way in which components of a web page are arranged strongly affects how a reader navigates the content.

Take the layout of an urban street system: it affects how traffic flows through a city. So too the structure of a web page guides a reader through its layout.

Studies show that people read on the internet differently than they read, say, a book—but in predictable ways.

For example, readers often skim in an F-shape pattern. Questions like proximity of text to graphics, how portions of text are broken up with white space, or the use of headings and formatting strongly influence where a reader invests her or his attention.

Immersive digital storytelling relies on persuading readers to forget that they're looking at a computer screen. This creates a more intimate experience that the reader is more likely to retain. Two techniques help with producing a sense of immersion:

• Expand high resolution media to fill the full width of screen space so that the reader feels encompassed by it—immersed;
• Tie the behavior of media (images, videos, sound) to the reader's actions (such as scrolling or swiping).

So, with all this in mind, let's check out four different ways you can play with layout to guide your reader's attention and tell an immersive story.

Tools in StoryMaps allow for immersive stortyelling. Blocks like  sidecar  enlarge the main media and lock it into place. Supporting text and media scroll by in a side narrative panel. A number of other immersive blocks, such as  slideshow  and  guided tour , offer additional opportunities to tell a visually gripping story.

An example of sidecar in action is the  Seven Wonders of the Ancient World . Here, maps are large and locked in place, while images are small.

For this story, it's important that readers understand where this place is located. Ancient place names often differ from their modern counterparts, so the map is large and prominent to help identify the place.

Supporting images are still useful. Historical plates appear as small images next to text in the narrative panel. This accomplishes two things:

1. A small image defers attention to the large map, reinforcing the priority of the place;
2. An image (albeit small) is still interesting, and therefore draws the reader's gaze back to the side panel to take in the supporting facts.

Let's flip this relationship on its head. In the  New Seven Wonders of the World , it is the images that are enlarged, while maps are kept small.

A giant map in this case is a waste of valuable space. We expect our audience will generally know where these famous sites are located.

On the flip side, these sites feature beautiful, high resolution photographs (here adapted to appear like watercolor paintings). We want to put those images front and center:

1. Enlarged media draw attention to the visual experience of the light, color, and texture of the image;
2. A small map, if called upon, is available to supplement the reader's knowledge and confirm its location in the world.

To switch gears away from the sidecar block, let's arrange media in-line. In the  Seven Engineering Wonders of the World , small images float adjacent to text, while full width maps offer readers the opportunity to explore the site interactively.

Several of the engineering wonders, such as the Panama Canal or the Delta Works in the Netherlands, are extensive complexes. They require more than a single point.

While image, title, and facts provide some quick context to the reader and slows the reader's scroll, the real draw is the full width map. A large map provides plenty of screen space (at least on desktop) to pan, zoom, and explore the structures.

Not all content on the internet should be 100 percent full width and interactive. Readers can become fatigued seeing the same experience again and again. The  Natural Seven Wonders of the World  offers a more traditional browsing experience that is none the less absorbing.

While the experience may be familiar, the layout presents these natural phenomena in a punchy, relatively compact format:

• Title, then...
• Floated map + facts, then...
• Medium-width, colorful image.

This layout provides an easy, scroll-able experience. Through its straightforward layout, it reinforces the lighthearted, listical nature of the content.

Like the New Seven Wonders, a small map provides geographic context, while the real draw is a brightly colored illustration-style image. But these images don't require as much screen space that a fully interactive map merits.

1. Large immersive maps: Highlight the place—small images anchor the text in a secondary role.
2. Large immersive images: Focus attention on a beautiful image—if called upon, locator maps supplement the reader's geographic knowledge.
3. Full width maps: Provide screen space to interact with a map and explore its features—small images add texture and visual interest to space between maps.
4. Large scrolling images: Create an easy but punchy listical experience with the focus on a colorful image—small maps and text break up the space between images.