2

I'm working on a CG marketplace and I was wondering what would be the best way to represent the images on the products page: a slideshow gallery or just plain images, one after another.

Slideshow gallery

  • Occupies less and predetermined space
  • Content is better structured

Plain images

  • Good: You get a better feel for the product.
  • The potential buyer engages better with the product, as scrolling is faster than accessing the thumbnails. (people like scrolling, see fb/twtr/tumblr walls)
  • It sends a premium feel, like the product has been worked with care and it's not a gimmick, keep in mind this are rather expensive products.
  • Bad: Occupies more and undetermined space.

a good example: https://www.behance.net/gallery/HankookTire-Ventus-promotion-video/11726731

enter image description here

What I need is your opinion on this.

Update: There was some confusion so I've tried to use amazon's page as an example.

Slideshow gallery enter image description here

vs plain images enter image description here

| improve this question | | | | |
  • Could you kindly provide screenshots for the patterns you refer to? I never liked the idea that people refer to carousels as something that can have either one item or many items (like the Amazon "Also Bought" pattern). In my view the latter should be termed Collection Scroller and I suspect its usability differs greatly from that of a single item carousel. – Izhaki Jan 9 '14 at 23:17
  • @Izhaki I've updated my question. – slownage Jan 9 '14 at 23:59
  • Oh, so none of this has to do with a carousel. I'm removing the tag. – Izhaki Jan 10 '14 at 0:01
0

The thing about images is that compared to text, they just suck to design with.

A few basic assertions:

  • Images should be large enough to provide value, otherwise its just wasted space.
  • The content of the images determines the minimum size it must be to add value.

So IF we are in a context where images must be "large" in-order for them to add value, then seeing more than one image will mean the user must be inconvenienced somehow, as the screen space / real estate will not be enough to view more than one image at a time.

  • User will have to click to see next
  • User will have to wait to see next
  • User will have to scroll to see next

So now that the basic heuristics are out of the way. Because this issue has come up for you, its safe to assume that these images need to take up a significant portion of layout. So the question is, what inconvenience do you feel is the least abhorrent.

It sounds like scrolling is the preferred inconvenience, but you also value the fixed height of the carousel. Luckily you don't have to choose (depending on your layout).

mockup

download bmml source – Wireframes created with Balsamiq Mockups

You can have a fixed region that also scrolls. Potentially you could also have it 'auto-scroll' to the next image with a timer, which effectively makes it a carousel.

There are a zillion ways to do a carousel, and every interaction should be determined based its value.

Thumbnails also have value as they give a preview for non-linear navigation, but its about your use case. And you could so have this with scrolling using waypoints. Its all possible.

Really my point is that carousel vs scrolling is a false choice, and you should be able to do better than sticking within one of those two rigid paradigms.

Agreed with @Paul that NN has great guidelines for the usability of carousels.

You can do all the A/B testing you want, but first it would be wise to ensure you aren't testing a false binary.

"It sends a premium feel, like the product has been worked with care and it's not a gimmick, keep in mind this are rather expensive products."

This is also an important point. If your design is beautiful and the animation feels slick, regardless of what route you choose; its going to benefit from aesthetic usability principle.

Because of this, I feel that the visual treatment is going to be equally if not more valuable for your use-case, than the layout of interaction scheme.

| improve this answer | | | | |
0

TL;DR: Think outside the box, represent information above the fold.

There are several approaches to this. The one that is right for your situation is defined by factors such as the amount of detail in the images, other content on the page, and your target platform. For phones, this gets especially hard because you have to keep elements large without bloating up the page.

Generally, you wouldn't use just one method. A commonly used layout is a slideshow like the one you pictured, showcasing the most popular or newest products, with a grid-style list of all (relevant) products below.

My opinion is, you shouldn't limit yourself to doing it either this way or that. Experiment, get feedback. Try to show as much information to the user as possible while keeping the design clean.

