Print paginated reports in Power BI
Customizing your print experience in Power BI.
tl;dr
For my first project at Microsoft with the Power BI paginated report team I was the lead designer and organizer of a new paginated report printing experience. These reports are used in scenarios requiring highly formatted, pixel-perfect output optimized for printing or PDF generation. The experience I designed and helped build with a team of four engineers provided over 12k people in the first month the ability to customize both the size and orientation of their report and see a print preview prior to printing their report.
The problem
Paginated reports are the long-standing report format used with SQL Server Reporting Services (SSRS). They're called "paginated" because they're formatted to fit well on a page. They display all the data in a table, even if the table spans multiple pages. They're sometimes called "pixel perfect" because you can control their report page layout exactly during creating.
When printing it important that page width and height match the paper size the customer is actually printing on in order to minimize distortion - a report will look squished and with extra whitespace if a PDF generated with letter sized page sizes is printed on A4 paper, or cut in half of a landscape orientated PDF is printed on portrait orientated paper. Non-standard printers also complicate the situation - customers may be printing on label printers that expect 'letter' sized documents as input even through the actual paper size being used is 4"x3".
Paper size mismatches have been the largest source of customer complaint since the switch to a PDF based print experience in SSRS. Having to repeatedly select non-standard defaults has also been a frequent complaint. We do not want the same problem with Power BI paginated reports.
Example paginated report
A paginated report looks much different in the service vs. in a printed format. While viewing online a user doesn't see any margins and the header and footer are pushed up against the page content. Here you can see the difference between the view online vs. a printable pdf that has been generated. If a user wishes to make any changes to the report prior to printing they would have to use PDF editing software to try to make their changes happen or contact the report creator.
Feature goals
To improve the experience when printing a paginated report in Power BI versus printing in SSRS we want to put control in the person who is printing's hands. The goal is to default the paper size to the closest standard match to their report size. We will then show this to the user in a print preview experience and lastly give them the option to change the page size, orientation, and create a custom print experience.
Standard print size analysis
We wanted to define a set of 4 standard options for users to print to before it would change to a 'custom' view of the report. In order to understand the sizes we should make available to users we ran a telemetry report on print jobs and the % of each print size most commonly used. The top four options were very clear.
-
Letter
-
A4
-
Legal
-
A3
V1. Mockups
I created these mockups as a first run to talk about the design with my engineers. I spent a lot of time designing them but did not apply the Power BI styles yet as this was my first week at Microsoft and was still learning about the product and guidelines.
Listening to feedback
Looking at these mockups now I am almost a little embarrassed to show them as I know I was missing a lot of elements I should have considered before sharing the designs with my team. However, I think the feedback I received really helps to share the entire process of designing this new print experience. I want to show the points where I learned valuable lessons and applied them to my design.
"I like that idea. Would it be fewer clicks/easier for customers to leave the Width/Height fields editable and switch the page size to "Custom" if a user enters a specific value?" - Engineer
"How much vertical space does the dialog take up? On a 1024x768 screen, RS has roughly 806x617 pixels to work with. That's probably on the lower-end (I couldn't find any hard data for what our customers are actually using) but someone from the design team might know if there is a particular resolution that folks target." - PM
​
"We probably only need a single units field :) We won't be able to handle 8.5 inches x 270mm in the renderer." - Engineer
Back to the drawing board...
After my first mockups didn't go over so well with my new engineering team I went back to the drawing board and started with very basic wireframes to illustrate my idea for changing the page orientation, page size, and showing a print preview. I was able to implement the engineering feedback quickly into these drawings instead of concentrating on drawing out pixel-perfect designs at this time.
V2. Mockups
After creating these wireframes I presented the basic idea to a handful of engineers to receive any more feedback they may have. I then consulted with the rest of the design team to make sure I was following fabric guidelines (the guidelines we were following at that time). Note that we moved to fluent design guidelines about one month after these designs were implemented which is why they may look 'older'. Technology and design is always modernizing!
Final design delivery
The mockups were approved by the engineering team and quickly integrated into Power BI for paginated reports. Within the first week after release over 12k people had already interacted with the page setup capabilities and the feedback was very positive for this experience. Looking forward I would like to implement a view in Power BI that allows a user to see how the page will look when printed without having to go into the print screen. I would also like to fluentize this dialogue so it better matches the 'new look' of Power BI which was implemented in September 2019.
Redlines
I created basic redlines to hand over to my engineers to illustrate the spacing between elements. I also provided the fonts and button specifics. We worked collaboratively through Figma so the engineers could also click on each element themselves and pull the CSS code directly from the design and leave me any comments or questions they may have. We communicated efficiently and worked in the same space so this would be designed and delivered within one week.
