Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I published an article on the Cooking.stackexchange blog yesterday. I shot all photographs in a standard 3:2 side ratio, but when I inserted them whole, I didn't like the appearance. I asked for help in the Graphic design chat room, and Pankeej gave me a great idea: to cut out interesting parts of the images in a size which looks good when inserted into the post (650x200px) and link them to the standard versions (650x430px). I did this, and the blog post looks good now, but I was afraid that nobody will notice that the images link to bigger versions. I asked a friend whom I had sent the link, and he admitted that he didn't notice at all that there may be links to bigger images, despite the fact that his cursor gets changed onhover.

To make the matter even more problematic, there are other pictures in the post which don't link to anything, because they are already embedded in their largest size. Also, there is one picture which is visually different from the others, because it has a caption, and Wordpress adds a whole box around the picture for the caption.

How can I get readers to notice that they can click on some of the pictures for a larger version? I like the way the pictures appear now in the post, and I don't want to change their appearance drastically, e.g. by adding a thick border or something similar. Also, this is hosted on a WordPress instance administered by Stackexchange, and I can't install more plugins or similar. I must be able to solve the problem with simple HTML, or image editing.

This is how the article looks like:

enter image description here

This is what the reader sees after clicking on the wide blackberry image.

enter image description here

share|improve this question
1  
A simple dropshadow can indicate something is clickable sometimes –  Ben Brocka Jul 19 '12 at 15:28
add comment

4 Answers

Add a little caption inside the picture indicating that it can be expanded or a magnifying glass or both, "eg. Click for full size".

Can you add inline css? A similar thing to this might be possible too.

share|improve this answer
add comment

If consistent throughout your site, how about a clickable plus icon (sample below), distinct from the photo content itself, in the lower-right of each image that can be enlarged.

plus icon sample

share|improve this answer
4  
or a magnifying glass icon ... –  kmonsoor Dec 22 '12 at 18:16
1  
Yeh it feels like maybe you are 'adding' to cart or something, magnifying glass in this circular form would be better –  slawrence10 Dec 22 '12 at 21:03
1  
Also, make it translucent. A big shiny orange button is bound to clash with at least a few images. –  Joe Z. Dec 22 '12 at 21:43
add comment

Your best bet is to look at standardized patterns for the same or similar media. Video content for example, usually carries an icon indicating the content can be expanded - and these differ only slightly from player to player.

The user has already been trained to recognise the icons meaning, so whilst using it on images may be less common, it will trigger the same emotions from the user.

Here's an example icon:

enter image description here

share|improve this answer
    
I agree with kmonsoor's recommendation: Use a magnifying glass icon. That icon looks too similar to the "drag" icon used in image editors, though it is rotated 45 degrees. In my experience, a "full screen" icon usually has a rectangle in its center, if that is what you were going for. Though a full screen icon isn't really appropriate in this case. –  Brian Dec 24 '12 at 16:18
add comment

In the past (before the touch UIs) simply making the image a link to it's larger version, and the pointer change that indicated it, was enough.

But with touch UIs there's no pointer to change to indicate it's clickable, and an accidental click could be expensive in terms of downloading times. What I do now is simply put links that say "Larger image" or "Full size image" at the end of the caption (or as the caption if there otherwise is none).

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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