Design app experiences with charts

Nicholas: Hi. I’m Nicholas Felton, a designer on the Human Interface team. Today I’ll be talking about how to build great app experiences using charts.

Charts are a great way to communicate complex information. We use them throughout Apple to enhance our products.

Health uses charts to help us understand our bodies, Fitness inspires us to stay active with charts, and Weather displays charts to help us plan our day.

We know that developers love them as well, and we see inspiring examples in every category. From the detailed workout analysis in Strava to the playful progress charts in Duolingo.

Charts can be found everywhere, and when well-designed, can reveal subtleties in data that you cannot communicate easily through text. In addition to their utility, charts are also an opportunity to support the personality of your app and add visual interest to your UI.

To demonstrate how an app can be enhanced with charts, let’s look at one made for the owner of a food truck selling pancakes. The app currently has a tab for entering orders, and another for viewing recent transactions. This works fine for keeping track of sales, but this information could be much more useful. This year, we’re introducing Swift Charts. With this framework, making charts for Apple devices has never been easier. In the following sections, I will share the principles we follow when designing experiences with charts at Apple. We will apply these concepts to create wireframes for a more informative version of the food truck app. In order to build a great experience with charts, we should consider three things: when to use charts, how to use them, and how they relate to each other in a chart design system. Let’s begin by discussing when to use charts in an app. Here are some common cases where a chart can elevate the information being presented: When showing historical or predicted values, a chart can vividly demonstrate changes in data.

By visualizing a portion of a whole, we can use charts to show the state of something that is completing, progressing towards a goal, or emptying.

When comparing items or categories, we can easily evaluate their values with charts.

To decide whether any of these approaches are appropriate for your app, consider what the experience needs first. How will a chart support the core goals of your app? When used correctly, charts provide focus. As an app creator, there are many things you could visualize, but only the most important information should become a chart.

For someone using an app, charts are a strong signal. They direct attention to the information you want them to understand. The goal of the food truck app is to improve the operation of the businesses using it. If we can use charts to turn a list of transactions into actionable information, food truck owners will welcome the improvement. Here is some key information that we know will be useful to food truck owners: viewing recent sales, understanding what items are popular, and knowing the best location to visit each day.

As you consider your app, remember that charts should direct attention and provide focus to the most important information in your experience. Now that we’ve established what we want to communicate, let’s look at how to achieve this using charts.

To illustrate recent sales, a chart showing change over time will be appropriate.

One way of doing this is to use a bar chart showing sales totals for each of the last 30 days. We will add axis labels soon, but first, it needs a description to tell someone what the chart represents.

A title like "Sales in the Past 30 Days" labels the elements of the chart but doesn’t communicate anything more. How can we summarize the information being shown? A chart should be accompanied by text that describes the chart contents.

If read in isolation, it should be informative.

Adding the total number of pancakes sold transforms the title into a self-contained description. Now someone can quickly gather key information from the text, while the chart provides supporting details.

When a chart is not straightforward, using a complete sentence for the description can make it easier to understand.

For example: "Sales in the past 30 days totaled 1,234 pancakes." Another way of framing the chart is to interpret the data. For example: "Sales for the past 30 days are up 12%, totaling 1,234 pancakes." This will help someone understand if the level of recent sales is high or low or if it is increasing or decreasing. This technique can make a description more meaningful, particularly when the data is unfamiliar.

Each of these approaches is a good way of describing a chart, but this overview is just one way of explaining our sales data. What else can we do to illuminate these transactions? Try to incorporate details from other perspectives. It’s important to summarize your data, but when we find ways to elevate categories or highlight individual records, a chart becomes multi-dimensional. Here are some additional perspectives to consider: At a macro level, we look for ways to describe the entire data set, like a total, or average value. At a medium scale, we look at sub-sets of data. These might be time-based, like comparing weekdays to weekends or investigating changes related to the time of day. Other approaches might categorize sales by the style of pancake or the city where they were sold.

At the micro level, we focus on individual data points. The last transaction or largest sale are important small-scale details you may want to call out in your charts.

The more carefully you observe a data set, the more detail will emerge. Some of the perspectives we’ve identified could be useful to food truck owners planning their inventory or sales locations. It would be useful to augment the recent sales chart with some of these details. To do this, we can use a set of tappable rows under the chart. Each row provides a summary statistic, and when tapped, the chart is updated to match. We can show the daily average value or the difference between weekday and weekend sales or the best sales day. These overlays can be extremely useful, but this amount of information requires a large surface to work effectively.

As the functionality of a chart increases, so will its size.

Smaller charts tend to be static. Examples include Watch complications, the repeating thumbnail charts in Stocks, and the trend platters in Health.

Static charts rarely exist in isolation. They tend to provide a preview of a larger chart in another view. As they are generally small, static charts don’t require grid lines, labels, or interactivity, since they create the expectation that additional detail is just a tap away. Interactive charts tend to be larger, and include much more detail, like the charts in Stocks and in Health.

An interactive chart will typically be the width of your view, but not full-height. You should include axis lines and labels so that values can be estimated.

Interactivity is recommended at this size for accessing precise values in the chart and the ability to change the time range or time scope will aid exploration.

