Idyll Studio is a structured editor for
authoring and publishing interactive and
data-driven articles, built to support
rapid development while limiting the
number of general purpose programming
tools that authors need to use. In our
interface text can be edited directly
and components can be arranged on the
page using drag-and-drop interactions.
Editing instruments are embedded
directly into the document, which support
the parameterization of component
properties
and a reactive variable system is used
to choreograph interactivity.
Once authors are ready to share their
work, Idyll Studio can publish articles
directly to the web with the push of a
button.
There are three main research
contributions in this work:
we extended the Idyll framework to
support reflective documents which
inspect and modify their own program at
runtime. We use these extensions to
create a flexible structured editing api
which powers Idyll Studio.
Idyll Studio is an expressive structured
editor that is released as open source
software and can be downloaded and used
today.
We present the results of a first use
study in which 18 diverse participants
used Idyll Studio to perform rapid
prototyping tasks. We found that our
system enabled non-technical users to
complete tasks that they otherwise could
not and allowed expert users to create
articles more rapidly and with fewer
cognitive demands compared to existing
tools.
The first use study consisted of six
tasks: a basic intermediate and advanced
task
in each of two categories interaction
and data driven.
Participants were given a 10-minute
tutorial on how to use the system and
then had 30 minutes in which to complete
the six tasks.
For example the dog years calculator
required that participants write a
sentence that reacted to the value of a
variable showing a dog's age in both
human and dog years.
Data-driven tasks required that users
import a tabular data file into our
system and then use that data to
parameterize components such as a table
and a vega-lite chart.
[Music]
In the advanced data-driven task
participants needed to use a reactive
variable connected to an input component
that would change which field was shown
on the y-axis of the chart.
To do this, they needed to parametrize
the chart's specification using the same
reactive variable that was connected to
the input widget.
We provide two case studies to highlight
the expressiveness of the system. Here we
show how the popular scroller and
stepper layouts can be specified to
create a dynamic reading experience in
which a chart reacts to a reader
scrolling or stepping through a
slideshow. To specify either, an author
uses the drag and drop interaction to
add the layout to their article then
they connect it to a reactive variable
which will track which step the reader
is currently viewing and use that same
variable to parameterize the graphic
shown in the background. This results in
a dynamic visualization that responds as
the reader progresses through the
content.
[Music]
The Barnes-Hut Approximation was an
existing explorable explanation built
with Idyll. We use the Idyll Studio
interface to recreate the text and
interactions in the piece and wire them
up to the existing graph visualizations
seen on the right. This helps us see how
the interface scales up to more complex
articles. We see that in certain cases
the positioning of the component editing
instrument icons can be improved to
prevent overlap and better show
correspondence between the icon and the
component to which it refers. But overall
we see that the structured editor is a
powerful tool that can scale up to
support sophisticated interactions and
component parameterizations. Our system
interoperates with other domain specific
editing tools like traditional code
editors.
By clicking an edit button next to
components in the interface, an author's
system text editor can be invoked and
changes made there will immediately be
reflected in Idyll Studio.
To learn more about this system and to
read our complete findings, please read
the full paper submitted to UIST 2021.
[Music]