I have a site that allows you to set up two groups of criteria (here it is two categories of products) by searching and refining, then allows you to view data and analysis of these two groups of criteria while easily also seeing what the groups themselves are comprised of. The idea is for the user to be able to quickly see a comparison of the two groups utilizing color coding for quicker identification. I also want the user to be able to click into the groups to refine them at any time in their workflow. I have attached a quick illustration of this. I have included the groups in the nav as their own little toolbox (kind of like Flowdock), but am worried this doesn't make sense, especially with all the information included in them. Can I please get some thoughts and feedback on this? Is there a better solution I am overlooking? Thanks everyone!
I think it is a good idea to use the colors. The problem here now is that the color information is separated from the actual content. This means that someone quickly scanning the page might not notice the explanations.
I would recommend moving the information from the top left to above the graphs. It could even kind of look like the page title. This way the user will be more likely to notice the color explanations. You could use the Google Trends compare view for inspiration: https://www.google.com/trends/explore?q=Soda,%2Fm%2F0cxn2
Additionally: one way to cater to people without good color perception could be to have bigger contrast between the two colors. So for example one of the colors could be lighter purple and the other darker green.
I wouldn't limit the tipoff to color, since I'd also want to cater for people without good color perception. Otherwise your example looks fine--it clearly portrays the information. If you want to snazz it up graphically, you could use icons (in your example, e.g., a steaming coffee cup vs a pop can with a straw)