For example, a grid of your products with no margins between them with a sidebar for landscape displays and a semi-transparent white overlay on the bottom for portrait displays, in which you can scroll down to see more; clicking on the product's image in the grid causes a mini-page about it to appear in the sidebar. Fresh, clean, and a combination of the slideshow and grid methods.

| improve this answer | | | | |
  • This is for the product page, not for home or search. So someone can see more renders of the same product, from different angles. – slownage Jan 9 '14 at 14:41
  • And there's no mobile, the website is meant for content creators, website will be used only by people with 19 - 27' screens, if not larger. – slownage Jan 9 '14 at 14:44
0

Based on your comments on other posts, and the question itself, it sounds like you know your target demographic pretty well. My challenge is to ask if these are assumptions or have you done user research on these points?

Personally I think that the example you provided for the scrolling presentation is great. It keeps the relevant information stuck to the side so that you don't scroll away from what's important (in your case the Buy Now button and price etc), but you do get to explore large, immerse content at your own pace.

My recommendation to you is that you read over this article http://www.experiencesolutions.co.uk/blog/2013/12/18/ab-testing-and-why-making-assumptions-in-ux-is-a-dangerous-game/

Perhaps, even if you are relatively certain of your users preferences and how they will access the content, try taking both of these approaches and A/B testing them with real users. See what they respond to better. Find out why. Discover what approach will speak to them the most. Find out how they might access this content. See their 27 inch monitors in person. Good luck!

| improve this answer | | | | |
  • Thanks for the answer. Thing is I have the data, I run a large community with such content, but available for free. And the most popular screen size is 24'. The width of the content will be 1260px and will go down to 960px depending on the size, so I consider different browser widths. Because .. even though I work on a 27' screen the browser's window takes only half the screen. – slownage Jan 9 '14 at 15:48
  • Yeah, I never full screen my browser any more. Nonetheless, I still feel an A/B test of your two options, regardless of testing screen size, would be ideal to determine the best approach. If you have access to a large community that represents the same population you are going for, reach out to three or five of them, even if just in a remote session, just to get some real user feedback. – Matt Lavoie Jan 9 '14 at 15:56
  • Thanks again, definitely I'll run A/B test once the website is live. Also asking for feedback is important. You deserve an upvote, but I don't have enough reputation .. sry. – slownage Jan 9 '14 at 16:13
  • @slownage no worries. Good luck with the testing! But don't forget, you don't have to wait. You can test with paper/wireframes/prototypes. It's way cheaper to test this way than waiting until you have developed a finished product (and you might be surprised by the feedback you get) – Matt Lavoie Jan 9 '14 at 18:21
0

You tagged this question as so I have to point you to the fact that not more than 3% will look further than the first slide, but your image slideshow with product images is not like any carousel. Considering the fact your marketplace will be like any other webshop, a carousel or slideshow of images can be preferable. It leaves room for more information and keeps your page clear. My experience (as being employed at a large ecommerce retailer) is that people put more value in a clear description than pictures. One clear picture can be enough. A slideshow can work, because if people really want to see more they'll click through.

So in short: a slideshow/carousel will keep your page clear and leaves enough room for (more valued) information.

When you decide to go for a slideshow/carousel, Nielsen and Norman have some good pointers.

| improve this answer | | | | |
  • This isn't a regular shop, we would sell stock 3d model, and the buyers must see the model from every angle + wireframes. So if anybody is interested in buying and not just browsing he will go trough all the images. I've already seen that article before posting here, but they refer to home page sliders. Thanks anyhow on your take! – slownage Jan 9 '14 at 16:20
  • @slownage this just enhances the fact people will scroll through the carousel despite arguments mentioned in the "3%-click-your-carousel" article. If the images are that important I would say use a BIG images slide at the top like you see in this bootstrap example (although that hasn't got any pictures in it). – Paul van den Dool Jan 10 '14 at 7:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.