Design an effective chart

♪ ♪ Halden: Hello, I'm Halden. Lilian: And I'm Lilian. Halden: Today, we're going to show you how to design an effective chart. Lilian: Charts are powerful tools for making your apps more engaging and informative. People can use charts of weather forecasts to make plans, stock prices to make financial decisions, and fitness data to reflect on their activities and set new goals. Halden: When you design a chart in an app, you first need to design the app's experience. By identifying your app's needs, you can decide when to use charts, how to use charts, and what design system will unify them.

To learn about this important first step of the design process, see this year's talk called "Design app experiences with charts". Lilian: In this talk, we'll dive into the next part of the design process: how to design a chart. In particular, designing an effective chart, which means a chart that's focused on what you want to communicate, approachable, and accessible for people with disabilities. To do that, we'll walk through the design of a chart in an app for a food truck selling international pancakes in San Francisco and Cupertino. This finished app has an entire system of charts to help plan and manage pancake sales. Today, we'll focus on how to design one of these charts, which visualizes pancake sales over the last 30 days. Halden: Good chart design begins with identifying the chart's goal. For this page in our app, our goal was communicating: "how were pancake sales in the last 30 days?" Goals like this can go in many directions. It might be useful for our food truck owners to see the pattern of recent sales to understand how sales have fluctuated or their range, to get an idea of how big these fluctuations were. Identifying values could be useful to examine specific days. Other insights of interest could be maximum sales, outlier days, or comparisons between days of the week or location. The list can go on and on. Which of these insights are most important for our food truck owners? An effective chart focuses on a few key pieces of information. Design charts with intention. With regards to pancake sales, our food truck owners primarily want to examine how their sales fared over time and on specific days. That means we'll want to focus on communicating pattern, range, and values. How did we get from these three priorities to this chart? Let's walk through the design process step by step. Lilian: Our design process involves five topics. Marks, which are a chart's visual building blocks, like the bars in a bar chart. Axes, to provide framing for these marks. Descriptions, which make charts more approachable and easy to interpret. Interaction, which empowers deeper exploration of data and is critical to accessibility. And color, which adds personality, and, as we'll show with a second chart, can also enhance clarity. Halden: Our first step is to figure out what kind of form we want for our chart, using the visual building block of charts called marks. A mark is the bar in a bar chart, the line in a line chart, and the point in a scatterplot. They're the visual elements that represent items in data. There are many kinds of marks, and with any one mark, you have a rich variety of ways to express data. Take bars, for example. You can line them up to represent data's change over time. You can stack them to show proportions: how different categories add up to a total. Or you can put them side by side to compare values between different categories. These are just a few examples of the many rich ways you can express data with marks. So what options make sense for our chart? When it comes to marks, you need to design for your goals and data. As we decided earlier, our chart should focus on three insights about pancake sales in the last 30 days: pattern, range, and individual values. As we choose our mark, we'll pay close attention to pattern. It would be useful for our food truck owners to see any fluctuations or trajectories in their sales. We'll start with time on the horizontal axis and pancake sales on the vertical axis. These axes are incomplete; we'll fill them in later. One option for a mark is to use points to represent each day of pancake sales. When we envision nice smooth data for the chart like this, points look great! But real data is rarely this neat. With realistic data, we can see that using points makes it difficult to make out any pattern. It's important to test your designs with real data early. While point marks are a great at revealing some insights, such as identifying outliers or clusters in data, our needs call for something else. To make the pattern of sales easier to see, we can connect sales counts by using a line mark. Lines are great at representing rates of change. Here, patterns and trajectories are clear. But what if, in one month, our food truck needed to close for five alternating days? In this situation, the pattern of sales becomes less clear because the segments connecting far-apart values become more prominent than the values themselves. Remember to design for a variety of scenarios in your data. Bar marks are a more flexible option for our chart. Here, zeros are visible without creating a distraction. This chart is also intuitive to read: more white means more sales. Since sales are cumulative, the visual weight of all the bars corresponds directly to the number of sales made in the last 30 days.

Lilian: Great! We've chosen a mark that makes the pattern of pancake sales visually apparent. But we also need to follow an important tenant of accessible design: for all information you show visually, you also need to design how to represent it non-visually. In other words, you need to make sure these marks and the information they represent are also accessible with VoiceOver. VoiceOver is a screen reader. It lets people read information on their screen through Braille or speech so people who are blind and others can use apps without needing to see.

