How to render multiple levels of labels in a table to improve readability?

Question

I'm having trouble searching for patterns like the following.

I need your help and opinions on the most clear, readable option to show three levels of labeling pertaining to a same table column:

There is a table with rules for PRODUCT 1 and PRODUCT 2 (both products are necessary, so both appear in the same table: one below the other).

The table has two COLUMNS, one for TOPIC A and one for TOPIC B. So each PRODUCT will include those 2 TOPICS.

Then, there are 2 CATEGORIES, common to all TOPICS. So, each product will have rather *CATEGORY 1** or CATEGORY 2. And finally the text for each label, which corresponds to a POSITIVE or NEGATIVE result.

(Hope this makes sense, cause it's difficult to explain without the actual data)

Now, the questions are:

What do you think about the readability of Option A? All the info keeping the same boxes for consistency, even if it seems repetitive. *Categories are duplicated for each column, to avoid zigzag reading (side - centered/common - then side again - then center again)

Will it be hard for the user to read / understand that the merged results stand for two equal results in the Option B? Position is not consistent, Category label isn't consistent either... but perhaps it looks cleaner.

And what about getting rid of the 3 level labeling for Categories, and just put it as content inside the box with some emphasis such as the bold type? Does Option 3 appears readable? Maybe requires more to read it (without the Category labels in rows) but the content is almost the same.

Any suggestions of grouping, labeling, positioning?

Any opinions, suggestions, ideas much appreciated! Thanks!

Answer 1

Your three designs have always 3 labels at top, I think it's too much weight for "the header". Also there are too many labels taking in count the data that is being displayed (14 labels for 8 results in the worst case VS (below) 8 labels for 8 results)

I think that the kind of data that you're displaying is important to make the decision about merging or not the results, but here are two approaches supposing that the best of option is not merging anything and avoid repetition:

• 2 category labels instead of 8, same number o topic labels.

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

• 4 category labels instead of 8, 2 topic labels instead of 4.

^{download bmml source}

Answer 2

Might I suggest making some distinct separations of different levels so that users know what they're looking at.

This isn't really tabular data, if it were just category and topics, then it would be tabular data, but because it is by product, its a 3 dimensional table which html tables are not very good at representing.

If you are going to nest, whichever nested solution you go with, I would just strongly suggest using padding and colors (not necessarily these colors, these are just a quick example) to clearly define the boundaries.

The html for the example if its of use to you: http://jsfiddle.net/wqcar2m2/2/