4 Tips for a Data Visualization UX to Improve User Insights & Increase Engagement

By Thomas DiNatale
November 4, 2022

When it comes to health and wellness tracking devices, powerful data visualization for your user is critical. Your product needs to be designed so your user is inspired by their data to continue making healthy choices or chart a new path. 

Done well, data visualization for health and wellness products provides your users deeper insight into their aggregated data. But many product designers miss the mark when designing data visualizations. 

If the visualization is muddled in any way, users will struggle to learn from their data and view the entire product experience negatively. That’s when you start seeing your active user numbers decrease, higher churn rates, and poor customer reviews.

The 4 Most Common Data Visualization Design Mistakes

Offering your users a glimpse into their personalized data is just one of your product’s selling points. But it’s not enough to present their data; you have to design it — and well. Unfortunately, there are many ways data visualization can go wrong. Here are the most common missteps.

Type Legibility

If the type on your visualization is challenging to read, your user won’t be able to decipher the meaning of their underlying data. Product designers often try to reduce font sizes, set type at an angle, or use stylized fonts to evoke emotions. If your user has to pull out their readers to look at the title of a pie chart, something needs to be fixed.

Type legibility touches all aspects of data visualization because it’s often how a designer signifies the relationship between information. However, typography shouldn’t overwhelm the visualization; it should describe and add to the information you are trying to convey to the user.

Color Usage

You must be intentional with your color choices — it may feel like a small detail, but it has a significant impact. Choosing the wrong colors can distract the user from gaining insight into their data. Too much contrast is jarring to the eye and challenging to read. Too little contrast and the information becomes inaccessible.

We see too much color contrast frequently when it comes to brand colors. Often, a brand will have two colors that happen to be on opposite sides of the color wheel, but those colors are the same colors that the design team chooses to represent the data.

Choosing thematic colors can be tricky, too. If a sleep tracking app chooses colors to represent sleeping hours versus waking hours, for example, they might select a bright color for the day and a dark color for the night. But unfortunately, doing so would make the chart harder to read and distract the user from the underlying information.

So choose colors that are closer together on the color wheel. And be aware of color choices that may impede your user from gaining insight, or worse, lead them to exit your app and look to Google to find the information they should have gotten from your visualizations.

Position of Labels & Legends

If your labels and legends are positioned away from your chart, it will divide your user’s focus. Instead of forcing the user to go back and forth between the legend and the chart, position the labels on the chart itself. That way, the user will be able to glean important information immediately. Having to pivot between chart and legend may seem like a minor annoyance in the grand scheme of things, but these small moments of friction add up and ultimately impact your user experience.

Chart Selection

Brands will sometimes choose a chart with high visual impact, even though the data isn’t necessarily best represented by that chart. Likewise, we often see brands choose a beautiful, highly interactive chart that may seem impressive at first, but it doesn’t end up being valuable to the end-user experience. Bar charts might seem boring or not as fancy from a product design perspective. But depending on your user and the information they are trying to retrieve from your visualization, it may be the best way to showcase their data.

4 Tips to Design Compelling & Informative Visualizations

Turning user data into compelling visualizations may sound complicated. But it doesn’t have to be. Fortunately, there are many simple ways to turn your users’ data into inviting visualizations that keep them engaged and focused on the underlying data.

Be Bold and Rely on Simplicity

Users can struggle to interpret — and therefore learn from — complex data visualizations. Simplifying the visualizations improves the user experience by:

  • Reducing the cognitive load required to analyze and retrieve important information
  • Limiting potential confusion and misunderstanding of the aggregated data

A simple technique is to use visualization patterns people recognize and feel comfortable reading—for example, line charts, horizontal and vertical bars, segmented bars, and pie charts. Another UI technique you can lean on is progressive disclosure. Rather than show everything immediately, allow the user to step into complexity. Give them high-level insights about their data, and then let them decide if they want to dive deeper.

Always Make Use of Usability Testing

Moderated usability testing is an excellent way to get feedback from users about their experience with your app and how they interpret and use visualizations. For example, when we designed the Nara Baby app, we ran usability testing on the first release of trends and discovered that users found the visualizations confusing. For example, they didn’t understand how the circular time-based visualization related to their data. Additionally, they struggled to understand the vertical bars used to visualize counts and percentages.

Nara Baby Tracker trends UI first release. Users struggled to understand how the visualizations related to the trends insight.

We learned users preferred more straightforward and familiar visualizations, allowing them to interpret their baby’s trends without guesswork while also easily accessing the data supporting the trend. Armed with this insight, we redesigned all the trend visualizations and introduced a simplified version that utilized vertical bar charts. Based on inbound customer feedback, users found the visualizations easier to interpret and were more engaged.

Provide Options for Visualizing the Data

Users can struggle to make sense of their aggregated data if you provide only one data visualization. Creating multiple ways to interact with and visualize data can improve the overall user experience by allowing people to interpret information in the way that best suits them.

For example, you can provide users with filters and multiple chart options that allow them to personalize their data visualization experience. Providing options will enable users to interpret the underlying data in ways that matter to them.

If you need help determining what options to provide your users, and customer research isn’t an option, App Store reviews can be a starting point. For example, this Snoo app review includes suggestions for visualizations that would make the app more relevant to this user:

“I want the Daily Log to be a table of four columns with Sleep Start Time, Sleep End Time, Total Duration, and Percentage Of Time Soothing. No visual, just a text log. The horseshoe graphic makes little visual sense, and the exact times are not displayed.”

At a glance, you can imagine why this semicircle of data doesn’t work for this user. And their review highlights the importance of allowing users to view data in ways that work for them. In this case, a simple segmented control separating the visualization and table-based data would solve this need. For every Snoo Baby app user that loves the ‘horseshoe graphic,’ another craves a different way to understand their baby’s sleep patterns.

Highlight Key Information & Trends

Users sometimes need to learn how to interpret data visualizations or assess trends. Highlighting essential information allows users to retrieve important information at a glance and quickly identify patterns in their data.

Nara Baby Tracker trends overview UI

An overview screen is a helpful tool that facilitates this kind of rapid insight. In testing with Nara, for example, we learned users wanted an at-a-glance understanding of how the baby’s activities changed weekly. Unfortunately, the UI in the first release required a lot of scrolling and tapping, preventing users from quickly accessing the most important trends.

Knowing the visualization detail was secondary to understanding the trend insight, we created a paginated experience with an overview page. The page consists of cards that provide the user with the trend average or counts over the selected timeframe: daily, weekly, or 14-day. The user can also easily understand how the averages and counts are trending up or down relative to the previous timeframe.

Nara Baby Tracker trends UI showing calendar, graph and entry views

The user can tap the top-level trend cards to gather more detail. For example, suppose the user taps on total sleep. In that scenario, they will immediately see in large type at the top of the page the trend for the selected timeframe. Below the trend insight is a graphical view, a calendar view, and the entries supporting the insight. The user can also change the timeframe in this view and edit any errant data on the entries tab.

Partnering With a Digital Product Design Team

With the right partnership, you can build a digital health or wellness product that’s both customer-driven and visually appealing. 

Our team covers all your bases when designing digital products that are invaluable to your customer. To us, customer insights are foundational to product design. With the right design strategy, users feel at ease and confident that they can rely on your product again and again to meet their needs.

We want to help you create an exceptional experience. Consider adding us to your team.