I was asked to design a table that contained three rows for each fleet asset. I struggled to find a way to label each of those rows so the user understands what the data in each row pertains too. I have included an image as I am finding it hard to explain in words.
I'd be interested in opinions about the solution I chose to go with and any other ideas on how to deal with this scenario.
To answer your immediate question, I believe your three-row design adequately conveys what each row pertains to, but I agree with Perchik that you should move the row headers for each metric to “nest” inside the asset headers on the left, so users will see them quickly when scanning left to right.
Another thought is to change “Fuel Wastage” to “Fuel Saved” or “Fuel Efficiency” by subtracting each value from 100%. This way, larger numbers for all metrics will consistently mean “better” and you’ll avoid the confusion that may come with some green arrows pointing down and some green arrows pointing up (and likewise for red arrows). However, I would only make this change if Fuel Wastage is a new metric to your users. If users already think in terms of Fuel Wastage, rather than efficiency, I wouldn’t try to change them.
As for the more general question of how best to display these data, that requires a deeper understanding of how users will use them. You want to make the primary tasks easy to do –ideally the primary message of the data should “jump out” of the display –while making secondary tasks possible to do –it may take some work or study by the user.
Looking at your prototype table, I’ll assume that the primary task of the users is to compare assets over time on the holistic trend of the three metrics. That would explain why
You have all assets in the same table so users can compare assets to each other
You have all metrics in the same table (versus three separate tables suggested by user43251, or supplying filters to hide and show metrics as needed by the user) so that users get the holistic effect.
You have three rows per asset (rather than three columns per month, to make a wide table with horizontal scrolling) so user can scan the values of each metric over time.
You have color-coded arrows to highlight changes over time.
Given that as the primary task, you may want to consider a more graphic means of representing the data.
Line Graph
Rather than a table, you could stack one mini line graph (a “spark line”) per asset, with each graph having three lines corresponding to three metrics.
A line graph will be easier than raw numbers to compare relative values across assets, and it shows trends in time more precisely than the arrows. Eliminating the arrows will free color coding to be used to identify the metric, making it easier to compare each metric across the assets, something hard to do with three rows per asset. If reading the precise value of a metric is a secondary task, it may be sufficient to provide this information on mouse-over or drill-down.
If your three metrics are highly correlated, maybe you need only one line per asset for one metric (or a new “master” metric that is the weighted average of the three), and allow the user to change the metric as needed, or drill down for details.
Configural Display
If the relative value of each metric to each other is important, you may want to consider a mini configural display for each month and asset. For example a “spider” or “radar” display (where the vertices of each triangle correspond to the value of each metric) is good if the “best” combination of value is a “balance” of the metrics.
In your case, it looks like high values means “best” regardless of "balance," so you may want to develop and test something more creative. For example, you could have pie chart, where the proportion filled is the fuel efficiency, the size (radius) is the mpg, and the darkness of the shade of the pie-graph wedge is the driving score.
A properly designed configural display won’t need your arrows, as the trend should be graphically apparent (e.g., increasing size of symbols means an increasing trend). As with a line graph, if reading the precise value of a metric is a secondary task, it may be sufficient to provide this information on mouse-over or drill-down.
Depending on your users, reading configural displays can take practice and/or training, so this may only be suitable if your users routinely review the data (e.g., once a week or more).
I actually like what you have for the most part. My only big suggestion would be to move the row headings "Driver score, MPG, wastage" to the left side, so that when you start scanning the table, you already know what the data means.
The other (minor) thing that I'd change is the alternating row colors. I like the alternating colors for each item, but within an item it seems a bit confusing with the alternating rows (since they don't actually alternate...it's one row for score, one row for mpg, and one row for waste). I'd suggest just doing dividing lines in the item and alternate colors for the alternating items.
download bmml source – Wireframes created with Balsamiq Mockups
(of course, with your styling, not these colors/spacing)
Maybe you should move the labels on the left up so they are aligned with the first row (of those 3 rows).
Then you give them either more white space in between or split them into 4 different tables.
(Really crude excel) example:
You could also move the labels on the left above the 3 rows and make a proper heading out of them.
Example:
Switched first and last columns as per my comment on OP!!!
Also:
Change the background colour of the Miles per gallon row to match; it adds extra noise.
Add more breathing space between the rows.
