How to modify an image to make it clear it's an image (and not a clickable button.)

Question

The image has a button in it, as we're referencing another part of the site to show customers what they can expect, and what to look out for site-wide.

What is a good way to modify the image to make it clear it's just an image?

Edit: So we have an image (screenshot) we're displaying on a page of another page on our site. The screenshot has a button on it, and I don't want customers clicking on the image thinking it does something.

I added an image to help clarify. Customers use a tool to help them get some information. We then display info, and a picture showing what to expect on our category pages. As is, looks very much like the green button is clickable. I scaled it down a little, but it still bothers me.

Answer 1

You can do several things in this case. For example, you could Photoshop the screenshot in a device (a notebook, iPad, whatsoever). People don't expect buttons in a picture of a device. Besides, it gives the screenshots a more realistic feel: the product is out there in the real world. What I would be worried about is the overused practice of using devices for screenshots (especially in design portfolios).

If you don't wan't to use a device, you could try to transform the image a bit. Let the perspective work or maybe even skew the screenshots a bit. This will transform the buttons as well and thus making them part of the image (instead of appearing as a stand alone button).

I would not recommend to change the image on hover for two reasons. One is that touch devices can't easily access this functionality. Two is that a roll overs give the feeling of interaction (which is the opposite of what you want).

What I am wondering however is the following. You are referencing to another part of the site. What is the problem with linking to those parts? Are those parts behind a login? Because if they are not, I would advice you to make the whole image clickable and let it refer to the part of the site the screenshot is showing.

Answer 2

Skewing the image and putting it in a frame may be enough to break the illusion. This is an extreme example of this:

Answer 3

If the point of showing the image is some kind of walkthrough/instruction/tutorial overlay some arrows highlighting the relevant parts. Not only will it clarify it's an image it will also guide them what to look at.

Answer 4

• adding a "photo frame" border (remember y'ole a img border?)
• blockqoute styling (establish the feeling of a "quote" as a chunk of foreign content by using horizontal offset or " styling)
• scaling it down to a (bigger) thumbnail, say 50%, that opens in a lightbox - the compressed graphics make it apparent it's an image, the lightbox re-confirms it and users should be able to identify an image in a standard lightbox as such.

Answer 5

The image could be grayed out or has some pattern overlaying it and when user hovers the image, the images fades into a color one or the pattern disappears. Or the image is scaled down and resizes when interacted. This gives hint that the button is part of the image and not actual button

Answer 6

After seeing the screenshot, I'd:

1. Give the image a thicker border
2. Retake the screenshot, snipping some of the button off rather than showing the entire thing
3. Update the caption underneath the image to inform that it is a screenshot - use less copy.

The purpose behind doing all 3 rather than just one of the three is to try and mitigate different types of individuals and how they perceive information. Even after doing all three, I am going to assume that there will still be individuals who may try and click, but the number of people will have decreased significantly.

I would quite honestly find a long-term solution which didn't require taking a screenshot of the next step to mitigate the confusion entirely.

Answer 7

Is this a help page or just an intro page?

If it's an intro page, do you know for certain that the UI needs to have a page explaining this button? If so, are you then certain that the problem doesn't really reside somewhere else on that page? It seems to me that if you have to explain what a button does out of context of the actual button, you've got a bigger issue going on and what you are trying to do will over complicate the issue.

Run a small batch of user tests on the form itself and see if there really is a problem, and if people are struggling with it, ask them to talk you through what they expected and what confused them.

As far as the technical side of things go, give the image a border and caption it. Maybe don't even have it on the page, but as a hover-over hint maybe?

Test things out first. I really think what you are trying to do is going to make the issue worse rather than better as people will probably miss that functionality hint due to banner blindness or something similar.

Answer 8

You can have different cursors, like cross. Making the cursor to pointer would make it so that it's understood as link, yes. But the idea was to try some other cursor, like "crosshair" or "not-allowed".

Try out cursors here: http://www.w3schools.com/cssref/playit.asp?filename=playcss_cursor&preval=not-allowed