Navigating and Narrating Interactive Flowcharts

Introduction. While the nonlinear and interconnected nature of flowcharts makes them well-suited for representing and communicating complex narratives, flowcharts can appear impersonal, unapproachable, and disorienting, especially with a large number of elements. We propose an interaction technique for flowcharts that combines the narrative depth of linear storytelling with the autonomy of open-ended exploration. Related Work. This research builds on existing research on interactivity in data visualizations, sonic approaches to representing data, and flowcharts as a usually static genre of node-link diagrams conveying the structure and dynamics of nonlinear systems. Design. We introduce a flowchart interface that integrates audio narration, progressive disclosure, and animated transitions with interactive capabilities for navigating the content of the narration and flowchart. Readers of the interactive flowchart can choose between narrated or exploratory perspectives, switching between linear and nonlinear readings of the chart. Demonstration. We illustrate the technique’s design principles using the case study “I Want a Better Catastrophe”, a flowchart taking viewers on a journey through the diverging paths of our climate predicament. Evaluation. We study the potential of the technique by analyzing the reception of the case study through a feedback survey and anonymous activity logs, and by reflecting on the authoring of further interactive flowchart projects using an open-source template in the context of a university design course. Conclusion. The results of the evaluation demonstrate the potential of an interactive flowchart that combines linear storytelling and open-ended exploration. Additionally, several directions for further development as well as new design opportunities emerge from the project. We believe the outlined technique underscores a more general potential for the harmonization and integration of narrative and exploratory approaches into data visualizations. Materials. Links are available to the “I Want a Better Catastrophe” case study as well as the open-source interactive flowchart template. All materials, including those used for the purposes of the evaluation, are provided within this repository.