VoiceOver: 1,234 pancakes. Lilian: You can use VoiceOver to navigate content, like the elements on a chart.

VoiceOver: May 8th. 54 pancakes. May 9th. 36 pancakes. One year, button two of two. Lilian: You can also use it to interact. VoiceOver: Selected: one year, two of two. Lilian: And through a feature called audio graphs... VoiceOver: Audio graph. Lilian: Play a sonification of the chart VoiceOver: Play audio graph. Complete. Lilian: To make your chart's marks non-visually accessible, you need to 1. design how VoiceOver will navigate over data values, and 2. use audio graphs. Conveniently, charts implemented with the Swift Charts API automatically include customizable accessibility labels for marks and an implementation of audio graphs. To learn more about audio graphs and Swift Charts, check out developer documentation, last year's talk "Bring accessibility to charts in your app", and this year's talk, "Hello Swift Charts". Nice! We've designed our marks for our goals and data, and made them accessible in VoiceOver. With our decisions, we addressed one part of the question, "how were pancake sales over the last 30 days?" Specifically, their pattern. Now our food truck owners can see recent fluctuations in their sales. But what about the range of these fluctuations, and values on specific days? Halden: For that, we'll design axes. Axes frame marks to provide references for their values. For example, in our chart of pancake sales, when we label the horizontal axis with the start and end dates, it becomes clear that our chart shows the 30 days from May 8th to June 6th. What about the vertical axis? The values here are entirely dependent on the sales of the food truck. With axes like this, it's important to consider the range. A range can be either fixed or dynamic. An example of a fixed range is the vertical axis of the battery chart in the Settings app. We know that the battery level will always go from 0 to 100%. Fixing the vertical axis to this range helps us see, at a glance, when the battery is full, empty, or somewhere in between. While it'd be confusing to change the vertical axis range for this chart, it can be necessary for others. Consider the step count chart in the Health app, which uses a dynamic range. There is no fixed maximum step count, so it makes sense to dynamically adapt the vertical axis range to fit the data. This way, even when the step counts are low, the bars can make full use of the vertical space available, making fluctuations easier to see. Let's return to our chart on pancake sales. As with steps, there is no limit to how many pancakes the food trucks will sell. So let's use a dynamic range to automatically adapt the upper bound of our vertical axis to our data. Notice how we still fix the lower bound to 0. Doing so is generally a good idea when using bar marks as it keeps the heights of the bars meaningful. This way, a bar that's twice as tall as another has twice as many sales. While labels for the lower and upper bounds of each axis are helpful, we still need more structure to interpret sales in the middle of the chart. That leads to our next concept. We need to tailor the density of our axis grid lines and labels. Grid lines give you reference points to estimate the values of marks. The more grid lines you have, the easier it is to estimate these values. Some charts don't need grid lines and labels at all, such as this trend platter in the Health app. These charts tend to be sneak peeks of larger charts in another view, so an idea of the data's pattern is all you need. Grid lines and labels would add distraction. Grid lines and labels appear in the follow-up detailed chart, where you may want to analyze values more precisely. Earlier, we pointed out that our food truck owners want to examine the range and values of their sales. Right now, we have two horizontal grid lines: one at zero and another at roughly the maximum number of sales for the month, which is too few for estimating the range of sales in the middle of the chart. At the same time, too many grid lines and labels can be distracting. Here, having seven horizontal grid lines might be overwhelming. Balance these factors to choose the appropriate density. For our chart's context and intended use, it's more effective to use around four horizontal grid lines and adjust as the range of the axis changes. Note that as we place these grid lines and labels, we use intuitive values to make the chart approachable– in this case, multiples of 20. In the same way, it's intuitive for people to read time in steps of seven days, which gives us five grid lines for a 30-day period. So we've designed our axes by considering their range and tailoring the density of grid lines and labels. We've gone a long way towards making our chart effective, but charts are complex visual elements, and our example still needs work before it's approachable. How can we convey the meaning behind the marks and axes in a way that's quick and intuitive? Lilian: That brings us to our next topic: descriptions. Descriptions are important for framing the intent of our chart and making it approachable and accessible. Use descriptions, or text preceding the chart, to provide context to make the chart more approachable. They can make it clear that our chart is about pancake sales in the last 30 days. This text can be brief and should be a part of the user interface around a chart. When we look at this chart in the UI of our app, the screen's title "Total Sales" already gives some context, and the label on the segmented control that says "30 Days" quickly establishes our time range. That's a start. Something else we need to clarify is what the vertical axis is showing. Are we looking at sales in terms of money? In number of pancakes? One solution could be adding an axis label. We can write "Pancakes sold" above the vertical axis. But here it's small and off to the side. We want the meaning of this chart to be obvious. An alternative is to contextualize the data with a title. By using "Pancakes sold" as a heading for the chart, the chart's meaning is front and center. Providing this context is important for framing the chart. We can make these descriptions even better by summarizing the main take-away of the chart. A lot of charts use this approach. For example, the text above a precipitation chart in Weather describes its main take-away. In this example, it's: "Light Rain Forecasted– Light rain is expected to start in 9 minutes and last for 36 minutes" There are many ways to present takeaways, from sentence descriptions to glyphs comparing historical data. We'll take a simple approach for our chart. Let's bring out a main take-away for our chart by rewriting our chart title to say "Total Sales: 1,234 Pancakes". This description grounds our chart with a concrete value and summarizes the most critical information. Providing descriptions that contextualize the data and summarize key take-aways eases readers into your charts. It makes a chart more approachable and accessible for everyone. It sets up what to expect or look for, which can be especially helpful for people with certain disabilities that make examining the details of the chart particularly time consuming or challenging. Speaking of accessibility, using audio graphs for our chart adds important descriptions for VoiceOver. With audio graphs... VoiceOver: Audio graph. Lilian: VoiceOver can non-visually describe what the axes are. VoiceOver: Describe chart. The x-axis is time. The y-axis is sales. There is one data series. Lilian: Audio graphs also provide several summaries about the data, including one you can customize. These descriptions, especially of the x and y axes, are critical for non-visually communicating the chart. If audio graphs isn't an option, make sure VoiceOver still has immediate access to these types of descriptions some other way, like through accessibility text labels. Halden: Now that we provide context, summarized the main take-away, and use audio graphs or an equivalent source of descriptions, our chart has all its essential parts. But we could make it even more effective with interaction. You can design interaction to empower people to explore and understand their data at a deeper level. For example, you can use interactions to highlight sections of a chart to explore how their data fits in a broader context, or toggle between days, weeks, months, and years. We have an opportunity to enhance our pancake sales chart with interaction. Our food truck owners would find it useful to see exactly how many pancakes were sold on a particular day. We can offer that with an interactive tooltip, which lets us touch the chart to highlight and read these specific values. To make these touch-based interactions easy to use, make sure to use large touch targets. So instead of making touch targets on our chart the same size as our marks, adding padding and stretching targets to the full height of the chart, makes it easy to use our tooltip because you can touch any part of the chart including the white space above the bars.

