One of the most important pages in any e-commerce, particularly in those with a large catalogue, is the page that displays product lists. These lists usually show products that are related to each other, and the most immediate way of grouping products is by category.
In a previous post on the product page we already talked about the attention, capture, and decision-making processes that guide users in a page towards conversion (sale). The category page is no exception, and should cover these stages. Even though the decision-making stage is not crucial for the category page, the category page plays a key role in the attention stage and a significant role in the capture stage.
E-Commerce: the perfect category page
Attention: a user arrives at the category list from a search engine or from within the website. At this point, the goal of the page is to retain the user in the list, i.e. the user should not decide that you cannot offer what he or she is looking for and leave your website.
Capture: if you have managed to retain the user’s attention, you must guide him or her towards the next step: looking at specific products which he or she might buy.
Decision: making: once the user has displayed a strong interest in one or several products, you must pave the way for the sale.
We will now take a closer look at which parts of the category page help in each stage, and how the category page relates to other pages, such as the product page, the shopping cart page, and the checkout page.
Most often, users landing on the category page come from two main sources: by clicking in an internal link in your website, or from an external search engine (Google). If possible, it is useful to distinguish between these two cases, given that, as we will see, they can lead to slightly different initial conditions. To achieve this goal, you can use behavioural targeting tools, defining rules on the basis of the user’s provenance.
Landing from Google: the customer reaches your store via a Google search. Usually, this search will be related to the category name. Given that the category page will be the customer’s first contact with your store, you should deploy all your weapons to capture his or her attention. To do so, and assuming that you have no prior information on this user, you can offer a selection of products in the category visited. For example, you can display the bestselling products in the category or a selection of deals.
Landing from an internal link: the customer arrives at the link from your website, and the fact that he or she has clicked on a link in your store to reach the category page already displays a certain degree of interest. If fact, the user has probably already visited the store, in which case you can offer a personalised selection of products, always within the category in question. These are products which have been viewed or added to the shopping cart in previous visits, or, if you know that the user has made recurring purchases in your store, the products bought in previous sessions.
It is important to point out that when we talk about “displaying a selection of products” we are not talking about invading the list. Generally speaking, the selection can be displayed before the list, and should not be too long, so that the user doesn’t confuse the selection with the real list.
Once the user has arrived at your category page and has decided not to leave it, it’s crucial to facilitate, as far as possible, the task of finding the products which might be of his or her interest (and which the user might want to buy). In many cases, category pages include many products, which can often run in the hundreds or even thousands. For technical reasons, this list should be “paged”, in such a way that the user can access a limited number of products, and, in order to obtain more, must perform some action (usually, clicking on the link that leads to the following list page, or scrolling down to the last product). You cannot expect users to make such an effort, so the best option is to make users go through a list, allowing them to delimit and order the products:
Filter by subcategory: you may be displaying a more general category than what the user is looking for. For example, in a fashion store, you can display “women’s” products when the user is looking for a “dress”. For this reason, you can use a category tree to make it possible to go to the specific category in a single click.
Filter by attributes: it allows us to discard from the list all the products that don’t meet certain conditions desired by the customer. This is no doubt one of the most powerful filtering tools. In a mobile phone list, for example, you can select filters such as Android, more than 4’’, and a capacity of more than 16GB, thus paring the list down.
Ordering: even after the list has been delimited as much as possible, the product list may continue to be too large. In this case, the customer should be able to choose the attributes which he or she rates more highly, including in this case price as an attribute, and yielding an (ascending or descending) order based on this attribute. This doesn’t decrease the size of the list, but it makes it possible to display the products which might be most interesting for the customer at the top of the list and, more importantly, on the first page.
It should be pointed out that, insofar as possible, it is always advisable (in most cases) to use partial page loading techniques such as AJAX to handle all the changes in the category page resulting from the user’s actions, always providing the user with feedback.
In the usual process by which customers become increasingly interested in your store products, it can be expected that, once those products have been located in the category page, users will want to find out more about them and click to obtain more information in the product page. And this will often be the case, but not always. Maybe the user already knew the product, or the information displayed will be enough. In this case, you can skip a step and make the sale directly. To do so, you must find a balance between the information to be displayed in each product box in the category list: firstly, you will want to display all the product information possible, and secondly you will want to save space so as to display as many products as possible on the screen. The items to be shown will depend to a large extent on the type of store, but, as a general rule, you can display:
Basic information: main photograph, name, and price. The photograph should be large enough to see the product details, but small enough so as not to take up too much space. The name and price should be easy to identify taking a quick glance down the list. In the case of a discounted product, you can display a small stamp and the previous price crossed out. You can also use stamps to indicate key product factors, such as the fact that it is new in the store. If you display products that cannot be bought because, for example, there is no stock, this information should also be given.
Additional information: depending on the type of store, you might want to show the product brand or some of its main features. For example, you can show the size of a television screen.
Purchase button: as we have seen, the purchase can end on the category page. A button to buy or add to the shopping cart is perfect for this.
As regards additional information, you can create a mini product info sheet and display it dynamically in the list. This can be beneficial as you can have some of the advantages of the product page without leaving the category page. However, you should be careful with this technique, because, although it can be very useful, it can significantly decrease traffic towards the category page, where, with more space available, you can deploy more tools to close the sale.