This is a tiny description of how we used to create horizontal interactive information graphics before actual “scrollytelling” vertical narratives with graphics and data.
This case study graphic is made by The Sunday Times Graphic Department for The Sunday Times online and tablet publications.
Stories are presented by sequences, theatrical scenes trying to clarify the 5W journalism questions. Every unit of content is concise in its explanation and it could be published separately complementing different articles.
Every scene is accesible from a button menu as well as a draggable bar. All this items are visible in a standard clear interface (situated at the top or at the bottom of the graphic depending on the publication design). If we rotate this way of access and control of the content, we find our actual ‘hamburger menu’ and scroll navigation.
Interaction with hotspots gets the reader to a second level of information. We use to call this a: ”do you want to know more?” button. In these pop up windows, visuals are combined with smooth animations used just to get the attention to some interesting point of the graphic.
We try to attract the attention for each content, not with great drawings (as we use to do in print), but with clear and simple animations, camera movements and sound. The aim is to ensure the reader gets into the story as much time as possible and retains some of the content offered. Something we could see now at scroll narratives where animations work as openings of next ‘floor’.
In this Wimbledon interactive graphic, sound is effective to accent the tennis ball bounce animation. Ball racket hits, ball bounces and final people applauses makes more dynamic the play recreation.
Also animation is played twice: first time with no content and second time with stops and all information we want the reader to know.
Using 3d models allow us to rotate and play with render cameras to find the most interesting and attractive point of view for the story to be explained. Animation is displayed as video or realized as a combination of image sequences underneath of a vector drawing animation layer.
The goal is to balance the sometimes difficult relationship between time of production, visuals and effects quality and the device technical requirements.
Once finished, all elements are also available for a newspaper print layout.
Other example of ST sports graphics can be seen at Behance Interactive World Cup 136 goals. A daily coverage.
The Sunday Times Graphic Department: Gary Cook, Jenny Holley, Julian Osbaldstone, Alex Cox, Mathew Cornick, Clare Collins, Chris Watson, Kester Mollahan, Richard Hawkins, Jeremy Christopher, John Smith and Rafa Höhr
