Better way to compare two data sets visually on a page?

Question

I have a site that allows you to set up two groups of criteria (here it is states in the USA) by searching and refining, then allows you to view data and analysis of these two groups of criteria on either side of the page. The idea is for the user to be able to quickly see a comparison of the two groups side by side with color coding for quicker identification. I have attached a quick illustration of this. Can someone suggest some better ways to display this rather than two boxes of editable criteria at the top of the page? Or submit some examples of this kind of pattern?

Thanks for all your help!

Answer 1

I recommend going with a table structure and have the common text in a column and put the differences in different columns, this way you can show more data and user can easily connect with the data you presented. I strongly think that, repeating the same text (content) except few changes is not required when you are designing for comparison.

Table needs to be more fine-tuned, not just have just borders around the cells.

Answer 2

The only issue I see on your proposal is that it's very verbose, not focusing on the value that is being compared.

Here's a proposal:

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

Answer 3

On making comparison, a very important thing is NOT to use different colors(or anything for that matter) to make further differentiation between the 2 columns. A is left, B is right, I think that's enough distinction to tell people that they are 2 different things being compared.

To show how A and B are different, the emphasis that you need to make is the difference between A's content and B's content, not A and B themselves. Such as what you had up there with Cold being blue and Hot being red, that was a right move. Now if you would just remove the background colors of the 2 columns, the visual difference between the Cold and the Hot would be much more pronounced.

Furthermore, don't let the fillers("weather is" and "right now") get in the way. If Cold and Hot are what you trying to emphasize, crank them up even more, make the text size bigger, or even use custom graphics. Or, line all of them up in columns so that the labels(reformat the fillers into labels) aligned vertically and the values aligned vertically while dimming the color of the labels.

weather      hot
temperature  80f
male pop.    58%

Also, I'm seeing 4 boxes in the illustration (or 5 including the one containing the bottom 2). It would be better to have just 2 boxes (or columns) going head to head against each other. The point is that the vertical separation between A and B should be the most pronounced boundary on the screen, and you should only separate them in one place.