Presenting partially overlapping tables

Question

Let's say we have a grid displaying a bunch of devices, where each row is a device. The devices have performance data and configuration data. Some users are going to be interested in the performance metrics, say 6-8 columns, and others are going to be interested in the configuration data, another 5-6 columns. A clear minority of the users will be interested in both. I'm thinking about how to best display this data.

Displaying the two sets of data in two different tabs/pages feels wrong, because the row titles are the same and some of the data will overlap (names, IDs, status, maybe more).

Describing the data structure in this way suggests taking the overlapping fields out of the grid somehow, and then having two alternative views of just the different fields. That is problematic, because a) the sorting and filtering of the grid must affect the overlapping fields as well, and b) it must not affect the rows in the alternative view - I wouldn't want to filter according to performance and then see incomplete and randomly ordered data when I switch over to configuration view. In addition, there are controls outside the grid which are relevant to either one view or the other.

Any ideas besides the tabs or thought on how the tabs solution could be improved so that the overlapping data doesn't feel as strange?

P.S. Couldn't think of a decent title to this... Feel free to change it.

Answer 1

One suggestion would be to make all three groups (basics, performance, configuration) be collapse/expand column groups. When expanding one group, the others will collapse. Only if you "lock" a group it will stay in its collapsed/expanded position even if others are expanded.

My suggestion probably works best if you can have one "main" column per group, preferably a small one (e.g. "rating" would be great). Visually this would mean:

^{download bmml source – Wireframes created with Balsamiq Mockups}

The collapse/expand would probably work best if it's accompanied by a visually appealing animation, for example some accordeon-like effect. Depending on your case it might make sense to have the basic info "locked" by default.

One requirement you mention in the question may still be troublesome though:

I wouldn't want to filter according to performance and then see incomplete and randomly ordered data when I switch over to configuration view

You could perhaps visually "wipe" any filters on a group before a group is collapsed because another group is expanded. If a group is "locked" you might even consider keeping the filter.

Answer 2

Here is another option (reading vertical labels is not ideal :), maybe they can be color coded/have symbol instead and have a legend).

Since different users might be interested in different information, perhaps the table should be configurable to meet their goals. Visually processing a table with 10+ columns seems very challenging.

Answer 3

Just a thought: would the "Freeze columns" approach from MS Excel be appropriate for you?

You could "freeze" the "overlapping" columns on the left of the grid and only scroll the remaining columns. In a desktop app that would be easy to attain, not sure whether there are grid controls for the web that support this kind of feature.

Side note:

I have always tought of the frozen columns as providing "row captions". Just like the header provides column captions. You don't scroll the header out of view (when you scroll the grid, not the page), so you really shouldn't scroll identifying columns (row captions) out of view either.