Following the basic guidelines recently published by Google on the optimization of mobile usability in Ecommerce agencies, we present and detail a series of improvements for the product listings of retail websites. These improvements are aimed at offering a more advanced user experience on mobile devices and therefore to promote conversion, making the purchase process as easy as possible.

The product card is the last phase of the customer's trip before making the purchase and getting a user to reach this point is a difficult path. Therefore, once you are here, we must work to the maximum to focus all your attention in concluding the conversion and facilitate this decision as much as possible.

Although in a previous article we talked about the optimization of product pages in a desktop device, today we will address this issue from the mobile point of view.

Items that should appear on the product page

In a sticky menu

The sticky menu is a header that appears at all times at the top of the screen, although the user scrolls down, which will contain essential elements such as the link to display the hamburger menu, the internal search button, the logo and the link to the cart.

In the above the fold

Above the fold is the default area that the user sees on their device when the page is downloaded. In an ideal situation, this area should contain:

• The Breadcrumbs
• The product images
• A discrete button to add to the wishlist
• The name of the product
• A short description
• The valuation in stars
• The price
• Availability if there is no stock
• The buy button (can be made floating so it does not disappear)

In the below the fold (lower part of the page that cannot be seen without scrolling) other elements such as sizes, colors, availability according to characteristics, long description, information about shipments and returns and related products or items will be placed. recently seen

Include all the information about the product in your file

We will try to offer the client all the information that may interest him in a concise and well-structured way. We can modify the way of presenting the information with respect to the way of doing it in desktop, but we will never eliminate any important data. In the case of an article with different sizes, many online stores have a grid in which it is easy to find the sizes that are available.

As we see in the screenshot above, the user must interact by selecting the desired color and later its size. The rest of the page consists of interesting information for the client, but without hindering the purchase, since the texts are under accordions to which we can click to display the content, but we will not see if we do not. In terms of usability, this is very positive since we take the user towards the purchase in the most comfortable way and in terms of SEO, this fact does not have a negative impact.

Additionally, we have two links. One of them leads us to an application that helps us find our perfect size in the Clarks brand from the size data in other popular brands. This information remains on the card until we complete the purchase. The other link is a size guide based on the measurements of our feet in centimeters.

Relevant characteristics of a product according to the type

In the case of a shoe, we can be satisfied with knowing the material with which it was made, the color and the size, however, in other types of products, we will give preference to other characteristics that influence more in the purchase decision of the client. For example, if we are going to buy an electric guitar, it will make more sense to talk about the length of the neck, the material of the body or the style of tuning pegs.

Include information on deliveries and returns

To avoid the slightest doubt that may appear at the time of adding the product to the cart, we must expose at a very short distance from our area of action the information related to the costs and delivery times, returns and other data that may promote the purchase decision

If there is no stock, show it clearly

If there are no stocks of the item in question, this circumstance should be displayed in a prominent position and as soon as possible. In the following example, the "exhausted product" message is visible, with a size and in capital letters, however, we could improve it by placing the message in a superior position and highlighting it with a more evident shading or color.

The "Sold online" notice occupies minimum space and is located in a low position. In short, just the opposite of what we should do. Within the list of products in that category, it will be interesting to apply for an order so that products out of stock appear at the end.

Zoom images

We are all visual consumers and we inevitably get carried away by the sight when purchasing a product. Since online commerce has the handicap of not making direct contact between the customer and the product itself possible, the image will be the first place to go.

A well-lit photograph, with the product in a suitable position, with true-to-life tones and in which the object occupies the prominent place, will count as a point in favor. If in addition to this, we add the ability to view the image larger and in high resolution to facilitate that users can approach the product, it can make a more detailed visual review.

If we are going to buy a high-brand gold bracelet, we will want to make sure that all the nuances are perfect, that there is no fault and even that the name of the brand appears on the bracelet to give it more prestige.

In the previous capture, we easily see the three buttons under the image, indicating that there are three photographs that can be accessed by clicking on them.

Wishlist or follow-up

The wish list is a feature that allows users to create a list of items that they have liked to track them, being able to receive notifications by email about stock availability, price drops or notice of latest units.