We have an image gallery with thumbnails that can be clicked to reveal a larger version of them in a viewport.

Here are some conditions that the layout needs to meet:

  • The Gallery has to cater to varying image proportions so the image thumbnails should be shown beside the viewport rather than below.
  • The thumbnails can't be placed above the main viewport because the viewport has priority.
  • The site is responsive and in smaller size the thumbnails will just be listed below the main viewport.
  • The page is actually a product page of an ecommerce site, so there has to be a viewport, to make clear that the user is buying one not many products.

And here is a sketch of the current interface


download bmml source – Wireframes created with Balsamiq Mockups

As you can see, the problem is that if there are many thumbnails the list becomes awkwardly long. Now to mitigate that problem, I can see myself using either a scrollbar:


download bmml source

or some other scrolling mechanism like this

Both solutions don't seem very elegant.

Which one follows UX standards better or is there entirely different approach that is more user-friendly? Please provide research or existing implementations to back up your suggestion.

3 Answers 3


Maybe there is something with that important number of thumbnail images since it is the same product :

  • Do the images show the product in different colours ? Then show only the colours.
  • Do the images show the product from different angles ? Then using arrows might be a better option (or fake 3D).
  • Do the images show the details of the product ? Then "annotations" into the main image that leads to "zoomed" image might be a good idea.
  • Do all this images are all useful and meaningful ? Maybe 2 or 3 shots of the product is enough.

Each question and answer in this list are not exclusive.

If those interrogations do not help : try a different approach.

  • Can you group those pictures into sections ? Size, shape, locations, type of customers and reorganize your layout in a more meaningful way.
  • +1 for questioning whether the thumbnails can be grouped. Apr 26, 2013 at 19:11
  • 1
    I want to know the answer ! (and what the product is...) Apr 26, 2013 at 19:14
  • :D It's fashion and groups of colours. Although your answer is the clearly the best fit so far, the platform might be prohibitive to it. To make that work on the platform (shopify) I'd very likely have to do a sleazy hack. Apr 26, 2013 at 19:35
  • 1
    Thanks. User first! Conversion rate second! Platform 89th! Apr 26, 2013 at 19:43
  • I couldn't agree more. Not sure why the answer above got that many upvotes... Apr 27, 2013 at 5:28

Users are used to pagination and don't mind flicking through pages. Almost like a shop catalogue. Users in real life do it (i.e. Argos), users do it in virtual life (i.e. Amazon).

Some of the advantages of using pagination are:

  1. Pagination gives the user a sense of how far along they are
  2. Pagination makes it easy to remember where they saw something they like and can easily get back to it - a scroll makes it harder to remember
  3. Pagination would allow you to load the page quicker

The other comment I have is that, if you have space in your layout and if the images are not too dense, you can use a double column. That will really depend on the site your are designing and the graphics. If it's a minimalist white site with images with white background really neatly done, you could use this approach, whereas a really visually loaded site with very bright colour images would probably make it too hard for the user to make a decision on what to buy.


  • +1 for taking into account the users sense of how many thumbnails there are. Apr 26, 2013 at 10:36
  • I really dislike this setup because it makes it very hard to compare something on page 1 with something on page X, especially if X is a page that is not immediately visible and requires multiple paging to find. Not only do I have to do more clicking, but I also have to remember the pages where each of those items is located. Apr 26, 2013 at 19:14
  • I do agree that this solution doesn't fit all the products. However, based on the requirement given (to have a viewport) this was the most viable solution. Of course, if you have a very large amount of products this idea won't give a good experience and the way to go is having thumbnails like for example amazon does.
    – Rosie
    Apr 26, 2013 at 19:26

I wouldn't (if not necessary) use a dedicated space for the large image. Instead I would use all of the area for the thumbnails so the user could scan as many images as possible at once, and then click on an interesting image. The clicked image would be shown in a modal popup.

The modal popup should contain options for viewing "previous" and "next" image so that the user can browse all images in full size without clicking/closing each thumbnail. This can be done with buttons, by clicking right/left edge of photo (facebook style) etc...

Image gallery

  • Nice but not really an option. The viewport is there for a purpose, it's an ecommerce product page. I updated my question a little to make that even clearer. Apr 26, 2013 at 9:22
  • Ok, might be a requirement but I guess that the user should be able to browse products and view them without automatically choosing them. I guess the alternative is a "select" button of some sort and on top of the image gallery is the "shopping cart". Might not work in your case though :) Apr 26, 2013 at 14:13
  • Oh I think you might misunderstand, it's a product image gallery, so it's an image gallery of one single product, rather than many products :) Apr 26, 2013 at 15:44

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.