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