Lilian: Interaction isn't only about touch. People use a variety of other ways to interact with devices, depending on factors like situation or disability. So you need to design for multiple types of input to make chart interaction approachable and accessible. In other words, for every interaction you design for touch or mouse clicks, you need to design the same experience for inputs like keyboard, Voice Control, Switch Control, and VoiceOver. As you design these interactions, it's important to make changes on the screen visible, like sizing the focus indicator for Switch Control or VoiceOver to be large, the same way we designed our touch targets.

Part of providing support for VoiceOver is that you also need to design good accessibility labels. Recall how when we designed our marks, we made sure VoiceOver can navigate the chart's data values. We made it so that when VoiceOver navigates onto one of the bars, it reads out values like "June 1, 36 pancakes". Let's examine what makes this label a good design. It's succinct. We don't repeat unnecessary information, like the axis names "Time" or "Sales" which audio graphs already describes. We spell out entire words instead of using abbreviations. That way, VoiceOver reads out "June" instead of "Jun" or 6-dash-1, and we make it clear that 36 is the number of pancakes. We also order the contextualizing data value, in this case, the date, to come first. This ordering makes it easier to quickly look for a specific value.

VoiceOver: May 27th. May 28. May 29. May 30th, 41 pancakes. Lilian: It also makes the data easier to interpret, especially since you can jump to different parts of the chart and getting the context first lets you know where you are.

