How to communicate that an image is clickable without explicitly telling that it's clickable?

Question

Say I have an image that is meant to contemplate, not to attract click. However, if someone is interested in it, they can click on it to explore more. I feel that having an explicit text saying it's clickable will ruin the mood of the image. Is there a way to tell the user it's clickable without having to explicitly telling that?

At first I think putting the direction in the tooltip of the image is a way, like how xkcd do with their comics. However this isn't suitable for mobile. I also found this question Android app: informing users that an image is clickable, and the suggestion I find suited most is putting a clickable caption below (maybe the title of the image). (The other suggestions are suitable for buttons rather than images, or just feel distracting to me.) That's my solution right now, but I wonder if there are any other creative ways for this?

Answer 1

There are many ways, but it also depends on what you plan (want) users to do. Since you mention that you don't want to be explicit about it, I assume you have some ideas about the reasons (which probably have to do with avoiding users leaving the journey because of a distracting element).

So, the most direct way would be the one that's been around since HTML existed: just add a border with the same link color. That's an affordance most users will recognize at first glance.

Another way would be to add a hint based on the content. For example, if the user goes to another page after clicking on the image, you can add the symbols commonly used for "new page", see the Unicode versions below

⧉ ❐ ⍈ ⎘

In the same way, if the user is just expanding the image, you can use any common "Expand" icons, such as the ones below from FontAwesome, which are easily recognizable as an expand affordance since it is present in many apps and websites, including Facebook and Youtube

Another option would be to use user discovery and learnability (not to be confused with discovery in the research phase). Basically, let the user discover the functionality by appealing to intentionality. In your case, this is very easy because most users who want to see if an image is clickable will actually click it. You don't have to tell them, but you can explore this behavior with any heatmap application or script.

If you want to support discovery with a more direct approach, you can use on-hover interactions (second click on mobile) and then add an overlay with a button, icon, or word that tells users that the image is clickable. This approach will work perfectly because the first time they hover over an image, they will see that interaction and immediately learn the affordances of the system.

Finally, you can use the least likely approach: a first-time onboarding process. This isn't very useful unless you can add other elements that require explanation, but I mention it because it's still an option

Answer 2

You could try to use a subtle visual hint. For example a small area in the down right corner. A possibility would be to use ellipses since these are commonly used to get more (more info, more content, more options etc.) Something like in the example below (top middle picture).

Answer 3

As "affordance" is meaningful term to describe the context. How to increase or build affordance for an image rather than a button? With the example of "swinging human figure" or a "tree" - few options would be - keeping in mind we are devising it for a touch device

a. Motion : Images will animate (move) in two axis (recede and approach) - which means as invitation that something is active and says "Am alive, just touch me"

b. Visual Cues : Part of the image can be 'dotted outlines' - which ideally means its yet to be filled or unfilled (incomplete) in a sense. This allows user to prod and touch (by investigate) by which users would have learnt a behaviour that allows the image is responding and provides information

c. Color & Trigger : If the entire image would be in negative (say b/w or greyscale) and having parts highlighted in fluorescence or strong neon color with a layering technique by choosing each components in different planes (ex. top, back, behind and deep in horizon) + (plus) few movements as viewed in Apple devices (ex. when user enters the password wrongly the block wiggles stating something is wrong) (As trigger) allowing as invitation to click/explore.