The largest and most interactive charts allow for deep investigation of data and require the most vertical space. As charts become more powerful, it’s important to introduce additional functionality gradually. You should progressively reveal chart complexity so that someone can choose the level of information that matches their interest.

Use a small static chart higher in the navigation hierarchy to offer a path to expanded versions of the chart.

When you create a link between two versions of the same chart, that progression should maintain continuity by preserving values, context and state.

Keep in mind that when someone expresses interest in a chart, they want to see more of what they have already seen. This means that a chart should retain its shape and any numbers apparent in an earlier view should be preserved.

You can add information, but showing something different can be frustrating or disorienting.

While we’re considering the functionality of different sized charts, let’s revisit our food truck app to determine where our planned charts will go. We currently have two tabs, one dedicated to placing orders, and a second that shows the sales history. These records are what we will be visualizing, so it makes sense to adapt this view to include our charts.

Let’s clear the tab by moving the sales to a separate view behind a "View all sales" navigational element. We now have a prominent canvas for our charts. As a result, it’s appropriate to use a static chart that lets someone scan the data and decide whether they want to see more.

Here’s the static chart showing recent sales. Tapping the platter leads to an expanded interactive chart. We now have a complete recent sales experience. This interactive chart will support detailed analysis with 30-day and 1-year views, touch states, and tappable summary statistics.

As you’re working on your app, remember that charts need descriptions to inform the contents and provide a key takeaway, the details in your data can add richness to your charts, and that you should progressively reveal chart complexity within your app.

Now let’s look at chart design systems. When your app includes more than one chart, you’ve created a chart design system. Here are some things to remember when planning multiple charts: Use familiar forms. Start with common chart styles to aid comprehension. If someone has already used a similar chart, they will be more likely to understand yours. Bar charts and line charts are forms that many people encounter and use daily, while a scatter plot is less common and may require extra guidance to ensure that it is interpreted correctly.

If you want to do something unique, it should be introduced clearly, as demonstrated here in the onboarding flow for Activity. After the activity rings are introduced, they are split apart to show the move, exercise, and stand components.

Ideally, a new form is central to your app, not supplementary. The prominence you give a novel chart will encourage people to explore and understand it.

When creating supporting charts, familiar forms are more important, as they will not be given as much prominence.

Differences matter, and the variations between charts are a signal that something has changed.

To demonstrate this, let’s start with two copies of our recent sales chart. I’ll slowly update the chart on the right to communicate different information, and we'll show how the design evolves to signal these distinctions. First, I’ll change the time scope of the chart on the right. Rather than showing recent sales, it now shows sales for the last 12 months. I have changed the description and updated the chart to show 12 months of data. Minimal changes are required for this modification. If I want to change the type of data being displayed in the right-hand chart, it may not be sufficient to only change the description.

Noticing this change in text could be easily missed, so an additional change is necessary. Giving each of these charts a distinct color helps. Now it is easier to notice that these charts are unique. Creating this difference makes it more likely that someone will now read the description.

Finally, I want to update the chart on the right to show the range of daily sales for each of past 12 months. This requires both a change to the description and the way that the data is represented.

To underscore the significance of this change, modifying the styling of the bars is appropriate.

The chart on the right now conveys a different subject, different time range, and different metrics. The design is purposefully distinct to ensure that these differences will be noticed. We can apply these principles to the two other charts we need for our food truck app.

To compliment the recent sales, I’d like to add another chart that shows the most popular style of pancake.

One way of showing the most popular style is to compare the relative sales level for each pancake.

Since we are interested in the last 30 days as a whole, we only need one bar to compare the popularity of styles.

If I separate the bars, I can compare their sizes more clearly, but this starts to look like a time series chart again.

By making the bars horizontal, I can accentuate the difference between this chart and the recent sales chart.

The horizontal orientation also lets me make the bars longer without needing to make the platter on the sales tab taller.

In this preview platter, I’ve omitted labels to focus only on the top style.

In the detail view, each bar is labeled, and the relative values are visible.

For our final chart, we would like to show sales in the two cities where the truck operates for each day of the week.

For this, we will need to do something a bit specialized. The context for this chart is sales by day of the week. In this case, we want to look at each day independently. Here are the average daily sales for each day of the week over the past 30 days.

As the food truck operates in both Cupertino and San Francisco, we need to split these bars to represent each location. Finally, let’s convert these bars into lines to focus on the daily changes. I’ve added this chart to the sales tab and included a description to summarize the data. In this case, the best sales day over the past 30 days was Sunday in San Francisco. The subsequent detail page is the last chart we will add to the app. It provides additional interactivity and details, including keys for the two lines.

We’ve now sketched out the set of charts we plan to add to the pancake food truck app. Using charts to show recent sales, popular items, and top days and locations will dramatically improve the utility of this app.

As you work on your app, remember to use familiar chart forms to assist comprehension and intentionally create differences between your charts to improve their interpretation. In this talk, we discussed when to use charts, how to use them, and how they relate to each other in a chart design system. Applying these principles will help you communicate data in your app with more clarity and appeal. To continue learning about chart design, you can watch "Design an Effective Chart," or for an introduction to Swift Charts, watch "Hello Swift Charts."