Cover not available
Article published In:
Information Visualization
Edited by Isabel Meirelles, Marian Dörk and Yanni Loukissas
[Information Design Journal 27:1] 2022
► pp. 102–114

Scrolling into the Newsroom

A vocabulary for scrollytelling techniques in visual online articles

| Neue Zürcher Zeitung, Zürich, Switzerland
ORCID logo | Neue Zürcher Zeitung, Zürich, Switzerland
| Neue Zürcher Zeitung, Zürich, Switzerland

In recent years, scrollytelling – a method to animate content as a reader scrolls through an article – has become an integral part of online visual storytelling. Despite its popularity, few studies have examined the variety of existing scrollytelling techniques. In addition, scrollytelling is still costly to produce. This study aims to generate a scrollytelling vocabulary for newsrooms and creative agencies. By analysing 50 examples, we have identified granular characteristics of scrollytelling elements, or ‘scrollers’, and grouped them into five standard techniques: graphic sequences, animated transitions, panning and zooming, scrolling through movies, and showing and auto-playing animated content. The study provides information designers, developers, and visual journalists with a vocabulary to experiment with different scrollytelling techniques and implement scrollers faster and more easily.

Keywords: scrollytelling, online journalism, visual storytelling, data visualization, design research, infographics, information design, narrative visualization
Article outline
  • Background
  • The problem
  • Methodology
  • A library of scrollytelling techniques
    • 1.Graphic sequence
    • 2.Animated transition
    • 3.Pan-and-Zoom
    • 4.Moviescroller
    • 5.Show-and-Play
  • Conclusion
  • Acknowledgements
  • Notes
  • References
Available under the Creative Commons Attribution-NonCommercial (CC BY-NC) 4.0 license.

For any use beyond this license, please contact the publisher at rights@benjamins.nl.

Published online: 9 December 2022
DOI logo
https://doi.org/10.1075/idj.22005.oes
References
Bostock, M.
(2014, November 3). How To Scroll. [URL]. Retrieved May 20, 2022, from [URL]
Dowling, D., & Vogan, T.
(2014) Can we “snowfall” this? Digital Journalism, 3 (2), 209–224. DOI logoGoogle Scholar
Goldenberg, R.
(2017, April). Responsive scrollytelling best practices. The Pudding. Retrieved May 20, 2022, from [URL]
Greenfield, R.
(2020, December 20). What the New York Times’s ‘Snow Fall’ Means to Online Journalism’s Future. The Atlantic. Retrieved May 20, 2022, from [URL]
Kosara, R.
(2016, May 23). The scrollytelling scourge. eagereyes. Retrieved May 20, 2022, from [URL]
Lu, J., Chen, W., Ye, H., Wang, J., Mei, H., Gu, Y., Wu, Y., Zhang, X. L., & Ma, K.-L.
(2021) Automatic generation of unit visualization-based scrollytelling for impromptu data facts delivery. 2021 IEEE 14th Pacific Visualization Symposium (PacificVis). DOI logoGoogle Scholar
Seyser, D., & Zeiller, M.
(2018) Scrollytelling – an analysis of visual storytelling in online journalism. 2018 22nd International Conference Information Visualisation (IV). DOI logoGoogle Scholar
Stolper, C. D., Lee, B., Riche, N. H., & Stasko, J.
(2018) Data-Driven Storytelling Techniques: Analysis of a Curated Collection of Visual Stories. In N. H. Riche, C. Hurter, N. Diakopoulos, & S. Carpendale (Eds.), Data-driven storytelling (pp. 86–105). CRC Press. DOI logoGoogle Scholar
Sultanum, N., Chevalier, F., Bylinskii, Z., & Liu, Z.
(2021) Leveraging text-chart links to support authoring of data-driven articles with VizFlow. Proceedings of the 2021 CHI Conference on Human Factors in Computing Systems. DOI logoGoogle Scholar
Vallandingham, J.
(2015, April 6). So you think you can scroll talk. [URL]. Retrieved May 20, 2022, from [URL]
Wolf, C., & Godulla, A.
(2016) Potentials of digital longforms in journalism. A survey among mobile internet users about the relevance of online devices, internet-specific qualities, and modes of payment. Journal of Media Business Studies, 13 (4), 199–221. DOI logoGoogle Scholar