Understanding the Impact of Spatial Immersion in Web Data Stories

TL;DR

This paper investigates spatial immersion in web data stories by identifying design patterns that evoke a sense of space and testing their impact on reading experience. Through collecting 23 immersive web data stories, the authors derive six design patterns and then implement four data stories (DS1–DS4) with three variants (static, animated, immersive) using Three.js, followed by a crowdsourced within-subject study across 600 participants. Results show immersive variants heighten interest and persuasiveness relative to static or animated versions, while ease of understanding and trustworthiness do not consistently favor immersion, highlighting trade-offs in design choice. The work offers practical design implications and calls for enhanced authoring tools to support scalable, multi-pattern immersive web data storytelling on the open web.

Abstract

An increasing number of web articles engage the reader with the feeling of being immersed in the data space. However, the exact characteristics of spatial immersion in the context of visual storytelling remain vague. For example, what are the common design patterns of data stories with spatial immersion? How do they affect the reader's experience? To gain a deeper understanding of the subject, we collected 23 distinct data stories with spatial immersion, and identified six design patterns, such as cinematic camera shots and transitions, intuitive data representations, realism, naturally moving elements, direct manipulation of camera or visualization, and dynamic dimension. Subsequently, we designed four data stories and conducted a crowdsourced user study comparing three design variations (static, animated, and immersive). Our results suggest that data stories with the design patterns for spatial immersion are more interesting and persuasive than static or animated ones, but no single condition was deemed more understandable or trustworthy.

Figures (12)

• Figure 1: DS1 shows bar charts comparing food consumption of two cities. To visually connect scenes in the narrative, the animated (A, B) continuously transform and scale the bars in 2D, while the immersive (C, D) rotates and moves the camera in 3D.
• Figure 2: DS2 visualizes how the household income distributions changed between 2009 and 2019, in relation to the change points. While the animated (A) visualizes the change as 2D animations, the immersive (B) leverages the realistic ocean surface in 3D.
• Figure 3: DS3 compares the three economic downturns during the pandemic, and how quickly they got recovered. While the animated utilizes (A) 2D data zoom and (B) line animations, the immersive uses (C) fading out unimportant elements, (D) a flying camera in 3D space, and (E) dramatic 3D perspectives.
• Figure 4: DS4 visualizes the impact of historical events on the mortality rates in France. (A) When introducing the heatmap, the animated variant gradually reveals the 2D heatmap, while the immersive uses the camera flying from the top to the quarter view. (B) To visualize the trend of infant mortality rates, the bars in the animated vertically grow, but the camera in the immersive flies from left to right. (C) To highlight mortality rates for specific years, the static and the animated use the color and thickness encoding, but the immersive one simply moves the camera to the appropriate position. (D) In the static and animated stories, readers can explore the historical events by clicking thumbnails, but the immersive requires readers directly control the position of the camera.
• Figure 5: The within-subjects study procedure and the questionnaire page