How you include interactivity and animation in your storytelling requires a balanced approach.
When used well, it can really help to aid a reader in their understanding, or appreciation of a subject. But it requires careful thought and planning to ensure it takes the reader deeper into the narrative, and doesn't break that engagement.
When an interactive is part of a wider, multimedia exploration of a story, simplicity is often key. A visualisation that offers a clear breakdown of statistics or location will enable the reader to dive deeper with more context, without having their focus on the narrative interrupted.
Use interactivity if it will enhance how that story can best be told – not just because you can
And sometimes the interactivity can be part of the reader’s journey through the story. In Shorthand, for example, you can create animations that are brought to life based on the reader’s scrolling, which opens up opportunities for seamless interactivity. But again, the key is to stay focused to your story, and use interactivity if it will enhance how that story can best be told – not just because you can.
UNLOCKING THE POTENTIAL: EXAMPLES IN SHORTHAND
Interactivity is a powerful storytelling tool, it can not only give the reader of your story an opportunity to dive deeper into specific areas (think data visualisations that allow the reader to filter datasets), but can also offer new perspectives, bring to life visuals which would otherwise be static, and provide your reader with a richer understanding of a scenario or subject.
In Shorthand, there are several features which use the reader's scrolling to deliver animation or other interactive effects, and essentially bring elements to life. Here are just some of the ways this has been harnessed in Shorthand (and remember, you can try out any of these in the Shorthand demo area):
Break down the detail & BOOST UNDERSTANDING
In Shorthand you can use the Scrollmation features to break down a process or concept into a series of images, which the reader can then move through in stages.
When outlining an activity or delivering a series of stats, for example, you may be able to make it easier to digest, and more engaging, if it were broken down into parts the reader could work through.
Consider the difference, for example, of delivering a detailed graph of data in one graphic to your reader, compared to breaking it into a series of versions, each one delivering a new bit of data, or perhaps highlighting a different variable. In the latter example the reader can take in each level of information at a speed that works for them, and using the interactive element even take a step back to return to an earlier stage. See a great example of this in the story Fleeing Syria, by The Telegraph, a screenshot of which is below, where statistics are broken down into a series of animated steps offering the reader deeper context as they scroll.
LAYER ON EXTRA CONTEXT
Similarly to the previous point, building up elements as you scroll can also be used to add layers as the reader moves further through a story.
The Reveal effect in Shorthand lets storytellers add (or remove) layers to images as the reader scrolls. For example it's used in Autumn Leaves by Elle UK and McArthur Glen to overlay retail information over images of clothing, and outlet locations over map graphics.
BRING TO LIFE
Another opportunity for animating content as you scroll is to simply bring things to life.
Using flipbook-style animation, The Australian Magazine brings movement to its robot visuals as the reader scrolls in My Mechanical Friend – harnessing the Scrollmation features in Shorthand.
Similarly, see how Autocar used this effect to add a moving car to the page in their assessment of the Jaguar XE in The Ultimate Road Trip.
OFFER COMPARISON / CONTRAST
Rather than presenting two items for comparison separately, imagine how much easier it would be to appreciate their differences if you could directly compare the two in a single interactive, activated as you scroll at your own pace.
In FourFourTwo's World Cup Guide, for example, a pie chart showing games won, is followed by another showing games drawn, and a third showing the stats for games lost. And using the Reveal effect means you're able to see exactly how the size of each portion of the chart compares as one replaces the other.
Or in this stunning graphic by The Telegraph, from What Africa will look like in 100 years, you witness the growth of the circles in each area as you scroll, giving you the visual comparison of size, as well as the geographical context, context that is delivered as the reader scrolls through the story.
And in BBC News's Goal Difference, the Reveal effect is used to layer on new versions of the map, providing the comparison of change over time.
Try it for yourself
For more examples of interactive storytelling with Shorthand, take a look at our Pinterest board. Or you can try out the app for yourself in our demo area right now.
We also have a monthly newsletter, where we share new story examples, new features and top tips on visual storytelling. Sign up below:
Or just visit the Shorthand website to find out more and read testimonials.
