Must have UI elements before online merchandising works in e-Commerce

Posted on July 25, 2018 by


First impressions are the best impressions. Before you invest in a merchandising engine for your online store, you must have basic UI elements in place. You will not buy a car with a fabulous engine but looks ugly or has poor design elements. The same applies to visitors are your online store, who need to be guided to find a product of interest. While a merchandising engine can help predict or influence what products are displayed in search or other listing pages, the user interface of the listing pages has to be designed keeping your visitor & online category in mind.

The basic UI elements of any listing page are the filters, sort options, and product thumbnails. Within each of these, a retailer needs to think through many factors to influence how your visitors will react when they are on that page.

Page Filters or Facets:

  • Selection:┬áThe products in your online store might be assigned to multiple attributes and it is imperative to note that not all attributes are relevant to your customer. Display only the filters that are relevant to your customer and not to your business.
  • Order: We live in a mobile-first world, hence 70% of your visitors are likely to come to your store via a mobile phone. The mobile real estate is limited and they are likely to see the top 5 filters when they open. What are the top 5 filters that you should display at your store? Not every facet is equal, if you are in the luxury business, maybe discount does not matter to your audience. What would be the top 5 questions your visitors ask you if this were in a physical store?
  • Position: Having worked with over 50 online retailers it was interesting to note that around 15% of them actually have their facets placed horizontally on top of a listing page. But most have the facets on the left of the product listing. One retailer had a combination where they had standard facets on the left and facets like offers, coupons and discount percentage on top. Something to think about.
  • Visibility: Within each facet, you might have more than 10 tags. Limit tags displayed within each facet to 10 and make sure the top 10 tags are sorted by the tags that are assigned to the most products. If there are more than 10 tags, they should be collapsed, pop-up on demand or have a search bar within the facet.
  • Anchoring: Facets are a quick way to find products within a listing page. It is recommended to anchor your facets to the page, such that they do not scroll on top. Make life easy and obvious.

Sort Options

  • Selection:┬áDisplay sort options that are most likely to be used by your visitor. It is a poor experience for your visitor when they find so many irrelevant sort options like sort by name, brand, location. The most relevant sort options are the ones that are tied to numeric fields like price, date, discount. We discourage sort options tied to text fields.
  • Display: Make life simple for your visitors and provide the ascending and descending sort options within the drop down. We have noticed sites where the sort option contains the field to be sorted and the visitor is expected to click outside the sort option, to change the order to ascending or descending.
  • Location: The most obvious location to anchor your sort options is right above the product listing on the left. That is the most commonly used location, so do not try to reinvent the wheel.

Product Thumbnails

  • Size: Your visitors do not have time, but how many product thumbnails do you show per screen? This is directly tied to the size of the thumbnail image. Too large, you show better clarity, but that requires the visitor to scroll more to see more products. Larger images can also marginally impact the load times of the pages, as the size of the image is slightly more. Too small an image and your visitors might get lost in the clutter.
  • Information: Assuming you have determined the ideal image size, basic elements like name, price, sale price must be determined on the product. Additional information like brand, SKU etc., should only be displayed if you think it can increase your CTR to the product view.
  • Elements: Additional product tags in the form of labels can also be displayed if that can increase CTR to product views. Some examples of labels are New, Ready to Ship, Next Day Delivery, Offers, Sizes & Color Swatches.

The objective of a listing page is to get the visitor to get to a product page as quickly as possible. The metric you should be tracking is Click Thorugh Rate (CTR) from listing page to product details page. What is the CTR of your listing page?

Let us know if you would like us to audit your site, you can schedule a call with us using this link. You could also signup to start your 14-day free trial now


Posted in e-Commerce General e-Commerce Product Listing pages eCommerce Site Search