I find myself in a ‘can you make this report or dashboard look better’ type of a dialogue every now and then and thought I’d list a few simple tips that I apply almost everywhere.

1) Custom formats for trend icons

You know all these arrow up / arrow down icons that you draw in MS Paint and then spend a while aligning to numbers?

I much prefer to use a Conditional Data Format of ▲ ###,### or ▼ ###,### with colors. Yep, those triangles are not pictures, they are webdings font icons that you can just copy paste to your format definition.

2) Rounded buttons via CSS

All the rectangular ‘Run/Reprompt’ buttons in the reports that scream ‘I’m from 90s’?

Most modern browsers support a lot of CSS functionality, including, unsurprisingly ‘rounded borders’.

So we can:

1. Create a new report class called roundedButtons

2. Add it to your buttons

3. Add an HTML item to the report with the following CSS (we’re just styling the class you’ve already created)

`

`

3. Alternate shading CSS for tables

Building on the CSS idea above, a more complicated story is to do the alternate shading of rows in tables. Again, pure CSS3 trickery, nothing else.

1. Create a new report class called alternateRowShadingTable

2. Add it to your table

3. Add an HTML item to the report with the following CSS (we’re just styling the class you’ve already created)

<style><br /> .alternateRowShadingTable tr:nth-child(2n) {<br /> background-color: #f2f2f2;<br /> }<br /> .alternateRowShadingTable tr:hover {background-color: #ddd;}<br /> </style><br />

4. SVG Icons and Google Material Design library

Whenever you’re looking for an icon (help, settings, person, chart, whatever) to use in the report, please use SVG (Scalable Vector Graphics) format. This will make it render nicely on any resolution of display. SVG wasn’t support by IE, but it was a long time ago and we should all move on from that.

Moreover, don’t invent the icons, just go the wonderful Google Material Design library and pick icons from there. They are used in Android, people know and love them.

Ideally you’d want a UX designer on a project to do some wire-framing and come up with consistent styles and look & feel and then apply it across all reports, although I’m yet to see a project that would allocate resources to this. My better half is an UX-architect, so I ask her validate my report mockups during date nights, but that doesn’t really work as well as one would hope :)