ux-for-better-m-commerce-experience

UX for a better m-Commerce experience

22.02.2019 / / E-Commerce

The owners of online stores, who observe the statistics, already know. Those who don’t do this will find out from this article. More and more often, most of the traffic you notice on the store will come from mobile devices.

In other words, we have been in the mobile business era for some time and our stores should be designed to meet the needs of mobile users first.

Of course, it is impossible to copy one-to-one complex interface from the desktop version, where your workspace is even several times larger than, for example, on the phone, but by following a few rules, you can sufficiently take care of the usefulness of mobile versions.

Today I will talk about these rules, going step by step through the customer journey in the online store.

Why is it so important?

In the middle of 2018 Gemius published the report “E-Commerce w Polsce 2018”. For those who would like to download the report, click here.

The report left us with a clear picture – clients also buy mobile. And not on a small scale at all – 58% of customers use a smartphone for e-shopping. What is more, this trend will continue to deepen, because the biggest part of mobile shopping is held by the younger generation, which, growing up and having more and more money for online shopping, will appear on the statistics.

At the same time, respondents pointed out a number of problems which effectively scare them away from shopping:

  • websites not adapted to mobile devices (67%),
  • uncomfortable forms (59%),
  • too many actions to complete during the purchase (39%),
  • too slow Internet connection (37%),
  • no mobile application (35%),
  • problems with payments (34%).

As you can see, companies investing in the digital channel still have a lot of work ahead of them.

Work that seems unavoidable.

Fortunately, you already know about it, so you have a chance not only to better adapt your store to the expectations of customers but also to gain a significant competitive advantage. Take advantage of our experience in designing UX mock-ups and m-commerce implementations for our customers.

Chapter 0 – Be fast

When I wrote the article, I decided to put this part to the very end. But at the very end, I decided that this was the most important thing, so I shouldn’t put it in a place where most readers wouldn’t get to.

Fortunately, above thought has come and I will say it first: no UX will save your shop if your website loads up for a long time. Sorry.

page load speed

Remember that the page load speed on mobile does not directly affect the size of the resources you need to download. Especially when it comes to a lower range.

In order to do this, it is worth using the tool https://developers.google.com/speed/pagespeed/insights/ with the help of which you can check how much time it takes to effectively load the website on mobile devices.

Although not all remarks are worth taking into account, those about loading time and amount of resources – for sure.

Navigation

Before we even go to the individual pages, it is worthwhile to take a look at the element that:

  • is on each page,
  • is usually overloaded, which makes it difficult to reduce the working area.

Of course, I’m talking about navigation of the page, which consists of the whole mass of elements:

  • the choice of language,
  • choice of currency,
  • direct contact to the shop,
  • search engine,
  • cart,
  • the user’s Pop-up Menu,
  • categories/pages.

A lot. Moreover, if you have at your disposal several hundred pixels of the width of the average screen of a mobile phone.

Compress the menu bar

Although navigation is very important and there are usually many elements in it, unfortunately, there are more important things on the website that you should show off.

Therefore, make sure that the navigation bar does not occupy more than ⅕ space. This will allow you to use the remaining 80% of the page to present something that future customers came for.

compressed menu bar

How to compress the navigation elements to fit in one, maximum two lines?

  1. Use the drop-down menu (also known as a hamburger). This way you will get rid of the entire navigation bar. Users are used to this type of solution;
  2. Apply a similar procedure to the user menu (this time on the other side of the screen), where you will place links that are important from the customer’s point of view (for example, to My Account);
  3. Other elements, such as a phone call or a change of language/currency, can be added to the menu;
  4. The shopping cart and shopping list can be represented by icons in the header. Remember to select images that are clear and understandable for your customers.

Keep the possibility of direct contact

If direct phone contact is important in your industry, keep it in the header. You can use one menu item for this.

Remember that phone users want to do as little as possible, so clicking on a phone icon should automatically start the call.

direct contact on mobile

The same applies to offline shopping. If it is crucial for your business to select a location (e.g. for delivery or a default store), use the geolocation of the user to do so. This is a much quicker solution than the location selection form (which of course has to be in the shop anyway, because not everyone will use the option to track their location).

