4

What is an effective pattern to allow users to compare two or more data tables with multiple (i.e 4) columns in each table?

For example, we have a table with 4 rows and 4 columns for geographic revenue across last 4 years for a company ABC, now I want to add another company to compare (or possibly multiple companies).

In this case, how do we show this second table to compare values with the original table?

It's easy when we have only one row or column but in this case, we have more than one rows and columns. Any example would be helpful!

Improve this question
4
  • Hi, tough to give an answer with so little information. What's the purpose? What's the data you're trying to compare? Who will use this?
    – DarrylGodden
    Jul 25, 2017 at 8:00
  • You need to edit your original question rather than provide a comment.
    – DarrylGodden
    Jul 25, 2017 at 8:24
  • can you provide wireframe or rough sketch? What are the fields you are going to include? Can it be club into one?
    – NB4
    Jul 25, 2017 at 12:23
  • Does the data have to be shown in a table? If the data is value over time then you could show it as 4 graphs. Adding a comparison set would add a second line on each graph - this second line could be dotted or dashed to show the difference.
    – Roux Martin
    Jul 25, 2017 at 12:55

3 Answers 3

Reset to default
2

May I suggest you consider side by side display, with visual indicators of difference?

If you can elaborate what's important (change/discrepancies, seeing whether values are higher or lower, etc.), that would be helpful, but if I was to implement something based on the limited information provided, I would consider displaying the two tables side by side (assuming this is possible, example indicates four columns which isn't too much data overhead). The first table would be the "reference", whereas the second table's cells would be marked to indicate differences from the first (perhaps colored red for lower values and green for higher?) like so:

Example of two tables, side by side, with cells colored to indicate differences.

You may like to pair this with an easy method to swap companies, as well as some sort of primitive 'query builder' to allow users to only select columns that matter so as not to overwhelm them with information.

If using colors, you could also adjust the saturation of the cell coloration to correspond with how great the difference in value is.

This idea may or may not be appropriate depending on how your data is structured. If you choose this idea, you may need to adjust your colors to suit the visually impaired.

-Edit-

Based on Andrew Martin's comment regarding the visually impaired, you could consider a similar implementation of this idea, such as using small arrow icons in the cells to indicate differences instead of color. Furthermore, as per his comment, these "difference indicators" may require a sentence clarifying their meaning, may convey unintended meaning to those unfamiliar with the interface, and may not be appropriate for every column/row.

Improve this answer
13
  • Using colour alone is bad for accessibility - especially with red/green indicators: people with deuteranopia cannot distinguish the difference.
    – Roux Martin
    Jul 25, 2017 at 15:42
  • Already noted at bottom of post and it depends on the scenario. The reality is that an internal tool for a select few managers to refer to will have a different set of requirements to a public-facing tool used by millions, and either scenario may not rule out the use of color when it comes to what OP/their employers value.
    – TernaryTopiary
    Jul 25, 2017 at 15:47
  • No, it doesn't depend on the scenario. Using colour alone is bad for accessibility. Deuteranopes are not the only people you need to worry about. using colour under text reduces legibility. Cognitive issues also creep in: does red mean down or bad? Up can also be bad. Does green mean it's just OK or that there's progress? Even if this is for a small number of users you cannot guarantee the abilities of the users and you cannot guarantee that those abilities will not change over time.
    – Roux Martin
    Jul 25, 2017 at 16:02
  • Speaking from a business perspective as it sounds like this is business related: If a company does not employ a deuteranope, then the visibility concerns of deuteranopes w.r.t internal software may not be relevant. This is a hypothetical scenario where deuteranopes are not a priority. Often, the needs of a minority do not map perfectly onto the needs of a corporate entity. Many changes could be made to improve many things in life, yet are not made due to a plethora of reasons. All that said, I intentionally did not omit mentioning the visually impaired.
    – TernaryTopiary
    Jul 25, 2017 at 16:22
  • Moving beyond deuteranopes, obviously red/green coloration isn't a silver bullet and can be confusing, hence why it was suggested in parenthesis. Your concerns are why I attempted to be suitably vague in my proposal. The OP needs to consider their application before deciding what/whether coloration is appropriate for their needs. That said, the problems you mention aren't deal-breakers; they could be addressed with a simple blurb of text. It's intellectually dishonest to discount color as an option for the OP just because there are caveats to using it.
    – TernaryTopiary
    Jul 25, 2017 at 16:23
1

Some data fun from Edward Tufte: the cancer death rates.

enter image description here

What can we see from here?

  • Tufte knows a thing or two about fun examples
  • The dynamics of death rate over the years.

How can we apply it to our example? Literally:

enter image description here European revenue in billions of dollars of a fictional company. The company's CEO successfully used this data visualization to prove he's worth his business jet.

In our case, the graphs are even more illustrative. While Tufte's patients are all dying, our regions can both emerge and fall. And we'll see it instantly.

Improve this answer
2
  • 1
    +1 For the reference to Edward Tufte and the application of his concepts to this problem!
    – Michael Lai ♦
    Feb 21, 2018 at 2:37
  • Thank you for taking time write your wonderful comment. Appreciated.
    – Ivan Braun
    Feb 22, 2018 at 17:58
0

Can the data be merged into one table and presented like this? This saves the user from having to jump back and forth between two tables, and might be easier to use on smaller viewports.

Chart with A/B comparisons in one table

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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