The secret of UI data viz

The dirty secret of UI data viz is that: you don’t need 90% of it.

Area charts, bubble charts, whisker plots… throw ‘em out!

In UI, you almost always need the SAME charts with the SAME elements.

I call it The 6-Part Chart Formula:

(📣 This framework is from Learn UX Design, which opens for new enrollments – along with Learn UI Design and Landing Page Academy – tonight at midnight 🥳):

And here are the 6 parts:

(Technically, a bunch are optional, but at least consider if you need each)

The formula in action

Let’s apply this to a reader-submitted chart (thanks, Stephanie! 👋) – a coffee-growing app that lets you evaluate a region’s weather from the past few years (rain, temperatures, freezes) to decide where to grow coffee beans ☕

Now, the north star for how to apply the 6-Part Chart Formula is: always remember the use-case.

And our use-case here is: “the user wants to evaluate a region’s climate (rain, freezing, temp – often in the last few years) to decide if/what to grow there”.

Let’s take this step-by-step:

1/ Bar or line chart w/ time as x-axis

This one’s easy enough. We’ll (a) use a week as data point duration and (b) show 2 years worth of data (though, in reality, ya know, actual user research could suggest defaults 😉)

2/ Details for “selected datum”

Paper charts have to show tons of labels and lines and ticks to make data readable.

Digital charts have a cheatcode: the selected datum state.

On hover, you can easily show exact values for both axes for all data series.

3-4/ Pan and zoom

Every chart’s different, and you should allow for the use-case, but it’s worth asking yourself: how can the user (a) go back in time, (b) go forward in time, (c) zoom in, and (d) zoom out?

5/ Change data series

This one is all about saying “do we ever want slightly different things on the y-axis?”. Weirdly often, the answer is yes.

Here, you might reasonably want different types of data about a region – rain, sun, temp, etc. For this app, each would include a few charts, so we’ll make them tabs, located under a specific region 👍

And remember the use-case 🫡

As always, we have to check in: is this making the use-case easy?

If the use case is investigating e.g. “rain in Sidamo”, then what’s the easiest way of getting there? Perhaps a search box that matches queries like that 🤷‍♂️

Bam! Anyhow, that’s a wrap for our third UI of SAAS breakdown 🫡

Any suggestions for the next one? Just hit reply.

And don’t forget: Learn UI Design, Learn UX Design, and Landing Page Academy open tonight at midnight for new enrollments 🎉

If you’ve been on the fence about learning the logic behind great design, now’s the time to level up.

And if your team signs up (5+ seats), get a 30% discount PLUS 2 coaching/design review sessions with me – May and June only.
Any questions before things open up? You know where to find me 😎

Cheers,
Erik D. Kennedy