User Experience Stack Exchange is a question and answer site for user experience researchers and experts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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.

enter image description here

share|improve this question
Can u post a snapshot or some prototype? – carora3 Mar 10 '12 at 23:19
up vote 2 down vote accepted

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).

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.

share|improve this answer

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.

share|improve this answer
Such an approach doesn't solve the problem of making user expect related images. – dnbrv Mar 10 '12 at 23:18

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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