Commerce Catalog & Assortment: UX principle for coding agents

A catalog is a decision surface, not a container. The visitor arrives without a specific item in mind, and the page has to move them from "should I buy anything" to "which one". Density, arrangement, and the way each item is bounded all change that answer before a single word of copy is read.

This doc covers the listing and the choice. ui/product-pages.md covers the detail page the visitor lands on next, and ui/product-imagery.md covers which image to put in each cell.

Density Signals Price

Space reads as expense. A physical shop with wide aisles charges more because the floor costs more, and visitors carry that inference onto a screen where the space is free.

Tighten the grid when the offer is value. Smaller gaps between rows, columns, and around each image make the same product read as a better deal.
Open the grid when the offer is quality. Generous space around each item reads as premium and justifies a higher price.
Set the density from the brand's price position, not from the layout that happens to fit. This is a pricing decision expressed in pixels.
Match price precision to density. In a tight grid, a specific price like 18.49 outperforms a round 18.50, because precision and compression carry the same value signal. In an open grid the round number is safe.

The failure mode is a discount brand in a spacious grid, which quietly argues against its own positioning.

Bound Every Choosable Item

Give each item in the grid its own visible container: a border, or a filled background behind the cell.

Bounded items keep the eye inside one product long enough to register what is specific about it. Unbounded grids let the gaze run horizontally across a single attribute, so every item collapses into a variation of the same thing and the visitor defers the choice.

Prefer a filled background over a hard outline when items still need to be compared against each other. A solid surface separates without trapping the eye.
Use rounded corners on the cell rather than sharp ones. The effect is small but consistent, and rounded shapes read as more touchable.
Skip the bounding on very large assortments. Variety is already obvious there, and the extra chrome only adds noise.
Never bound a set of pricing tiers with hard outlines. Tiers are read by scanning back and forth across a row, and a rigid box interrupts that motion.

Arrange by Task, Not by Habit

Horizontal and vertical lists answer different questions, and the grid should follow whichever the visitor is doing.

Lay items out horizontally for browsing. Eyes sit side by side, so a horizontal row is the cheaper scan when no specific item is in mind, and it reads as more variety.
Stack items vertically for a known-item search. A left-aligned column puts every name on one edge, which is faster to match against a word the visitor already holds in mind, and it puts the best match where the gaze already is.
Apply the same split within one page. Recent or specific results go in a column; trending, related, and recommended sets go in a row.

Start the Choice Before the Page Does

A visitor arrives deciding whether to buy. Any earlier act of choosing, however unrelated, moves them into deciding which to buy, and the whether question quietly stops being asked.

Open with a small, low-stakes pick rather than a pitch. A style, a use case, a size, two images to choose between.
Make the first pick visual. Early in a decision people choose from images faster than from text.
Keep the pick genuinely small. It is a mode change, not a qualifying quiz, and a long form spends the attention it was meant to save.

Give the End of the List a Reason

A visitor who reaches the bottom without picking anything will explain their own behavior to themselves, and the cheapest explanation is that nothing here was any good.

Put a line at the end of the assortment that supplies a better reason. Undecided, not unimpressed.

Offer a way to narrow: a guide, a fit finder, a size or use-case quiz.
Offer a person: a chat, a callback, an expert.
Offer a different shape of the same catalog: a bundle builder, a comparison, a best-for list.

An empty end of list is a silent argument that the catalog failed.

Confirm Every Selection Physically

An add to cart that changes nothing visible costs the visitor confidence and slows the next selection.

Give each selection an immediate, physical-feeling response: the item animating toward the cart, a count incrementing, a short haptic tap where the device supports one.
Keep any haptic short and consistent. Around 400ms reads as confirmation; longer reads as an error.
This matters most where visitors add several items in a row, such as grocery, refills, and add-on lists.

Filters Do the Narrowing

A visitor facing a long list filters rather than scrolls, so the filter set decides whether they find anything.

Show the total count above and below the list. Without it the visitor cannot judge whether to narrow or start scrolling.
Give every filter option a checkbox. A list of plain links does not read as a filter, so it goes unused.
Always include a sale or deal filter, in the main filter set. Buried inside a price filter it will not be found.
Offer price, rating, best selling, and newest as sorts. Add one or two that match what actually distinguishes products in this category.
Default the sort to a mixed relevance rather than to price or newest, so the first screen shows the range of what is available.
Support filtering by the attributes people search for, not only the ones in the product database.

Keep the List Navigable

Prefer a load-more control over both numbered pages and endless scroll. It keeps earlier and later items on one page for comparison, and it leaves the back button working.
Returning from a product must land the visitor where they left, not at the top of the list.
Show the rating average and the number of ratings together. A score without a count carries no weight.
Make the parts of a card visually distinct so name, type, and attribute can be told apart at a glance.
Keep categories to a manageable size. Subdivide as one grows past roughly ten entries, and avoid leaving a category with only a handful of products.
Make grouping headers selectable. A header that is only a label costs the visitor the broad view they were reaching for.

Present Reviews Honestly

A flawless rating is less persuasive than a nearly flawless one.

Do not suppress critical reviews. A visible drawback makes the positive reviews credible, and a rating around 4 to 4.5 stars converts better than a perfect 5.
Surface the most useful critical review next to the most useful positive one, rather than burying it behind a filter.
A minor or clearly irrelevant complaint is the most valuable of all, because it demonstrates the reviews are unfiltered while changing nothing about the decision.
Reply to critical reviews in public. Almost no seller does, the reply is read by every later visitor rather than only the original reviewer, and it converts the complaint into evidence that someone is home.
Leave a reviewer's strong language intact where the platform allows it. Intensity is the signal the reader is looking for, and heavy censoring reads as editing.
If reviews are moderated at all, say so, otherwise a censored word looks like the reviewer's own restraint.

Keep the Exit Out of the Frame

A page whose background matches the browser chrome groups itself with the tabs above it, and the tab strip is a row of exits.

Carry a distinct band across the top of the interface so the page reads as its own surface. On a light page that is a darker band; on a dark page, a lighter one. The point is contrast against the browser, not a specific color.

Commerce Catalog & Assortment