[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"detail-sidebar-cat-1-en-105":3,"doc-seo-565331-105":53,"doc-detail-565331-en":120},{"code":4,"msg":5,"data":6},0,"success",[7,14,19,24,29,34,39,44,49],{"id":8,"doc_module":9,"doc_module_name":10,"category_name":11,"show_sort_weight":12,"slug":13},11,1,"Template","Presentations",90,"presentations",{"id":15,"doc_module":9,"doc_module_name":10,"category_name":16,"show_sort_weight":17,"slug":18},12,"Resumes",80,"resumes",{"id":20,"doc_module":9,"doc_module_name":10,"category_name":21,"show_sort_weight":22,"slug":23},14,"Invoices",70,"invoices",{"id":25,"doc_module":9,"doc_module_name":10,"category_name":26,"show_sort_weight":27,"slug":28},15,"Posters",60,"posters",{"id":30,"doc_module":9,"doc_module_name":10,"category_name":31,"show_sort_weight":32,"slug":33},16,"Social Media",50,"social-media",{"id":35,"doc_module":9,"doc_module_name":10,"category_name":36,"show_sort_weight":37,"slug":38},17,"Forms",40,"forms",{"id":40,"doc_module":9,"doc_module_name":10,"category_name":41,"show_sort_weight":42,"slug":43},18,"Letters",30,"letters",{"id":45,"doc_module":9,"doc_module_name":10,"category_name":46,"show_sort_weight":47,"slug":48},21,"Paper Templates",5,"papers-templates",{"id":50,"doc_module":9,"doc_module_name":10,"category_name":51,"show_sort_weight":4,"slug":52},158,"General","general-158",{"code":4,"msg":54,"data":55},"ok",{"site_id":56,"language":57,"slug":58,"title":59,"keywords":60,"description":61,"schema_data":62,"social_meta":113,"head_meta":115,"extra_data":117,"updated_unix":119},105,"en","navigating-and-narrating-interactive-flowcharts","Navigating and Narrating Interactive Flowcharts","","While flowcharts are effective for representing complex nonlinear narratives, large and interconnected node-link diagrams can feel impersonal, disorienting, and difficult to approach. The paper proposes an interaction technique that merges linear storytelling’s narrative depth with open-ended exploration’s autonomy. It presents an interactive interface combining audio narration, progressive disclosure, and animated transitions, enabling readers to switch between narrated and exploratory readings. A case study and evaluation support the technique’s potential.",{"@graph":63,"@context":112},[64,80,95],{"@type":65,"itemListElement":66},"BreadcrumbList",[67,71,74,77],{"item":68,"name":69,"@type":70,"position":9},"https://docshare.wps.com","Home","ListItem",{"item":72,"name":10,"@type":70,"position":73},"https://docshare.wps.com/template/",2,{"item":75,"name":11,"@type":70,"position":76},"https://docshare.wps.com/template/presentations/",3,{"item":78,"name":59,"@type":70,"position":79},"https://docshare.wps.com/template/navigating-and-narrating-interactive-flowcharts/565331/",4,{"url":78,"name":59,"@type":81,"author":82,"headline":59,"publisher":85,"fileFormat":88,"inLanguage":57,"description":61,"dateModified":89,"datePublished":89,"encodingFormat":88,"isAccessibleForFree":90,"interactionStatistic":91},"DigitalDocument",{"name":83,"@type":84},"Indoniesian Boy","Person",{"url":68,"name":86,"@type":87},"DocShare","Organization","application/pdf","2026-10-13",true,{"@type":92,"interactionType":93,"userInteractionCount":4},"InteractionCounter",{"@type":94},"ViewAction",{"@type":96,"mainEntity":97},"FAQPage",[98,104,108],{"name":99,"@type":100,"acceptedAnswer":101},"What problem does the paper address with interactive flowcharts?","Question",{"text":102,"@type":103},"It addresses how flowcharts can become impersonal, unapproachable, and cognitively disorienting when many interconnected elements make navigation difficult for readers.","Answer",{"name":105,"@type":100,"acceptedAnswer":106},"What interaction technique is proposed for the flowchart?",{"text":107,"@type":103},"The paper proposes an interface that combines audio narration, progressive disclosure, and animated transitions, supporting interactive navigation and smooth switching between narrated and exploratory modes.",{"name":109,"@type":100,"acceptedAnswer":110},"How is the technique evaluated and demonstrated?",{"text":111,"@type":103},"A case study (“I Want a Better Catastrophe”) demonstrates the design principles, and evaluation analyzes reception via a feedback survey and anonymous activity logs, plus reflections on further authoring using an open-source template.","https://schema.org",{"og:url":78,"og:type":114,"og:title":59,"og:site_name":86,"og:description":61},"article",{"robots":116,"canonical":78},"index,follow",{"doc_id":118,"site_id":56},565331,1791851425,{"code":4,"msg":5,"data":121},{"doc_id":118,"user_id":122,"nickname":83,"user_avatar":123,"doc_module":9,"category_id":8,"category_name":11,"doc_title":59,"doc_description":61,"doc_content":124,"file_id":125,"file_url":126,"file_type":127,"file_size":128,"view_count":4,"is_deleted":4,"is_public":9,"is_downloadable":9,"audit_status":9,"page_count":15,"language":129,"language_code":57,"site_id":56,"html_lang":57,"table_of_contents":130,"faqs":131,"seo_title":132,"seo_description":61,"update_tm":119,"read_time":79},962090760608,"https://ap-avatar.wpscdn.com/davatar_276721f389ce27ea32af1340a28f341c","Navigating and Narrating Interactive Flowcharts  \nJona Pomerance, Andrew Boyd, Marian Dörk  \nA peer-reviewed publication in the Journal of Visualization and Interaction (JoVI) .  \nThis article is an extended version of a publication from the Information+ Conference 2023 . DOI: 10.54337/jovi.v1i1.8418 (the public peer reviews can also be found at this link)  \n• Submitted: 2024-12-30  \n• Accepted: 2026-02-25  \n• Published: 2026-04-10 (version 1)  \nLicense and Copyright  \nThis work is licensed under a Creative Commons Attribution-ShareAlike 4 .0 International (CC-BY-SA 4.0) license.  \nAll copyrights remain with the authors.  \nPublisher  \nAalborg University Open Publishing Kroghstræde 1-3  \n9220 Aalborg Øst DENMARK ISSN: 2794-5502  \nNavigating and Narrating Interactive Flowcharts  \nJona Pomerance , Andrew Boyd, and Marian Dörk   \nFig. 1: Screenshot of the I Want a Better Catastrophe flowchart website. To introduce the project and present the two modes of narration and navigation, the panel on the left temporarily slides in upon opening the page. The flowchart can be explored in the main part of the interface by clicking any of the available nodes or by triggering the narration with the play button.  \nAbstract—  \nIntroduction. 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.  \nRelated 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.  \nDesign. 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.  \nDemonstration. 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.  \nEvaluation. 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.  \nConclusion. 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.  \nMaterials. 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.  \nIndex Terms—Flowchart, Interactivity, Interactive visualization, Narration, Audio narration, Exploration, Climate crisis.  \n1 INTRODUCTION  \nFlowcharts, typically comprising boxes and arrows, are a genre of nodelink diagrams that convey the structure and dynamics of a nonlinear system, enabling readers to piece together an understanding of the system’s components and behavior by moving through a flowchart’s elements. For example, flowcharts can help explain the structure of computer algorithms ","cbCaifWpOhH0K4BY","https://ap.wps.com/l/cbCaifWpOhH0K4BY","pdf",3483731,"English","# Abstract\n## Introduction\n## Related Work\n## Design\n## Demonstration\n## Evaluation\n## Conclusion\n## Materials\n# 1 Introduction","[{\"question\":\"What problem does the paper address with interactive flowcharts?\",\"answer\":\"It addresses how flowcharts can become impersonal, unapproachable, and cognitively disorienting when many interconnected elements make navigation difficult for readers.\"},{\"question\":\"What interaction technique is proposed for the flowchart?\",\"answer\":\"The paper proposes an interface that combines audio narration, progressive disclosure, and animated transitions, supporting interactive navigation and smooth switching between narrated and exploratory modes.\"},{\"question\":\"How is the technique evaluated and demonstrated?\",\"answer\":\"A case study (“I Want a Better Catastrophe”) demonstrates the design principles, and evaluation analyzes reception via a feedback survey and anonymous activity logs, plus reflections on further authoring using an open-source template.\"}]","Navigating and Narrating Interactive Flowcharts | PDF"]