Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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

mockup

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:

mockup

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.

share|improve this question
add comment

3 Answers

up vote 1 down vote accepted

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.
share|improve this answer
    
+1 for questioning whether the thumbnails can be grouped. –  nimrod Apr 26 '13 at 19:11
1  
I want to know the answer ! (and what the product is...) –  Gildas Frémont Apr 26 '13 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. –  nimrod Apr 26 '13 at 19:35
1  
Thanks. User first! Conversion rate second! Platform 89th! –  Gildas Frémont Apr 26 '13 at 19:43
    
I couldn't agree more. Not sure why the answer above got that many upvotes... –  nimrod Apr 27 '13 at 5:28
show 1 more comment

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.

thumb

share|improve this answer
    
+1 for taking into account the users sense of how many thumbnails there are. –  nimrod Apr 26 '13 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. –  Roddy of the Frozen Peas Apr 26 '13 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 '13 at 19:26
add comment

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

share|improve this answer
    
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. –  nimrod Apr 26 '13 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 :) –  Henrik Ekblom Apr 26 '13 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 :) –  nimrod Apr 26 '13 at 15:44
add comment

Your Answer

 
discard

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.