Magento Category Pages: Must have UI elements to improve engagement

Posted on May 7, 2018 by


Category pages are used to display products available at the online store or in digital marketing campaigns. To ensure maximum engagement and conversion, retailers need to display the right UI elements for the page to perform well. What are the must-have UI elements for Product Listing and Category Pages?

Page Heading & Title

While it may be obvious to you the retailer, it is not always clear to the online visitors what the listing page is about. Clearly displaying the page title and heading is critical for visitors and search engines to know upfront what the page is about.

page title

Filters or Facets

Every product listing or category page has a variety of products that contain different attributes & tags. Online visitors are used to applying filters to quickly find products that meet their intent. For this, having an expanded filter and facets on the left side of the listing page is the ideal user experience expected by online visitors. Sometimes retailers show filters on top of the page, which is not the ideal location.

filters

Product Details on  Thumbnails

While images are great, details are better. As an online visitor at your store, they expect minimum critical information of the product that is displayed on the page. While what is critical will vary from store to store, based on some of your core value propositions offered to your customers, some details are must-haves required across all stores. The product name, price & discounted price are always displayed upfront across every mature online retailer. In addition to these details they may add, details like shopping, colors, ratings etc.,

product details

Product Thumbnails per Row

As a retailer, you want to display the best image that clearly showcases details of the product. Hence a large image is selected, but that will limit the number of thumbnails displayed to less than 3 per row. The idea of the listing page is to create interest to improve CTR to the product detail page. This is where you get to display all details with options to zoom into the image.

The resulting impact of reducing the thumbnails per row is that the visitor has to scroll more pages to see all products displayed on the page. This increased the bounce rate as page scrolls per visitor increases. The leading retailers show between 3 to 5 thumbnails per row.

product thumbnails per row

Page Sort Options

You need to have the basic sort options of price and date. Everything else is optional and should be tested with your audience to verify if it improves the click-through rate from the listing page to the product page. Some other sort options used are rating, introduction date,

page sort options

 

Share your comments if we have not covered any other important aspect that you have seen make a significant impact on your product listing or category pages. We follow all the above in the product listing pages powered by Tagalys. You can create simple automated new arrivals or sale pages in seconds and complex pages as seen on our demo site

Watch our demo site to learn more or schedule a 1:1 demo with us at your convenience. What are you waiting for? Start your 28-day free trial immediately.


Posted in e-Commerce General, e-Commerce Product Listing pages