• Qinyu Ding

We haven't offically met, Scrollytelling

Updated: Aug 27, 2019

"Scolling is a continuation while clicking is a decision"

- Jim Vallandingham

I still remember the first time when I saw a scrollytelling infographics.

"OMG, THANK YOU for doing this", I "told" the author.

I have to admit, I really am not good at remembering numbers. That's why most of the time when I am reading an article or an infographic filled with numbers, I find myself always going back and forth between charts/numbers and text to understand what actually is going on here. One thing I always do is that after reading a chart and scrolling down to the following paragraph, if that paragraph starts with words like"As shown above...", I would DEFINITELY stop reading and scroll back to the chart to refresh my memory and then go back the paragraph to finish the next sentence which include a number and once again go back to the chart trying to understand that number... again and again.

That was probably the first time that I didn't feel sorry for having a bad memory when reading an article - that scrollytelling provided me with the context and information I need to understand that graphic step by step. A huge reduction of scrolling back and forth means that less mental effort was required so I could more be focused on understanding the numbers facilitated by the chart and how it is related to the rest of the story.

Fascinated by it, I started learning more about scrollytelling. From Storytelling To Scrollytelling: A Short Introduction and Beyond by Lorenzo Amabili is really a good start. Not only does it give you a really clear introduction of scrollytelling, more importantly, he included many great academic papers, conference presentations, websites, storytelling examples, repositories, podcasts and books as links in his article. With less mental effort being put in googling and choosing between thousands of learning resources, thanks to Lorenzo, I started devouring these articles.

What I learned about Scrollytelling

Scrollytelling is dope

The appearance of the scroll wheel makes scrolling such a popular way to navigate a webpage. Because scrolling follows most reading patterns - from top to bottom, it requires less effort compared to other gestures like clicking, which requires you to move the cursor to the targeted button and click to continue reading.

“Scrollytelling is when content (e.g., a graphic, audio, a video, an animation) is revealed or changed as the user scrolls."( - Russell Goldenberg)

Scrollytelling is good when you have a lot of or complicated data to display. It will guide the audience through the content step by step while using charts, animations, videos, audios or pictures to facilitate understanding the information piece by piece, further encouraging exploration. Scrollytelling is also known for its ability to make the audience feel a "tight control" over the content, as readers can control the pace of information appearing so that the speed of their understanding can keep up with the speed of reading.

There is always a 'But...'

But it is not always that dope when employed in an inappropriate way.

Scrolling Fatigue

Even repeating a simple behavior can result in fatigue. Scrolling fatigue might happen if the content is not well designed and will finally either cause readers to completely lose their interest and to leave the website directly (also known as 'rage-quitting'), or lead to the situation where readers will still continue scrolling - but they are just scanning without paying attention to the content (also known as 'zombie-scrolling').

False-bottom Phenomenon

People may stop reading sometimes even when they are not losing their interest - they just "thought" it was the end of the infographic. The false-bottom phenomenon occurs when the layout of the content fails to indicate there are more below the fold.

There is always a 'But...' for that 'But...'

Keeping the content relevant and well organized always helps. Organize the content in a good storytelling way to keep intriguing interest of the audience - yes, text still matters and is the first priority. False-bottom phenomenon can easily be addressed by offering indicators showing there's more to come by using an arrow, a reminder text like "scroll here" or just simply showing part of the following content.

More great resources provided by Lorenzo (Thank you Lorenzo! :-)):

1. Scrolling in Data Visualization

2. Visual Narrative Flow


1. Scrolling and Attention. Retrieved from https://www.nngroup.com/articles/scrolling-and-attention/

2. Smith, A., & Smith, A. S. A. (2019, August 26). How Scrolling Can Make (Or Break) Your User Experience. Retrieved from https://usabilitygeek.com/how-scrolling-can-make-or-break-your-user-experience/

3. Amabili, L. (2019, August 22). From Storytelling To Scrollytelling: A Short Introduction and Beyond*. Retrieved from https://medium.com/nightingale/from-storytelling-to-scrollytelling-a-short-introduction-and-beyond-fbda32066964

52 views0 comments

Recent Posts

See All

How Charts Lie - Ch.2

Chapter 2 is my favorite chapter of all chapters from Pro. Cairo’s books I have ever read. It constantly reminds me of what I keep telling myself as I grow up, “This world is complicated. There is no

Exploration on Visualization of Uncertainty

Another week of reading about visualization of uncertainty. The more I explored, the more I found it intriguing. Studies has shown that most participants agreed that display of uncertainty helped with