A solid search engine

There is no doubt that the search engine is one of the key elements on the website.

Therefore, when implementing it, make sure that your solution:

  • is visible on the website (this is better than hiding the search engine under the icon),
  • provides correct search results,
  • suggests phrases to the user,
  • checks the spelling,
  • allows searching by voice.

search enginee on mobile

In short, it is worth investing in a really good search engine, which will be both visually and functionally attractive for users, and also have smart algorithms, which will make it easier to find a product.

Home page

That’s why in the previous part we were looking for a place to use them effectively in further parts.

We will start from the homepage, i.e. the place where customers most often end up after searching for your shop on the Internet.

CTA below the fold

The fold is the point above which everything can be found on the user’s screen.

Of course, every device is different, so it is worth first checking what resolutions are the most popular among the users of your store. Google Analytics and the tab “Audience -> Technology -> Browser & OS -> Screen resolution” will help you.

google analytics screen resolutions

Then you have to subtract some height (because there is also a browser bar, the menu that we designed earlier, etc.) and assume that the remaining space is a key marketing area.

Once you have established what the fold is, you return to the issue of development of the area above on the homepage.

First of all, make sure to place a CTA (call to action) in such an area, which will be understandable for the user. Avoid “More” buttons, rather focus on:

  • “Buy now”,
  • “See Watches”,
  • “Start the configurator,
  • etc.

cta on mobile phone

This will help your user to make decisions regarding further interaction with the store.

Remember about the Value Propositions

The value proposition is, following the definition, an innovation, service or product feature that makes you attractive to your customers.

The most common propositions in online stores are:

  • information about free delivery,
  • the current promotional campaign,
  • discount for a specific action (e.g. creating an account),
  • free returns.

value propositions

There are two rules when it comes to value propositions:

Rule #1 – prepare a value proposition for your customers to show them the profit from shopping in your shop; Rule #2 – place a value proposition above the fold.

Knowing what a value proposition really is, you should not need additional arguments that this type of marketing messages should be clearly displayed on the website.

Don’t forget to sell from the homepage

A home page is like landing page, where, apart from marketing, you should place the most important elements of further navigation for the user:

  • key sales categories,
  • especially promoted products,
  • the so-called “Social proof of rightness”, i.e. opinions about your shop.

mobile commerce home page

Thanks to all these procedures, the whole home page will be the place from which the user will:

  • find out why it is worth buying from you,
  • see what he/she can buy,
  • go to further parts of the shop in a relatively controlled way.

Product presentation

Of course, the home page does not determine whether your shop is valuable in the sense of the product offer.

About it decides your offer.

The two most important things you should pay attention to in this area are:

  • how your customers can find the product that interests them,
  • what they will learn about it.

Let’s go from the general to the detail.

Work on the usability of filtration and sorting

If you have well-configured analytics on your website, you’ll probably notice that sorting and filtration are some of the most commonly used elements of the online shop’s interface.

The left bar (or the top part of the list of products) is usually quite a complex place which cannot be replicated one-to-one in a mobile version.

Help will come with a similar procedure, which we used when compressing the header:

  • Bring filtration to the active button on the page;
  • Do the same with the list of sorting options;
  • Place both buttons above the product list;
  • Clicking on one of the two elements should trigger a menu in which the user will be able to adjust the list of products to their needs.

filter and sort buttons

In this way, you will save space and at the same time both functions.

I will add two more hints to the navigation in the product list:

  1. Inform the user clearly how the product list is sorted and whether filters are used (you can achieve this by using a different status of the corresponding buttons);
  2. Often customers ask me whether to use the infinite scroll mechanism (list of products without pagination). I would recommend not if you have a lot of products or something important in the footer. This way you will make it much harder for your customers to navigate through the store.

Invest in a good product description

This is probably the most common piece of advice I use at work (and also on my blog). The customer will not touch, smell or play with the product in your online store.

The only thing they can do is to read about it.

That’s why the product description should be:

  • First of all – comprehensive,
  • attractive for the customer,
  • adapted to mobile devices.

