7

From a user experience design point of view, what would be a good way to let the viewer know, or better said, I want the user to "get it as he sees it" without further explanation that what I am showing is not the whole image, It is just a crop(ie. a small area of the whole image). But at the same time the user needs to know that this is part of a bigger image and he need to have some hint about how much of the "unseen" image there is.

I need some examples.. advice, you can be broad... give examples from other fields.

I am attaching a screenshot of what I have so far, the way I did it is that I added a frame of the whole image, and then inside that frame there is this crop I was talking about.. But I am not so satisfied with the result, I am out of ideas. Any help is much appreciated.

More of the image will be revealed as the user interacts with it in different ways.

enter image description here

I also asked this question on the Graphic Design StackExchange website.. I'll find a way to link the answers if something good comes out of this.

THANK YOU.

4
  • 2
    I think it might be useful to add some context to this. For example, might it be useful to indicate somehow, why not all the image is shown, whether the rest of the image is waiting to be shown, any cue that the user needs to do something in order to get the rest of the image to be shown, or indeed whether the rest of the image is never in fact going to be shown. To me it looks like a map where some tiles have been downloaded but it has either blocked or is waiting for subsequent tiles. Any good solution needs to answer any questions that the user may have about this. Feb 11, 2013 at 10:36
  • its not for a map.. :D can't tell you what is for at this point.. Feb 12, 2013 at 17:06
  • More of the image will be revealed as the user interacts with it. Feb 12, 2013 at 17:11
  • 1
    Google Image Search results for civilization fog of war show how one particular videogame series has approached this problem
    – AakashM
    Feb 14, 2013 at 9:32

8 Answers 8

11

One way to improve the effectiveness of the cutout is to enhance the difference between the 'figure and ground' and that can be done by adding a perception of depth using drop shadows to distance the overlay as a separate entity to the picture underneath.

For example: enter image description here

1
  • Love this idea..
    – Mervin
    Feb 12, 2013 at 11:40
7

An approch you can take is to blur out the part of the image while still showing a teaser so users know there is more to an image. Here is an example I made :

enter image description here

A website which uses this to great effect to get users to sign up is quora as shown below

enter image description here

Do note, there are pros and cons with just showing partial content to getting users to sign up as mentioned in this question Showing users partial content to entice them to sign up? but I believe you should be fine since you are just showing a teaser and not forcing them to sign up to view the whole thing.

2

I would use a generic background image or texture that is chosen so that there is no confusion between it and the real map or image, while preventing the stark blocks on white that you currently have.

A possibility is choosing a course greyscale texture while the focal image is in colour.

Something like this one: enter image description here

2
  • Not sure if this really is about a map. The ops image could also be an abstract painting.
    – kontur
    Feb 11, 2013 at 16:00
  • @kontur The same would work, but I'll update my answer to be clear. Thanks.
    – JohnGB
    Feb 11, 2013 at 16:04
2

You can put on background image with your logo or road signs

enter image description here

2
  • How does this help ?
    – Mervin
    Feb 13, 2013 at 14:41
  • That background have contrast with map. Square pieces of map appears while other pieces are loading. In dynamic - user will see strong understanding wich areas loaded and wich not. And logo - user remember that site better. ps.sorry for en Feb 13, 2013 at 15:26
2

Examples/Ideas

Puzzle

Use puzzle shape to indicate there are some puzzles left for discovery.

Peel off paper

Peel off paper effect

Scratch Hint

Appoday

Overlay effect

2
  • Can you provide more descriptive information about these methods and why they are suitable options? Currently this isn't an answer because it requires people visit those links to understand. If those links go down this answer would be even more meaningless.
    – JonW
    Feb 14, 2013 at 7:19
  • Sorry about that, now I have revised the answer a little bit.
    – Ivan Chau
    Feb 14, 2013 at 14:50
2

One way you could accomplish this dynamically was if you started by showing the whole area that the image would fill and then after a delay zoom in to the portion you want them to see first. This would explicitly communicate to them that they are not seeing the whole thing.

Another option if the experience is interactive is to place arrows close to the edges. This indicates to the user that there is more beyond what they see currently and gives them a conventional method to see it as well.

If you are revealing to the user portions of the image in response to other inputs (ie: load times or achievements) then a set of blank tiles that are removed to uncover the image as progression occurs would also communicate your desired message.

I would need further details of why you are constraining the visible portion of the image and what needs to happen to expand that portion before suggesting any other possible solutions.

What other ways would the user be interacting with it? The methods the user will have to interact with your image would greatly inform any ideas on how to suggest that they are not seeing the entire image.

1

I would really like to know:

a. What is the reason to display half image? b. Does user need to do something (Purchase, wait, complete some puzzle/task) to see the rest of the image. c. When user would be able to see complete image?

in current scenario, novice user may think that image is too heavy or blocked

however, you may think following solutions:

  1. Display image with a lock icon, you can provide a tooltip on mouse over on the lock icon. enter image description here

  2. as suggested by "Roger Attrill", you can use drop shadow.

1
  • Thanks for the sugession with the lock. I'll update the question soon to make it more specific with link to exactly what I am using this technique for. Cheers! May 13, 2013 at 10:58
0

The Overflow Pattern is really nice for this problem.

Simply put, you leave a suggestion that there's more to be revealed at the side of your container.

I can't really tell what you're trying to achieve from your image; I think something like this might help you though?

1

1
  • 2
    Maybe not the best example image for what you are referring to - this just looks like a visual border.
    – kontur
    Feb 11, 2013 at 15:59

Your Answer

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

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