How to best deal with many thumbnails in a product image gallery

Question

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.

Answer 1

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.

Answer 2

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.

Answer 3

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