Idyll: A Markup Language for Authoring and Publishing Interactive Articles on the Web
The web has matured as a publishing platform: news outlets regularly publish rich, interactive stories while technical writers use animation and interaction to communicate complex ideas. This style of interactive media has the potential to engage a large audience and more clearly explain concepts, but is expensive and time consuming to produce. Drawing on industry experience and interviews with domain experts, we contribute design tools to make it easier to author and publish interactive articles. We introduce Idyll, a novel "compile-to-the-web" language for web-based interactive narratives. Idyll implements a flexible article model, allowing authors control over document style and layout, reader-driven events (such as button clicks and scroll triggers), and a structured interface to JavaScript components. Through both examples and first-use results from undergraduate computer science students, we show how Idyll reduces the amount of effort and custom code required to create interactive articles.
Research Questions / Practical Problems
Question signals indexed for this paper.
- 100%
Comparing Effectiveness and Engagement of Data Comics and Infographics
CHI '19· Interactive Data Visualization +1
- 80%
Design Patterns for Data Comics
CHI '18· Interactive Data Visualization +1
- 80%
DataSelfie: Empowering People to Design Personalized Visuals to Represent Their Data
CHI '19· Interactive Data Visualization +1
- 80%
ActiveInk: (Th)Inking with Data
CHI '19· Interactive Data Visualization +1
- 80%
Beyond Instructions: A Taxonomy of Information Types in How-to Videos
CHI '23· Interactive Data Visualization +1
- 80%
Unpacking Micro Data Videos: Key Elements and Design Practices in Minute-Long Data Videos for Mobile Usage
MobileHCI '25· Interactive Data Visualization +1
- 67%
InfoNice: Easy Creation of Information Graphics
CHI '18· Interactive Data Visualization +1
- 67%
Exploration and Explanation in Computational Notebooks
CHI '18· Interactive Data Visualization +1
- 67%
Improving Comprehension of Measurements Using Concrete Re-expression Strategies
CHI '18· Interactive Data Visualization +2
- 67%
Leveraging Text-Chart Links to Support Authoring of Data-Driven Articles with VizFlow
CHI '21· Interactive Data Visualization +1
Based on Jaccard similarity of research subtopics & professions (≥60%)