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
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.
I implemented a combination of simon's and Roger Attrill's ideas for this, which I think it far better in terms of UX and aesthetics then what I had previously (thanks again!).
No hover / hover / checked
There isn't much hover action right now, but I could improve it with some of tohster's suggestion.