To state the obvious: mobile is becoming increasingly important. Duh! Take a look at your Google Analytics data and compare that with the same period last year. Chances are, the share of mobile traffic has grown sharply in 1 year’s time – at the expense of desktop. (Tablets stay more or less stable on many sites.) But has the share of mobile conversions increased proportionally? Probably not. And that means you urgently need to work on a mobile version of your ecommerce site that converts well.
CROSS-DEVICE IS NO EXCUSE
For example, if your mobile visitors last year were good for 30% of all visits, that may have risen now to 40% or more. That’s a huge leap forward. But the chance is great that the 40% of visitors do not account for 40% of your transactions. Rather, a good deal less.
Of course, cross-device behaviour is a thing. Your customer first searches on mobile, but ultimately makes a purchase on desktop. And that does distort your data a bit. Because what matters is not that a mobile visitor does not buy on his mobile, but that he does not buy at all. Unfortunately, there is no final solution to track this correctly, e.g. in Google Analytics – unless your visitor is logged in on your site on all the devices that he uses. But that is not very likely for most websites.
But that should not be an excuse to get off easy with conversion killers like, ‘Yes, but a low conversion rate on mobile is not bad, because many people do not want to buy on mobile; they buy later on desktop’.
Recent research has shown that in the US, 52% of all ecommerce visits are currently on mobile. Two years ago, that was just 34%. Then, mobile was also responsible for only 16% of all purchases. That has now grown to 30%. So, while mobile visits have risen by about 53%, mobile transactions have risen by 87.5%. This means that mobile visitors are increasingly buying on mobile. And that’s a trend you really can’t ignore.
MOBILE FIRST? YES, BUT…
You will undoubtedly have heard of a ‘mobile first’ approach. In theory, that’s a good counterweight for the traditional ‘desktop first’ approach.
But do not get tripped up by this term. It does not mean that you develop your site for mobile and then simply forward it to desktop. And then on desktop add some snazz with, for example, a hamburger icon instead of a menu. Like on this site:
The problem with this example is that many visitors do not understand the hamburger icon on mobile. And on desktop, certainly not. #fail
On desktop, visitors are accustomed to a menu, and they consciously or unconsciously search for one. Give it to them. This is how you improve their experience on your site.
I think this is a completely wrong interpretation of ‘mobile first’. What it really means (or should mean): Create a customised user experience for each device category separately.
IT IS NOT ABOUT THE SCREEN BUT ABOUT THE EXPERIENCE
And that brings us to the core of the story: there is a lot of talk about optimising for certain screens. But in reality, it is not about that. It is about optimising for a particular behaviour.
A mobile visitor has different behaviour and expectations than a desktop visitor.
A mobile visitor is much more task-oriented than a desktop visitor. He or she is looking for a specific product, your phone number, your store locations, etc. It’s essential that you make these tasks easy on mobile.
For illustration: I often see the responsive version of an ecommerce site in which the filters and sorting options are omitted on a category page. This is usually a decision to ‘save space’. Because otherwise it is difficult to fit everything on the screen.
But that’s a totally wrong interpretation of what it’s all about. A mobile visitor is task-oriented, so you have to make it easier to find the right product as quickly as possible. By omitting the filters and sorting options, you might save space, but you make the task harder for your mobile visitor instead of easier. And you thus significantly increase the chances that the visitor bounces.
So before you adjust everything on your site, it’s essential to understand what tasks your visitors want to complete on mobile. Making those tasks easy must be central in your mobile approach.
Many airline companies, for example, already understand this. On an airline’s mobile site, some of the most important tasks that visitors want to accomplish are:
- Check-in online
- View the status of the booked flight
- Review your booking
- Find information and prices for a flight
If you look at Lufthansa’s mobile site, you’ll see that some of those tasks are placed prominently at the top of the home page (‘Check-in’, ‘Flight status’, etc.), and the booking module is immediately below. In other words, all the most important tasks that a mobile visitor wants to complete are immediately accessible.
By comparison, on desktop Lufthansa’s focus is much more on searching for a flight. Checking in online or checking your flight status is not immediately visible on the desktop homepage.
21 PRACTICAL TIPS FOR MOBILE
As always, you are best off starting with thorough conversion research. Research is critical to understanding WHERE things go wrong and WHY. And if you understand that, you’re guaranteed to significantly boost your conversions.
Apart from such research, I can give you some tips for improving your mobile site:
- First things first: create a mobile version. That sounds ridiculous as a tip, but websites sometimes do not have a mobile version. Responsive, adaptive or a separate mobile site – that’s a separate discussion. But one thing is certain, if you do not have one of the 3, then you have a big problem 😉
- Even before you start changing things based on this list make sure to check your site speed. How fast is your site on mobile? Site speed is extremely important, and certainly on mobile. Visitors are often ‘on the go’ and do not have much patience. Remember, they are very task-oriented and want to complete this task as quickly as possible. Do all pages load in under 3 seconds? Then it’s pretty good, even if you should be aiming for 1 second. Slower than 3 seconds? Then you definitely have work to do. Slower than 7 seconds? Drop everything and make this your absolute top priority. Research has shown that for each second that your site loads slower, you lose on average 7% of your conversions.
- Show ‘load indicators’ for slow pages. Of course, it’s better to make your pages super-fast. But if you give a clear indication that the page (or e.g. the search results) are loading, visitors will wait a little longer. If your pages load slowly and you do not show any ‘load indicators’, they will leave a lot faster.
- Make sure your search function works well. Because mobile visitors are very task-oriented and navigation by categories on mobile is usually less effective than on desktop, they are more likely to use the search function. Make sure it works well and always show the most relevant results.
- Do not delete any essential information and/or functionalities. As in the example that I mentioned earlier, filtering and sorting options on a category page are essential for mobile visitors. Do not throw them out to ‘save space’.
- Make use of ‘click to call’. They are holding a phone. Make it easy for them to call you by adding click to call. When they contact you, there is usually more of a chance that they will eventually convert.
- Note the space between different clickable elements. If these elements are close to each other, more mistakes will be made. Visitors who want to tap on one element may accidentally tap the wrong element.
- Look out for ‘layout bugs’. If you have a responsive site and certain items, for example, on mobile end up on top of each other, that does not look professional, and your visitors will have less confidence in you and your shop, which of course can affect your conversions negatively.
- Make it possible to search on a category page within that category. Again, this is about the task-oriented mindset of the mobile visitor. When they are on a category page, they want to find the right product quickly and easily. As mentioned earlier, sorting and filtering options help with this. But searching within a particular category also helps. Research has shown that many mobile visitors on a category page are confused, they are not sure what the possibilities are – in other words, whether the search feature they see on the category page will scan the site or only this category. While it is usually the 2nd that they are looking for, help text like ‘search in this category’ can instantly make this clear.
- Category page: Do not make products larger than half the screen size in portrait mode. The reason for this is simple, if you make them larger, a user loses the overview and the feeling that there are multiple products to see. They therefore sometimes miss products that could be a better match for what they want. But having said this, make the product photos as big as possible.
- Category page: Use a ‘load more’ button instead of infinite scrolling or pagination. For mobile users, pagination is often a stopper. They will not continue to find more of your products. But then again, infinite scrolling makes your footer links unreachable. And mobile users are often looking for that information because it includes critical information, like your contact information. A ‘load more’ button is therefore the best solution.
- Category page: Do not use dropdowns in the filters. On mobile, dropdowns are not user-friendly, because users do not easily get an overview of all options within that filter.
- Product page: Show the product information that is also featured on the category page prominently on the product page. On the category page, you usually place summarised product information about each item. When a visitor clicks on such a product, then that summary product info must be immediately visible on the product page. That reassures the user that he clicked on the right product. Imagine clicking on a category page with car tires to one of the product pages. Visually, there is hardly any difference between the products, so you should be immediately reassured that you have come to the right product page. You do that by immediately repeating the features you already showed on the category page on the product page.
- Product page: Add accessories and compatible products. Because finding a product on mobile often goes less smoothly than on desktop, many mobile visitors are not really inclined to search for accessories and compatible products themselves. Show them on the product page, so they can easily click and not have to search on their own. Of course, the suggested products must be relevant.
- Product page: Add 2 ‘add to cart’ buttons. One in the normal place and one that is “sticky”, meaning it scrolls along the page as the user scrolls. The button will then be visible at all times, regardless of how far the visitor has scrolled down the page.
- Product page: Scale up the product photos if you go from portrait to landscape mode. Some visitors will turn their smartphone in the hope of getting a better view of the product. They expect to see a larger picture that way. Show it to them.
- Shopping cart: Add an email function. Some visitors prefer to buy on desktop. If you give them the option of emailing their shopping cart to themselves, they can easily complete their purchase on desktop.
- Shopping cart: An image and short description are equally important on mobile as on desktop. Yes, it takes up space. But omitting this is not an option. The visitor must be 100% certain that he is ordering the right product, and the image and short description are critical for this.
- Shopping cart: Test a sticky checkout button (like on the product page). Certainly if your visitors usually order many different products at once, this may be useful. They then have a long list of products to scroll through. By adding a sticky button, they can skip the scrolling at any time and go on to the next step.
- Checkout: Use mobile input types. That is a small piece of code that determines which keyboard will be visible on the smartphone. For example, if you request a phone number, your customer will not want to see the regular keyboard, but the keyboard for phone numbers. This is a very easy step that eliminates a lot of frustration for your customer. Add <input type = ‘tel’> in the code. Done. It’s that simple. In addition to ‘telephone’, there are also other input types, such as email, number, password, date, date & time, etc.
- Checkout: Do not simply delete the input if someone clicks on a field again. Unfortunately, it happens often: you fill in your street, you see that you forgot a letter, tap in the field again to add that one letter, but because you tapped in the field, the entire street name disappears and you have to start over. This is very frustrating, certainly on mobile, where typing is already a good bit more frustrating than on desktop.
You can of course do a good deal more to increase conversions on your mobile website, but this list is already a great start. Feel free to contact us if you would like to discuss ideas for the optimisation of your (mobile) ecommerce site.