Animated UI – Playable Time Dimension

Any report and dashboard designer will know that choosing the right UI element for a KPI is the first step in effective data visualization. Many factors such as source data, form, placement, color, font, context etc also play vital role in effective data interpretation. In similar fashion, adding minor animations to a visualization with data can enhance both look and feel as well as better interpretation of data. An animation to UI element can be viewed as an addendum that enhances cognitive index aiding in data interpretation.

Animating a visualization should not be confused with simple actions such as fading, scrolling, highlighting etc., which only affects the look and feel of the output and do not add any cognitive value. A sample animated visualization of house sales over a period of time can attest to the fact about providing better cognitive value rather than a static chart.

Animations that enhance the cognitive index should only work with data points rather than the whole canvas. The movement of data points provides the user with context of analyzing/comparing the output with other dimensions.

Time is the most commonly used dimension of such animated analysis. Since “Time” is inherently linear and used extensively for trend analysis, it is de-facto choice for “animation axis”. Canvas of the UI element can be any type of visulaization i.e single dimension pie chart or multi dimension bubble chart or hierarchy based sankey diagrams. From “Time” perspective, this dimension is excluded from the canvas wherein analysis is performed. Data over a period of time is looped in the same canvas to create stunning animated output that can provide higher cognitive value to end user.

Popular and great example of animated visualizations can be found in the link below.

Sample Animated UI @ Medium