Tableau Pro Tip: Better Dashboard Layouts

Tableau Pro Tip: Better Dashboard Layouts

Tableau has many amazing tools to visually show insight, but without us crafting a readable layout of our charts, it could leave your boss scratching his head attempting to decipher your dashboard. By following this simple trick you can start building more readable dashboards today.

This design principle is entitled the “The Golden Ratio,” also known as the Fibonacci Sequence. It is a ratio found in patterns all around us from architecture to art to nature. It is often used in design and print because it is so readable. Take a look at this chart from the New York Times:

New York Times NYT

Before reading any further, what do you notice on first glance? Where do your eyes go first? Second? Third? How readable is this chart?

For me, I first looked at the world map, didn’t instantly understand what it was depicting and flicked up to the title of the chart. I then quickly scanned the sub-title text, glanced at the bottom left section and noticed that there is going to be some kind of a large change in Africa.

Still unsure what will happen in Africa, I reexamine the main map and now understand that Africa will struggle with food production in the coming years to supply its population. This all happened within ten seconds of looking at the map. What makes it so readable?

Look again with the “Golden Ratio” overlaid:

New York Times Fibonaci

That was almost the exact path that my eyes followed as I scanned this image.

The golden ratio or Fibonacci Sequence is extremely pleasing due to how to how our eyes scan images. It uses increasing spaces to visually show and allow the reader to digest information quickly. According to research from The Guardian, “Shapes that resemble the golden ratio facilitate the scanning of images and their transmission through vision organs to the brain. This is the best flowing configuration for images from plane to brain.”

Here is a sample of the Golden Ratio using harmonic spacing:

Fibonacci Spiral

Notice how each box contained within the spiral gets progressively larger. This phenomena is also observed in nature and in art in the following images:

Nautilus Shell Fibonacci

Mona Lisa Fibonacci

Here is another great example that I found on Tableau Public from Zen Master Bridget Winds Cogley:

Fibonacci Example Bridget Cogley

Notice the spiral is flipped showing that you can arrange your charts differently while still following good layout practices.

Let’s build a chart in Tableau now using the golden ratio. Tableau’s layout containers feature in the dashboard creation tab allows us to size and space charts for maximum “fibonacci-ing.” Here’s an example:

Golden Ratio Layout Template

By default, Tableau auto-sizes each viz as it is dragged onto the dashboard. In most cases, this is great, but sometimes we want to change how each chart is displayed individually without changing the sizing of other charts or we want to group multiple charts together. We do this by using the layouts feature in the dashboard builder in Tableau. Check it out:

Notice how we used blank layout containers to provide padding between elements? This whitespace also allows your brain to process images quicker.

Finally, see below with the spiral overlaid:

Fibonacci Spiral Dashboard Overlay

Now, it’s your turn.  Are there any dashboard examples you are aware of that follow the golden ratio?  Or other kinds of images or designs that follow that?  We’d love to hear from you in the comments!

-Ryan


Comments: 1

  1. madhubalan says:

    Great post!
    Thanks for sharing this list!
    It helps me a lot to find a relevant blog in my niche!

Comments are closed.