1

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?

closed as off-topic by Scott, Zach Saucier, Ryan, JohnB Mar 22 '15 at 16:37

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "This looks like brainstorming/idea gathering for a specific project or a request for free work. This site is suited for answers to general design problems, not ideas or work that is specific to one project. See this meta post for more info." – Scott, Zach Saucier, Ryan
If this question can be reworded to fit the rules in the help center, please edit the question.

  • 2
    You need to think--literally--outside the (check) box. What will make or break the usability of this is the supporting design and copywriting/language and overall context of the UI. In otherwords, it's hard to offer up suggestions without seeing the bigger picture. – DA01 Mar 20 '15 at 4:11
  • 1
    As DAO1 said it depends a lot on the bigger picture, but using images as a checkbox in general will not be easy to make usable, especially with random images. If there's much going on in the image at all then it will be very difficult to make it look like a checkbox – Zach Saucier Mar 20 '15 at 13:02
  • Thanks guys for the feedback, I appreciate it. This is part of a form where users input their information (name, home, etc), and choose from these checkboxes. It seems to me that it has the potential to be better (and easier to engage users with) then just a straight list of checkboxes. There will be a full grid of these images on a white background - mostly quite plain, but open, page. But as I mentioned, I think there is a gap between here, and where it could (and should be). – bassplayer7 Mar 20 '15 at 15:17
  • Can you post a sample of the page as a whole? – DA01 Mar 20 '15 at 15:44
  • @DAO1, because the site is still under development and it is for a client, I'd rather not post the entire page at this point. I appreciate your help, though. – bassplayer7 Mar 21 '15 at 14:41
1

As we mention in the comments, we really do need to see the bigger picture here. But given just the image itself, here's what I'd suggest:

enter image description here

As you can see, I left an actual, literal checkbox in there. But placed it on a bigger 'hit target' of the image as a whole. I think this is a good compromise--it gives you the large visual to tap/click, but still retains a familiar UI element along with a proper visible label (to help with accessibility).

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