Number Of Products Per Page Options

[Fold]

Hello forums.

I'm wondering if there are any general guidelines on the number of products
that should be visible on a category page before pagination is enforced.

I know that extensive scrolling is generally frowned upon but at the same time I've watched one or two usability sessions where pagination it self seemed to cause problems for users, where they would get lost clicking through multiple pages of products. Assuming thumbnails are kept small so that a page still loads quickly, is there some kind of optimal number of products?

In my specific case there are 6 products in each row, with the first row visible above the fold. I currently have 2 rows on each page, but this is creating many paginated pages and I'm considering expanding each page to display 18 or even 24 products.

[cre8pc]

There are no firm rules, so the first guiding principle is to truly understand who uses your products and what their habits are.

Searching for auto parts involves more steps than searching for herbal soaps, for example. Auto parts need a bit of pre-sorting and pictures aren't enough to describe them because makes, models and years are factors. Soap can be presented by visuals with far less hassle.

Netshops has a homepage with several rows of products, 4 pics in each, based on a category. This is a highly successful company representing over 150 stores. They do an amazing job.

Overstock.com is another one. You can scroll pages and pages of images with brief descriptions and regular customers are used to that and even welcome it.

Not everyone has the memory capacity to handle a large amount of information at once. You must find the balance between a visual, description, price and call to action prompt (like add to cart, learn more). I wouldn't crowd a page with 3 columns, and the middle one has gobs of products, row after row. There's too much going on in the left and right sides to be distracting.

A left nav column and the rest for products in the main body give you more real estate. Add white space, gutters (horizontal spacing), headings, subheadings, and search fields to help visitors sort by price, category, brand, etc.

[Autocrat]

... cre8pc ... is correct, it really does depend on the amount/type of information you present.

It will also depend on the "display space" you have... if you site is 800 wide, and you haev the main content in a column of 600px, then you are probably limited to a maximum of 3 items per row.
Worst case scenario, you you can have 1 item per row.

I always view it as base 5 rows, no matter the number of items per row.
This means that you can dispaly a minimum of 5 items, and a probably maximum of 25.

The general trends suggest betwen 10 and 20 though (if you look at most online stores, this seesm to be the common values).


Can you provide a link/exmaple of the info?
If we know what you are presenting, we can advise on how topreent it.
It's not jsut for usability/accessibility, you still need to cover presentation/sale-bility too

Cramming should be avoided, clear divides between items/columns/rows is advised.

so a link if possible?

[DCrx]

This falls under the category of something I wrote a thread about -- planograms.

While it does depend, it's not as simple at that. First, most web designers never test the layout. Yes, they may track which item sells well -- but not which configuration of how many products are presented on the page. And finally, should all product "facings" be the same size?

Apparently not, as the Petco test I refer to in the thread points out. Tests against the "shotgun" layout prove you can improve response.

[Autocrat]

Altering the visual or presetation need not adverly affect the quantity displayed.

By all meas, followig the established trends of both marketing and store displays, having "center pieces", "line-up dispalys", "offer focus" and "prime push displays" are more than do-able.

It also has little to do with your orignal question

You wanted to know what the "general" was...


So, why don't we take the methodology from store displays, as it's tried, tested and proven.


Take a grid... ease the job and make it squares of 30px.

Now, depending on the allotment of horizontal space your hae, we will be able to get X amount of grid blocks in.
For the sake of simplicity, we'll go with 600px.
Thats 20 blocks.

Now, how much space for a "Regular Item Display" ?
150px?
so thats a Max of 4, with no spacing.

Yet you need to use some form of "gapping" to stop blur, overrun or predeminance.

More problematic is the fact of limited space, so rather than placing a gap between your 150px dispaly blocks, we can simply detract 5px from each side... so our 150px wide boxes will hold 140px content, and 5 either side for "gapping".

Now, we have our Regular - 150px block with 140px content.
It's probably best to apply a little styling to the container for general appeal - this of course relies on the over design, but a simple shift of colour, application of minor graphicsto imply grading or curviture etc. seems to go well.

So, what about Maximised?
Well, if we want more space, then we either deduct an item per row and doule the retail space for the Maximised (thus you get 3 per row, 2 @ 150, 1 @ 300).
That is a simple and standard approach.
Alternatively, opt for 3 per row as standard, add inbetween gapping, and margninally increase the Maximised width.
This will results in a slightly odder display, but no less effective.
A Tertiary approach is Hard Lining - simply aply a different style to draw the eay - where everything else as a subtle gradient fill - the Maximised has a hard colour, reversed styling or simply a solid border.
Alternatively, go for the Label! Simply have a graphics (with Alt), or a positioned text piece that sits ontop of a non-used space of the item dispaly block, "Deal", "Offer", "Recommended" etc.

