In my portfolio I have case studies, where I explain a bit of my projects and place images of different sizes along with the text. While in some smaller images the user is able to click and view the large version, some other images are clear enough on the page (with no clicking the user is able to see the image in almost it's original size). So my options are:

  1. differentiate clickable images and non-clickable images (I didn't want to do that as it won't look so good when for example in one column you have an image with a border and on another an image without it)
  2. make everything clickable even if some images when zoomed in will just repeat the image
  3. keep the way it is, some images will be clickable and others won't.

The question is: Is it a real issue for users? If there is an image that is clear enough will they still try to click to see a larger version of it? Will they be more frustrated to try to click and nothing happens, or will they be more frustrated to click and see a similar image? (guess is more of an issue for touch-device users as they won't have any hover effect)

2 Answers 2


Offering no way to distinguish between clickable and non-clickable images is going to cause confusion, and having the click provide no benefit will cause annoyance, so I think you're stuck with providing some way to identify which images are clickable and which aren't.

As an alternative to borders (which I agree could look messy), you could add a magnifying-glass icon in the corner of images which are clickable:

thumbnail without icon thumbnail with icon

A second alternative would be to add borders to all images, but differentiate by colour:

thumbnail with grey border thumbnail with blue border

... but there's a trade-off here between making the difference too jarring, and making it discernible for people with e.g. colour-blindness.

  • brilliant! I was so stuck with my prejudice against borders that I completely missed this solution.. besides colour-blindness, users might get confused the first feel times on what the border means exactly, anyway the first solution will work well, thanks! Commented Aug 17, 2013 at 17:36

Thinking about the end goal for the user - it is to see a larger version. On a touch screen the initial instinct could be to do a spread multi touch action to zoom in to see the image rather than the single tap action. It would be an interesting solution to replace the thumbnail image with the large image when you detect the event so the larger zoomed-in image is not a pixelated mess.

I have not seen this done before and few Google queries turned up nothing. Has anyone experimented with this approach before?

The biggest challenge would be that users don't always perform this multitouch event on the image itself so when there are multiple on a page you would have to replace them all or figure out which one to replace.

Your Answer

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

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