Home Design #POWERBI REPORTS LANDING PAGE TIPS AND TRICKS: Progressive disclosure design approach in Power BI using Card pattern

#POWERBI REPORTS LANDING PAGE TIPS AND TRICKS: Progressive disclosure design approach in Power BI using Card pattern

by Prathy Kamasani

What is Progressive Disclosure?

Progressive disclosure is an interaction design pattern that sequences information and actions across several screens (e.g., a step-by-step signup flow). The purpose is to lower the chances that users will feel overwhelmed by what they encounter. By disclosing information progressively, interaction designers reveal only the essentials, and help users manage the complexity of feature-rich websites or applications.

https://www.interaction-design.org/literature/topics/progressive-disclosure

When we hear UX terms like Progressive Disclosure, it feels like they are essential for Web design or App design. Well, they are vital for report and dashboard design, especially landing pages. In this post, let’s look at the Horizontal card pattern.

Using Horizontal Cards:

2020 04 29 16 58 15 1

In the above example, I used a pattern to show details using action from the Card. When a user clicks on a card, the report will show details related to Card. It sounds straightforward, but it involves a lot of work using Power BI Functionalities: Buttons, Bookmarks, Sections, Grouping and Page Size.

There are few aesthetics I paid attention in this Report Page which are key for any landing page. Usually, a Landing page helps users to navigate around the Power BI Model, so it is important to highlight those navigation steps. In the above model, I used Buttons, labels and Images for navigation hints.

Button:

I again used the Button Hover effect as I used in the previous post. Instead of using images, I used a very subtle hover over shadow kind of effect. To achieve this, I added an Outline to the Button with the following properties.

UntitledImage

Under Button, I added a shape with below properties.

UntitledImage

My shape size is slightly less than the button size. So when the user looks at it, Shape looks like a card; overplayed Button gives an action to show detail and also hover over effect to provide User Experience users.

Labels:

I added a text label with an image to hint users to click on cards.

UntitledImage

Images:

I added images to navigate back to the landing page. Also, to help users to highlight which detail window belongs to which category.

UntitledImage

Bars:

I also added lines under buttons to show which tab has been selected using shapes in Power BI.

UntitledImage

That’s all; I hope this inspires you to create some Power BI Awesomeness.

You can view Power BI report here – Link

Prathy 😊

You may also like

8 comments

santosh 4 May 2021 - 2:44 am

Hello Prathy,

Thanks much for sharing the knowledge. I want to know how the spacing was managed when actions were triggered on the cards. The bottom population growth line chart adjusts when the bookmark action is selected and removed right, I want to know how u did that. Can u please share the pbix file or can u explain in detail how that was implemented.

Thanks,
santosh

Reply
santosh 3 May 2021 - 10:17 pm

Hello Prathy,

Thanks much for sharing the knowledge. I am really curious on how population growth trend chart is changing its position upon triggering and removing actions from cards and how report page size was used. Can u please share the pbix? or please explain in detail how that was achieved

Thanks,
Santosh

Reply
Mike Lee 24 July 2020 - 2:46 pm

Thanks for the post! There were quite a few things I didn’t know you could do in Power BI by simply looking at the animated gifs.

Would it be possible for you to share the pbix file so others could see how your built the visuals and interactions?

Thanks,

Mike

Reply
Prathy Kamasani 26 August 2020 - 9:32 am

Thanks Mike. Yes I will share the PBIX. Was planning to do a You Tube video talking about process but not enough time. Will do soon!

Reply
Ginsu 17 June 2020 - 3:26 pm

Thats really cool, can you share the pbix file for this.

Reply
Ginsu 17 June 2020 - 2:45 pm

This is super cool for a landing page, can you share the pbix file. Thanks

Reply
Bhupendra Patel 30 April 2020 - 2:00 pm

I see what you have done there, very clever. I have only one question is there any performance hit because of all the magic you are doing?

Reply
Prathy Kamasani 30 April 2020 - 2:30 pm

Thanks Bhupendra!
The number of visuals always impacts on the performance. As far I know when you hide visual they don’t run during refresh.

Reply

Leave a Reply