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.
The Benefits of Animating Mobile Data Visualizations
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.
Animation and Data Visualization Techniques for Mobile
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.
Value Change
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.
Easing, Offset, and Delay
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
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
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.
Motion Design Pitfalls to Avoid
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:
Resource-intensive Visuals That Don’t Add Much Value
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.
Flashy or Superfluous Animation
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.
Overly Interactive Visuals
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.
Inconsistent Style
Data visualizations should mesh with the overall style and functionality of an application, something Apple refers to in its Human Interface Guidelines as aesthetic integrity.
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.
Keeping Pace With Surging Data
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.
Further Reading on the Toptal Design Blog
creatSource link
