Mobile UX: device-targeting and conversion rate optimization

Much is made of the impact that speed has on conversion rates on the web. It’s a message that has become increasingly important in recent years, as mobile penetration rates have soared. Much less has been made of the effect of device-targeted UX on conversions. It’s well known that conversion rates are lower on smartphones (see table below). In this article we take a look at what online retailers and service providers are doing about this.


Source: Monetate

It’s clear that some retailers and publishers do realise the impact that device targeted UX can have on conversions, and we can see this in action when we visit their sites on different devices.

The right user experience is about more than just resizing content and tap targets to display on different screens; it goes beyond large touch-friendly buttons. Rather, different devices have different usage patterns, and must be understood in this context. Users on different devices have different needs and goals. For optimum conversion rates, the right content needs to be delivered to the right device. Additionally, as pointed out in a recent Forrester research paper, you should “take advantage of mobile-only capabilities from cameras to sensors to mobile payment options”.

Examples can be seen all around the web. For instance, Best Buy recently drove one million store visits by focusing on mobile as a channel to make product information and knowledge more accessible to customers. By pairing mobilised guides and video tutorials with mobile local ads on Google, they were able to boost conversion rates.


Source: think with Google

We can see online presences tweaked for different devices, with less important features and content being demoted or omitted entirely. Key to this process is the ability to identify and classify client devices. With this capability, then the site UX can be adjusted in a way that best suits the visitor’s device. While A/B testing is widely deployed to test the effect that UX tweaks can have on conversions, testing device-specific optimisations can further improve conversion rates.

Let’s take a look at some of the ways site owners are currently optimising for different devices.

Navigation

There’s not a lot of space on mobile device screens. So this limits what can be displayed in navigation menus. This gave rise to the ubiquitous hamburger menu. Although many sites will simply hide the navigation menu behind a hamburger item, you can do better. Just as important as screen size limitations, users on mobile devices have different goals, so prioritising navigation items on mobile is crucial.

Different devices, different menu

It’s interesting to look at Amazon (amazon.co.uk) on different devices. There are at least five different versions of the site that you might get, depending on your device. First off, the list of Departments on Amazon is shown below for desktop and high-end mobile. Although largely similar, some changes and reordering are visible:

Amazon navigation differences on different devices

But things get more interesting on different devices. On mid-range devices, the option to view by department is not even present; there is just one nav item: Deals. And on an even lower-end device, the home page is even more focussed still.

Amazon mid and low end devices

Category and product filters

Category and product filters are standard features on most ecommerce stores. Small screens make it difficult to implement such filters on mobile devices. The challenge is to balance functionality with device capabilities and user goals.

On desktop the product filter is displayed to the left of the product listing, and is visible at all times. On high-end mobile devices, it’s accessed via Filter link, and the filter options slide in from the right.

Amazon product filter, desktop and high tier mobile

On less capable devices, Amazon approaches its product filter quite differently again. On the lowest tier device, there is no filter option, except for sorting options. On mid-tier devices, the filter options are included at the bottom of the page, and accessed via a link which scrolls the page down.

On small screens, less is more…

But more should be possible! Page load speed is a legitimate concern on mobile and desktop, so much so that page sizes should be kept to a minimum. Unqualified, however, this advice is not quite compatible with giving users all the information they might need to complete a conversion. Better advice would be to keep initial page loads to a minimum, but if a user requests more detail, such as higher resolution images, then this should be possible despite the page load impact (within reason).

This is what Amazon does for low end devices. Images are used sparsely, but, importantly, higher resolution images are available; the user just needs to request them. And even then, the user gets a choice of sizes depending on the product (e.g. Small 63×110, Medium 92×160, Large 286×500 in this case).

Amazon low end product images

Same goes for the product details. On the desktop and high end devices, detailed product descriptions are included on the initial product page. On lower end devices, the descriptions are not initially loaded, but are available when the user requests them.

Various other content widgets and features are omitted on some devices, such as star-ratings and reviews. Once again, these things are available on request.

Different devices, different content sections

