Thursday, April 26, 2018

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


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.




Answer



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.


No comments:

Post a Comment

technique - How credible is wikipedia?

I understand that this question relates more to wikipedia than it does writing but... If I was going to use wikipedia for a source for a res...