journal article·2024-02-08Open access

A Design Language for Prototyping and Storyboarding Data-Driven Stories

Morteza Asgari, Thomas Hurtut

Applied Sciences· Volume 14· Issue 4

Abstract

Data-driven stories (DDS) are digital forms of storytelling that arrange data and visualizations to communicate a narrative of information to an audience. They have been growing rapidly over the past decades. As a result, a great degree of versatility appears in the forms of published DDS. The recent structures of DDS are more complex, respecting their arrangement, composition, features, and inner parts. In the current academic research, neither storytelling techniques nor any taxonomies suggest visual mechanisms to distinguish between different layouts, compositions, and arrangements. The lack of an expressive visual solution that integrates different parts of DDS under one structure prevents the authors from trying more alternative design paths in the story design process. In this proposed work, we unify all the constructing parts of DDS to define the narrative structure as a visually structured representation of the DDS narrative, which is formed and designed by their constructing elements. This solution proposes a design language consisting of a set of design rules that integrate the visual elements to represent the DDS narrative structure. Our evaluation of the audit process out of 100 DDS examples confirms that the design language is comprehensive, expressive, and versatile. Additionally, we developed DataStoryDesign, a system that incorporates this visual solution to facilitate prototyping and storyboarding DDS for a team of DDS authors. The preliminary result of the exploratory evaluation indicates that such a solution is effective in prototyping and storyboarding DDS. In addition, our findings confirmed that the existence of our design language improves the visual communication between different personas in the DDS production workflow.
Source: crossref · Quality: baseline

Research context

OpenAlex topics: Data Visualization and Analytics · Persona Design and Applications · Video Analysis and Summarization

SciVX discovery tags are terminology-based. OpenAlex topics are source-provided classifications.

Affiliations

Computer and Software Engineering Department, Polytechnique Montreal, Montreal, QC H3T 1J4, Canada

Funding

NSERC Alliance

References (50)

