Just some brainstorming about different ways to visualize a two-dimensional vector in the first section.
One thing that tripped me up a little bit was when you had two image swatches side by side, but were then trying to compare them with another horizontally:
It made it a little difficult to cross compare the different dimensions. For instance, if you want to compare the second swatch across all examples you visually have to skip over the left swatch. If you stack them vertically, it makes that comparison a lot easier:
Another idea would be to use arrows to visualize the vectors, which frees you up to use color to visualize the categorization. Here blue and pink show how the vector was categorized:
Another thing that tripped me up a little was the fact that there was no visual hierarchy to the two dimensions. Because one of the dimensions was the one you "care" about, that one could be a bigger to communicate that. Also, when both dimensions were equal sized swatches, they didn't seem to compose as much into a single object visually. Here's another rough idea. X is how light or dark the outer background color is, Y is how pink or blue the center square is. If a little bit of blue is added to the same background color, it can be misclassified.
Just some brainstorming about different ways to visualize a two-dimensional vector in the first section.
One thing that tripped me up a little bit was when you had two image swatches side by side, but were then trying to compare them with another horizontally:
It made it a little difficult to cross compare the different dimensions. For instance, if you want to compare the second swatch across all examples you visually have to skip over the left swatch. If you stack them vertically, it makes that comparison a lot easier:
Another idea would be to use arrows to visualize the vectors, which frees you up to use color to visualize the categorization. Here blue and pink show how the vector was categorized:
Another thing that tripped me up a little was the fact that there was no visual hierarchy to the two dimensions. Because one of the dimensions was the one you "care" about, that one could be a bigger to communicate that. Also, when both dimensions were equal sized swatches, they didn't seem to compose as much into a single object visually. Here's another rough idea. X is how light or dark the outer background color is, Y is how pink or blue the center square is. If a little bit of blue is added to the same background color, it can be misclassified.