Mobile: Frontpage structure for increasing your conversion

Criteo reviewed the proportion of mobile commerce compared to the North American e-commerce market and found out that — in Q3 2017 — mobile commerce has reached a total of 36.7% of all e-eommerce sales. This means an increase of 9% compared to last year.

In Europe there was an incredible increase of +29%.

That’s why it’s more important than ever to focus on a good user experience for mobile commerce products.

This article will give you a brief overview of the currently best practices designing a front page for retail on your mobile device, which will increase your conversion and provide the user with a good experience.

1. Navigation

Usually there are two things people want to do on a mobile webshop:

1. They want to browse through products
2. They want to go to a specific product they are considering

Therefore is navigation key!

Your users not only want to have control over the site they are visiting, they want to understand it — whatever helps them getting to their goals.

a) Category vs. Banner

When users land on a new web page, they behave like animals foraging for food in the wild.

A research done by the Baymard Institute concluded, that users rely heavily on the frontpage content to determine the type of site and whether that information is going to be relevant to their goal.

Important for the user at this stage is to establish an accurate overview of the breadth of the site’s product catalog — especially if you have a lot to offer.

Users who don’t have any association to a site’s brand will base their perception on the range of the products based on the homepage content and main navigation categories.

Listing e.g. all the top-level categories on top gives the users a good overview, what site they’ve landed on. It also enables a good navigation experience. Keep in mind, that it takes 50 miliseconds for your site to make a first impression and 0.10 seconds for users to take action on it or make them leave.

Below is a heatmap example taken from the cosmetic retail chain VITA:

These heatmaps visualize the interactions with the different site elements. Banners don’t catch a lot of attention compared to the category overview.

This doesn’t mean that banners are completely useless. They surely attract attention, when used well-aimed. Read this article if you wanna boost your banner performance.

Here is another good example from the Norwegian retail chain MegaFlis:

This flash sale banner is used in combination with a category overview.

b) Search

People who perform a search convert better!

Most likely because they already know what they want to buy.

The numbers are clear. Higher conversions for visits with site search.

Searchers might convert better, though there are not so many who are using search, e.g. people who just want to browse. In this example it was just 5.38%. Nevertheless should we think in this case how we could increase this 5.38%.

There are some good practices to increase the user experience for searchers:

1. The search should be big enough to catch the eye. Typically users are scanning for ‘the box, where they can type in’.
2. Product images in the site search window boost conversions.
3. Consider allowing users to ‘search within’ their current category. The Baymard Institute found out, that more than 50% of the participants tried to search within the category.
4. Optimize the search function with e.g. auto-complete. Avoid the boring ‘no results found’. Do search queries find things, even though they have typos?

c) Menu

1. The main navigation should display product categories
2. If you have more than 4 top-level navigation links use hidden navigation in form of a hamburger.
3. Use accordions. It solves space problems — when displaying to many sub-categories in the navigation. Also do the users get a quick overview about the sites content.
4. Use sticky headers — especially for long pages. A study done by the Smashing Magazine found that a sticky navigation bar allowed the users to find what they were looking for 22% faster. It is crucial for mobile users to get immediate results and to have quick access to key data, therefore is 22% important for a faster navigation. Furthermore did 100% of the users prefer sticky menus — without knowing why — most likely because they had a good feeling of control and never lost the orientation.

2. Products

Now it is time to place your hottest products underneath. It catches the users attention and provides the user with some good deals.

Example of the PolarCore 2.0 product section.

Read this article about how to improve the UX and conversions regarding product recommendation: https://conversionxl.com/blog/product-recommendations/

3. Footer

Show the USPs (Unique Selling Points) for the store, presented with both an icon and a very brief text/label.

Add a final call-to-action button, typically for a newsletter sign-up.

Use icons for social media links.

Include necessary but uninteresting information, such as contact information, help, copyright notices, payment/security logos etc.

Example of the PolarCore 2.0 footer.

Summery

Keep it nice and simple. Leave a good first impression, by giving them an overview about what site they’ve landed on. Make it easy for the users to navigate and search for what they want.

These are the key elements you should focus on.

Are those covered, then you can continue thinking about all the fancy sales, services, products you have to offer.

Last but not least: assume nothing — test everything.

Psst, using Magento e-commerce? Check out the PolarCore design theme/framework, the UX optimized theme for Magento.