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.

enter image description here

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.

  • I think it means that they're embedding a button in an image, and they want users to know that ONLY the button is a link and not the rest of the image? – Anindya Basu Jun 16 '14 at 22:13
  • 4
    Contrary to @AnindyaBasu, I think it means that they are showing a screenshot which happens to include a button, and as the image (including its button) is completely inert, they don't want people clicking the "button". – Andrew Leach Jun 17 '14 at 6:38
  • Sorry. Andrew is correct. It's just a screenshot, and within the screenshot is a button (that is not clickable.) I don't want users clicking on this photo. – AdamUX Jun 17 '14 at 12:58
  • Is there an alternative method of promotion than taking a screenshot of that particular page? Alternatively, if you absolutely have to, try taking a screenshot which includes the browser chrome. – Ariel Spaulding Jun 17 '14 at 13:12

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.

  • To answer your last question. There really is no way to link directly to where this button appears. I'm in eCommerce. And the button appears on category pages as a way to filter product results. We have 500+ categories, and there's no way to know where the customer wants to go next, after getting results from the tool. – AdamUX Jun 17 '14 at 14:46

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

enter image description here

  • I've used placeit.net for that. (They have a free option for small 400px images). You pick a device, provide your screen and it inserts it. – Clay Nichols Jan 19 '17 at 14:15

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.

  • 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.

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

  • Having some kind of overlay was my first thought too. But I'm not comfortable coming up with an entirely new convention that is used nowhere else on the site. – AdamUX Jun 17 '14 at 19:36
  • perhaps you change the cursor to something that hints that the button is not clickable then? – Tarmo Saluste Jun 18 '14 at 15:01
  • Well there wouldn't be a cursor event. It would just stay an arrow. Having a cursor interaction would make people think that it is clickable. – AdamUX Jun 18 '14 at 16:19

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.


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.

  • It's actually output from a tool. And it's not that the button doesn't make sense on it's own. We're just giving customers a view of where this button will appear on the site. – AdamUX Jun 17 '14 at 14:12

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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