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

  • Can u post a snapshot or some prototype?
    – carora3
    Mar 10 '12 at 23:19

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.


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.

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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