Guidelines to follow when designing your next charts

Before Husprey, I was PM on a mobile (iOS) app — I often talk about it but I swear that today there is a good reason 😬. On a yearly basis, Apple updates their operating system (iOS) and with each new version, Apple also updates their "Human Interface Guidelines".

Human Interface Guidelines document rules and best practices to be implemented both by internal teams and 3rd party apps. It can be considered as their public "Design System".

With their latest iOS 16, they added an entire "Charting Data" guideline that I found very interesting.

Here is a selection of tips and guidelines to help you when designing your next charts. It's a mix of both Apple and Husprey recommendations.

Never let a chart go alone. Add context.

And that is why at Husprey we prefer notebooks over dashboards.

One chart without context (or worst, without legend or axis) can lead different readers to interpret a chart in too many different ways.

However, as soon as you add context, then things start to improve.

It can be as easy as a single sentence highlighting what you want readers to remember.

"We've experienced a +12% MoM compounded growth in MRR over the past 6 months." → You will both define the exact metric used and guide readers towards the figure to remember.

"Last week was our 2nd best week in terms of Active Users." → You remove a difficult situation where readers will struggle to distinguish the best and 2nd best week if figures are close.

Simplicity over complexity.

One chart. One meaning.

You should not try to add multiple meanings and conclusions to the same chart. It's better to have different charts following each others and that together will build a story. For example, you might want first to display the composition of a metric and then the actual values in a second chart rather that mixing both in a single chart.

Traditional over original.

In business, bar charts have more impact that a manually styled pictogram chart.

I must admit, some newspaper stories are beautiful. However, the more exotic the chart is, the more difficult it is for the reader to understand your chart. When picking up a chart type, you should think about the dataset type, the point you're trying to make but you should as much as possible account for the final user. An advanced Sankey chart might help an advanced user but bring frustration to many beginners.

Do you remember log scale charts on TV at the beginning of Covid? 🤯 🤢

Consistency and continuity.

One data type, one color.

This is a simple rule and yet this brings so much fluidity to your readers over time. Users can then quickly parse and understand your charts with minimal brain efforts. As an example, at Husprey we count users in green, organizations in blue and query executions in orange.

To help users enforce this continuity, our product now integrates a color palette that can be customized based on your needs and depending on queries column keywords!

Any other charting tips I should add to this list?

Last week, we added on Husprey a brand new Horizontal Bar Chart. This week we will release Scatter Plot Chart. And we will continue to invest resources in providing the easiest and fastest way to communicate information through charts. Not all the fancy charts, only what allows you to go faster from your question to communicating the findings.

Further readings about "Charting Data" in Apple Human Design guidelines:

• Patterns | Charting Data
• Components | Charts
• Video | Design app experiences with charts