product description mobile commerce

The last point should draw your attention the most. If in the desktop version you have worked hard on detailed description, you risk that it will be unreadable on your mobile device. Then it is a good solution to have two separate creations, one for smaller screens.

A bit of marketing will not hurt

Do you remember how you displayed the value proposition on the homepage?

It will not harm (or even help) to use the same promotions on the list and product card. Especially if the product itself comes with an added benefit for the customer:

  • free return,
  • free delivery,
  • etc.

It is not only this marketing procedure from the homepage that should also be continued. Your conversion will certainly thank you if you also add an element of social proof on the product card, for example, opinions about the product.

Is that all?

In the end, I will show you the last thing that has a positive influence on purchasing decisions. This is the implementation of the urging element.

urging element in e-commerce

If you’ve booked a hotel in the past, you know what it’s all about. “The promotion lasts only x minutes”, “There are only 2 rooms left” and so on. It turns out that while we all know that such messages must be treated with a pinch of salt, there is indeed a correlation between this type of information and purchases. So why not try it?

Shopping process

The last step, of course, is purchasing what your customers have easily found and added to their shopping baskets, thanks to my article.

What can go wrong?

A lot.

According to the report of polish e-Commerce organization – Izba Gospodarki Elektronicznej, “Porzucony e-koszyk” (Abandon e-cart) from 2018, customers are abandoning shopping carts A LOT. Of course not all of them you can get back (the aim of completing the cart did not have to be purchase at all), but you should definitely avoid mistakes that will cause a real abandonment.

Finishing shopping on a different device

One of the most important functions of the mobile store is completing purchases on a stationary device. I must admit that I am one of the customers who do so. Mainly because it is more comfortable for me to complete the data in the shopping process on the keyboard. In addition, I can immediately log in to the bank and make a transfer. At the end (although I’m probably already in a minority here) – buying on the big screen I have a feeling of a better look at the product I’m buying.

email cart option

In general, a shop that doesn’t allow me to do this risk that before I get home and complete my order again, I order from the competition in the meantime.

How to get this function in the shop?

  1. if the customer is logged in, it’s easy – keep the shopping cart in his account instead of just in the browser session;
  2. If the customer does not have an account, you can use the option of sending the shopping cart to an e-mail address.

Mobile payment

Imagine that the customer will have to complete his/her address data.

Then the payer’s data.

Then he/she will receive instructions on how to make a transfer by e-mail, log in to the bank, paste all the data and confirm it with an SMS.

This will not happen.

That’s why mobile payments were invented. There is a lot to choose from because this segment has recently developed strongly:

  • BLIK,
  • Apple Pay / Google Pay / digital wallets,
  • payment gateways (so-called quick payments).

BLIK, in particular, has recently become popular with consumers (which is not surprising). The absolute minimum is a method that will limit the number of data that your customer will have to complete.

Optimize forms

As we are already filling in the data, I will give you few solid advice on the purchase process itself:

  1. Allow your customers to shop as a guest – let’s face it if someone doesn’t want to open an account, they won’t do it anyway and you’ll lose the customer. However, if you want your customers to open an account, you can offer a small bonus in return.
  2. Allow login via social media – you will increase your chances of creating an account.
  3. Avoid too long forms – first of all, get rid of fields that are not necessary. If the list is still too long, divide the purchase process into steps and add a progress bar.
  4. Don’t force people to repeat themselves – users use self-filling anyway. In the case of passwords, a much better option will be the possibility of viewing the entered text.

checkout options m-commerce

Summary

I am so old that I remember the times when no one was browsing the Internet on the phone, and clicking on a globe button caused a micro heart attack. Today if you just look around on the bus or standing in a traffic jam – everybody is playing with phones and some of them do the shopping.

Not surprisingly, Google Analytics and all reports show a growing number of mobile devices in e-Commerce. Some people only browse and some buy. And you have to satisfy everyone because otherwise, they will go to the competition.

I hope that reading this guide will bring you closer to designing a store that will meet the needs of your customers and will give you the results in the form of a solid conversion. Good luck!