With continuously competitive advancements in mobile phone and tablet technology, the challenges facing the designer of an e-commerce website are ever-changing. While technological progress in this area is popular with the consumer and constantly provides business-owners with new opportunities for reaching customers in ever more varied scenarios and locations, it can certainly provide website designers with some interesting hurdles. In this article we’re going to address some of those hurdles. I'll break down a few of the most important steps to take account of in preparing an e-commerce site for mobile access and offer you some advice based on my experience.
How Consumers Shop
Demand for mobile-accessible e-commerce sites is high but it’s worth noting that the way consumers shop from mobile devices is different from how they might shop from the comfort of their desktop. There is an expectation of being able to access the same sites, but in such a way that is suitably simplified for the smaller screen.
Consumer purchase behaviour on mobile devices differs significantly from that seen with larger, static devices. In a survey published by Adobe, it was highlighted that tablet shoppers are twice as likely to make a purchase as smartphone shoppers, demonstrating the way in which the particular tool influences the activity of the consumer. To find out more about this trend, take a look at this study on tablet shopping (the 2012 Adobe Digital Marketing Insights Study can be downloaded here).
Accessibility is Key
This said, it’s important to maintain a balance in accessibility; while tablet access is obviously lucrative and wealthier mobile users (in turn, wealthier consumers) might lean towards the iPhone, the site should be designed to work equally well on all mobile platforms. While this behavioural difference is likely to remain between larger and smaller device users, website designers can address the issue where possible by taking into account other issues that affect differences in behaviour and ultimately making it as easy as possible for consumers to make purchases via the mobile site.
1. Prioritise the Content
Whether we're talking about a responsive website, or a specific mobile solution, it’s vital to make sure that the most important features are carried over and the content of the mobile site is prioritised for ease of use. These features should include:
A search bar accessible on every page
Link to basket and account access
Easy access to each of the categories or brands
Simplified footer
Full-width images, clearly displayed content and calls to actions
‘Press to call’ and ‘press to email’ buttons
An excellent example of a mobile e-commerce site is the Toys R Us website, as is ASOS; both are particularly clear to navigate and logically laid out.
If you find a site particularly pleasing to use on a mobile device, think about the reasons why and what elements make that site mobile-friendly – good sites frequently have a lot in common.
Deciding which elements are relevant to both desktop and mobile alike is a vital part of the process. The trick is in prioritising; order your links logically and ensure that the features work just as well for mobile viewers as desktop viewers. The most important elements for an e-commerce site are:
product images
price
‘add to basket’ buttons
So it follows that these should always be at the top of the screen. Less important are the social share and related product links, so while the site should of course encourage the latter, maintaining focus on the product is key.
Using anchor points within a page is one of the ways of managing the customer’s navigation; having a small selection of links below the ‘add to basket’ button (such as ‘description’, ‘delivery info’, ‘related products’) which will, when pressed, automatically slide to the relevant part of the screen, makes it easy and efficient for users to find out about the product prior to purchase. Having a ‘back to top’ button consistently present is a must.
2. Select the Right Framework
I highly recommend building e-commerce websites using the Twitter Bootstrap framework. It’s simple, easy to use and facilitates scaling between larger and smaller screens without hiccups. This comes with HTML, CSS and JS for numerous uses, providing various interface elements including button groups, button dropdowns, thumbnails, alerts, progress bars and lots more. They also offer some good advice on fitting it all together, as well as some suggested templates and encouragement to ‘iterate on [the] examples’. This helps you to make your site unique, but with the benefit of the initial guidance the framework provides.
Performance
Using a framework such as this also helps with another important aspect of e-commerce for mobile: performance optimisation. Tools such as Twitter Bootstrap can help with using CSS instead of images wherever possible, which assists performance optimisation. If a gradient is needed, use CSS rather than an image slice. Any images can be optimised by ensuring that the file size is as small as possible without compromising quality unnecessarily. Javascript and CSS files should be minified and, most importantly, ensure that unwanted Javascript files do not get called in when loaded on a mobile device. For instance, if there is a carousel on the home page and a ‘click to zoom’ Javascript plugin on the product pages, make sure these are not loaded when the site is accessed from a mobile device. All of these checks help the site to perform as efficiently as possible for mobile users.
3. Socialise Your Products
Owing to the ways in which we use our mobiles for social networking, it is likely that customers viewing a site from their mobiles will already be signed in to their Twitter and Facebook accounts. It is important that your e-commerce site is designed to make sharing items with friends and followers through these tools as quick and easy as possible – after all, it’s free advertising, so whatever can be done to encourage it can only be good for business!
Again, the nature of mobile browsing habits means that consumers are likely to be more limited on time than when sitting at a computer and are much less likely to embark on a complicated process (this is relevant to all aspects of the mobile e-commerce site, not simply social networking). As a result, it’s in our favour to ensure that whatever is on offer through an e-commerce site can be executed swiftly and smoothly from a mobile device.
Social networking links are just as important as any other element – after all, they can often directly translate into more website traffic and more e-commerce sales. Links that can be easily copied, Facebook ‘like’ buttons and Twitter ‘follow’ buttons should all be accessible and uncomplicated. In the same way as the site has to be simplified for mobile, the mobile user’s expectations are also simplified; nobody wants to fiddle around with endless multiple screens on a mobile phone – see below for our recommended checkout structure for an example of what we mean. If you think about the kinds of situations in which mobile internet access most frequently takes place – commuting, waiting for a friend, waiting for a train – it’s important to take note of the mindset that accompanies those activities. The mobile consumer is naturally more restless than the static shopper. Customers will often abandon a mobile site altogether if faced with a remotely frustrating experience. Everything about mobile shopping is taken back to the basic point that, if it’s complicated to do, then it’s highly likely the consumer won’t do it. Take a look here at the Nielsen Social Media Report 2012 for some really useful info on consumer behaviour through social networking.
4. Structure (Carefully) the Checkout Process
As the checkout process calls for numerous text fields, this can be one of the hardest parts of an e-commerce site to get right. The process needs to be well-structured and easy to follow on a mobile device. I'd advise designing the shopping cart in sections as follows:
List of products with easy + and – buttons to manage quantities
A window for coupon codes
Clear delivery costs
Total costs (once delivery is selected)
Large and clear ‘checkout’ button
Easy to find ‘continue shopping’ button – it’s important to allow the customer to easily go back to products from part-way through the checkout process
In designing the checkout process, an accordion structure is a great approach. This gives the user a clear view of the process and keeps all of the relevant information on one screen. Again, the Toys R Us and ASOS websites serve as good examples of shopping carts that are easy to use on mobile devices.
Recommendations on eCommerce Solutions
Where I work, we develop all of our e-commerce projects using our own system which we built ourselves in order to make it as quick, reliable and flexible as possible. If you are a web developer and have the time we’d highly recommend investing that time in developing a system of your own, as it allows you to tailor it to your precise needs. However, don't underestimate how complex and involved this can be! For individuals it often doesn't make sense from a ROI perspective, and can lead to further complications when development and support needs to continue. If you are instead in search of an ‘off-the-shelf’ solution then, requirements depending, we recommend Magento or Shopify. Woocommerce is also rapidly gaining popularity owing to its familiar integration with the Wordpress platform.
Magento is an open-source platform which can be downloaded and customised. The drawback of this particular option is that it is large and can be slow, so if you are using this platform, the above points on performance optimisation will be particularly relevant.
Shopify is a hosted solution which is quick and easy to use. New plugins and updates are constantly being released and, as a result, it is easy to find plugins that will help to speed up your e-commerce site for mobile devices. Take a look at the recent series Learn How to Build Themes for Shopify to learn more.
Conclusion
It’s worth ‘shopping around’ a bit yourself; visit different e-commerce sites from a mobile device and take note of those which are good and, importantly, which are bad. Sites which look good from a desktop screen don’t always translate well to mobile devices. Take note of the bad things as much as the things you find useful, to help avoid making the same mistakes.
Remember; keep it simple. The clearer the steps and the more transparent the buying process, the better. Mobile consumers expect an uncomplicated and fast-response experience; shopping from a mobile is inherently a state of mind as much as it is a choice of device. Above all, make it easy for your customers to spend their money with you, rather than with someone else whose site just happens to be better structured.