How do I make a photo look like a checkbox?

Question

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?

---

Update:

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.

Answer 1

I suggest that you use borders on hover. Links have a border-bottom on hover (compare on wikipedia) and a cursor: pointer; that helps the user associate that the image is clickable. At second, add a checkbox to the image. This helps the user understand that it can be checked:

Answer 2

Select the first one (or current one) by default, and show this by highlighting it with a border of some kind.

This then acts as a cue to the user that they can change the selection to another and that the items must therefore be clickable.

And that'll work on a touch device where there is no hover anyway.

Answer 3

Why would you replace a 'universally recognized" pattern for something that does the same but not as well?

If you simply want to display a photo, why not combine them both?

If you want to save space, you could even place the caption and checkbox on top of the image.

Answer 4

Please consider accessibility in addition to the visual experience. I know your question was about visual design, just want to make the accessibility in form controls is considered in this conversation.

One way to implement it would be to pair the graphic interaction with a native checkbox element. It also needs a text alternative like a label or alt attribute (depending on how it's marked up) to communicate beyond just the visual.

Answer 5

Observations:

• Given the complexity of the control, I would strongly suggest showing the 'Window' image caption all the time instead of on hover. It's pretty complicated and unintuitive to have the caption show up on hover, but then also have the image itself be a toggle.

• This is a good candidate for material-design inspired interaction. Material Design provides a nice set of physics to animate paper-like screen elements, and image buttons are paper-like.

  • See this demo for a material-design raised button, so you can get a feel for the interaction.

• In your case, the image needs to be selectable/toggle-able, so you can use a drop-shadow to indicate interactability, a larger drop-shadow on hover, and a pressed/flat image to indicate the image has been selected:

This provides a clean interface without the need for extra borders.

---

Note that this solution is NOT compliant with Material Design, but simply inspired by some of the physics.

Answer 6

You can try two pictures:

1. open windows which represents checked state
2. closed windows which represents unchecked state

Answer 7

I really appreciated your question, including your update to share what you did later.

It inspired me to use this design:

CSS:

.interest {
    border: 1px solid #ccc;
    padding: 10px;
    display: inline-block;
    margin: 5px;
    border-radius: 5px;
    cursor: pointer;
    font-size: .8rem;
    position: relative;
}
.interest:hover{
    box-shadow: hsl(125deg 100% 29%) 0 0 13px;
}
.interest img{
    width: 140px;
}
.caption {
    margin-left: 3px;
}
input[type=checkbox], .checkbox_and_caption {
    display: inline-block;
}
.checkbox_and_caption {
    position: absolute;
    top: 5px;
    left: 5px;
    vertical-align: middle; 
    background: hsl(0deg 0% 100% / 85%);
    padding: 5px;
}
@media (min-width: 768px) { 
    /* Medium devices (tablets, 768px and up) https://getbootstrap.com/docs/5.0/layout/breakpoints/*/
    
    .interest {
        font-size: 1.2rem;
    }
    .interest img{
        width: 200px;
    }
}