Show source-provided references
1. Riche, N.H., Hurter, C., Diakopoulos, N., and Carpendale, S. (2018). Data-Driven Storytelling, AK Peters/CRC Press.10.1201/9781315281575 ↗
2. Narrative visualization: Telling stories with data10.1109/TVCG.2010.179 ↗
3. On problem-solving10.1037/h0093599 ↗
4. Thudt, A., Walny, J., Gschwandtner, T., Dykes, J., and Stasko, J. (2018). Data-Driven Storytelling, AK Peters/CRC Press.
5. Weber, W., and Rall, H. (2013). We are journalists.“Production Practices, Attitudes and a Case Study of the New York Times Newsroom. Interaktive Infografiken, 161–172.10.1007/978-3-642-15453-9_9 ↗
6. The multimodality of digital longform journalism
7. Seyser, D., and Zeiller, M. (, January 10–13). Scrollytelling—An analysis of visual storytelling in online journalism. Proceedings of the 2018 IEEE 22nd International Conference Information Visualisation (IV), Fisciano, Italy.10.1109/iV.2018.00075 ↗
8. Chen, Q., Cao, S., Wang, J., and Cao, N. (2023). How does automation shape the process of narrative visualization: A survey of tools. IEEE Trans. Vis. Comput. Graph.10.1109/TVCG.2023.3261320 ↗
9. Kim, H. (2019). Discovering a Design Space for the Transition of News Articles with Data Visualization from Large to Small Screen Devices. [Master’s Thesis, University of Seoul].
10. A deeper understanding of sequence in narrative visualization10.1109/TVCG.2013.119 ↗
11. Marcelino, G., Semedo, D., Mourão, A., Blasi, S., Mrak, M., and Magalhães, J. (2019, January 10–13). A benchmark of visual storytelling in social media. Proceedings of the 2019 on International Conference on Multimedia Retrieval, Ottawa, ON, Canada.10.1145/3323873.3325047 ↗
12. Bach, B., Wang, Z., Farinella, M., Murray-Rust, D., and Henry Riche, N. (2018, January 21–26). Design patterns for data comics. Proceedings of the 2018 CHI Conference on Human Factors in Computing Systems, Montreal, QC, Canada.10.1145/3173574.3173612 ↗
13. Zhao, Z., Marr, R., Shaffer, J., and Elmqvist, N. (April, January 31). Understanding partitioning and sequence in data-driven storytelling. Proceedings of the Information in Contemporary Society: 14th International Conference, iConference 2019 (Proceedings 14), Washington, DC, USA.10.1007/978-3-030-15742-5_32 ↗
14. Episodes as chunks in narrative memory10.1016/S0022-5371(79)90173-7 ↗
15. Plowman, L., Luckin, R., Laurillard, D., Stratfold, M., and Taylor, J. (1999, January 15–20). Designing multimedia for learning: Narrative guidance and narrative construction. Proceedings of the SIGCHI Conference on Human Factors in Computing Systems, Pittsburgh, PA, USA.10.1145/302979.303098 ↗
16. Godulla, A., and Wolf, C. (2017). Digitale Langformen im Journalismus und Corporate Publishing, Springer.10.1007/978-3-658-17556-6 ↗
17. Tong, C., Roberts, R., Borgo, R., Walton, S., Laramee, R.S., Wegba, K., Lu, A., Wang, Y., Qu, H., and Luo, Q. (2018). Storytelling and visualization: An extended survey. Information, 9.10.3390/info9030065 ↗
18. Weber, W. (2013). Typen, Muster und hybride Formen. Ein Typologisierungsmodell für interaktive Infografiken. Interaktive Infografiken, 25–37.10.1007/978-3-642-15453-9_2 ↗
19. Stolper, C.D., Lee, B., Riche, N.H., and Stasko, J. (2023, November 23). Emerging and Recurring Data-Driven Storytelling Techniques: Analysis of a Curated Collection of Recent Stories. Available online: https://www.microsoft.com/en-us/research/publication/emerging-and-recurring-data-driven-storytelling-techniques-analysis-of-a-curated-collection-of-recent-stories/.
20. Animated transitions in statistical data graphics10.1109/TVCG.2007.70539 ↗
21. Designing animated transitions to convey aggregate operations10.1111/cgf.13709 ↗
22. Norambuena, B.F.K., Mitra, T., and North, C. (2021, January 24–29). Narrative sensemaking: Strategies for narrative maps construction. Proceedings of the 2021 IEEE Visualization Conference (VIS), New Orleans, LA, USA.10.1109/VIS49827.2021.9623296 ↗
23. Zhao, Z., and Elmqvist, N. (2022). The stories we tell about data: Media types for data-driven storytelling. arXiv.10.1109/MCG.2023.3269850 ↗
24. Corbett, E., and Connors, R. (1998). Classical Rhetoric for the Modern Student, Oxford University Press.
25. Visualization rhetoric: Framing effects in narrative visualization10.1109/TVCG.2011.255 ↗
26. Jia, Y., Lu, V., Hoberock, J., Garland, M., and Hart, J.C. (2012). GPU Computing Gems Jade Edition, Elsevier.
27. van der Nat, R., Müller, E., and Bakker, P. (2021). Navigating interactive story spaces. The architecture of interactive narratives in online journalism. Digit. J., 1–26.10.1080/21670811.2021.1960178 ↗
28. Wysiwyg (what you see is what you get) volume visualization10.1109/TVCG.2011.261 ↗
29. Dondis, D.A. (1974). A Primer of Visual Literacy, MIT Press.
30. Bertin, J. (1983). Semiology of Graphics: Diagrams, Networks, Maps, University of Wisconsin Press.
31. Data visualization literacy: Definitions, conceptual frameworks, exercises, and assessments10.1073/pnas.1807180116 ↗
33. Horn, R.E. (1998). Visual Language, MacroVu Inc.
34. Van der Waarde, K., and Westendorp, P. (2000, January 6–9). The functions of arrows in user instructions. Proceedings of the IIID Expert Forum on Manual Design International Institute for Information Design, Eskilstuna, Sweden.
35. Arrows and their modern versions: Narrativity signalled by lines in data visualizations10.1080/1051144X.2021.1902039 ↗
36. Parallel prototyping leads to better design results, more divergence, and increased self-efficacy10.1145/1879831.1879836 ↗
37. Weber, W., and Rall, H. (2012, January 11–13). Data visualization in online journalism and its implications for the production process. Proceedings of the 2012 IEEE 16th International Conference on Information Visualisation, Montpellier, France.10.1109/IV.2012.65 ↗
38. Storyboarding for visual analytics10.1177/1473871613487089 ↗
39. From visual exploration to storytelling and back again10.1111/cgf.12925 ↗
40. Kim, N.W., Henry Riche, N., Bach, B., Xu, G., Brehmer, M., Hinckley, K., Pahud, M., Xia, H., McGuffin, M.J., and Pfister, H. (2019, January 4–9). Datatoon: Drawing dynamic network comics with pen+ touch interaction. Proceedings of the 2019 CHI Conference on Human Factors in Computing Systems, Glasgow, UK.10.1145/3290605.3300335 ↗
41. Conlen, M., Vo, M., Tan, A., and Heer, J. (2021, January 10–14). Idyll studio: A structured editor for authoring interactive & data-driven articles. Proceedings of the 34th Annual ACM Symposium on User Interface Software and Technology, Virtual.10.1145/3472749.3474731 ↗
42. Conlen, M., and Heer, J. (2018, January 14–17). Idyll: A markup language for authoring and publishing interactive articles on the web. Proceedings of the 31st Annual ACM Symposium on User Interface Software and Technology, Berlin, Germany.10.1145/3242587.3242600 ↗
43. Authoring narrative visualizations with ellipsis10.1111/cgf.12392 ↗
44. Sultanum, N., Chevalier, F., Bylinskii, Z., and Liu, Z. (2021, January 8–13). 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, Yokohama, Japan.10.1145/3411764.3445354 ↗
45. Chartstory: Automated partitioning, layout, and captioning of charts into comic-style narratives10.1109/TVCG.2021.3114211 ↗
46. Timelines revisited: A design space and considerations for expressive storytelling10.1109/TVCG.2016.2614803 ↗
47. Brehmer, M., Lee, B., Riche, N.H., Tittsworth, D., Lytvynets, K., Edge, D., and White, C. (2019, January 6). Timeline Storyteller. Proceedings of the Computation+Journalism Symposium, Miami, FL, USA.
48. Authoring logically sequenced visual data stories with gravity10.1016/j.cola.2020.100961 ↗
49. Gravity++: A graph-based framework for constructing interactive visualization narratives10.1016/j.cola.2022.101125 ↗
50. Visual narrative flow: Exploring factors shaping data visualization story reading experiences10.1111/cgf.13195 ↗