February 23, 2022
The trend I’d like to focus on today is something I’ve noticed across various sites, but never knew the name for: scrollytelling (a pretty silly name, but a self-explanatory one).
What is Scrollytelling?
Scrollytelling is “…a term first coined to describe online longform stories characterized by audio, video and animation effects triggered by simply scrolling the page.”
shorthand.com
So essentially, as the user scrolls down the page, a story is conveyed to them through changing elements. Scrollytelling is a form of visual storytelling.
How is Scrollytelling Achieved?
Scrollytelling specifically refers to longform story-telling, but the method in which these stories are expressed is a semi-common UI pattern called scroll animation. According to fullpage.js, scroll animation refers to “any kind of animation taking place while the visitor scrolls up or down a website”.
You can see a lovely example of scroll animation on the portfolio website of an artist I heavily admire. As the user scrolls up or down the homepage of his website, the clay hand illustration/3D model moves in turn.
You can also see another solid example of scroll animation on this website, which walks the user through the history of Google Search using animations which don’t trigger until the user scrolls to a certain point in the screen. You could make a solid argument that this is also an example of scrollytelling, but it undeniably uses scroll animation either way.
As you can see in the screen recording above, Google handles scroll animation a little differently – once the user scrolls down, the animation triggers and completes. If the user scrolls back up, the animation doesn’t react.
Scrollytelling tends to use the first variation of scroll animation, in which the change in the elements that is triggered by scrolling is triggered both by scrolling down and up the page.
Examples of Scrollytelling
Several large journalism companies use scrollytelling in many instances to create a more engaging experience for their readers. The Huffington Post displayed a wonderful example of storytelling in this article about millennials. In the screen recording below, you can see that even infographics become entertaining when scrollytelling is involved.
Aside from journalism, scrollytelling can also be applied to selling products. A well-known example of scrollytelling can be viewed throughout many of the product listings on Apple’s website.
Scrollytelling is also a wonderful way to display data. This application of scrollytelling has been covered a bit in the previous examples, but a more in-depth example of this is in this website, which visually displays the size of our solar system.
So, now that the basics of scrollytelling are covered, and we’ve viewed some examples of scrollytelling websites:
What are the Pros and Cons of Scrollytelling?
Pros:
✭ Accessibility
✭ Keeps users engaged
✭ Fun!
Cons:
✭ Accessibility
✭ Relevant information is not up-front
✭ Very timely/costly to make
So, let’s break these points down a bit:
Accessibility
You may have notice that accessibility is in both the pros and cons category. On the pro side, scrollytelling depends on only a single motion – scrolling. This is something that’s accessible by anyone who can use a mouse, arrowkeys, or, to an extent, anyone who can tab through a website on a keyboard. The experience is slightly different if the user needs to tab through a scrollytelling website, but it is still something they are able to experience.
On the con side, scrollytelling depends heavily on visuals to display information, which may be an issue for someone with visual impairments or someone using a screenreader. This does of course, vary depending on the application of scrollytelling (for instance, someone using a screenreader could still have a very informative and delightful experience while viewing this article from the New York Times, which is less dependent on visuals and more text-based).
Navigating Information
Navigating the information that scrollytelling presents can be a lovely and entertaining experience which encourages users to spend more time on the the subject that is being presented, as outlined in the pros category with the “keeps users engaged” bullet.
On the flip side, while the graphics are admittedly stunning, I personally found that when shopping for an iPad last year, the scrollytelling method which Apple uses to present its products tends to bury relevant information which I would prefer to see up front. While they did offer links to the pricing and specs of the device, that information wasn’t available ‘above the fold’, so to speak.
Other Considerations
Scrollytelling undeniably delivers an element of fun which can provide a break from the mundane, and presents a unique aspect in the oversaturated website ecosystem that we all experience on a day-to-day. This fun does, unfortunately, come at a cost. Creating a website which utilizes scrollytelling is both costly and time-consuming, and requires developers which might have a more specialized skillset.
To conclude, the pros and cons of utilizing scrollytelling depends heavily on what use scrollytelling is being used to display.
So, Now What?
In total, scrollytelling is a charming and different way of presenting information which comes with its own trials and tribulations. It can definitely improve the user experience when utilized for certain purposes, but presents problems when utilized for others. Scrollytelling don’t seem to be fading out of the UI/UX design trends in 2022 though, which I, for one, am excited about.
