Guidelines 103-106
Category landing pages provide context. They tell site visitors where they are, and what they can expect to find within a category.
Imagine browsing an ecommerce website in search of a lamp shade. Does the “Housewares” category include lamp shades? Are lamp shades found in the “Furniture” subcategory, or “Accessories”? The category landing page answers these types of questions.
Keep in mind, however, that not all ecommerce sites require category landing pages. Sites that sell only a few different products will fare just fine without a dedicated category page. Users will know where to find the product they’re looking for when there are only a few categories.
It’s the difference between a bustling city and a small town. Sometimes you need a map to orient yourself, other times you simply have to look around.
This process of finding the exact item based on the navigation makes me feel like I would prefer this process over other websites.
The other item that was confusing to a new user, was the placement of the category information. I had to scroll down to find the category. I would expect it to be the first thing I see when I click on “Women”.”
4 guidelines for ecommerce category landing page design:
- Consider whether your site requires a category landing page.
- Graphics and product thumbnails on your category landing page should represent the breadth of the category.
- Product images on the category landing page should lead to their corresponding product page.
- Popular filters and brands can be displayed on category landing page.
Guideline #103. Consider whether your site requires a category landing page.
Before committing your time to the development and optimization of a category landing page, think about whether your site would benefit from one.
If you sell 4 different products, then the navigation bar will do the job. A devoted category page would be an unnecessary click and a waste of time for your site users. If you sell 4,000 different products, however, visitors will need direction and orientation when looking for a specific product.
There is much grey area between 4 and 4,000, however. For this reason, it’s important to consider your site’s specific situation.
TigerDirect sells a wide variety of electronics —thousands of different products— and so category landing pages are useful for visitors (category shown is Computers & Tablets):
I think that when I click on any category, most would expect to see a list of different products, their prices, and images pop up. I think the option to have extra information there for those who want to learn about the best choice for them is good, but most people do not need that and would not want to scroll through it to find what they really need. Ultimately, organization is key for me in the website
Guideline #104. Graphics and product thumbnails on your category landing page should represent the breadth of the category.
Showing a few, similar product pictures may mislead users into thinking that the category only consists of these products.
It’s the difference between a Sporting Goods category page displaying tennis balls and tennis racquets, versus the same category page displaying a tennis racquet, a football, and a hockey stick.
Below, Newegg successfully communicates the variety of products offered in the Electronics category with a thumbnail for each subcategory:
Guideline #105. Product images on the category landing page should lead to their corresponding product page.
Few online shopping experiences are more frustrating than seeing a picture of the product you want to buy and not being able to find its product page. Save your visitors time, effort, and annoyance by guiding them to the thumbnail’s product page.
A few different approaches will successfully lead users from a product picture to its product page. You can take a direct route and link the photo to the product page URL.
However, it is often more pragmatic (and conventional) to link a product picture to a whole list of similar products. If this is the case, place the pictured product high at the top of the list for users who clicked the photo see it.
Another way to direct users to the product page is by including the name of the product in a caption by the photo (e.g. “Paidge sofa, royal blue”). They can easily search the product name to find it.
How to do it RIGHT
West Elm
On the Furniture category landing page, this blue sofa is pictured. The caption shares that this is the “Paidge Sofa”. Clicking on the photo leads to a product list of all sofas, in which the Paidge is listed right at the top for users who fell in love at first sight.
Petco
The Petco dog category landing page displays two product thumbnails to represent the dog food subcategory.
When clicked on, these two product thumbnails are first in the list of “Popular Brands” at the top of the page.
Guideline #106. Popular filters and brands can be displayed on category landing page.
If a significant portion of people come to your site to shop one or two brands, make it easy for them to do so. Display the brands where they will be quickly noticed.
GNC’s Protein & Fitness category landing page features popular brands and products:
