Power BI Dashboard UI/UX Audit Framework

Last month I was invited to speak at the Annual Branch Retreat for the BC Ministry of Health’s Analytics and Business Intelligence department. I was asked to lead a session on creating effective dashboards. An effective dashboard is rather subjective and hard to identify. We usually are very good at spotting bad dashboards, but we struggle to articulate why they are bad and better yet what we need to improve in them.

In my presentation, I said that an effective dashboard is one that meets 3 criteria:

1.      Intuitive Report Layout & Structure

2.      Contains functionally organized report page layouts

3.      Leverages appropriate visualizations in a decluttered way

Following that session, I got to thinking about how I could provide a resource that BI Leaders, Developers or Analysts could use to score/rate their dashboards. Essentially, to determine how effective is their dashboard. This is what inspired the ‘Power BI Dashboard UI/UX Scorecard’

It is intended to be used as a tool to audit a Power BI dashboard and determine quantifiably how in/effective the dashboard is from a usability and functionally aesthetic way.

This article will explain how to use the Scorecard and conduct your very own Power BI Dashboard UI/UX audit.

Section #1: Report Layout & Structure

Report layout follows an expansive hierarchical structure with increasing detail as the user navigates the report: The dashboard’s initial experience should be a high level overview of the  key performance indicators the dashboard is reporting on. This initial page is essentially your executive summary providing a simple ‘birds-eye view’ of the dashboard. Users should be immediately able to understand what is on track and what isn't and then be able to drill-through or zoom-in to these metrics in dedicated report pages that provide further information and context. As the user navigates from the initial page the level of detail increases. This approach is sometimes referred to as the Guided Analytics Approach.

Landing page of report provides an overview of the report with KPIs: The initial experience should focus on providing high-level metrics/KPIs. Visuals can be cards, KPI cards, gauges and other single value visualizations. Use of conditional formatting is key to communicate not only the KPI but also whether that indicator’s status is favorable or not. The key piece here is that this page is an overview and should only contain the most essential indicators i.e. what indicators tell us whether we are on track or not.

Landing page of report allows for a quick at glance 'temperature-check' on Key Performance Indicators: An effective landing page is akin to a thermometer; a user should be able to quickly take the temperature of a KPI and rapidly determine if the metric is on track (no intervention required) or not (intervention required)

Focused report pages exist to 'zoom in' to each of the report's Key Performance Indicators: For each KPI included on the Landing Page there should be a subsequent focused page that delves deeper into the indicator. Allowing users to slice the data on different periods of time or by other dimensions. These focused pages should provide a succinct debriefing on what the user needs to know to understand the KPI.

Drillthrough pages and tooltips are leveraged to provide 'details on demand' enabling progressive disclosure of information: Drillthrough pages and Tooltips are both examples of progressive disclosure, they provide users access to detailed information on demand – with a click, hover or the like. The idea here is that detailed information is concealed by default and only accessible if the user intentionally seeks it out.

Progressive disclosure is a technique UX designers use to reduce cognitive load by gradually revealing more complex information or features as the user progresses through a user interface of a digital product. - Jakob Nielsen, Cofounder, Nielsen Norman Group

Intuitive layout of report pages, enabling users to navigate through the report with ease and clarity: The pages of the report should be laid out in an intuitive, easy to follow layout. Such that users can follow page to page and gradually layer on information and enable them to take informed decisions. Ineffective dashboards feel like scattered pages with no clear destination for the user to arrive at. Conversely, effective dashboards are logical and easy to follow from one page to another with progressively more detail as the user navigates from the landing page to the rest of the report.

Report pages are curated and focused for a clearly defined set of objectives: Report pages are focused on a clear set of objectives. For example, the dashboard is a Project Management tool to help Project Managers know whether their project(s) are managed effectively. To do so the Project Manager would need to know how well they are performing based on 4 indicators – Scope, Schedule, Budget and Risk. Another example might be a hospital dashboard where hospital administrators need to assess whether the hospital is functioning in an efficient & high-quality manner. Indicators could include number of hospital acquired infections, number of readmissions, occupancy rates, length of stays and more.  

Score your dashboards for each of the criteria above on a scale of 1 – 5, 1 being less favorable and 5 being the desired state.

Section #2: Page Layout

Pages are leveraging custom Canvas Backgrounds (1280x720) designed to separate the page into necessary sections: An effective report page should be organized with increasing detail as the user navigates down the page. Along the top you’d include Single Value Visualizations / KPIs, directly beneath those you’d have more detailed visualizations (ex. Bar or line charts) and beneath those the most detailed representations of data i.e. Tables & Matrix visuals. Also your page should include an area for non-data elements such as slicers, buttons, ‘last refresh’ information.

Slicers are placed in a consistent location across the various pages: Whether you choose to organize your slicers along the top of the page or along the side of the page, you should have a consistent placement across all the pages of the report.

Last Refresh' information is placed in a consistent location across the various pages: Last refresh information is very important for end users because it gives them trust in the data’s accuracy and relevance. This is important information and should be in an easy to find location and done so in the same location across the various report pages.

Position of Page Title is consistent across various report pages: Report titles should be in the same X,Y coordinates across all pages. (see Power BI’s formatting pane for these settings)

Position of Organization Logo is consistent across various report pages: Logos should be placed in consistent locations across all pages of the report.

Position of frequently used buttons, such as 'Information,' 'Reset,' and 'Apply all slicers,'  are consistent across various report pages: These interactive elements should all be placed in consistent locations across all pages of the report.

Visuals are progressively more detailed as the user navigates from the top to bottom of the page: Similar to what was mentioned above, details should be organized in a logical way from top to bottom – less detail to more detail.

Visuals are aligned and proportionately sized following the allocated space specified in the custom Canvas Background: In your custom Power BI Canvas background there should be proportionate sections that are aligned to place visuals in a clean way.

Appropriate white space exists in between visuals to facilitate a logical separation of information: Instead of enclosing each subsection of the report page using jarring thick lines, use white space to create a logical separation of information in the page.

Elimination of 'report noise' i.e. irrelevant data visualizations that do not serve the objective of the report page: All visuals in the page should serve the purpose of the page. If its ‘nice to know’ but not necessary, it should be excluded. Reserve precious dashboard real estate for the most effective visuals.

Use of natural, earth tone colors in the Canvas Background: Using colors that are earth tones/natural colors (blues, greys, browns and certain shades of green) These colors are calming and don’t command a lot of the user’s attention. They fall into the background and allow the other vibrant colors used in conditional formatting to stand out and be noticed.

Section #3: Visualization Selection & Formatting

Conditional Formatting is applied thoughtfully & strategically on key indicators: Strike a balance, you need just the right amount of color to ‘call to action’ without causing sensory overload.

Elimination of 'chart junk': Edward Tufte coined the term chart junk and explained it as any non-data element within a chart that does not add value to describing the data and distracts from the chart's main objective. (ex. Remove the chart border, delete the gridlines, be sparing in use of data labels etc.)

“Clutter and confusion are not attributes of data—they are shortcomings of design.”– Edward Tufte, author, professor, and data visualization expert

Adherence to chart formatting best practices: Follow general best practices in chart design. These two books are particularly my favorite on this topic: (1) "The Wall Street Journal Guide to Information Graphics: The Do's And Don'ts Of Presenting Data Facts And Figures" by Dona M. Wong & (2) "Practical Charts: The Essential Guide to Creating Clear, Compelling Charts for Reports and Presentations" by Nick Desbarats

Legible Sanserif font used in visual elements (ex. Data Labels, Axis Labels, Legends, and Subtitles): Use of fonts that are legible and avoid of over stylized and multiple fonts.

Reduction of data granularity and enabling of drilldown features within visuals elements of the report: Keep visuals in their initial experience as high level as possible but allow for access to more detailed data vis drilldown features.

Color palette of visuals are complimentary and contrasting: Here’s some suggestions on selecting colors for your palette. Use cool, natural/earth-tone colors for page layout backgrounds and use unnatural colors for highlighting values and drawing attention. Edward Tufte, esteemed data visualization expert points to “earth tones” vs “unnatural colors”. Earth tones illicit calming emotions, whereas unnatural colors jump out at you.

You also may want to consider providing alternative report page layouts and color palettes specifically for ‘Dark Mode’ and ‘High Contrast’ versions of your reports. These can facilitate a better user experience for individuals with varying degrees of color blindness. Developers often underestimate the prevalence of color blindness, according to some estimates 1 in 12 men is color blind and 1 in 200 women is color blind. Additionally, the ability to see color also decreases as we age. One common form of color blindness that is particularly challenging for dashboard consumers is “red-green” color blindness. This hinders one’s ability to distinguish between reds, yellows, and greens. Colors that are commonly used to alert users in KPIs. (Source: 100 Things Every Designer Needs to Know About People by Susan Weinschenk.)

Here are some resources that can be used to check how your dashboards will appear to someone who has color blindness - www.vischeck.com & www.colorfilter.wickline.org. (Read more about this in my previous article "How to Create a Power BI Corporate Style Guide")

Sentiment & Divergent colors defined in the Power BI Theme are unnatural colors: Sentiment colors’: Colors used in key performance indicator (KPI) visuals and waterfall charts to indicate positive, negative, or neutral results. ‘Divergent colors’: Colors used in conditional formatting to show where a data point falls in a range (Max, Middle, Min)

 Consistent formatting of Numbers & Dates: Numbers and dates should be following formatting guidelines - for ‘Whole Numbers’ - recommend use of commas as a thousand’s separator. ‘Decimal Numbers’ - define recommended number of decimal places and ‘Dates’ - define date format (Ex. Short Date, Long Date, (mmmm d,yyyy))

Use of icons to make visuals more accessible for users with varying degrees of color blindness: In Jon Yablonski’s ‘Laws of UX’ – he mentions Hick’s Law - “The time it takes to make a decision increases with the number and complexity of choices.” One method of reducing complexity is the use of universally recognized icons. One of the ways Power BI allows developers to use icons is in the context of conditional formatting for Table and Matrix visualizations. Its our recommendation that your style guide provides guidance on which of the default icons developers should use but most importantly which ones they should avoid. For example, the following ‘🔴, 🟡, 🟢’ can be problematic for individuals with red-green color blindness as they all look the same when color is not factored in. Instead using “✅. ❌” are more distinguishable.

Conclusion:

Thank you for reading this month's Power BI article. I hope you found the 'Power BI Dashboard UIUX Scorecard' to be useful in your Dashboard UI/UX Audit. Please DM✉️ me for a copy of the Scorecard!

Enjoy this article?

Check out my previous ones:

• How to Create a Power BI Corporate Style Guide
• Power BI Optimization Framework
• Requirements Gathering Framework for Power BI Reports
• Power BI Report Hand-Over Documentation
• A Guide to Hiring Power BI Talent