Enhance the Power BI user experience with visual guides within a report 

Do you thrive to provide a great user experience to your Power BI report consumer? Meanwhile having a significant focus on the clarity of the data? Or you just want to step away from writing long report instructions in Word where you need to update screenshots, version control, etc. every time the report is modified?

If you have answered any of the above questions with “yes”, or at least just slightly nodded; I have great news for you. In a Power BI report, you can easily create the report instructions, which can be brought up interactively when the end user needs them. No more separate documentation with dozens of screenshots is needed!

Let us see what the options and their benefits are:

  • Tooltip popping up upon hover-over: to provide brief business/industry related information that is necessary in order to understand what the visual shows
    • Quickest
    • Takes up small space
    • Only relevant information to the visual/area – the end user is not overloaded with information
  • Full-page-sized guide upon clicking on an icon: to help understand the usability of the visuals and the page itself
    • All the relevant information on the entire report page
    • Exportable and printable
  • New page: to provide an intense overview, which could be the playbook of report
    • Can be as lengthy as needed
    • Easily exportable, printable, and embeddable

Tooltip popping up upon hover-over

This guide will be very handy when you have a highly informative visual, however, it needs some explanation to make sure end users interpret it correctly.

Elements needed:

  • Image/button visual
  • Card visual
  • Tooltip report page

Steps of creation

Step 1

In the beginning, you shall create a new page in the report where you enable the usage as a tooltip. Then, depending on your future text, we can resize the page not to be too small or too big. But you can fine tune this once you have the text there.

Then insert a textbox to the page and add the necessary text there. Of course, you can go creative, and highlight key words, add a title, and add additional small visuals (e.g., few-row-long table).

When the page looks ready, we hide it.

As an example:

Step 2

After having selected the place where you would like to have the extra information popping up, insert a button, or import an icon/image into Power BI.
Note: You can skip this step if there is any symbol on the keyboard that would like to use for the purpose, like a plain exclamation mark or a question mark.

In this example I have inserted the information button and moved it next to title of the selected visual which I would like help end users with understanding better.

Step 3

If you did not skip Step 2: Since buttons and images cannot have report pages as tooltips, another layer of visual is necessary on top of them, which allows to have the report page tooltip. Also, this new layer has to be invisible, so the icon behind it is visible. In this step you need to create the following 2 measures:

MyText = "||||||||" //This can be any character. 
TransparentColor = "#FFFFFF00"

If you skipped Step 2 and decided to use typed characters, you shall create only one measure, that will be used on the card visual. The text of the measure should be what you would like to show the end users as an icon. You can also format it (font size, color, etc.).

Example:

MyText = “!”

Step 4

At this step add a card visual to the report and put it above the icon. Resize it to be as small as the icon, or at least not to overlap anything else that requires clicking from the end user.

Add the MyText measure to the field of the card, and then on the visual formatting pane, click on the conditional formatting for the callout value. Use the measure called TransparentColor as field formatting.

You shall disable the header icons for the card, so for the end user the card remains fully invisible

As a last step you just need to assign the tooltip on the Tooltip section on the visual formatting page. Enable the tooltips, select report page as type, and then select the tooltip page you created in Step 1.

Step 5

If you would like to use the same method somewhere else in your report, you just need to

  • create more tooltip pages
  • copy-paste the icon with the card on top
  • change the assigned report page in the card’s tooltip

Step 6

Test the result.

Full-page-sized guide upon clicking on an icon

This guide will help to end user to see all the necessary information to be able to interpret the report page correctly.

Elements needed:

  • Button/shape for navigation
  • Rectangular shape
  • Textboxes
  • Shapes underneath the textboxes, like speech bubbles.

Steps of creation

Step 1

You shall start with inserting and formatting the button or shape upon which the end users can reach the guide.

Step 2

Insert a rectangular shape over the report, make it semi-transparent so it adds either a darker or lighter – depending on the color you choose – layer over the original report. Make sure the report is still visible and readable underneath it.

Step 3

Now create the shapes – in this example speech bubbles – which will be the background behind the text. Color them on the format pane but be mindful to make them fit in the general theme of the report.

Step 4

You shall insert text boxes and add your texts there. The reason for recommending the text boxes over the shape text, is the wider possibilities to format the text.

Step 5

Insert and format the button or shape upon which the end users can exit the guide.

Step 6

You shall make sure that all the layers are in the right order, i.e. all the texts, shapes and the exit button are in front of the background layer.
Select the background shape and all the layers that are part of the guide (except the button than open the guide), and group them together for easier maintenance for the future.

Step 7

Create the following two bookmarks.

1. The bookmark that opens the guide
In the selection pane set the button that would open the guide hidden. Then select the layer of this button and the group of the guide. Add a new bookmark, and unselect “data” and select “selected visuals”. You can also rename the bookmark, e.g. “OpenGuide”.
Note: It is an important step to make the bookmark assigned only to selected visuals, because when the end user opens the guide, all their filters will remain applied.

2. The bookmark that closes the guide
In the selection pane set the button that would open the guide visible, and hide the group of the guide. Then select the layer of the button and the group of the guide. Add a new bookmark, and unselect “data” and select “selected visuals”. You can also rename the bookmark, e.g. “CloseGuide”.

Step 8

As the last step, assign the actions to the buttons which will open the required bookmark.

Step 9

Test the solution.

New page

The new page is independent from the other pages, so – comparing to the previous solutions – in case of any visual changes on other report pages, it will not be impacted. You are not limited by space either.

Elements needed:

Up to you, but I will show you an example

Steps of creation

Step 1

You shall add a new page to the report. To make it consistent with other pages, I would recommend using the same header or other elements, like navigation.

Step 2

Create the content.

Example

I kept the header and the page navigation on the top of the report page for aesthetics.

My texts are lengthy; therefore, I have added a few images as well to make the user more easily digest the information.

The titles of the different sections are rectangular shapes with text. Since action can be assigned to shapes, in most cases it is convenient to use them as page navigation, so I have assigned the relevant report page to them (details on the screenshot below).

Hints & tips

Tooltip

Try to keep it as brief as it can be.

Make sure that the tooltip does not cover up the visual to which it relates.
The only case when the tooltip pops up on the left side of the element, is when there is not enough space on the right side. Be mindful about it when placing the card visual on which you will enable the tooltip.

There is no possibility to scroll on a tooltip, therefore it is crucial that all the necessary information is visible on it at once. If you need more space than the default tooltip size, increase the canvas size of the tooltip page.

Try not to make the tooltip too big. Users might open the report on a laptop screen, where too big tooltips decrease the user experience.

Full-page-sized guide

For the better end user experience try to keep the colors as neutral as possible, otherwise the guide might overpower the report itself.

Make sure that nothing is covered by other shapes (speech bubbles), that needs explanation.

The level of transparency is one of the key factors of this guide, however, all the texts need to be readable. Try to avoid too high transparency, while still letting the original report as visible as possible.

New page

As lengthiness is not a constraint here, make all the explanations as detailed as needed to make users have the best understating over the subject of the report.

If you have too much text, that might not be read by everyone, you can highlight the key words (like with bold font)

Visual elements next to texts can improve the understanding, therefore try to add pictures, explanatory graphs, etc.

Interested in reading our latest Power Platform blog posts?

You’re welcome to subscribe to our email newsletter: Forward Forever Monthly. Max 1 email per month, with a curated list of latest insights and articles on Power Apps, Power Automate, Power BI.

Leave a Reply