: How do I make a photo look like a checkbox? I am working on a web application where I am using a picture as a substitute for both the text (label) and the checkbox. For example, this is

@Murphy569

Posted in: #InterfaceDesign

I am working on a web application where I am using a picture as a substitute for both the text (label) and the checkbox. For example, this is what normally displays, and is universally recognized as a checkbox:



Instead of that, I would like to use a picture of a house window and naturally communicate that the user can "check" the box. I created this as a rough attempt to achieve that:

No hover / On hover





Checked




I think there is a lot more that can and should be done to improve the layout of these checkboxes. The idea is to make it easier for users to choose options as, in general, I understand people do not like to read text. There will be 12 of these checkboxes in a grid layout, so it should be fairly clear when one is selected and the others are not. However, at first glance, the no-hover does not seem to communicate that it is a checkbox.

I somehow would like to be able to visually show the user that:


it's clickable
clicking it will select a checkbox
clicking it will select "Windows"


Two things I had thought about was dropping an inset shadow on there, or setting a light-gray checkmark on top of the image. I would also like this to work for touch devices, and avoid hover being needed for understanding how it works if at all possible. By the way, that orange can certainly go. It was mostly just an arbitrary color.

Any ideas?

Vote Up Vote Down

Login to post a comment!