I have a need in a touchscreen mobile app to show users a message that informs them about some system function that they should know might affect my app. As well as describing the issue, I want to use an image clip of the Preferences setting so they can see visually which system function they might want to toggle.

Problem is, if I show a life-size pixel-perfect grab of the preference control, it looks like they can interact (touch) it right there in my message "dialog", when in fact it's static and non-interactive.

How can I visually convey in this clipped image that it is in fact an illustration, and not the actual control?

1 Answer 1


I immediately wondered if the images could be wired up to open the preference setting they refer to. Assuming that won't work, three tactics come to mind:

  1. Try turning the preference control images to grayscale, so that they can still be visually identified but also recognized as reference images, not actual controls.

  2. Try showing a bit of the area surrounding each control so that it looks less like a button and more like a bit of a screen grab. If you can combine it with a callout without getting cluttered, all the better.

  3. Try adding a border styled to invoke thoughts of a picture around the preference item image. The curled photograph frame can be a fairly light touch but clearly mark the image as a picture, not the real thing.

I did a couple quick examples to show 2 and 3.

enter image description here

enter image description here

  • Yes, it can't be wired up to the preference, unfortunately. Thanks for the thoughtful input.
    – Ben Zotto
    Sep 19, 2011 at 5:44
  • The curled picture idea is both clear and beautiful. Nice suggestion Todd.
    – JohnGB
    Sep 19, 2011 at 15:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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