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

July 25, 2018

tagalys

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 at 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 to keep 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 a 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 percentages 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, the 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 the listing page to the product details page. What is the CTR of your listing page?

Tagalys maximizes conversion rate & gives merchants visual control of products displayed in Site Search, Category Pages & Product Recommendations at their online store. To know more about our solutions and features, get in touch with us now.

Trusted by retailers worldwide

Vanja S

Sheike

"Tagalys makes merchandising effortless. Their data driven sequencing and sorting drastically improves our effectiveness. Tagalys takes the guesswork out of merchandising and product recommendations."

Ryan R.

Camilla

"I love that Tagalys listens to customer needs and has an innovative + agile team around them which can support addressing those needs and adding improvements to the roadmap."

Rafaelle C.

Blue Bungalow

"Tagalys is the powerful and reliable data-driven solution that we were looking for when it came to search & merchandising for our Shopify Plus store. There is no limit as to how custom you can get with your merchandising, which is exactly what we were after!"

Tiarne Warren

Meshki

"The dedication of Tagalys team is evident from the feature developments. I appreciate their effort in understanding our business needs and feedback. We have saved numerous working hours and achieved great performances."