The TTEITI Project: making things interactive without programming

Making things interactive

With Shorthand it's possible to make images interactive/scrollable without programming. It's called the 'scrollmotion effect'. For instance, in the graph below you will scroll through the different years and see how the fund evolves. With every scroll the information is updated (not in this blog, if you want to see the effect, take a look at the TTEITI story). So in a sense it's more an animation effect, however the user determines the speed of the animation by scrolling.


When I started exploring the tool, I found out that it was really easy to use, but the interactivity was limited to uploading multiple pictures that are shown in sequence at a certainty speed when scrolling. The speed is based on the amount of text in that section divided by the number of images. As you can see on the screenshot below, its easy to upload multiple images on the right. You can click each image to change that specific picture or add captions.

Exploring the scrollmotion effect

So I needed to figure out how to optimise this scrollmotion effect for the dataviz I had in mind.  I created a Shorthand account and used information from the TTEITI report to create a Sankey diagram which shows how ownership in the oil sector moves (I initially made it in Rawgraphs.oi, then imported it to illustrator to add text and make the different frames for the scrollmotion effect).

For full screen graphs you can then add a transition effect to make the transition go smoother:

These transitions are nothing spectacular, it's similar to what powerpoint can do. However, when used right, with the scrollmotion effect an image looks like it's fully animated/interactive, while it's just 3 or 4 images shown in sequence. So I added an effect to the Sankey I made and this was the result:

My mother was babysitting my children and I proudly showed her the scrollable Sankey diagram. She was a bit confused, 'what am I looking at?' she asked. I take that kind of feedback seriously, especially when I am designing for a broad audience. So if my mom is confused looking at a graph, it either has to be improved or it has to go. When I spoke to Kerry, this wasn't a focus point of his story (the 'why should I care'), which made the decision easier to 'kill this darling'. 

When I was further into the project I tried out the scrollmotion on different graphs and I saw both possibilities and limitations. Take a look at this effect. Kerry and I both liked the idea of the excavator moving, but it was impossible to get a smooth transition. 

To make sure the effects are shown properly and don't take long to load, Shorthand recommends adding max. 10 frames/ images for each scrollmotion effect. And you need way more frames to make a car, person or excavator run smoothly. It would not only be time-consuming for me to make all these frames, it would probably slow down the site too much as well. Furthermore, it would take a lot of scrolling to get the excavator to go from left to right. So I had to redesign this graph without the excavator moving. Most important aspect to show was the 174 million in outstanding revenues. In the TTEITI story you can scroll through the end result which consists of just 3 frames/images.

One of the graphs I believe the scrollmotion works the best is the Heritage and Stabilisation Fund graph. It consist of just 5 frames combined with a transition effect. For the full experience, again check out the TTEITI story yourself. Preview shown below: