When putting together a Power BI report, it is often very easy to put too much content on one page. This is my walk through of how to keep it simple & clean.
I regularly use Figma to design the background for my report rather than using the native shapes in Power BI, the less objects you put on your Power BI report canvass the better.
Simple light grey background, hex code #F3F3F3, pixel width of 1280 and height of 720.
I’m always very conscious about the smallest details in my reports so I make sure everything is aligned pixel perfect.
All the additional shapes I’ve added to my Figma background will use 40 pixels of spacing. The navigation bar, highlighted below, starts 40 pixels from the left of my grey background and 40 pixels from the top.
My navigation bar starts 40 pixels from the left of my background, and it is 80 pixels wide, I find it easier to work in increments of 10, although I’m not fanatically wedded to it, there are exceptions!
We now have 40 pixels from the left, another 80 pixels for the width of the navigation bar, 120 pixels in the bank. My next 3 shapes will be spaced 40 pixels to right of the navigation bar. My header bar and two shapes set aside for bar charts will all start at 160 pixels from the left and 40 pixels of space separating them horizontally.
The 3 elements on my page that finish on the right of my background, the header bar and two spaces set aside for line charts will all finish….you guessed it…40 pixels from the edge of my background.
To sum it up….40, 40, 40, 40……as per below……40 ok!
Each of the individual shapes have the following properties.
Background fill – White, hex code #FFFFFF
Corners, all rounded slightly to 5
Border colour – Light grey, hex code E1DDDD
Simple report background created, exported from Figma and ready to be added to our Power BI file.
Set Image fit to Fit and transparency to 0%
Let’s start on the navigation bar.
Small logo at the top
Icons, 40 pixels wide and 40 pixels high, all horizontally aligned at 60 pixels, so they sit in the middle of the navigation bar.
Each icon has, unsurprisingly, 40 pixels space between each one.
The graph/active page icon is positioned at 60 horizontal and 180 vertical. Each icon is 40 pixels tall so the next icon will be placed at 180 (starting position) + 40 (Icon height) + 40 pixels of space.
I don’t drag and drop these objects as it is very easy for the shape to alter in size by a pixel or two, I’ll always confirm the size and placement of ALL objects via the Size and position properties in the format pane.
Page name added along with two KPI’s. Icons set before the KPI’s. The first icon is horizontally aligned with the white space reserved for the first of our line charts
Now I add my two bar charts, they both are sized so they can sit 10 pixels inside each side of the white space allocated to them. Nice clear title, subtitle used but in smaller font and not bold.
One thing I have added, that is not obvious from the screenshot below, is a dynamic measure for the x axis on the bar charts to help my data labels. When you select the position of your data labels, I generally always choose ‘Outside end’, depending on the size you set your graph to, you can end up with one or two values half sitting inside the bar and not being particularly clear. Below is an example of what I’m talking about, it really digs into my report OCD.
I’ll create the following measure which will iterate over Quantity Sold by Country and find the max value of what is currently selected, then I add 20% onto this number. This measure will then go into the Range axis maximum well to give the data labels additional space to be shown clearly.
Line charts now added, following the exact same chart title and subtitle formatting & style.
Line Style – Solid
Width – 2
Interpolation type - Smooth
Data label positions – Above
Label density - 40%
Markers – Circle, size 3
Report finished off with a report version number being added directly below the navigation bar and a dynamic date range text box added in the bottom right corner to help the user understand what date range they are looking at. It also doubles as back up should the report or page be exported to a PowerPoint or presentation deck so the reader can be clear of the date range they are viewing.
The date range selected text box is also right aligned to finish at, you guessed it, 40 pixels from the edge of the page.
Jon Yablonski’s website, Laws of UX, cites the Aesthetic-User Effect where “Users often perceive aesthetically pleasing design as design that’s more usable”.
Paying attention to important small details such as pixel perfect alignment, consistent spacing, consistent chart titling/sub-titling go a big way to making your report look great and it being trusted. The last thing you want is a user to see small alignment or formatting issues and start to think “if the report creator missed these little details did they miss any important elements with the actual data?”.
This was intentionally kept simple, lots of things we can iterate on and improve such as
· The KPI’s do not have any context
· Are the number of units sold good or bad?
· Can we add a target?
· What can a user take away in 3 seconds, 30 seconds or 300 seconds.
· Can we improve the navigation?
· How can we use colour to enhance the report
My plan is to keep revisiting this report and iterate, iterate & iterate. Stay tuned.
Small details matter, simple can be powerful.