1

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.

enter image description here

  • Shouldn't each row be it's own table? Then each title can be moved to the top of the relevant table and the row names can be moved to the leftmost column? – user43251 May 22 '14 at 9:29
  • 1
    You could indeed split it up into 4 tables, each with three rows. But, to be honest, I think the way you designed is a nice solution and clear enough. – Ruudt May 22 '14 at 13:11
  • Is the table just an overview of data or also for comparison? And in the last case, is it desired to compare assets or to compare months per asset? – jazZRo May 22 '14 at 13:23
  • 1
    My only complaint is that I have to go to the right side of the table to know what each row is before returning to the left to read the columns in order, so my eye is hopping around a bit more than necessary. Other wise I quite like it. – MildWolfie May 22 '14 at 13:41
  • 1
    Yeah! Try switching the first and last columns, let us see what it's like! – user43251 May 22 '14 at 15:08
5

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 love the line graph (but I'd probably want to add a little bit more vertical space, so that you could better see changes). If I may ask, what tool did you use to make these mockups? – Perchik May 22 '14 at 15:25
  • +1 for dat line graph. It did strike me to do that but didn't have time to go nuts. Bravo! – user43251 May 22 '14 at 15:30
  • @Perchik: Yes, if you can afford more vertical space for the graphs, that will help. It may also provide room for meaningful labeling of the y-axis. I made the mock-ups by creating the graphs in Excel and pasting screen snips into your illustration, edited in MS Paint. – Michael Zuschlag May 22 '14 at 15:32
4

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.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

(of course, with your styling, not these colors/spacing)

  • I like the idea of a less-traditional but more information-rich display like the configurals; however, if they don't fly with the OP's clients, this is definitely the next-best approach. Way more readable and puts the information you need in the right order. – Renee May 23 '14 at 1:32
0

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:

enter image description here

You could also move the labels on the left above the 3 rows and make a proper heading out of them.

Example:

enter image description here

0

Switched first and last columns!

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.