Take the 2-minute tour ×

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?

share|improve this question

1 Answer 1

up vote 14 down vote accepted

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

share|improve this answer
Yes, it can't be wired up to the preference, unfortunately. Thanks for the thoughtful input. –  quixoto Sep 19 '11 at 5:44
+1 I like the curled up picture idea. –  Marjan Venema Sep 19 '11 at 6:07
The curled picture idea is both clear and beautiful. Nice suggestion Todd. –  JohnGB Sep 19 '11 at 15:36

Your Answer