Different content sections are also included and omitted on different devices. Predictably, Amazon’s desktop version has the most content, and as we go down through the devices, the content becomes more focused. On the desktop there is block after block of promoted content categories, such as Popular media streaming players, Unique products, and Digital Cameras best sellers.

amazon-desktop

On low end devices, Kindle HDX was the only promoted content.

amazon-mobile

We see a similar pattern on Google’s search results page. On desktop and tablet, we see less of a focus on nearby services and click-to-call numbers, while these take the top spot on the mobile results.

Google search results context

On mobile, search is king!

If there’s one feature that should appear on all devices, it’s search! Search offers a shortcut past navigation menus, and often offers the quickest route to what you’re searching for. On Amazon (in the image above) we can see that search is included first and foremost across all devices.

The search experience is enhanced where possible, with autocomplete functionality implemented by both Amazon and Google on devices that will support it:

Amazon search automcomplete Google search autocomplete

Note too how different results are prioritised for different devices, taking context into account. For a Google search for keyword “taxi”, image and news results aren’t as important on mobile, and instead taxi company results are prioritised (see image above).

Device capabilities

Wherever possible device capabilities and sensors should be exploited. For instance, geolocation is a no-brainer. Where it’s supported and relevant, it should be used. And results or products should be sorted based on proximity where possible. A Google search for ‘restaurants’ on a high end mobile device demonstrates this:

Google search with results sorted by distance

Even on older devices without GPS capabilities, Google gives the user the choice to manually set the location.

Google search for taxi with manual location settings

Call-to-action

Note also the different call-to-action (CTA) buttons depending on the device. On phones, a CALL link provides the quickest way for users to get what they want. On desktop a phone number is displayed, but the main CTA is a link for directions, or to visit the business website, reflecting the different needs of users on different devices.

Google search call-to-actions

Forms

Keep them short, and keep them simple! Use correct input types for devices. For example if you require numeric input, the use the <input type="number" /> input type (learn more about forms and input types here).

Hubspot recently published some stats which chart conversion rates and types and numbers of form fields. Generally your forms should be kept simple, and watch out for too many select fields.

Perhaps one of the most famous success stories of conversions rate improvements via form optimisation comes from Expedia. The company reportedly made $12M by removing a single form field.


Image source: conversionvoodoo.com

Once again, keep it simple, and only include fields you need.

Summing up

To make the most of conversion rate optimisation, your strategy should take into account the following:

  1. Device targeted UX can be used to increase conversions
  2. Device identification is key
  3. Stay focused: promote/demote content based on user goals: less is more, but more should be possible
  4. Make use of device capabilities where appropriate e.g. GPS for location, camera for credit card scanning and payment
  5. Speed is important, but speed is not everything
  6. Keep menu hierarchies simple
  7. Optimise forms
  8. Target products by device type

Many site owners already realise that separately optimising for mobile increases conversions. A few canny site owners realise the full potential of optimising for devices. While A/B testing is often employed to determine whether a UX change increases conversions or not, A/B testing in device segmented space offers even finer grained control and opportunity to increase conversions. If you can identify a device and its capabilities, then you can optimise for it, and if you can optimise for it, you can optimise for conversion.

To quote a recent Forrester report:

“To delight and serve your customers in their mobile moments of need, you give them exactly what they need to move forward in their immediate context.”

Leave a Reply

Exclusive tips, how-tos, news and comment

Receive monthly updates on the world of mobile dev.

Other Afilias Products

Try the world’s leading device detection solution at
DeviceAtlas - Try the world’s leading mobile device detection solution

Create amazing web presences on any screen with
goMobi - Create amazing web presences on any screen.

Evaluate your websites’ mobile readiness with
mobiReady - Evaluate your websites’ mobile readiness.

© 2017 Afilias Technologies Ltd. All rights reserved.

This is a website of Afilias Technologies Ltd, a private company limited by shares, incorporated and registered in the Republic of Ireland with registered number 398040 and registered office at 6th Floor, 2 Grand Canal Square, Dublin 2, Ireland