WHAT
The scroll to pan pattern is a technique to walk users through a series of maps one step at a time. It uses the browser’s scroll bar to move through a series of predefined map content.
WHY
The existence of a scroll bar indicates that more content is available below the fold, as in a newspaper fold, which separates the first screenful of material from the remaining content. Users have learned that scrolling up and down through a page reveals the hidden part of the page. Using the mouse or keyboard has become second nature to them. Builders can leverage the user’s familiarity with the scrolling technique to create smooth transitions between a series of predefined maps, images, or other media.
WHEN
Scroll to pan is widely used in storytelling apps to support the narrative by walking the user through the data in the way the author intended to tell the story. This removes the burden of the user to explore the map and figure out for themselves what is important. Instead, the app takes the user from the big picture of the data to specific insights or connects a series of events or places that are related to each other. For instance, the app might want to introduce users to the series of World Cup soccer stadiums or tell a story about the ruins along the Inca trail, a multiday hiking tour in the Peruvian Andes. As the user scrolls the page, the story consecutively shows information about each stadium or ruin, respectively, side by side with its location.
HOW
Users understand how to navigate an app following familiar scrolling patterns. Use this knowledge to update the map choreography, such as pan or zoom, as new content becomes available. Show narrative panels, sometimes also called sidecar, either superimposed on the map or on a panel next to the map. Their purpose is to narrate the story and explain what is happening. They also draw attention to the map visualization and establish a relationship between map layers.
The following approaches can be used to update the map choreography:
- Pan and zoom the map extent to guide users through a series of places.
- Toggle layers on and off to smoothly animate from one view to the next as a means of comparison.
- Progressively reveal layers to build up the complete picture, which is less overwhelming than showing all the layers at once.
Anticipate the situation in which users don’t immediately know that they are supposed to scroll the page. In these situations, consider adding the following visual aids to indicate that there is more content to explore below the fold:
- Intentionally cut off content elements such as images or a paragraph of text.
- Place a down arrow toward the bottom of the screen.
- Add a carousel navigation such as clickable dots that serve as page jumps and arrows to move back and forth. This navigation should be sticky along the side or at the bottom of the screen.
- Animate a small pull-up motion.
- Autoscroll the story at constant speed. This approach works well on static displays or when embedded in an operational dashboard.
Scrolling usually happens in a continuous fashion, but sometimes the page may move in discrete increments — for instance, by clicking on a dot on the carousel navigation.
EXAMPLE
Mapping the COVID-19 Pandemic is a story made using ArcGIS StoryMaps software about the emergence and spread of COVID-19. The app uses scroll to pan to illustrate the path and impact since its outbreak. It starts with a map of its origins in Wuhan, China. As the user continues to scroll down the page, the map zooms out and pans to different parts of the world. This automated map behavior goes hand in hand with the development of the story that shows how the outbreak caused actions to quarantine the region, suspend domestic and international travel, and deal with first reports of cases and fatalities coming in. It also shows how the virus started to spread into other countries in Europe and eventually the United States. Descriptions of these events pass by on the left side while the map pans and zooms to new regions and progressively reveals analytical layers that support the storyline.