There, tons of ideas - all industry standard approaches.

Still, the general point is, go for 3 items per row, with a distinct break between row/column.
Contain the items is a sublt visual frame or block of graphic/colour.
what ever the max width of your page, do not exceed 4 times that in scrolling height. I possible, try for 2.5 to 3.
This retains some sort of balance, visual ease and enables fuller display without too much annoyance.

The real harship wil be if your content is dynamic.
You would have to do some careful planning to make sure that altering the styles to make an item more prominent don't look wrong or out of place (slapped in the far bottom right will not be particularly smart).

If anything, follow the F/P visual plan... the most attention on a screen follows an F or P shape, most on the TL/ML, the least on the MR/BL.
So, most prominent sales points should be where the eye goes.


Last resort, main focus could be completely seperated, either placing a specific item at the top & bottom, outside the standard display.
Same principal as the "end of aisle" methodology

[Respree]

If your budget and/or programming skills permit, I like the idea of letting the user decide. If not, think anywhere from 9 (3 x 3) to 16 (4 x 4) would be optimal. I think anything more than that would tend to be too much in one bite, so to speak. Some people may have a preference for that presentation, but I would imagine there would be less time spent glancing at each thumbnail if there were more (like 50 or 100), rather than less.

Example here (see bottom of page)

This post has been edited by Respree: Sep 10 2007, 06:45 PM

[DCrx]

If your budget and/or programming skills permit, I like the idea of letting the user decide.

Agree, using A/B split run testing is the mechanism for letting users decide.

[AbleReach]

I remember a thread where EGOL and maybe Kim were discussing a/b testing, and the amount of images and text on catalog pages. Does anyone else remember such a thing?

[joedolson]

Don't remember any prior conversation on that subject, but this is definitely one of those key areas of design where user testing is a must.

Different products have vastly different needs. It all (well, not ALL) depends on how much detail you need to know about the product before you can make a reasonable product selection. For some products, you need a pretty good-sized image to really be able to see the difference between it and a similar product. You need accompanying details describing the product with at least 5 or 6 distinctive features, to provide sufficient differentiation.

Other products, you may be able to choose effectively with much less information. However, the REAL clue will only come with user testing: by observing how users work their way through the store.

There are no effective general rules of thumb, practically speaking. There are strong and reliable tendencies to arrange product displays in either list or grid format --- organizing your products at random spread all over the page is _probably_ not very effective.

But then, maybe your site audience is insane...

In my specific case there are 6 products in each row, with the first row visible above the fold. I currently have 2 rows on each page, but this is creating many paginated pages and I'm considering expanding each page to display 18 or even 24 products.

At a guess, I'd say you can afford to have more than 12 products on a page. One other qualifying piece of information should be the sheer number of items in a given category: when there are hundreds of items in a category, it's (in my opinion) much easier to organize your thoughts with more per page. If you had 30 items, I'd have no problem with having fewer on a page: 12 would seem quite reasonable.

[swainzy]

I was just on this site
Peepers.

and after clicking on the catagory I wanted, it showed many pictures and gave me many options on how I want to view these images. I could decide how many on a page, how many across the page, a "sort by". It even has a compare button. The pics came up fast and are big enough for me to see without my reading glasses.

So, I agree with Garrick and others, let the user have some control/choice. I think people love that.

While the usability experts in this forum might come up with some problems on this site, I could find none as far as usability. It works well and fast.

[Rowan]

I read a good report by Nielsen Norman Group where they mentioned that people don't mind some extra scrolling if the product images are interesting and useful to look at. However you also have to take into account the time it takes to load each image, I suppose it would be OK if the products loaded progressively down the page.

If you don't have interesting images to show off then people would have to sift through a whole lot of text. It's a lot easier to get lost in a wall of text than a wall of images, so it would make sense to shorten product pages if they don't have interesting/useful pictures.

Also take into account how many pages would be generated, most people are unlikely to go past the 3rd page, but this depends more on your product filtering and server response time.

This post has been edited by Rowan: Sep 11 2007, 03:16 AM

[Adrian]

I find it really irritating when I do a search, or look in a category and end up with 10 products per page, but 100+ overall. 10 pages to click through just to look at the options!

Depending on the options, and how they are laid out, I don't have any problem with seeing 50 or 100 products on a page. One slightly longer page load, or lots more slightly shorter page loads, and then trying to remember which page the products you liked were on etc...

If you've got 20 products in a section, I'd say you may as well show the whole lot in one go. It's not a huge number, if you've got 40+, then it'll depend on the product, and how they're being displayed.

[DCrx]

It stuns me just how little visual merchandising on the web has matured. The basic model for online catalog design is still the vending machine, not store display. More thought has gone into supporting the purchase transaction than ever went into studying shopping behavior.