The kind of labels you design depend a lot on the goals of the chart. For example, the charts on elevation changes in cycling routes from Maps don't show individual values, but a route's pattern of elevation gains and losses, and use many vertical bars– too many to navigate over individually. A well-designed accessibility label could then label a section of bars with: "From 3.6 miles to 4.4 miles: Climb 100 feet, descend 5 feet". In contrast, if a chart is a tiny preview inside a button for opening the same chart in more detail, it might make sense to summarize the entire button, chart and all, with one label. Now that we've designed our interactions to serve the focus, approachability, and accessibility of our chart, there's one more topic we'd like to talk about. Halden: Color. Color can add personality and enhance clarity in a chart. So far, we've been designing in black and white. Color can give our chart more pop in our app. But it can also convey so much more. You can use color to distinguish categories, as with the three activity rings in the Fitness app. You can also use it to communicate intensity, such as heat in a weather forecast. You can even remove color to draw attention to features of a chart. Here the health app does so to highlight your minimum and maximum heart rate within a day.

Consider using color to enhance. You ideally use color as an addition to make the chart easier to understand and not the only means to convey critical information. To help explain, let's use a scenario of tracking two food trucks in our app: one in San Francisco and the other in Cupertino. We want to modify our total sales chart to allow us to compare sales in these two locations. How do we do this? We could use a line for each city's sales, but we can't tell which line belongs to which city. No label or layout distinguishes the two. We can clarify the association by placing a symbols on each line to mark individual days. Here we use circles for San Francisco and squares for Cupertino. Notice that we need a legend now. We can add color to enhance this difference. It's important that color is added on top of the symbols here. Some people with colorblindness may not be able to distinguish the lines otherwise. This practice is especially important for system settings like Differentiate Without Color. When choosing colors to represent data, there are a few things to consider. First, consider how color can carry meaning. For example, red and green for low versus charged battery levels. Culture can inform the meanings of colors too. In the US, it makes sense to color code Stocks with green for gains and red for losses. In some countries like China, however, people expect the opposite, with red indicating gains and green indicating losses.

For our chart, system blue and green work well. There is no obvious meaning tied to these colors in the context of cities. But what if we wanted to customize the colors to match the look and feel of our app? When choosing colors for categories, balance visual weight. If one color overpowers the other, a hierarchy can be implied. Say we started with a deep purple for San Francisco and this vibrant pink for Cupertino. Notice how in this case the prominence of Cupertino's pink compared to the darkness of San Francisco's purple makes Cupertino look more important. We can fix that by evening out the saturation and luminosity. That's better. And while these color choices still need some work, now they have equal weight and don't suggest one city as primary and the other, secondary. Note that adjusting color for visual weight is a tool. Sometimes it's useful to use a color with more visual weight when we want to draw attention to specific values or sections in a chart. Trend charts in the Fitness app use this strategy to highlight your recent activity. When choosing a palette, it's also important to choose visually distinct colors to improve accessibility and readability. A good rule is to pick colors that are easy to differentiate by name and contrast well from each other. So instead of purple for San Francisco and purpley-pink for Cupertino, let's use purple and green. Let's also make sure they're not just distinct from each other, but also from the background. Ensuring that colors have high contrast both from each other and the rest of the chart makes the chart more accessible for people with visual impairments and is a better overall design for everyone. Remember to also try making your colors distinct for people with color blindness. You can check your choices with color blindness filters. Finally, make sure your chart respects system settings by designing colors to adapt for both Dark Mode and Light Mode, as well as Increase Contrast. All right, let's recap. What did we do today? Lilian: Well, we designed a chart for our pancake food truck app. To do so, we chose marks that most effectively communicate our goal, and represented them in VoiceOver, set our axis range and gridlines to better communicate values at a glance, added descriptions to ease people in with context and overviews, incorporated interaction to offer details on demand, added a splash of color as the butter on top of our pancake chart, and further used color to enhance our second chart for comparing how our pancake sales between cities stack up. At every step of the way, we made design decisions to ensure that our chart was focused, approachable, and accessible– in other words, that we made an effective chart. Halden: Remember, the chart we designed is part of an entire system of charts within the rich context of an app. You can use the same design process to make these other charts on pancakes flippin' fantastic. Now I want some pancakes. Lilian: Yeah, me too.

Halden: Thanks for watching.