How to create better reports

Filip Jaskólski in Design, UX, on November 10, 2014, Comments

How to create better reports with HTML

A report is probably the most common way of displaying data within any substantial business environments. Unfortunately a lot of reports we come across are simply dull and visually unpleasant.

Say no to reports in PDF format!

We cannot neglect the power of traditional plain PDF form, although we should not feel excused from being creative and resolute. There is no need to stay idle when technology allows us to experiment a little.

We asked ourselves the following questions:

  • Shall we make the reader download a separate file?
  • How many of them decide not to?
  • Are there any solid reasons to bear with closed format limitations?
  • And finally: can we create a new quality of report by designing it in a well-known form of a website? How to create better reports?

We dare to answer: yes. Our most recent Customer Happiness Report is wrapped into responsive website design. The readers are able to enjoy our report both on mobile and desktop devices, adjusted to screen size without any data being lost.

PDF vs. HTML

You may ask another reasonable question: should we leave PDF format behind which is already universal enough and widely mobile-friendly? Although it went through a lot of trouble since its origin in 1993 (see possible exploits), it still does play a big part in the world of documents. Let’s see what makes PDF lose the battle this time.

Customer Happiness Report 2014

How to create better reports with HTML

One of the most important challenges is to provide a comfortable way of browsing tables and charts within small space. There are lots of methods to adapt the tabular data to mobile devices format (e.g. Stackable.js). In our report you can swipe through the columns whether they fit the screen width or not.

The other mandatory element is intuitive navigation. When reading the report you should be able to easily jump within sections of the article. It becomes instinctive with a use of collapsible table of contents. Make sure the tiny navigation button is always at hand.

Customer Happiness Report 2014

The report in HTML format has certainly a lot more to offer. We consider sortable data tables (see: Tablesorter 2.0) and scripted charts (for instance: Flot Charts) as a nice and useful touch. There comes plenty of other possibilities, like tracking reader’s behaviour, collecting full viewer statistics and embedding different media types.

HTML is cheaper

Certainly, with a smart use of Adobe tools, you can pack most of those tweaks in the interactive PDF file. However, it takes much more work and time, not to mention expensive design environment.

Imagine a simple scenario: it turns out there is a spelling mistake in your PDF file. You are waiting for the designer to redo the whole development process while you could do it yourself in few seconds (e.g. using WordPress).

We highly encourage to experiment with reporting done in a modern way, which not only widens your audience, but also creates new possibilities. Let’s not forget that preparing a valuable and attractive report is hard and serious work. Also, it is really easy to overdo the interactive part - use all the features wisely!