Derek Zoolander, the character created by Ben Stiller in 2001, enthusiastically waited to be shown his project for an infant school. What a surprising disappointment when a Playmobil sized model was revealed from under the cover. «What’s this? A school for ants? How are the children going to learn how to read inside there?» Putting aside the fact that Zoolander isn’t the brightest lamp on the street, his reaction is actually repeated in many e-commerce users day after day: how is a shop, or a huge shopping centre going to fit into my little mobile phone?
The technological miracle isn’t difficult to understand, but it is complicated to apply correctly. Before the widespread use of mobile devices, many brands thought the iPhone was a scale model: you just had to enter all the information that was already compiled on web catalogues. The result is just worthy of ants. If we try to collect all the data from a website in a version which has less on-screen space, the elements, text and images are going to group together to the point where it is impossible to see them without the use of a magnifying glass. And we already know that all mobiles have a digital zoom… and that it is not very user-friendly.
If we can’t make it smaller for users by using a magic wand, things will have to be taken to them on a much more attractive tray. Ecommerce that is adapted to mobile devices must be a ready and willing gloved butler who shows his master a succession of little silver trays with beautiful items to choose: the printed handkerchief, the croissant or the cologne of the day.
The colonization of screens: What Google says, ecommerce obeys
An e-commerce business badly adapted to the mobile screen will be like a carpet covered in pieces of Lego. The model has turned into pieces and it’s not easy find anything. The leap over to the digital world was so difficult for traditional companies that it gives them headaches to think of new screens and software systems. But this isn’t a whim now; it’s a new reality from year to year. Mobile phones, tablets, laptops, video game consoles, smartwatches… An e-commerce business certainly has to immediately adapt to all potential reference devices, and always think of a future that is not going to give up anything, but add more instead. Imagine that a food ecommerce business will shortly have to adapt itself to the screen of a refrigerator.
But this demand isn’t only due to the user; it’s also due to the Holy Father — Google. Since April 2015, a mobile-friendly algorithm started to favour those websites adapted for visualisation on other platforms, in a way that search engines (that is to say, Google most of all) could identify the most relevant results for mobiles, according to requisites like legible texts without the need to zoom, buttons which are a suitable size, well spaced out and offer user-friendly scrolling. Must any branch of business kneel down at the feet of the most popular search engine on the planet? Yes, whether you like it or not, but not because it’s Google; it’s because the use of mobile phones in ecommerce is growing at the pace of an eight year old child who’s keen on factory-baked goods.
The general data remains on moderate levels, and states between 15% and 50% of ecommerce traffic on mobile devices. In a specific way, recent studies place more important bets on the card table like not considering mobile adaptation or Google’s algorithm if 80% of young people use a smartphone every day, and if both men and women spend a monthly average of 30 hours using apps compared to 3 to 4 hours using websites.
Maybe this data doesn’t exclusively refer to the use of e-commerce websites, but considering that an online shop also receives traffic from social networks like Facebook or YouTube, and even from private chats via shared links: purchases “bounce” from states or videos about purchases (the famous ‘hauls’), in which people show what they have bought or desire to buy, while their friends or followers ask where they can buy the same product.
While the use of vertical screens increases, smartphones reach more social sectors and places in the world, thanks to devices which are becoming more and more cheaper and affordable. We think that an ecommerce web or app must work just as well on an iPhone, as on a phone of inferior quality, and until that quality in the shopping experience isn’t the same across the board, the results will not be as wonderful as the number of users.
As of October 2016, 62% of smartphone users made some kind of purchase in the last 6 months, but according to other studies, e-commerce purchases were split into 67% on computers and 33% on mobile devices (24% on smartphones and 9% on tablets), in a way that the data shows how the mobile conversion is still much lower than it is for computers.
Packing suitcases: Moving websites to mobile devices
To study the annual statistics will provide clues to adapt e-commerce to a situation which is still wearing nappies, even though it’s a super baby that has learned to walk by itself. We know that the channels with greater conversion are Macintosh, Chrome and Windows, and that AOL, Bing and Yahoo are the search engines, but in any case, what is fundamental is that the interaction is different between the customer and the web or mobile version, whichever the channel may be.
The majority of these purchases or searches are carried out on the go: a cinema ticket; to check the shopping list in a supermarket; to check if a product in a physical shop is in stock and available on the online version… They are quick searches that require being resolved at a glance, and without obliging users to stop in the street, shopping centre aisle, or the metro, and the only thing that matches speed for the human eye is clarity and intuition.
Aren’t these the standards already applied to e-commerce websites? Of course they are, but on another scale. Moved by the laziness or ignorance related to the methods and their influence in the results, some ecommerce businesses, particularly those established before digital adaptation, were capable of taking all their web properties to the mobile version or badly designed apps (and continue to do so), and faced with the hard work, two options emerge:
- A response site: A mobile version of the pre-existing website using the same HTML and CSS, and is able to adapt the content to screens of any size. The same elements, texts and images will appear everywhere and follow the original structure of the website.
- A dynamic serving site: For this version, different HTML and CSS codes are used on the same URL, or a completely different version appears only on mobile devices with its own domain.
Each ecommerce business should estimate if a website adaptation to mobile devices would be suffice (the bare essentials), or if it also wants to complement the service with a downloadable app. This option is advisable having seen the data on public usage (90% of the time accounts for mobile use in apps, whereas websites make up 10%), but it will require greater investment in computing, design and maintenance resources, as there is a strong influence of app reviews, and those brands offering a mobile service which is poor, confusing, and full of browsing and purchasing process errors are immediately exposed, like what happened to the Telepizza app.
In general, and even adapted to a mobile version, e-commerce websites offer the possibility of going back to the website version, but something is going really badly if users prefer the whole version with miniscule texts and resort to constant zooming. Not being well adapted leads to links being shared badly, they don’t open, and the visit, as well as the potential purchase is abandoned. To do a quick test on the quality of a website’s mobile version, you can use Google Webmaster Tools, or include a link to the website in the analysis box offered by Google.
A guide for designing a mobile version in ecommerce
The effectiveness of an online e-commerce business results in the largest volume of sales by offering more sales channels which are more adapted to the new demands of the population’s use and susceptible to being studied, in order to improve the SEO of the business, thanks to the behavioural data of customers on the mobile website.
It is essential to have tools available that guarantee the correct transfer of product information between all ecommerce channels, to the point that they allow you to choose which products and information will be shared in the website version, or the mobile version with elements like images adjusted to each platform. A PIM system such as Sales Layer’s, lets you organise catalogue information and product descriptions to achieve these objectives and avoid the dreaded gaps and omissions between the versions of the same ecommerce business.
These are the elements that must appear in the patchwork of all good e-commerce businesses with a mobile version:
The website must open quickly. According to studies, a customer will leave the shop if it takes more than 3 seconds to load, and some warn that this occurs even after 1 second! As a matter of course, it is important that the web or app instantly recognises the geographical area of the user’s mobile and adapts the content to their language, as opposed to those websites on which you have to choose the country or language by scrolling down a tiny and endless list.
Reduction of elements
Unlike what the adaptation system does directly from a website to a mobile, the “less is more” rule is applied to interact in this kind of purchase. The screen is so much smaller and the customer usually has quicker and direct intentions, hence it is advisable to have a smaller quantity of text, images, categories and decoration which are visually distracting. The objective has to appear at first sight, and in a way that a search or a purchase is completed by a couple of mouse clicks.
Although it is always good to specialise in many categories and to complete them, when it comes to mobile phones, the drop-down menus with endless subcategories can mislead a search. It is preferable for the catalogue to be arranged according to the most basic and the most used categories (so it’s very useful to study the results of your customer visits), and it’s better to use a design that drops down vertically without much need to scroll. To facilitate these specific searches, it is also useful to offer users some filters for them to classify their results, either by choosing categories in predefined lists (by size, gender, fabric or colour for garments, for example), or by typing their own keywords.
It doesn’t matter how much money was spent on the main website for the e-commerce business, or how nice the photographs and the decoration of the catalogue are. In the mobile version, users can’t focus on details: they don’t usually have the time or visual capacity. This is why the first impression must provide neatness and clarity (more than 90% of the persuasion is produced by sight).
The most common formula is to use plain and white backgrounds, place a banner at the top with the brand’s logo, followed by the symbols which are searched most and easy to find: the search (a magnifying glass with or without a box), the menu (some bars) and the shopping basket (where visitors can check their saved products or go directly to make the payment).
All the buttons on the website must appear large, separately and easy to click on. Very useful buttons are those which stand out to add a product to the basket or to add to the favourites list, as much from the general grid of a category or search, as in the particular description of each product. Also watch the colour palette that will brand the website, as 80% of users have stated that they have been influenced by colours to make purchases. Colours can win over impulse buyers (red and orange), reflexive buyers (green and blue), or for those who are still reluctant to buy online (white, pink and pastel colours). Different colour schemes offer better results, according to your main target and type of product.
The right amount of thumb exercise. The customer’s movements onscreen have to be made easy, and not just because several medical studies are warning us of injuries linked to the use of mobile phones. Those elements meant to be seen prominently which are going to be searched more, such as photos of product descriptions on which a double click can enlarge them, must appear in the left central area and avoid corners. This takes into account that the majority of the population is right-handed, and that the left-handed minority can adapt themselves without any problem to the main scheme (waiting for the first ecommerce to offer a double version for right and left-handed visitors).
A pop-up ends up occupying the whole phone screen if we want it to be visible. What is easily moved aside on a computer turns out to be annoying and invasive on a mobile. It is better to highlight offers or advantages in the landing page banner than include windows with pop-up advertisements in which they are sometimes difficult to identify and to press the X to close the window. Given that studies reveal how the majority of young users turn to e-commerce websites and mobile apps to compare prices and look for discounts, it is more advisable to include promotions or coupons in another higher banner, under the brand’s name.
Practically instant purchasing
Keeping the same safety guarantees for users (showing appropriate and clearly visible stamps as a reminder), a fast check-out process must be offered based on few boxes for entering data and by means of an organised, clean and instinctive design, either in one or various pages (with a progress bar in that case). A contact link must always appear during this process, as well as the rest of the website, in order to guarantee the customer a fast connection with the service in the case of the slightest doubt or incidence arising.
It is now common practice to offer two alternatives to the customer: to register for the purchase, or to make the purchase as a guest. The advantages of the first one can be highlighted (to have the data saved and available for future purchases, which will be easier, and to be able to save products for buying later or on wishlists), but registering on the website must not be forced under any circumstance (like apps that force this step, even just to look through the catalogue, obtain very low ratings, like the Sephora app).
Although it’s nothing new now to find a smartphone in a pocket, not all brands and shops have noticed something so obvious. McDonalds or IKEA are extremely popular businesses that fail in the mobile ecommerce world. Badly designed interactive catalogues, bugs and constant browsing errors, apps that close unexpectedly, copied and pasted templates of an illegible website which is not very easy going on the eyes, and a multitude of versions of the same app according to geographical region.
If there’s a moral to this story, it’s that customers should never be treated as laborious ants. We must give them everything easily and in style, so that they spend the best time possible on our e-commerce site. A happy customer is the best strategy against your competition. Are you going to adapt your ecommerce to the mobile world, or improve the designs that you have developed until now? The change is just a few clicks away.