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:
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
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.
No comments:
Post a Comment