What's the ideal width and number of products in line (ecommerce website - responsive)

Question

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?

Answer 1

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

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

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

Answer 2

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.

Answer 3

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.