How to Add an Instruction Overlay to Tableau Dashboards

Tableau has some incredibly powerful tools for interacting with your data. This 4-part series contains a number of tips and tricks for leveraging those tools to build business dashboards that are more flexible, more engaging, more powerful, and generally, just a lot more fun to use. This is part 4 of the series and covers how to add an Instructions "Overlay" to provide information on how to interact with and navigate your dashboard. Check out the Resources below for a link to the dashboard referenced in this blog post.

Resources:

Superstore KPI Dashboard on Tableau Public

---

When we build dashboards with a lot of interactivity, it's critical that our users know how to use them. This can be a huge barrier for adoption and one of the more common causes for low usage on a dashboard. Training is important, but you may not always be available to train new users or to answer questions. Including an overlay like the one above can provide clear instructions on how to interact with your dashboard. There are many design tools you can use to accomplish this, but for this demo, we'll be using PowerPoint

First, we are going to copy our dashboard into a PowerPoint slide

1. On the dashboard, click on Dashboard > Copy Image

2. Open PowerPoint and go to a blank slide

3. Set the size of the slide equal to the size of your dashboard

4. Go to Design > Slide Size > Custom Slide Size

5. Adjust the height and width of the slide to match your dashboard's size

6. One inch in PowerPoint is exactly euqal to 100 pixels in Tableau, so a dashboard that is 1200 x 900 will fit perfectly on a 12 x 9 inch slide

7. Paste the image of your dashboard into the slide

Next, we want to create a semi-transparent layer over the dashboard image

1. Click Insert > Shapes and add a square to your slide

2. Resize the square so it covers the entire slide

3. Change the color and outline of the square to Black

4. Right click and select "Format Shape"

5. Click on Fill and set the "Transparency" to ~20%

Now, we'll want to use shapes, arrows, and text to provide instructions. Here is a sample of what your overlay might look like

When you're finished designing your overlay, we need to save it as an image

1. Right click on the black square and select "Send to Back"

2. Select and delete your dashboard image

3. Starting in the upper left corner, outside of the slide area, click and drag your mouse to the lower right corner, outside of the slide area, to multi-select all of the contents of your slide

4. Right click and select "Group"

5. Right click again and select "Save As Picture"

6. Save your overlay image

Now we need to add this image to our dashboard

1. Drag out a floating container

2. Update the size and position of the container

3. x = 0

4. y = 0

5. w = width of your dashboard

6. h = height of your dashboard

7. Add your overlay image to the container

8. Drag an image object into the container

9. Check the boxes for "Fit Image" and "Center Image"

10. Click the "Choose" button and select your image

11. Set the "Outer Padding" on the image object to 0 in all directions

Next, we need to add a "Show/Hide" button to display/hide the overlay

1. Select the floating container that was added in the last step (click on the image, click on the ▼ for "More Options, and then choose "Select Container")

2. Click the ▼ for "More Options"

3. Select "Add Show/Hide Button"

4. Click and drag the button to move it to the desired location

And finally, we want to format the "Show/Hide" button

1. Select the button

2. Click the ▼ for "More Options"

3. Select "Edit/Button"

4. Edit the button for when "Item Shown"

5. This is how the button will appear when the container is showing. We would typically leave this as the default "X" image, but may add a background color to make the "X" more visible against a dark background

6. Edit the button for when "Item Hidden"

7. This is how the button will appear when the container is hidden. This is the button users would click on to display the instructions overlay. We would typically use some sort of information icon for this

8. If desired, add a text box next to the icon to explain what it does (also make sure to edit this text box's position in the item hierarchy)

9. Test your overlay

10. When viewing the dashboard in design mode in Tableau Desktop, you will need to hold alt while clicking on the button. In presentation mode, or on Tableau Server/Online/Public, you can just click on the button

That is the end of our post and the end of our Building Better Business Dashboards Through Interactivity series. We hope you have enjoyed these tips and if you have any questions or comments, please let us know at info@cleartelligence.com.