Multiple Choice Images

Have you ever taken a survey that used images for answer options? Not only have I, but I have also built those same surveys. They look horrible.

Which image corresponds to which checkbox? Once I scroll down a little, I have no idea. Luckily we are using label tags around the images so that all a respondent needs to do is click the image to select a checkbox.

Epiphany. If the user is clicking the image to trigger the checkbox anyway, why not make the image the checkbox too?

Thinking about it this way, a colleague and I developed some JavaScript code to handle transforming the existing layout and overlaying semi transparent check images on top. The first prototype used overlay images that were the exact size of the images getting overlaid, so it needed some further working, but we showed that not only it worked, but that it made image options more intuitive to end users.

We spent some additional time and fleshed out variable image sizes and their overlay siblings, grid layouts, and exclusive options. With that done we completed version 2:

⇑ With nothing checked.

⇓ With some things checked.

And here is the code: