Display related images along with the main image

Question

Let's say I've got one screen that has 10-20 images. Each of those will have up to 4 related images. I would need to display the related images along with the main image. Any suggestion on how to layout the related images in relation to the main image?

I'm including a mockup to better illustrate my problem.

Answer 1

There're 2 things you need solve in this interaction:

1. How can I tell users that there're related images?
2. How should I show the full collection?

Depending on your development resources, there're 2 ways to approach the first problem. The easy way is to simply put a text link under the image that would read See X related, like this:

^{download bmml source – Wireframes created with Balsamiq Mockups}

The hard way is to create a semblance of a stack of images and put a badge in the lower right corner (conventionally) to indicate the number of related images. It's not necessary to use the actual related images in the stack (saves processing & rendering times) as long as it's clear which image has related items and which doesn't. It would look something like this:

^{download bmml source}

The second problem is much easier to solve. You can expand the collection of images into either a dedicated page or into a modal sub-window (or a dialog - depends on your users' workflow).

Added
Since the OP has added a mockup of the interface, I can definitely say that stacks and modals will work best in his situation. For everyone else, the aforementioned choices are still valid.

Answer 2

Possible to have a focus state, where your focused image (click, hover, tap, scroll to center, something) animates thumbnails of its related images below or something? Guess it depends on what you can do with our platform and the meaning of the images.