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 ecommerce site - daily deal website.

I would like to get your opinion on what website width should be. I was thinking about 1000px OR 1200px. But in the case of 1000px we would display 3 products in a line, and on 1200px - 4 products in a line; we display products in a grid.

I am afraid that 4 products in line would be a little too much information. What do you think?

share|improve this question

4 Answers 4

It really depends on how much information you're showing with the product to me.

If you're just showing the product image, price and name I wouldn't set a limit on how many across you can go at all. As long as the information can breathe, it looks nice and it's easy to follow.

share|improve this answer
1  
I don't know. There is definitely a point where the line is too long, and the eye is drawn to the right rather than down the page. Which can have the effect of de-emphasising usability features like filtering that traditionally live in a left-hand nav. –  Racheet May 14 at 15:52

I'm not aware of any research supporting a specific number of columns on a product listing page, and I've been looking. So in the absence of research, I'd suggest falling back on convention.

There are definitely usability problems with going with too many columns. At the point where the long line of product images starts drawing the eye to the right of the screen, rather than than down the page, you start to visually de-emphasise usability controls sat on the left of the page.

In general, most responsive designs currently used seem to cap out at 5 columns total. Assuming you've got a left-hand nav, then following that convention you can comfortably stretch to 4 columns of products, but shouldn't go to 5.

share|improve this answer

The honest answer is it depends on the focus of the site and the general design and the demographics of the user base.

Here is the list of steps I would suggest to figure out this problem

  • Establish the maximum resolution which you plan to support by looking at the user demographics and analytics if available. This would help you establish your maximum resolution from a grid or media query perspective.

  • Depending on the focus of your website, define what are the sizes of the images you need to show. In an ecommerce site it is highly recommended to have crisp and visble images as they help define the decision making of the users and you might find out based upon your product, you might need to with larger or smaller images. To quote this article

In usability testing, users glean product details from images, including details that aren’t covered in the product description. Large images can show more detail, and multiple views offer even more information. Pictures of products in use or in context go a long way to answering customer questions. We’ve seen a user realize that a toaster had big enough slots for bagels and another know that coasters had feet that would protect her wooden furniture, simply by looking at product images.

The increase in image size is not only seen on product pages. Category pages, which often cram as many tiny images of products on one page as possible, are also using larger images. This lets user see detail early on in the shopping and comparison process, helping users spend their time exploring the right products.

For example if you are showing deals on products and want to highlight the products very clearly, you might go with large displays like this which allow you to show only two images side by side

enter image description here

however if you are going to show objects which dont need to be so detailed a smaller image set might work with this like the example given below

enter image description here

  • Hence based upon your product and the importance of product photography, you will need to decide how many products to show in a line while ensuring the corresponding gutter space is present between the products to enable the site to responsively scale as needed across mobile devices.

Here are examples of sites showing three,four and five products in one line ensuring there is sufficient breathing space between the products to allow the user to quickly scan the content.

enter image description here

enter image description here

enter image description here

share|improve this answer

Yahoo small business website uses 920px and displays maximum 3 products in a row. I find it displaying good on mobile phones if not excellent.

  • Sorry, missed the question heading last time, thanks for pointing out
share|improve this answer
1  
He has already said he's going for a responsive design. That doesn't just mean fitting loads of items into a row just because you have the space for it. Also, I don't really see how site loading speed is relevant to this particular situation. With responsive design you still have to load everything, regardless of how many items are in a row. –  JonW Apr 14 at 14:30
2  
Site loading speed depends upon site structure. How much products you stuff in a particular area determines how many KBs user has to download in his browser to get full view of the page. –  munirasim.com Apr 14 at 14:51

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.