Hello! I’m Nicole Sultanum, and on behalf of my co-authors, I’ll present our work on
"Leveraging Text-Chart links to support authoring of data driven articles with VizFlow".
Communicators have been hard at work to provide the general public with an
understanding of complex issues and to break down the data behind them via data driven articles.
That is, articles featuring a core text narrative supported by data visualizations.
With more content being consumed online, communicators started leveraging
digital resources for data-driven articles, with scroll-based animations and transitions
that beautifully intertwine text and visuals. While great storytelling devices, these dynamic
behaviours are challenging to craft, requiring significant time and programming expertise.
In this work, we tried to bridge this technical gap and make
authoring of dynamic data driven articles more accessible to communicators.
To better understand this problem, we recruited 6 authors of data-driven articles
for an interview on authoring workflows, tools of choice, and pain points.
Apart from confirming past findings on how people make data-driven stories,
and that the technical challenges are real, we also found that authors prioritized
more guided actions like scroll when creating dynamic articles, arguing that
readers rarely pause to interact with stories. Also, everything has to work well on mobile,
since it has become the primary consumption platform for a majority of readers.
Following these findings, it was clear that scrollytelling, or scroll based actions,
was the perfect place to start.
We surveyed 43 data-driven scrollytelling articles, and catalogued their design features.
Among features we studied, here’s what we learned about
how text and charts are commonly arranged in different displays.
One of the most common formats has text split into short snippets
overlaid over graphics that change with scroll.
This layout works equally well for desktop and mobile.
A slight variation is having text snippets and graphics side by side.
This gets a bit tight for mobile sometimes, and in this example,
the snippets are aligned at the center instead.
Another mobile adaptation is to have static snippets and snapshots displayed as a sequence.
Yet another dynamic option is to have a chart pinned to the top
while content scrolls from behind.
And finally, long form, which is the traditional static block of content.
Many articles interleave static segments with dynamic segments for better flow.
Based on these assessments, we created Vizflow,
a proof of concept tool to create dynamic data-driven articles without programming.
Vizflow was designed to look like a text editor, so adding content
like text and charts is fairly straightforward. To add dynamic behavior to this article, we
first need to split content into sections, which define a scope of action for dynamic behavior.
We can then select text segments that are somehow tied to a chart.
We select the chart, and then we can add annotations as highlights.
The chart is brought into the section, and we can see that the text is now linked to that highlight.
After that, we can choose a layout, which defines how links within a section will be presented.
From a preview window, which is fully synced with the editor,
we can see how the layout is applied to the specified section and respective links,
and also quickly preview and compare the variety of layouts available within VizFlow.
To validate this solution, we did an authoring study and a reader study.
We had 12 participants on our authoring study.
We gave them a link to VizFlow, loaded with text and charts from one of four different articles
and we asked them to curate a dynamic version of
that article using text-chart links, however they saw fit.
Feedback was positive, and VizFlow was found to lower technical barriers and speed up authoring.
On the downside, they said It could be a bit limiting to creativity,
and animations could be overused,
which are common issues of creativity support tools.
In the end we confirmed VizFlow to be a viable solution to the problem.
For the reader study, we recruited 24 participants, gave them
3 versions of one article with different levels of dynamic behaviour.
One with extensive scroll-based transitions,
one with more static forms of text-chart highlighting,
and one with no text-chart highlights, and asked which versions they preferred.
We found that versions with text-chart highlighting were generally preferred,
but with quite the spread, suggesting readers may benefit from having more
control over article presentation, something a framework like ours could fully support.
In summary, our efforts showed that text-chart links and pre-defined
layouts is a promising alternative to authoring of dynamic data driven articles.
And more importantly, it paves way to a lot important follow-up work,
which I’d love to discuss more in the Q&A.
You can access vizflow at vizflow.cs.toronto.edu Thank you for your time.