Enhancing Dashboard Interfaces with Shape Layering Tricks

I’ve been working on an Excel-based dashboard for a client that wants very stylized interfaces. So I’ve been experimenting with augmenting his dashboard interface with Excel Shapes. The talented Chandoo touches on this a bit in his post on using shapes to make prettier charts. That was a good start and gave me a few ideas of my own.

.

Today, I’ll share a few visual tricks I implemented in the stylized dashboard.

The data I’m showing here is fake and the component pieces are shown separately, but I’m hoping these few examples help you conceptualize how shape layering tricks can help enhance your dashboard interfaces.

.

The Wraparound Banner

In one piece of the dashboard, I show a top 10 list with a wraparound banner.

.

This subtle visual trick uses several shapes and a linked picture (via the Camera Tool). I simply stack the shapes on top of each other, and then adjust each shape’s “Bring to Front/Send to Back” position so that they are layered properly.

.

.

The Peekaboo Banner

Every good dashboard should have a header that shows a small set of Key metrics in an “At-a-Glance” view. For the header in this stylized dashboard, I used a peekaboo banner created with Excel shapes and linked text boxes.

.

Here is a view with all the shapes blown out.

Again, the key is to layer the shapes so that they fall nicely on top of each other, creating a cohesive effect.

.

.

The Peekaboo Tab View

Here’s another idea you can use to implement a nice tab view.

.

There is no real magic here; just a set of shapes and text boxes that are cleverly arranged.

.

The Pie of Column Interface

In an effort to show a visual side-by-side view I created something similar to this. Each box contains a Pie chart representing the percent of total revenue, and a column chart showing some level of detail for the Region.

.

Here’s a disassembled view showing how it all stacks up

.

.

Ok – so none of this is mind blowing stuff, but you have to admit it’s pretty amazing how easily you can give your dashboards a unique look and feel with a few clever Shape tricks.

Feel free to Download the sample file to get a starter model with these ideas.

31 thoughts on “Enhancing Dashboard Interfaces with Shape Layering Tricks

  1. Michael Pennington

    As a longstanding member of the twelve, I have to say good stuff. I haven’t been this inspired to create a dashboard since the great Waffle Chart post of ’13. Very cool.

  2. Jared

    Nice job DP. Could you assign your loyal followers a member number so we know where we fall in the dirty dozen?

  3. ESP

    Fantastic! Thanks for sharing your knowledge. Would you make this file available for download?

  4. Jon Acampora

    I like the pie of column interface solution. It’s an effective use of keeping a pie chart simple, and also displaying a % of total with the actual data.

    I always find it a bit challenging to effectively display both those metrics, actual values and % of total, in a single chart or graphic. I tend to keep them separate, and the pies are a very interesting way to display it.

    Thanks for the inspiration!

  5. AlexJ

    Mike – hope I get to be counted as one of the 12 as well. Hey, wasn’t there someone else famous who had 12 fans??

    Very strong post. I suspect we’ll see lots more on this topic.

  6. Arnika

    Absolutely stunning! Tomorrow I’m gonna surprise our CEO with one of your graphs – prefer the pie chart! Thanks for sharing your great ideas

  7. Karen Williams

    These are great examples. I’m looking forward to sharing them with my students the next time I teach a charting lesson.
    Thank you for sharing your project designs.

  8. Jon Black

    Just what I was looking for to learn how to use layering of shapes to improve the look of data on a dashboard. The sample file was very helpful. Thanks.

  9. Miguel

    Thanks a lot, very useful and aesthetics, that’s design.

    On The Pie of Columns Interface I would put the letters of Total Revenue with the same color of the segment on the pie chart that represents that revenue.

  10. Pingback: Using Shapes for Stylish Excel Dashboards – Data Cycle Analytics Kenya

  11. Pingback: Using Shapes for Stylish Excel Dashboards – Data Cycle Analytics Kenya

Leave a Reply

Your email address will not be published. Required fields are marked *