12/12/2018 | Design & UX | 10m
In recent years, website traffic from mobiles has overtaken traffic from desktops or tablet devices. In fact, during Black Friday 2017, more than a third of online sales were made using a mobile phone. This highlights the importance of making sure your e-commerce website is mobile friendly, as well as intuitive, in order to efficiently capture sales.
Search is one of the most important features to prioritise within the design of your website for mobile devices. A mobile experience is typically very different to a desktop experience, as on a mobile customers are looking for products with more speed. Having search visible at all times is therefore essential, and ultimately leads to customers easily finding and purchasing what they came for.
Adding auto suggestions to your search can make it more efficient still, as it reduces the cognitive load of the user. This technique also provides an opportunity to cross sell other suitable products.
Building on this, having the ability to filter and sort products helps the user to refine their search, limiting the number of products shown to them and organising them. For sites with a high volume of products this is a must-have feature, as users are impatient and keen to find the specific products they have in mind as quickly as possible.
When viewing an e-commerce site on mobile it’s important that the information is presented and ordered correctly. As a user, the key information that you need to see on a product page includes: the product name, an image, the price, a description, and a button to add it to your cart.
This content hierarchy is the same throughout almost all e-commerce sites, as we’ve discussed previously in our post “Why all e-commerce sites look the same - the importance of affordance in web design”. Familiarity within the layout and checkout process makes online shopping as quick and easy as possible for users.
E-commerce websites often need to provide extensive information about a product, to give customers reassurance that their potential purchase is good value and fits their needs.
The easiest way to do this is to show a short description on the initial product page, as it gives just the crucial detail for those who are quick browsing and aids those looking to make a purchase quickly. This is useful for straightforward purchases or repeat purchases.
For more complex purchases however, more detail can be housed under tabs or accordion menus. This gives the user the option to read the longer description only if they want to, which helps prevent a high level of scrolling.
Online shopping is deemed to be a more impulsive style of shopping, as shoppers tend to think about something they’d like to buy, before instantly taking to the internet to find and order it. It is therefore important that product images are of high quality and allow the user to interact with them. Whether that is that through zooming, pinching, or double tapping an image it is a common practice for e-commerce to allow us to inspect a product thoroughly (particularly on clothing sites), to see more intricate details.
Speed is key to making a customer’s progression through your website effortless. Where possible, introducing auto advancing fields will make interacting with forms less labour intensive, as there is no need for tapping between each field. If done well this can make the e-commerce experience quicker and easier.
Google considers site speed of high importance when ordering its search results – so having a fast load speed will help you rank higher. This is particularly important for users on a mobile, as many shoppers will be relying on mobile data. Having a site that takes too long to download can therefore cause users to drop out, losing you potential sales.
As mobiles have a smaller screen real estate, it’s essential that mobile menus have condensed navigation so that they only show the most appropriate categories and sections on the site. This ensures that the navigation is impactful and doesn’t contain overly long menu labels.
Multi-level navigations on mobile cause more work for the user, as they have to stumble through multiple levels. To prevent a loss of traffic, keep the menu simplified and minimal, but ensure it is still clearly labelled so that products are easy to find.
These are just a few of the most crucial functionalities to prioritise when adapting an e-commerce website for mobile use. As you’ve probably noticed with each of these points, speed and ease of use are key, to make online shopping as stress-free and quick as possible in our busy society.