Video trailer
Setting the stage
Towards the end of 2023, I took a moment for some self-reflection – looking back at my achievements, goals, and what went well or not so well. While I always value self-reflection, the start of a new year has a special way of making this reflection feel more important. Thinking about my experience with Power Bi and the Power Platform, I realized that my best moments were when I faced challenges or interacted with the Power Bi community.
Following the advice of @Brian Julius, who often suggests having our own “mad scientist lab” for experimentation and showcasing our ideas, I decided to launch my website in 2023 – a big milestone for me. Now I have no excuse – I will dedicate time to work on projects I am passionate about.
Power Bi visuals improved since Miguel Myers become a PM. As a Project Director and PM myself, I admire Miguel’s bold initiative to change things and openness in regards to identifying and prioritizing features for the tool with the help of the community. So, I thought, why not seize the opportunity? If Miguel welcomes feedback to enhance the tool, why not try to deep dive and explore an idea I have for more than 3 years now?
I decided to create a showcase for my idea, documenting every step from conception to the final result. Surprisingly, I achieved the desired output using only native visuals & DAX. This journey had its challenges, which I’ll discuss in this blog post. Even though I successfully created what I wanted, I think the solution is too complex for widespread use. Thus, my idea is the following: This blog post aims to showcase my idea, its creation process, the expected advantages compared to existing solutions, the roadblocks I encountered, and why I believe it could have a significant impact if Microsoft were to develop this feature. I’ll guide you through each step, breaking down the process into smaller pieces and explaining how I arrived at my solution.
Context
It’s August 2020, and I’m diving into my fourth Power Bi challenge organized by Enterprise DNA. These challenges were pioneers in the Power Bi game, pushing us to build everything from scratch – understanding the topic, diving into research, deciphering the data, cleaning it up, crafting the data model, create the visualizations, tooltips, multiple pages and navigation. Those challenges were tough, no kidding, but help many of us progress at an incredible pace.
So, here I am, on my fourth challenge after winning one in the past. The pressure’s on because, well, I’m competitive 🙂
Here’s a glimpse of the first page of my report:
Feedback was very positive, mainly for two reasons. First, the layout was very different from the norm at that time, and the use of a dark background was uncommon. Second, the navigation using buttons on the graph was seen as both creative and intuitive.
Let me share a snippet of an awesome feedback I received:
@datazoe was also participating in these challenges at the time and provided fierce competition! (alongside incredible PBI developers like @Mudassir, @Abu Bakar, @Sedhosen, @Sam Mckay, @Jarett, @Greg, @DianaB )
Motivation
Zoe was spot on. I indeed used buttons overlaying the chart, making the point of interest clear to the end user. Leveraging this “pre-attentive attribute” through highlighting, I knew I had control over the user journey, guiding attention to what matters most and influencing the next actions users could take. It’s pretty intuitive for the end user to realize these are clickable. I even tweaked the color when the user hovers over them to make the buttons stand out even more. However, here’s the catch, as Zoe correctly points out in her comment: this approach falls short when the data changes or when we interact with other charts since the periods of interest might shift.
This got me thinking. How can I make the periods dynamic? How can I make it more obvious and intuitive? Is there a simple pattern I could implement and replicate easily?
As often happens when tackling a new idea or challenge, I hit many roadblocks.
Time passed and my interest in storytelling, user journey and design techniques grew. Despite witnessing improvements in Power Bi’s drillthrough, navigation, and buttons, I always felt something was still missing. To be completely honest, I never found drillthough navigation very intuitive for the end user, especially when using the right-click to see the drillthough option.
All of this fueld my motivation to give it a shot and embark on this adventure. And so, the story begins!
Expectation
Alright, why am I putting the effort to create this technique?
I strongly believe that incorporating dynamic buttons atop highlighted sections of graphs can seriously level up the navigation and user experience in Power Bi reports:
- Seamless interaction
By placing buttons right on top of highlighted periods, we ensure a smooth interaction. Users can navigate through data intuitively, no need for extra efforts to search for a button that activates elsewhere on the screen or look for hidden options only visibile when right clicking
- Intuitive User Empowerment
Handing users interactive buttons on top of those highlighted periods gives them a feeling of control and intuition. They get to shape their data exploration experience actively, promoting an approach that’s all about the user.
- Visual Feedback and Engagement
The direct link between buttons and highligted periods serves up instant visual feedback. Users can quickly grasp the impact of their selection, making the whole experience more engaging and responsive.
Strategy
Diving straight into Power Bi without a plan is a sure way to spend a lot of time staring at a blank canvas – not the best approach. There’s a saying that without a destination in mind, the winds will never be favorable. To avoid this, I started the and kept thinking about a strategy before jumping in the tool. So, where to start and how to break the problem into smaller pieces?
I identified three main challenges:
- Create highlights for the two main periods, dynamically, on the graph
- Find a way to activate buttons for specific periods to navigate to a detailed page
- Ensure that the detailed page automatically retains the chosen time frame and selection
Okay, so far so good. Now, each point needs to be broken down into smaller problems.
Solution
1. Create highlights for the two main periods:
- First thing first, choose the right visual. In my example, I went for a line and Stacked Column chart because I wanted dynamic highlights periods, and this chart allows me to display the line in y axis (number of complaints, in my case) and the column y-axis.
- Second, create a DAX measure for the column y-axis. Here’s where the challenge begins. The main goal is to build a DAX measure that checks if the selected date is in either the month with the most complaints or the month with the second most complaints, returning 1 if true.
- Third, I made sure to display all items with no data on the chart
2. Find a way to activate buttons for the specific periods to navigate to a detailed page.
Create buttons to overlay on the chart:
- My choice naturally leaned towards using buttons. I overlaid blank buttons on top of each month on the graph.
- This involved some manual work. With the buttons added, customization is key. The expected behavior includes:
- A) All buttons should be “activated”, meaning they perform the action of navigating to a detailed page, only if a period is highlighted
- B) End users needs to quickly understand that highlighted periods are clickable
- C) Information about the cumulative number of complaints need to be displayed for highlighted periods but not for others. However, I wanted to give the option for end users to check the aggregated number of complaints for any specific month when hovering over.
Let’s break down how it was done:
A) All buttons should be “activated” only if a period is highlighted
DAX plays a crucial role here. Each button correponding to a month directs to a specific DAX function.
These DAX measures all follow the same pattern: setting variables for a specific year and month, calculating the date for the month with the highest complaints and the second-highest complaints, defining a filter condition based on the specific year and month, and determining the button destination based on whether the selected month matches either the month with the highest or second-highest complaints.
B) End users needs to quickly understand that highlighted periods are clickable
I want users to easily know they can click on highlighted periods. So, I rely on Jakob’s Law.
JAKOB's LAW
This theory states that users prefer a report to work the same way as all other sites, apps or reports they already know. In essence, this law emphasizes the importance of familiarity and consistency in user experience design.
When users interact with a Power Bi report, their expectations are shaped by their experiences with other platforms. Therefore, designers should align their designs with established conventions and patterns that users are already familiar with.
The law suggests that users are more confortable and have a more positive experience with interfaces familiar to them. If users are accustomed to specific behaviors, layouts, or interactions in one application or website, they will expect similar experiences in others.
Incorporating familiar design elements not only enhances the user comfort, it also reduces the learning curve for new interfaces leading to more positive and efficient user experiences. Users can quickly understand how to navigate and interact with a system because it follows patterns they’ve already encountered.
How does it translate for my example?
To make it super clear, I follow “Show and Tell” idea. I use subtitles, colors, hover effects and icons to show users what to do. While Power Bi current ‘custom’ icon options are limited, I use the new cards and special measures to show icons only when needed. This way, users can easily understand and interact with my design
Example of subtitles, colors, hover effects and icons implemented in the final solution
Idea for blank buttons improvement:
Current limitations
The difficulty with the existing Power Bi icon choices for buttons are found in the “Button style” section. While customizing the icon type, I couldn’t discover a way to manage visibility or transparency based on conditions. To address this, I introduced several “new cards” and implemented DAX measures in a similar way to exhibit particular icons only when specific periods are highlighted
Options for ‘Icon type’ = Back
Options when ‘Icon Type’ = Custom ==> No fx options
C) Information about the cumulative number of complaints need to be displayed for highlighted periods but not for others.
To conclude this stage of my work and anticipate queries about the X- axis (which I’m not showcasing in my graph), I implemented an additional series of buttons following a comparable method. These buttons are designed to reveal the overall number of complaints for the highlighted period. Even when the period isn’t highlighted, users can still access this information by hovering over. Although the visibility for non-highlighted periods may not be immediately apparent, it’s a nuanced design element, and it’s not crucial if users happen to overlook this detail.
3. Ensure that the detailed page automatically retains the chosen time frame and selections
This is perhaps the most challenging aspect of implementation. If this step fails, all the prior work becomes useless. So, how do we tackle this?
Initially, I applied the “rubber duck debugging” technique, explaining problem-solving issues to an inanimate object, like a rubber duck. This strategy is valuable for programers and problem solvers, as verbalizing the problem helps structure thoughts, clarify understanding, identify potential solutions, and often leads to issues resolution.
Through this exercise, I identified that the key lies in transferrring the user’s selection from the bar chart and filtering the detailed page based on a specific month period. I decided to focus on showcasing the two main months with the maximum complaints, but it added complexity. Realizing the need for two identical detailed pages, each filtered for different time frames, I immediately created them.
Page Navigation
As mentioned earlier, I employed buttons and used the “fx” option in Page navigation. This ensures that every click on a highlighted period directed me to the correct detailed page – hooray!
However, there’s a catch. This approach doesn’t work when filtering a specific channel. Power Bi, while navigating to the detailed page, “forgets” the user’s selected category.
Drill Through Navigation
To overcome this, one might suggest using the drill through option for the buttons instead of Page Navigation.
But does that really solve the problem?
Well, not exactly. When opting for the “drill through” option as an action in a Power Bi button, two crucial things happen that need careful consideration.
Firstly, if nothing is selected, the drillthrough remains inactive. 😮 This means that attempting to drill through on a specific highlighted period without first filtering on the distributiong channel bar chart won’t work. This is a significant issue because I anticipate users wanting to drill through and view data corresponding to all channels.
Secondly, multi-select is not possible. 😮 To activate the drill-through buttons, you must have a unique and single selection.
Drill through navigation solution: CAPUT! 😖
Web URL
Now, things are getting more complicated. What other options do we have? Luckily, I recently came across a blog post from Tim Weinzapfel about URL filter parameters, sparking the idea of exploring Web URL options for buttons : Tim’s Blog Post
If I can dynamically push filters using DAX into the web URL, that could be an elegant solution for my case and a valuable response to Tim’s community inquiry about use cases for this feature.
In theory, I can break down the weblink of a report and generate links that include specific filters. Exciting! I’ll be honest, I felt proud of myself, considering it a valuable nugget and making plans to share it with the community. Needless to say, it didn’t work as planned…
What could possibly go wrong this time?
After thorough reading of Microsoft documentation, web searches for similar topics or inquries, and iterative creating and testing of my DAX measure, breaking it into smaller pieces and testing it for specific periods, I finaly make it work – hallelujah!
Feeling awesome, I published my pbix and gave it a try. But then, the cold shower.
First, I realized my DAX wasn’t working as it failed to generate a code when no filter was applied to the channels bar chart. Okay, that could be improved, but the knockout came from the following observation: every single click on a button using a Web URL as an action opened a new tab, every single time (I tried all ideas I could find). User experience? Not great.
I searched the internet for similar cases, hoping someone had faced this situation before and found a solution. Indeed, others had, but no solution was provided anywhere. I stumbled upon an idea submission with over 1000 votes! The request was simple – allow the link to open in the same tab, similar to intra-report navgation, and enable users to jump to different report pages from within the report.
Astonishingly, this request had been raised since 2015.
The ability for Web URL links to open in the same tab is crucial for rolling out substantial content, comprising multiple report to a large set of users. It’s a must have to enhance user experience and reduce the frustration of multiple tabs being opened.
Idea for WEB URL improvement:
At this moment, I attempted the “air in, air out” breathing technique. Felt like giving up again. I did not have any other ideas. I decided to take a break for a day or two and explore alternative solutions.
Sync slicers & Page navigation (bis)
The idea that crossed my mind was to leverage sync slicers. This approach would effectively maintain my selection across other pages. The concept is straightforward: add filters to the first page, sync it to another page, and keep it hidden.
That introduces another change to my design. I need to add a disconnected table and highlight the bar chart based on the slicer selection.
Why? Well, with a slicer selection, it either norrows down my bar chart to display only one column (the selection), or I can choose to eliminate the interaction altogether, visually leaving no impact on the bar chart. However, it’s essential to make it obvious to the end user that they have selected something, right? So, my workload increased with an additonal feature to be added in order to ‘highlight’ the selection on the bar chart.
Idea for Buttons interactions:
The new slicer
The new slicer is excellent, offering enhanced flexibility and paving the way to numerous design innovations.
However, being a new feature, it comes with some minor bugs and inconsistencies. To achieve the desired design for selected/non-selected buttons, I had to utilize a Fill background image for the Selected and Hover states, while employing a DAX measure on Images for the Default state. This complexity arises because eveything except the Default state is inactive in the Image pane. (see below image). I am currently using the December 23 version of Power Bi Desktop, and I hope this issue will be addressed in future updates.
Idea for new buttons Buttons :
Conclusion
I hold a strong belief that incorporating this option directly into Power Bi would significantly enhance the user experience, rendering navigation much more intuitive and boosting analyical capabilities. The ability to seamlessly transition from highlighting and capturing user attention to enabling a deep dive into the data right where the user’s attention lies, offers a tremendous advantage. In storytelling, I believe it is not a question about visualization alone, it s a journey that needs to follow a narrative arc. Introducing this enhancement to Power Bi would promote storytelling in the way it’s meant to be – dynamic, alive and engaging.
The solution I’ve developed is not optimal. It involves too many buttons, extensive DAX usage, and a time-consuming process for somemething that should be much more straightforward.
I had a lot of fun working on this project and I have high hopes that Microsoft will implement this feature for allowing buttons to be set dynamically on graphs one day !
Best regards,
Alex Badiu