Relevance-Enhanced Image Reduction: Better Thumbnails is still news for some designers. And you know your industry is in trouble when Jakob Nielsen's advice on visuals is looking good.

Sites like Etsy are coming up with some interesting ideas, like a browse-by-color feature. Not everyone is looking for model number 84754r. You may want to buy something which matches a color scheme in a room, or goes with an outfit you already own. Etsy's browsing options support the shopping behavior that leads to the purchase, not just the purchase in a vacuum.

For example, what happens when you want to compare two or more cameras side-by-side? Are 'megapixels' really big pixels? Of course not -- yet there is more to megapixels than many consumers realize. So how do you rank image quality?

What if you're trying to organize wines for people who've never bought wine before?

The point is, visual merchandising is more than how many products to fit onto a page. Product mix may also boost the sales of all the products on a page. Some online retailers are very good at upsells and cross selling "people who bought this also bought that."

These are questions which should have been thought through a decade back. And any designer should have a dozen options to select from, built into the lowliest free commerce package. Unfortunately all we have is the "What's the usability factor on these DHTML scripts" type posts.

This post has been edited by DCrx: Sep 11 2007, 05:24 AM

[Adrian]

Ah I so agree with those comments. Sorting/Listing things by useful criteria, rather than some common denominator that seperates out things that people want together and vice versa.

[Autocrat]

I like some of the ideas mentioned... but they would surely rely on additional inputs for the producs... such as havig a Size/Colour/Texture field to lookup/compare/search by... and most Catalog/Commerce apps do not have such features.

That said, with a little ingenuity, you should beable to include you ow if your system is flexible enough.

As for the Sort/Search functionality, again, depends on the the nature of the App... but if you can hae pagination, then I guess you can apply filters too (where="" / sort="") - if not, I'd thik hard about usig different systems.

[DianeV]

Autocrat, I think they're discussion *category pages*, not individual product pages.

As a shopper, what Garrick said — let the user decide.

And what Adrian said: it's irritating to have to click through page after page of product thumbsnails in a category. I'd far rather have the choice to view them all on one page. That allows me to compare the thumbnail views, and I can scroll quickly through them to see if I'm interested in anything. If the shop has a "View All" option, then I use it. I totally love this option (or a similar one: choosing the number of thumbnails that will display on the page from preset numbers - like 20, 40, etc.) when I'm viewing stock photography, or computer parts, or stuff at Overstock.com. (Kim, thanks for the Netshops link; most interesting.)

And what's the big deal about scrolling? I do it when I write letters, and I also do it when I'm shopping. It's not as if the scrollbar is not user friendly enough.

Lastly, there was a study in, I believe, the 90's that said "people don't like to scroll". Point blank, no ifs, ands or buts — and remember: this was in the days of 640x480. Then there was a later study that said, "People don't mind scrolling." Still, the anti-scrolling theory seems to stick around.

I think a little common sense is in order.

[AbleReach]

Lastly, there was a study in, I believe, the 90's that said "people don't like to scroll". Point blank, no ifs, ands or buts — and remember: this was in the days of 640x480. Then there was a later study that said, "People don't mind scrolling." Still, the anti-scrolling theory seems to stick around.

I think a little common sense is in order.

Yes. And there's a big difference between a little vertical "scrolling" and hunting out the four corners of a site that was built without taking into consideration the user's display resolution.

This post has been edited by AbleReach: Sep 11 2007, 02:34 PM

[DianeV]

Sure. I'm thinking that taking into account the specific issues with any particular site is vital.

[Adrian]

I really don't think vertical scrolling is much of a deal really. I'd rather quickly scroll down a long list of products, than go through several pages to see them all.

Take an example of looking for a Wireless card at Dabs.
I've jsut clicked a few times to get down in the category and filter the choices to see the list of products relevant to me.

Now it's defaulting to 10 products, and telling me there are 25. So that's 3 pages worth. Just to see some wireless cards, where I'm probably most interested in quickly looking over pricing, maybe brand, and the star ratings.

Thankfully they allow me to change the number listed. But if they didn't, it'd be pretty annoying. I rarely find 10 items per pags on Dabs a useful number. For those kinds of listings, I'd start at 50, and have bigger options from there.

[DCrx]

Of course, some common sense is always to be wished for.

For example, let's say you have industrial pumps. Often you can see one brand, or see all high-volume, high price pumps on the top of the page. Now, yes, many users will scroll. However, I would wonder how many users would assume the prices for the pumps on the top of the page are representative of those below the fold.

Why not have the first column at Low Capacity pumps (1-5 gallons per minute). Middle column Medium capacity (whatever range). Right column High Capacity (at higher price). Also, if you have a popular model, why not test making that factor known to users? Especially when this is not the lowest price unit, such ideas are worth testing.