A Design Language for Prototyping and Storybaording
Data-Driven Stories

Design Language
Download inforgraphic

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 fast 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 abstains 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 tool 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.

Audit

We audited 100 DDS to evaluate different design rules of the design language with real-world examples. The selection process was convenience sampling from examples of published DDS by notable news agencies and the data visualization community.

Audit

Showcase

To showcase the capabilities of the design language for prototyping purposes, we present DataStoryDesign, a prototyping system specified for narrative design in DDS. DataStoryDesign is carefully adapted by the language proposed in \ref{visuallang}, which outlines DDS's key elements and design rules. DataStoryDesign offers a schematic design language like a storyboarding tool specifically designed for DDS narrative design. The following link presents a showcase of visual functionalities of DataStoryDesign.

Showcase

Intractions

In terms of visual interactions, DataStoryDesign offer animations to fullfill user experience and enhance visual communications. Here you can watch some of these examples.

Explore

Content goes here

Team

Credit

DataStoryDesign Showcase