From Storytelling To Scrollytelling: A Short Introduction and Beyond*
Likely you have already heard about (Visual) Storytelling. It is a design concept applied in Journalism, Business, Sport, Medicine, Education, and Science. Its exploration keeps growing thanks to the availability and application of a wide variety of techniques.
Also called Narrative Visualisation, it consists of creating a logical sequence of related (data-driven) visualisations, or visual elements, needed to convey a message to an audience in an engaging and effective way.
In the information explosion era, everybody needs a story, everybody needs a narrative (and quickly!). Even if there is a distinction between story and narrative, it is not always clear and the term “story” is often used in a broader sense to indicate a sequence of events communicated through story-like elements. When a story is prevalently delivered by using visual representations, it becomes a visual story: more intuitive, engaging and concise; see “A picture is worth a thousand words”.
The Basics
First of all, it is important to be conscious of the various possibilities of creating a visual story. There exist several forms of visual storytelling depending on the genre (e.g., video, data-comics, partitioned poster), visual narrative (e.g., highlighting, transition guidance), and narrative structure (e.g., ordering, interactivity, messaging), chosen by the author.
Narrowing down to data-driven visual storytelling, generally, the design strategies depend on 3+1 variables:
- data (which sets the content of the story)
- audience (which sets the tone of the story)
- message (which sets the focus of the story)
+1. (time and money) budget (which sets the sophistication of the story)
Learning about (and understanding) these variables is the minimum requirement for a visual storyteller to initiate the design process consisting of data analysis, story conception, implementation and refinement which leads to the creation of a visual data story. Together they define the domain situation, and the general approach to use to tell a story. We all agree that visual storytelling in Science should be more structured and rigorous than what visual storytelling can be, for instance in marketing. The visual data stories constraints and requirements are different.
For example, in Science, it is fundamental to obtain reproducible and transparent results and to be able to effectively communicate them. Recently, to achieve that, some visualisation tools are provided with data recording systems to enable provenance collection. Provenance accessibility allows users to manage, review and reuse data derived from the visualisation process. Therefore, visual storytelling with provenance data is also possible for reliable visual data stories about analysis workflows and design processes.
Scrollytelling. Visual Storytelling For The Web.
When the domain situation is to provide information to a general audience on the Web, an excellent option is to use Scrollytelling.
It is a powerful visual storytelling technique extensively used on the Web and based on a simple concept: new content appears or changes through transitions as users scroll down or up the web page. That’s basically it!
Although slideshows are similarly effective in terms of user engagement, the strengths of Scrollytelling can be identified with some of its properties. First, scrolling has become a natural gesture while navigating web sites which does not require much user effort. We do it all the time without even realising it. And this is the case since the mid-90’s with the scroll wheel popularisation. Second, it can easily engage readers because of the sense of control, exploration and discoverability inherent to scrolling. You can just scroll down or up to go forward or back in the story at any time, and differently from watching a video, the reader keeps being actively “in touch” with the story while consuming it. Finally, it is relatively easy to implement. And libraries and examples with code are also available online.
As illustrated by Jim Vallandingham, there are different variants of scrollytelling depending on the effect that is caused by scrolling a web page. Here below 3+1 examples are shown to give an idea of them.
1) Scroll As Steps
Similar to storytelling via slideshow, this technique integrated with a navigation menu to indicate where we are in the story facilitates the story navigation. At each step, the visual material is updated according to the story narrative.
2) Continuous Scrolling
It is also possible to present a story in a more fluid way, continuously transforming the data visualisations while scrolling is performed. As a consequence, the reader decides the pace to unfold the story which results in enhanced user engagement.
3) Scroll As A Trigger
When the author wants to steer the reader attention in an effective way, scrolling can be coupled to triggering an action. It can activate an animation, or it can play a video, or it can highlight some data in the visualisation. Anyway, the goal is to break the reader flow and say “Hey, look at this now!”.
+1) Mixed Scrollytelling
As in general for storytelling, a story can also be composed by different scrollytelling techniques. While scrolling, visual material can be presented, videos and animations can be started, and the story can be browsed in a slideshow fashion. And the final effect is strong!
What Else? Text.
In this short introduction, there is no explicit mention of TEXT. This is because being a highly visually-wired person and talking about visual storytelling, I would like to pretend that there is no need for talking about text, however, this is not true. Text is a relevant component in many visual stories too. Annotations and tooltips, for instance, can be used to clarify the story structure, to label and highlight data elements, to provide detailed information, to summarise and simplify complex data visualisations, to recommend user interactions, to better represent abstract concepts, and… to give a break to our brain avoiding visual information overload. Thus, designing data stories considering a good trade-off between visual and textual elements is crucial for effective visual storytelling.
* And Beyond
At this point, you should have a better intuition about the concepts of visual storytelling and its design process, provenance visual storytelling, scrollytelling and the use of text in storytelling. But if you want to go beyond this, check all the academic papers, conference presentations, websites, storytelling examples (some with code), repositories, podcasts and book included as links in this article. They provide a rich mix of theory, guidelines and inspiration to satisfy your appetite for new visual data stories!
