• Ecommerce Websites Design: 8 Essential Elements of Successful Category Pages

    On most ecommerce websites category pages and their categorization schemes are driven by a business process giving very little attention to the heart of any transaction: the online visitor.

    Ultimately, a category page plays an important supporting role in funneling traffic to product pages. Amazon.com, for example, expects the visitor to navigate to the product page to add an item to your cart.

    clip_image002[4]

    But there might be other roles or tasks you want a category page to perform. These other tasks will have an impact on what elements you should have on that page. Barnes & Noble for example, use their category pages as a tool to capture customer orders. For that reason, the site allows you to add books to your cart or wish list from the category page.

    clip_image004[2]

    There are some obvious ways to categorize your products. For example, if you sell books, then it is natural to break down your categories based on the general topics (Business, History, politics, etc). Both Amazon and Barnes & Noble present visitors with a detailed breakdown of their books section:

    clip_image006[1]

    But a category such as “Business & Investing” is too large to be left as is. So, one should expect that that particular category to be broken down further:

    clip_image008[1]

    At the same time, notice in the above example that the parent category level still pulled some products (titles) from its other subcategories. Barnes & Noble takes a similar approach:

    clip_image010[1]

    Let’s put this all together with 8 best practices in creating your category pages:

    1. What is the purpose of your category page?

    Determining the role of your category pages is the first step in creating good category pages. Start by asking what actions you want visitors to take on category page. You might want your visitors to do one of several things:

    • navigate to product pages
    • browse available products
    • compare products
    • add a product to shopping cart

    Each of these actions will force a design decision on the category page.

    2. What actions do visitors want to take on a category page?

    It is not enough to think about what actions you want your visitors to take, you have to consider what actions a visitor expects to find on a category page. For example, I do not buy a product from the category page. I must click on the actual product, and visit its own page to read more details about it before I add it to my shopping cart. Other visitors might already know what they are looking for and having an “add to cart button” on the category page will simplify their order process. The intersection of items between actions you want the visitors to take and actions they themselves want to take provides a list of features and possible actions you should have on a category page.

    3. Evaluate your category pages analytics data

    Once you’ve determined the purpose of your page, one of the first things you should do when considering category pages is examining your analytics data to understand how well you current design is working for you. We usually expect category pages to have an exit rate similar or close to the site average. If you notice that your category pages are suffering from high exit rates this is an indication that visitors are exiting your website as opposed to continuing to navigate to product pages. Something in the design is not working all too well.

    4. The minimum in creating category pages

    Grouping your products into top level categories should be straight forward. On most websites, you should to take down that grouping at least one level further. A category such as Electronics is too large and should be broken down further into subcategories. The question is how much further you need to break down these subcategories. In general, we do not recommend having more than 3 levels of sub-categories under each of the top level categories. As the visitor is navigating through any of the categories, you should highlight some of the items listed in its “child” categories.

    clip_image012[1]

    5. Determine the main features people ask for when shopping for your products

    Consumers sometimes look for specific features when shopping for some products. For examples, if you sell TV sets, then the size and resolution of the different sets matters to many consumers. Sometimes the brand name or manufacturer information is important to visitors. When I shop for books, I am always looking for new releases. Each of these features represents additional ways to filter and regroup products within a category.

    clip_image014[1]

    Circuit city uses a variety of features (category, screen size, resolution, etc) on their category page to allow visitors to further navigate to the section of the site most appropriate for them.

    3M Results

    6. List the why visitors buy your products

    what are the top needs visitors express when they shop for your products? When I am shopping for books, I need to get audio books so I can download them on my IPod. So, in that case, the type of media book available matters a lot to me.

    clip_image016[1]

    BestBuy.com’s desktop section allows visitor to identify the needs they have for buying a desktop (Basic, photo & music, entertainment, gaming, etc).

    Similar to the features of the products, the reason people buy a product will also provide you with additional ways to break down your category pages further.

    7. Help the user select the appropriate subcategory:

    clip_image018[1]

    stop CRO frustrations

    If your product is complex, visitors might need some help deciding which product or subcategory is appropriate for them. A category page should provide a way for visitors determine the appropriate decision. You can provide buying guides or wizards that help the visitor determine which subcategory is most appropriate for his or her situation.

    8. Let testing tell you what works and what does not

    By following each of the steps above, you will be able to provide users with a variety of ways to interact with your category pages. But nothing is set in stone. Let your analytics as well as heat maps tell you which categorization most users are clicking on and which ones they do not use. I remember one client who added a “need base” filtration to the top section of his category pages. The team was very proud of it but visitor were not clicking on it. Two weeks later we removed that filter to use something else!

    Any other recommendations or techniques you used on your website?

Khalid Saleh

Khalid Saleh is CEO and co-founder of Invesp. He is the co-author of Amazon.com bestselling book: "Conversion Optimization: The Art and Science of Converting Visitors into Customers." Khalid is an in-demand speaker who has presented at such industry events as SMX, SES, PubCon, Emetrics, ACCM and DMA, among others.

View All Posts By Khalid Saleh
Khalid Saleh

Join 25,000+ Marketing Professionals

If you enjoyed this post, please consider subscribing to the Invesp blog feed to have future articles delivered to your feed reader. or,receive weekly updates by email:

6 thoughts on “Ecommerce Websites Design: 8 Essential Elements of Successful Category Pages”

  1. Avatar Rick Galan says:

    Don’t forget also that Category pages pull double duty in a lot of cases by serving as landing pages for online marketing campaigns. Of course it’s always better to custom make a landing page for each campaign, but the reality is that is not always possible. Category pages often serve as Paid Search or Email landing pages. As such it’s not a bad idea to build in some logic so that the landing pages can customize to some degree when customers come through certain sources. That’s a tactic I have always found well worth the effort.

    Another purpose of a category page is to guide the customer to new areas of the site. Category pages are really designed for people to browse, and people browsing are primarily looking to see what is there. Category pages should be designed in such a way that they highlight areas of the site to which you would like to direct the customer.

  2. I am redesigning my category pages right now. I am adding an ‘add to cart’ button for each product.

    I am also planning on having a short list of 3 bulleted points for the product features….. But I was thinking maybe 3 bulleted point and the benefits instead…..

    Any opinion about which works best?

  3. @Audio Bible the approach you took to category pages is a little unusual. Your category pages are almost like a collection of mini product pages.

    why don’t think of the following:

    – What is the main purpose of the category pages?

    – are users adding items to the shopping cart from the category pages or from the product pages?

    – can you test two versions of the category pages: one with traditional design versus the design you have now.

    on a different note, I would also think the design of the top bar. I would consider
    – expanding the size of the search box
    – remove Call Us: 800-758-0160 on top of the bar
    – move the Contact Us | Your Shopping Cart to inside the bar.

    that would give the bar a standard look visitors are used to with many ecommerce sites.

  4. @Khalid Saleh, I am getting some of the changes you suggested done right now to the header section….

    I will update you when I have them completed to get your opinion.

    Thanks.

  5. Avatar Hart Granite says:

    Thanks for posting this article – it is actually very helpful!

    Thanks, Andy 😉

  6. @Khalid Saleh, I have cpmpleted some of the changes you suggested on my category pages, I am converting them 1 by 1 to the new format. The page below is one that is completed.

    http://www.biblebible.com/Catholic-Bible.asp

    Any feedback, or additional changes you think, I need?

Comments are closed.

    Facebook
    Twitter
    Instagram
    LinkedIn
    YT
  • img

    Conversion Optimization

    The Art and Science of Converting Prospects to Customers

    By Khalid Saleh and Ayat Shukairy

    Get a Copy