Design loading animations for data visualizations
When I was working on a loading animation project, I was able to read many resources to get started. Yet I found very little information on data visualizations. Now that I have designed and implemented the loading animations for 3 analytics products, I would like to share some learnings.
There are two steps. First, design the static skeleton screens and second, apply the animation to it.
Keep in mind that data visualizations are created to interpret data, so skeleton screens also need to fit the use cases. Aesthetics is another major factor as loading animations are used to make transitions more smooth.
Abstract the data visualization for the skeleton screen
The design challenge for the static skeleton screen turned out to be the balance between specific depiction and abstract extraction. The solution tends to be on the abstract side.
Let’s take these two analytics products as examples.
Pulse illustrates week-by-week pipeline changes in a quarter. That’s all the ongoing deals.
This visualization has 13 groups of stacked bars and dots. They display the state of the business over a quarter. Assume we are at week 8. The pipeline has been decreasing from $80M at the beginning of the quarter to $49.7M. The green bars at the bottom are increasing — more deals are closed. From week 9 to 12, the hashed green bars are projected closed deals.
The skeleton screen is fairly straightforward — 13 bars with varied heights. What should the 13 bars look like? Should the rectangles decrease in height for the decreasing pipeline? Or should they continuously go up for closed deals?
In the final version, the vertical bars grow from left to right because this ascend looks successful and delightful. The Fibonacci array makes the group of bars aesthetically pleasing.
Flow breaks down a group of deals by one dimension (stage or forecast) and shows the movement among that dimension during a certain period of time. For example, I can see that during this Monday and this Friday, of the $16M deals in the Commit stage, $8.3M won.
When it comes to the skeleton screen, the first version was apparently too specific. Due to the dynamic nature of data visualizations, users see different charts. This skeleton screen will create abrupt transitions for most users.
The final version only kept the two bars on the left and right, representing the list of deals at the beginning and end of the period.
Apply loading animation to match use cases
I have already decided on a shimmering animation for the skeleton screens. The application for our data table is easy to decide — each column “shimmers” from left to right as they represent one group of data.
Trend compares the current quarter to four historical quarters. We can see 5 groups of bars. Each group has a narrower grey bar and a wider colored bar. The narrower grey bars represent the pipeline as of day X in previous quarters, and the colored bars represent how the deals ended up at the end of that quarter.
Therefore, two bars of the same quarter shimmer together.
I hope this article provides some inspirations for designing loading animation for data visualizations. If you have any questions, please feel free to comment.
