8

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:

normal 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

no-hover on-hover

               Checked

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

three checkboxes

There isn't much hover action right now, but I could improve it with some of tohster's suggestion.

9
  • This is a good question but it belongs on another SE site - probably stackoverflow.
    – Mayo
    Mar 19, 2015 at 23:49
  • 1
    Thanks @Mayo, I'm more than happy to move it over there. Just to be sure, though, I am not looking for help with how to implement this solution and am instead looking for "what visual affect do I need to apply"? Perhaps graphics-design would be better? I'll post it there. Mar 20, 2015 at 0:38
  • Oh. Then I misunderstood your post. I gather that the windows in this case are not metaphors but represent windows (as opposed to doors not linux).
    – Mayo
    Mar 20, 2015 at 0:47
  • 1
    looks very beautiful! good job.
    – sova
    Mar 21, 2015 at 17:38
  • 2
    This might a viable solution; s3.amazonaws.com/digitaltrends-uploads-prod/2013/12/…
    – Velkommen
    Mar 23, 2015 at 13:57

7 Answers 7

10

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:

enter image description here

3
  • 1
    Your idea to put the box on the image is a great one and it would be a quick-and-easy implementation. The thought never occurred to me, but it would put the natural form element back in place. Mar 20, 2015 at 15:58
  • @bassplayer7: I agree with you
    – Simon
    Mar 21, 2015 at 9:35
  • The problem with hover is that it's non-existent on so many devices today. Do not rely on hover as your only bit of user feedback that it's selectable.
    – DA01
    Mar 22, 2015 at 15:20
6

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.

enter image description here

1
  • I love this idea: it is simple and elegant. I may consider combining it with the concept of putting a checkbox on top of the image. Mar 20, 2015 at 15:59
6

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?windows and checkbox

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

5

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.

1
  • Indeed, that is a good point. While I'm not going beyond a normal form input/label, this setup is a standard <input type="checkbox" /> with a <label /> that targets the ID in the checkbox. The checkbox is hidden, though, so I can fully customize it. All of these pictures and text are inside the <label /> so the checkbox is actually being checked and unchecked completely natively. Mar 21, 2015 at 19:49
3

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:

enter image description here

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.

1

You can try two pictures:

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

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

It inspired me to use this design:

enter image description here

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;
    }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.