In order to find products they’re potentially interested, being able to sort the list is critical.   Common sorting options: Price Popularity Relevance New Ratings   Which sorting options do you provide?  

KISS – Keep It Simple and Stupid That means simple category names, and as few categories as possible. It also means structuring the catalog in an intuitive way that makes products are easy to find.

For stores of a certain size Filters are particularly important for stores with over about 50 products. If your store only has a handful of products, there’s no point in filtering them.   My advice for your filters Provide category-specific filters in addition to site-wide filters (brand, price, ratings) (read more on this in this […]

The attributes below are a must. Image Title Price Star rating + # ratings Product variations, if any (typically in the form of color swatches)   List View vs Grid View If your products are heavy on specs, you might opt for a List View instead of a Grid View, in which case you can […]

There are several ways to build urgency Show how much they save on sale items Have limited quantity or limited time offers Offer free shipping or same-day (or next day) delivery if they purchase before a certain time Inform users about limited stock   Flash sales TBDress is the perfect example of the implementation of […]

Inspiration from Amazon Amazon helps their shoppers reduce the number of options to choose from. They have multiple sections at the top of the category page with featured products: best sellers top rated recommended for you most wished for most gifted hot new releases   You can either add a section at the top of […]

Pagination isn’t great The page links are usually small and hard to click accurately, especially on mobile. Those pagination links load another page, which slows down the browsing experience. And users browse fewer products on average with pagination than with a Load More button.   Infinity scrolling is evil You scroll down and think that […]

In product lists (categories) Add a label or replace the ‘Add to Cart’ button with ‘View Cart”.   Additional functionality You can also update those added items to allow shoppers to change the quantity, and/or include links to additional products or matching accessories.

Sidebar + featured section Have the featured filtering values in the filter sidebar and at the top of the product list. Test making that top ‘featured filters’ section sticky, meaning that it remains visible on both desktop and mobile while scrolling down. Don’t use banner-like graphics for featured filters   Feature sparingly Adjust the visual […]

A standard web practice This is a standard behavior standardized by Google and inherited by older HTML practices. Unvisited links being blue, and visited links being purple.  Of course, this should be adjusted to match your brand colors.

Truncate Truncate filters after about 10 values (truncate if minimum 5 values) Add a visual indicator next to the truncation link (an arrow or a +) Fade the last filter value   Link style Use the site-wide link styling for the truncation link Position the truncation link close to the filter values

On desktop Display hierarchical breadcrumbs. They’re important for SEO, and to help users figure out where they are on the site. If they come from a search, you can also add a ‘Back to Results’ link.   On mobile Have a link to the parent category only. There isn’t enough space to show the full […]

Purpose The main purpose of those pages is to introduce the sub-categories, and give them inspiration and guidance to help decide which sub-category they’re interested in.   Components Provide thumbnail previews, longer titles, and descriptions for those sub-categories. These components will also clarify categories with ambiguous industry jargon. Feature the sub-categories prominently, at the top […]

More options available On IKEA, instead of showing variants there, they add More options available under the product. Interesting approach, it makes visitors wonder what the other options are. I think that is both a good and a bad thing. Curiosity is good, but it creates some confusion.   Show the color variants Macy’s, alternatively, […]

Quick Views are a bad idea According to Baymard (source)… they’re a symptom treatment for poor product list design (not enough information/attributes, thumbnails too small, etc.) users confuse them for the product page and struggle to understand the site’s hierarchy they introduce friction to the user’s browsing process The lack of a clear “product page […]

Avoid pogo-sticking In Baymard’s user testing (source), showing too little information in the list made test subjects do extensive “pogo-sticking” (jumping back & forth between the list and product pages). Showing too much information leads to overwhelm.   Options on desktop If your niche is visually-driven (apparel, home decor,…), combine a ‘cut-out’ image by default, […]

Same order Put the same attributes in the same order. E.g. how many cups of tea a container of tea can make?   Inconsistencies According to Baymard: (source) 64% of e-commerce sites impede users ability to compare the product in their list due to inconsistencies in the listed product attributes. Shoppers tend to skip products without […]

Where? While this is commonly done in product descriptions and the homepage, you can also educate your visitors on the category page. Here’s a good example of a product page which educates well Follain has a category page with a Clean Fact section.   Copy sections You can copy some of the sections you have […]

Friction On most stores that I reviewed recently which had a Compare feature, it was very difficult to figure out how to access the Comparison page once you select a couple of products to compare. I honestly couldn’t figure it out in a few cases.   How it should be Here’s a good example of […]

On desktop   On mobile (source)

GridView layout This recommendation applies to a Grid View layout, which is most relevant for very visual products without a lot of specs (e.g. clothing and apparel). If your products are in-between those two extremes, you could give the option to users to switch view between Grid and List. On mobile, you can typically fit […]

Overview section The overview can be a small section at the top of the product list with the applied filters and a X next to each to un-apply it. It can also be in a section at the top of the filter sidebar, which is typically on the left of the screen.   Read more […]