Animation can make data more comprehensible, engaging, and useful, especially on mobile. When animating data visualizations, designers should use motion design principles—and avoid common pitfalls.
Animation can make data more comprehensible, engaging, and useful, especially on mobile. When animating data visualizations, designers should use motion design principles—and avoid common pitfalls.
Daniel is a senior product designer with more than 14 years of experience. Previously, he was the Principal Product Designer for the animation platform LottieFiles. His expertise includes UI/UX, mobile, and motion design, and his background as both a designer and an engineer gives him a unique perspective on technology and creativity.
These days, with technology driving the collection and production of massive quantities of data, it’s relatively easy to get your hands on information that can guide your daily decisions. Mobile apps draw on heart rate and other biometric data to track health and exercise goals. They provide real-time data on investments, personal spending, and budgeting. They can even help parents assess their newborns’ feeding and sleep patterns.
To grasp the sheer volume of data available, look no further than designer Nicholas Felton’s annual reports constructed from his own personal data. With so much information at your fingertips, the hard part is making sense of it.
This is where animation can help. Animating data makes it more comprehensible, engaging, and useful, particularly on the small screens of mobile devices. With animation, numbers become easier to digest and otherwise overlooked trends, patterns, and narratives become apparent. Real-time interactivity with these visuals promotes engagement and allows users to explore data more deeply.
At the same time, excessive or misguided animation can defeat its purpose, obscuring rather than illuminating insights. When animating mobile data visualizations, designers should use motion design principles—and avoid common pitfalls.
Animation isn’t a mere embellishment to data visualizations. Motion offers myriad benefits, and it should be applied with the goal of achieving a specific outcome.
Helping users perceive trends and changes is a key advantage of using motion in data visualizations. The late academic Hans Rosling is known for an animation in which he plotted lifespan and income data to show changes in health and wealth for dozens of countries over decades. It’s a captivating animation that clarifies trends over time and counteracts common perceptions about global development.
Research suggests that animating static charts can improve graphical perception and increase viewer interest. Instead of displaying a chart all at once, for example, elements can enter at varying speeds so as not to overwhelm the viewer with too much information. Motions “help to show or enhance the visual hierarchy of elements, or the orientation of axes and how data is displayed,” says Tetiana Donska, a London-based UI/UX designer in the Toptal network.
Animation also helps designers make efficient use of mobile device screens. “Motion in data visualizations helps to create awareness of transitions between different states and provides more information without cluttering the user experience,” Donska says. Real-time interactivity can further maintain a clean interface because users can explore the data through gestures like tapping, dragging, scrolling, and zooming. For example, users could slide a finger along an axis to reveal different values or tap to unveil numbers.
Incorporating real-time updates into animated data visualizations can make them even more engaging to users. Olajide Akinpelu, a Toptal UI/UX designer based in Nigeria, says that seeing the data update before our eyes aids human cognition. A user refreshing static data will have a harder time detecting changes; real-time motion helps them identify insights they might otherwise miss.
Of course, making transitions and motions appear natural without distracting the user is easier said than done.
Data visualization isn’t confined to complex data sets represented by traditional charts and graphs. Even a “like” button that tallies user sentiment on a social app is a way to visualize data.
Regardless of complexity, a common set of principles and techniques comes into play when animating data visualizations. The four techniques we focus on in this article—value change; easing, offset, and delay; parenting; and zooming—aim to imbue motion in the UX environment with the naturalness of movement in the real world, conforming to users’ innate expectations and senses of continuity and narrative. The goal, after all, is to help users understand abstract data, not just to engage or delight them.
When showing value changes with animation, instead of displaying a static number, a numerical counter ticks up or a bar rises before landing on a final figure. This can be a powerful way to convey progress or growth—or lack thereof. It also signifies that the data is subject to change, and in some cases, animating values indicates interactivity.
Value change visualizations are prevalent across the mobile landscape, including in fitness, education, and finance apps. In a language learning app, for example, a bar may rise incrementally until arriving at a final score on a test. Value change shows progress and can provide the user with a sense of accomplishment, encouraging them to continue a learning path.
Applying value change to the lines in a chart is another way to demonstrate changes over time. In a bar chart showing different countries’ gross domestic product (GDP), for example, motion can reveal the trajectories of national economies relative to one another. Such visuals are called bar chart races.
In the physical world, an object can’t instantaneously go from zero to 20 mph. In the digital world, however, you can create movement without acceleration or deceleration. But that doesn’t mean you should. To the human eye, such movement appears unnatural, which is why it’s beneficial to give graphical elements natural entrance and exit speeds—known as easing.
Offsetting the introduction of different UI elements and delaying their speed can further signal to users that distinct variables are being shown, and it can help establish a hierarchy among them. In a stock trading app, for example, the value of a user’s stocks might appear first followed by those of general indices. Offset and delay makes it easier for users to comprehend numbers and charts than if they were presented all at once.
Parenting creates relationships between UI components. When a property (such as position, scale, or color) in the parent element changes, a property in the child element changes. For example, on a line chart, if a point on a line is the parent, as the user drags the point they could see the value (the child object) change.
Parenting is an effective way to increase interactivity and create hierarchy.
Zooming allows users to easily go from a birds-eye view of data to a more granular one. It can be a useful technique when presenting large data sets, the kind that might typically be viewed on desktop. A stock tracking app, for example, can load a weekly view of prices for a given stock and allow users to zoom in or out to reveal daily or yearly data.
One of most common forms of data visualization is maps, which are used widely across fitness, bike share, and ride-hailing apps. Zooming is a critical tool in this context since the confines of the mobile screen greatly curtail what can be presented in a single visual.
Edward Tufte, the man credited with literally writing the book on modern data visualization, had a simple maxim: “Above all else, show the data.”
Focus on conveying information. Attributes like color, shape, and movement should only be used to enhance understanding of the data. Extraneous visual elements—or “chart junk” as Tufte referred to it—detract from this purpose.
On mobile, where screen users may be prone to distraction, too many moving parts in a data visualization can be overwhelming.
“With mobile you have a small form factor already that demands focus,” says veteran designer Darrell Estabrook, who joined Toptal’s network in 2019. For any mobile workflow, without well-designed, discrete steps, “the user kind of goes awry.”
Estabrook adds: “For all data visualization, you have to ask, what information are you giving the user so they can make the next decision … to push a button or write an email or to dig deeper. What do you need to do to provide that [information] for them?”
You can design focused and effective mobile data visualizations by avoiding these pitfalls:
Rendering motion in visuals can be resource-intensive on the back end and could negatively impact performance and user experience on the front end. Large data sets or data that requires extensive coding elevates this risk. Before putting the resources into building such visuals, design teams and clients should be clear on the desired result—and that it will be worth the effort.
Animated data visualizations should support an application’s purpose. A language learning app might use motion to emphasize users’ progress, while an investment app might subtly highlight actionable data. Regardless of the nature of the app, however, in most cases designers should avoid flashy animations, such as falling confetti or fireworks. They not only risk gamifying visuals, which could lead to unhealthy engagement with an app, but they can obscure or exaggerate what the data actually conveys.
Working with data requires a degree of precision, and users will need a decent portion of their smartphone screen—7 to 10 mm is generally considered a best practice—to successfully execute gestures. Too much interactivity could prove cumbersome and frustrating. It’s beneficial to prioritize one action at a time.
Data visualizations should mesh with the overall style and functionality of an application, something Apple repeatedly stresses in its Human Interface Guidelines for charting data.
According to Akinpelu, the Nigeria-based UX/UI designer, maintaining stylistic consistency “in the kind of transition you use, the type of animation, the color blend” helps users navigate data sets.
Data has become a fixture in our lives, from work and school to health and finance. With ever more sophisticated smartphones and the spread of 5G connectivity, the volume of data—and the potential for applying it—are sure to grow as well.
Animation can be an important tool in helping people make sense of all this information. Motion makes it easier for users to comprehend key metrics, trends, and relationships. As with any UX feature, however, animation can be overused or misused, which could ultimately make data less comprehensible. By using motion design principles and techniques, designers can create animated mobile data visualizations that are engaging and insightful.
In data visualizations, animation engages viewers and clarifies information. Animations may show changes in value, introduce pieces of data at different speeds, or enable users to interact with data by zooming or tapping.
It can be challenging to draw conclusions from data, especially when there’s a lot of it. Animation can make data easier to process, highlight relationships between variables, and reveal overlooked patterns.
Animating years or decades of data can help viewers perceive trends. Hans Rosling’s data visualization showing changes in health and wealth in dozens of countries over decades is an example of using animation to change viewers’ understanding of the world.
Daniel is a senior product designer with more than 14 years of experience. Previously, he was the Principal Product Designer for the animation platform LottieFiles. His expertise includes UI/UX, mobile, and motion design, and his background as both a designer and an engineer gives him a unique perspective on technology and creativity.
authors are vetted experts in their fields and write on topics in which they have demonstrated experience. All of our content is peer reviewed and validated by Toptal experts in the same field.World-class articles, delivered weekly.
World-class articles, delivered weekly.
Join the Toptal® community.
