Technical

Mobile ecommerce: optimise your product pages for mobile

by on 31st May 2016

Your mobile product pages are probably the least explored quick win opportunity your marketing team could exploit. To benefit fully; we need to understand the important differences between mobile and desktop. Often however, we see retailers lumping mobile together with desktop; a toxic decision when it comes to conversion and organic search performance.

Smarter retailers consider the two devices as entirely separate channels.

The priorities set in this research study from Bizrate Insights are clear. Mobile UX stands as the largest problem online shoppers have with mobile shopping. Page load performance (25%) and having to use the desktop version to access the desired content (21%) are the next biggest pain point for the mobile shopper.

The level of toxicity a poor experience presents is astounding. If the experience is poor; you’ve lost a significant portion of potential revenue.

“30 per cent of mobile shoppers abandon a transaction if the experience isn’t optimised for mobile.”

Mporium.com via Mobify

And that’s if they’ve found you in the first place. Thanks to Google’s Mobile updates, retailers should consider mobile optimisation more than just a supplemental activity to SEO; they should consider it as its own channel with an entirely separate set of KPI’s.

As part of a series on retail and product level optimisation we’ve already looked at product page SEO. Next we’re going to look at tips to optimise your product pages for mobile.

Design for Mobile UX (don’t just resize things)

Mobile is a fundamentally different experience to desktop so you’ll need a different UX approach and possibly even an updated design language to accommodate mobile users.

Image Source: Oneplus.net

Image Source: Oneplus.net

Think about it; mobile users tend to be mobile and are interacting with your webpage with their thumb. Desktop users are sat at a desk and interact with your site using a mouse.

Taking heed of mobile UX conventions like the Thumb Zone (original research: Steve Hoober) will help you place important call to actions like add to basket:

When you’re in design mode, rather than “shrinking” what you have start by removing the excess. Put the important stuff in easy reach of your users.

Aside from the UX convention, Material Design is just really pretty

Aside from the UX convention, Material Design is just really pretty

Producing clean and clear design work in a design language mobile users understand is a smart starting point. Those tempted to investigate Google’s Material Design might be tempted to experiment with Polymer or Material Design for Bootstrap.

A nicely designed mobile product page example from Harrys via Ometria

A nicely designed mobile product page example from Harrys via Ometria

Optimise for Mobile Page Load Performance

During development, consider the smaller, underpowered devices as a starting point and provide responsive images for various viewports.

Tom recently gave a brilliant presentation on the topic of site speed for content marketers at BrightonSEO.

While there’s an awful lot more to page speed optimisation, some of the most impactful improvements in page load can be achieved through proper image optimisation and a few assorted best practices.

Look out for any opportunity to reduce the image file sizes served. Avoid heavy or slow loading JS that slows render time or moves content around the page after initial render (this can be a nightmare on mobile – ads heavy publishers I am looking your way, angrily).

full-page-speed-mod

In his testing, Tom achieved a 240% page load time improvement by implementing a series of performance enhancements, with a further 1 second of performance gained on mobile with responsive images.

Avoid App Install Pop Ups / Mandatory Registration / Email Collection Pop ups

Email capture or app install interstitials might seem like a quick win to grow your subscriber list; but aside from alienating your users (and losing their custom entirely) you’ll also incur the wrath of Google’s ranking algorithm (see: Mobile friendly pages using app banners).

no-pop-ups

App install ads (or multiple pop up ads) which block a large amount of content from users and prompt them to install various applications or perform a particular action are frowned upon somewhat. While the last update targeted pop ups that appeared more or less immediately and aggressively blocked content; I’d put my money on them targeting delayed pop ups too.

Optimise Your Internal Search with Good Search Suggest

User search is a potential pain point in your mobile UX but only if you make it that way. As Google themselves suggest, high quality search indexing gets users targeted, effective results.
Filter your internal site search results by Device Category as a secondary dimension; you may see something important (unlike the weird things that people search for on Builtvisible)

A sample of the unique range of search queries we see in the long tail of our internal site search

A sample of the unique range of search queries we see in the long tail of our internal site search

Link Seamlessly to Web Version of Your Site

If you’re still running an “m dot” version of your site (I feel horrible for you, I really do), then check the “view desktop version” links across your pages. I still see the view desktop version links dumping traffic back to the homepage – often at the expense of a logged in session (now logged out).

Use UX Conventions Familiar to Mobile Users for Images and Interactivity

Assuming you have high quality images on your product pages (if not; why not?!) then you might want to respect the convention that all shoppers expect: the ability to zoom in and manipulate an image to take a closer look.

very-leggings
Image Source: Very.co.uk

With the exception of touchscreen laptop users, desktop users expect a click to zoom. Not so on mobile, with a double tap, single tap or pinch and zoom being among the conventional UX options.

Read how Cloudup optimised pinch and zoom on mobile using CSS3 and JavaScript.

UX conventions specific to mobile users are there to be exploited. This product page offers some tap to expand interactivity on a product diagram:

Image Source: Heveya

Image Source: Heveya

We created a tap and swipe action for mobile users interacting with this interactive piece:

Use Responsive Images

Images consume almost all of the download bandwidth for a webpage; so in a perfect world, you’d optimise your file sizes (I think TinyPNG is very good). The impact of using properly optimised images in Tom’s pageload testing was 1 second. You’d be quite mad to ignore this optimisation. Read more from Tom on responsive images.

Optimise for Voice Search

According to the author of this post;

“We are already seeing SEOs creating pages specifically for the longer voice style queries and many are combing through their mobile Search Analytics to attempt to identify likely voice queries to ensure those pages meet users needs.”

I wouldn’t want to “create pages specifically for the longer, voice style queries” in fact, that goes against a lot of established best practice and seems like bad advice to me. You should, of course develop your content carefully, and the best piece of advice I could give you is publish common user generated FAQ’s on the product page.

For the most part, “optimising for voice search” entails nothing new or beyond the basic on page and technical SEO we should already be practising. With that said; it never hurts to test your own search results by carrying out voice searches yourself to look at the results.

Choose Your KPIs

By the KPI stage of the journey; we really should be treating mobile, table and desktop separately. Aside from the obvious need for a performance dashboard; I would always pay special attention to the funnel performance of your site, checking that each device behaves as expected. Do expect different behaviours by platform, device and browser but be sure to investigate anomalies or unexplainable drops in performance. Always test checkout on the hardware itself.

References / Further Reading

https://www.thinkwithgoogle.com/articles/chapter-2-product-details-and-reviews.html

https://www.ometria.com/blog/mobile-product-page-examples

http://www.marketingcharts.com/online/consumers-top-mobile-shopping-problems-65521/

Get insights straight to your inbox

Stay one step ahead of the competition with our monthly Inner Circle email full of resources, industry developments and opinions from around the web.