Mobile Marketing: How To Boost Your Mobile UX 

According to Pew Research Center, 81% of Americans today own a smartphone, and mobile dependence is also on the rise. 

Emarketer predicts that by 2021, “mCommerce will account for 72.9% of the ecommerce market.” 

And yet, mobile conversion rates are still stagnating around 2%.

Like many other digital teams around the world, you may be scratching your head, wondering what you need to do to shrink the mobile gap for your business to see healthier conversion rates among your smartphone shoppers.

But instead of focusing exclusively at conversions, brands should take a closer look at their user journeys to gain an in-depth understanding of their customers’ behaviors.

Accessing this level of insight implies having the right tools and methodology, and in some cases, trading in basic or incomplete methods for next-gen solutions.

In this guide, we’ll explore why mobile conversions are having such a hard time catching up to desktop, and what metrics you can use in 2019 to make sense of (and correct) this discrepancy.

As ever, we’ll save the best for last with some concrete tips on how you can optimize your mobile or app experience today.

Let’s dive in!

Mobile Conversions vs. Desktop Conversions: What Gives?

Widespread mobile adoption means consumers now have the world at their fingertips. And yet, 37% of mobile sessions last less than one minute!

Evolving usage and the transformation of devices themselves have widened the gulf between desktop and mobile behavior. 

Even more so than on desktop, mobile browsing requires an intuitive, seamless navigation, fast loading times and a streamlined customer journey.

And yet many sites and apps are not conceived to meet the needs of this particular audience, which is often impulsive, impatient, and easily distracted.

The numbers speak for themselves.

Our study of 300 million mobile sessions shows that: 

Hence the need to put aside preconceived ideas and to ask the right questions: 

Customer Experience in 2019: The Era of “Micro-Moments”

What if the objective of a browsing session was not, in fact, a purchase? 

You heard right. There are as many mobile browsing objectives as there are situations, or “micro-moments.” 

And yet it is possible to group these micro-moments into phases, each presenting their own set of challenges for brands: 

Giving each of these situations proper consideration goes against some of the preconceived ideas of eCommerce such as: every visit should lead to a conversion. This is simply not the case.

What if the information or free services featured on your site also needed optimizing? Not to encourage an immediate conversion, but to generate long term value.

If you ignore these micro-moments and focus all your efforts on those visitors who have already decided to complete their purchase online, you risk missing out on many conversion opportunities in the long haul.

The Right Metrics for the Right Conclusions

We now know that the user journey on mobile is peppered with micro-moments that should be considered individually. 

But how do you shine a spotlight on these moments, which may vary greatly depending on your vertical, your positioning and your offering? 

A traditional site analysis, bolstered with A/B tests based on practical use cases (or sometimes even on intuition) may at first glance appear to be the perfect answer.

And while many businesses have relied on the numbers provided by these analyses for years, teams now have access to much more sophisticated UX analysis tools to understand the behavior and goals of their digital audience.

Basic metrics such as conversion rate, bounce rate, session duration and number of pageviews remain critical to understand user journeys.

But why stop there?

In the following paragraphs, we’ll look at four new metrics that can help teams better understand the nuances of customer behavior.

Click recurrence:
Click recurrence is the number of times a user clicks on a specific in-page element.

This metric is incredibly useful because it sheds light on user frustration, due to:

Activity rate:
The activity rate, a metric that measures the time spent interacting with specific in-page elements, is less frequently leveraged. 

And yet it’s much more useful to understand how long visitors spent trying to achieve a specific task than the time if took them to exit your site… 

Many businesses routinely monitor how long visitors stay on the pages of their site. This metric is useful to determine how helpful these pages are for visitors trying to fulfill a particular objective. 

Engagement rate:
The engagement rate measures the percentage of visitors who clicked after having hovered over a zone.

By analyzing the engagement rate on a CTA, you can understand the impact of each and every one of your changes (wording, positioning, etc) on conversions and other behaviors.

In short — a goldmine! 

Time before first click:
The time between the moment when the visitor lands on a page and clicks on an element is an extremely important value.

That’s when your visitor will form an impression, absorb the information you have provided and make a decision about their next action.

Time before first click can convey a lot of information about how a visitor feels about your site. 

For example, a short time before first click can indicate that visitors are distracted by certain elements or are being encouraged down the wrong path.

A long time before first click could indicate that the forms or features on a page are too complex to navigate, and are obstacles in the customer journey. 

How to Optimize the Mobile Experience to Increase Conversions?

Are you not convinced of the effectiveness of your landing pages? Now would be the time to take a closer look.

Our research shows that visitors who start their navigation on a product page spend less time on-site than those starting their journey on any other category of page. 

Presenting the right content at the most opportune moment is key if you want to enjoy a healthy conversion rate. 

The first thing to do is to make sure the content of your landing page is relevant to the message in your acquisition source (SEO, SEA, social, etc).

Here are some other good practices you can follow to maximize engagement on your landing pages.

Homepage

Challenge: is it easy for visitors to find what they are looking for?

Solutions :

Navigation

Challenge: is it easy for users to browse what interests them?

Solutions:

Conversions

Challenge: is the checkout process seamless?

Solutions for an improved cart:

Solutions for checkout:

While our recommendations focus on specific use cases, an effective mobile optimization strategy requires continuous monitoring of all aspects of the customer experience.

Any improvements to the mobile experience need to keep up with the pace of usage, and with the real-time needs and expectations of your smartphone audience.

To help teams gain a complete understanding of their customers, and to pinpoint the obstacles or frustrations along the user journey, we’ve developed a unique set of metrics that measure customer engagement and interactions at every step of the journey.

Equipped with this level of customer intelligence, teams have everything they need to make winning CX decisions and remove friction from their mobile site and app.

If you’d like to know more about your customers, or if you want to see where they struggle on your site, give us a call and we’ll be happy to show you.

We’ll be happy to show you!

3 Tips to Improve Mobile User Experience

Our latest industry benchmarking analysis confirms a mobile-first trend in many sectors, including fashion, retail and beauty, where smartphones account for approximately two-thirds of all traffic (64% for fashion, 63% for cosmetics and 62.3% for pharmaceuticals). 

But what we also surfaced from our survey of 2.1 billion site visits is that mobile conversions are not following suit. In the fashion sector, for example, the mobile conversion rate still stagnates around 1.3% — half of the average desktop conversion rate, which averages in at 2.6%. This meager conversion gap also exists in the beauty sector, and even in the many other industries where the traffic gap between mobile and desktop is not so wide.

Despite mobile making great strides in terms of traffic, the data on conversions suggests that smartphone customer experience (CX) is falling short of consumer demands. Clearly, consumers are keen on connecting with brands, products and services by using their phones, but something in the mobile experience is stopping them in their tracks.

In order for users to become immersed in your brand, the navigation on mobile must be optimized for it to be seamless and intuitive. As such, brands should aim for more meaningful visitor sessions — ones that can inspire conversions and nurture customer loyalty, future visits and possible conversions. 

A granular analysis of customer behavior will shine a light on areas of friction in the customer experience, and flag pages and in-page elements that need improving. This article delves into 3 mobile UX design best practices and their affiliated tips to assure an optimized mobile user experience.

Use Images Sparingly on Mobile

Humans are visual beings. Much of how we consume information and entertainment involves the use of imagery. But images can pose considerable damage to mobile user experience. That’s why you need to heed best practices to avoid a bad mobile UX.

Firstly, there is a smaller screen on mobile, so images carry a larger weight. As such, their implementation is trickier on these devices. They have to be large enough to be seen in a way that clearly and easily conveys their contents, but not so large as to require scrolling.

Make sure your images do not cause any loading delays; images are the primary cause of slow page load times and the problem is compounded on mobile. Slow load times bog down your website speed, which in turn negatively affects SEO and triggers impatience, a telling sign of a bad UX. 

That’s where you have to consult your server. Make sure it has the proper speed and correct updates, so that images never set back your mobile site or app. A good server is able to distinguish which devices your visitors are accessing your content from — desktop or mobile. 

Graphic designers must use the right coding so there are no issues with the general view of the image. Pay close attention to image sizing; there are recommendations on standard image sizes as they relate to pixels and the like. 

 


The Typography Must Be Lucid & Minimal

The typography, i.e., textual style of a website, is a crucial component of the UX. Most of the information we imbue comes from reading, so the typography must be presented in an easy-to-read way.

Although the text must be large enough to see without incurring any squinting, you should steer clear of using large fonts, since mobile screens are much smaller. Otherwise, large letters would block other parts of the page from view, forcing users to constantly scroll around to find anything. But don’t settle for small fonts either — you wouldn’t want to worsen the user experience by making your visitors constantly zoom in/ squint. 

So how do you determine a happy medium? The key is to keep the text in proportion to the page and screen size. Jason Pamental of H+W Design has formulated a method that maps out the correct proportions of the text (including the body copy, H2s, H3s, etc.), the line-height and characters. 

Implementing Sticky Elements

Sticky elements are often those that visitors rely on most; when these elements are not in immediate view or access, it can easily irritate them. As such, you should implement sticky elements for a more convenient mobile user experience that provides a component of seamlessness.

You may have heard of the sticky search bar, but, although a sticky search bar is valuable for desktop, it is inconvenient for a good mobile UX, as it takes up a lot of space. Since it is inopportune for user experience on mobile, you’ll need to opt for another element.

In place of a sticky search bar, add a search icon at the top navigation, or provide the search function within the hamburger menu. The former is a better option, since it renders instant visibility of the icon.

 


Closing Off on Mobile User Experience Improvements

These 3 tips offer clever ways to boost your mobile user experience. Consider each of them and their multifaceted teachings to capture more site visits. But it shouldn’t end here; there are plenty of other ways to optimize mobile UX, no matter how small or distinct.

Keep this in mind: in each instance of changing your mobile experience, determine if the change will contribute to a pleasant experience for users. Most importantly, use data as your armor; it’ll show you in plain terms what makes for a good or bad mobile experience.

For more information on UX optimization on mobile, download our 2019 Mobile Report.

download the Contentsquare report

 

3 Digital Consumer Behaviors Shaping Mobile UX

We’re living in the age of the mobile-first approach to user experience (UX). As the digital backdrop transforms and advances to meet consumers’ needs, the mobile landscape naturally evolves along with it. But mobile usage is experienced differently than desktop and tablet, so it comes with its own set of UX challenges that ultimately shape its approach to design and overall environment.

The consumer behaviors discrete to mobile have shaped how mobile UX is set up, and yet the underwhelming rate of smartphone conversions suggests there is more to be done. In the following post, we look at three behaviors that are impacting best practices for mobile UX.

Forget Heatmaps: Designing for Thumbzones

Mobile UX is molded by the size of people’s thumbs, as most clicks, scrolls and swipes on mobile are done using the thumb. Whether mobile usage is executed with one hand, two hands or in a cradled position (two-hand support of the phone), the thumb is very much involved, as the strongest and foremost finger.

Here are some of the consumer behaviors associated with smartphone usage:

One-handed – 49%
Cradled – 36%
Two-handed – 15%

Most Common Usage for One-Handed Cases: Right thumb on the screen – 67%

                                                                          Left thumb on the screen – 33%

Common cradling behavior: Thumb on the screen – 72%

                                            Finger on the screen – 28%

Clearly, thumbs are the victor. Now, let’s look at the thumb zone as a model of mobile consumer behavior. Essentially, a thumb zone is a kind of blueprint that shows the difficulty of navigating a smartphone based on the area of a screen. As you can see in the diagram below, the outer and top areas of a phone screen incur the most difficulty for users to reach/ navigate. The middle areas of the screen are the easiest for users to navigate for both left and right-handed users. The upper middle of the screen gets less and less accessible on larger screens, so the ease of use also lessens.

Courtesy of SmartInsights.com

 

Designing your mobile site and app elements in a way that aligns with the above thumb zones is crucial when optimizing the UX on mobile. Placing site elements in accordance with thumb zones will assure that visitors do not come upon any difficulties when navigating your mobile experience.

Additionally, you should subscribe to standard size recommendations for mobile touch targets. According to the World Wide Web Consortium, the standard sizes for an optimal mobile UX are: 9mm or 34px, and the advised smallest target size is 7mm or 26px. The experience bloggers at UXbooth suggest elements should have no more than 2mm or 8px in space between them, As people with big thumbs and fingers use mobile as well, these standards are sure to shift so that accessibility can reach these users.

Secondary Content: Approaching Mobile Footers

Mobile footers are native to the mobile web, but are less present in mobile apps, as some brands have found a reason to remove them altogether. For example, this is evidenced by the Chinese retail platform AliExpress, which had reaped a 104% increase in conversions after implementing a footer-free web app.

In that incidence, the footers were declined as they did not keep up with user expectations. Mobile users can be short on time and much like other device consumers, only want to see relevant content. Footers display the same content on every page, regardless if the page relates to the footer content or not. This does not pose a UX problem on desktop, since desktop screens are far larger and there is no clamoring for space for viewing and load speed.

So, on mobile footers sometimes get compressed into long pieces of content that require scrolling and take up far too much room. And if they don’t provide relevant content to the site visitor, footer frustration can take hold. Brands like Jackthreads.com have also removed footers from their mobile site, attenuating the effect of the corresponding user behavior. In this way, the line between the mobile web and mobile apps is blurring, if not downright shrinking.

But mobile footers can also improve the experience for visitors — for example, by answering your digital customers’ need for information (terms and conditions, site map, etc). Conversion Sciences has discovered that sticky footers have increased conversions across their numerous client bases. As such, footer usage is a two-way street.

Brands can reach the insights of whether a footer is helping or hurting the experience by analyzing customer behavior to determine whether the footer is serving a purpose or not. After all, without data, it’s nothing more than an opinion.

Tackling the Gap in Mobile Conversions: Constant Mobile Optimizations

Mobile conversions have been lagging significantly behind desktop and tablet conversions, ever since the inception of mobile commerce. Even after the iPhone and smartphone boom in the late 2000s, mobile conversions have been low. They have not made enough strides to compete with desktop to this day — at least where purchases are concerned.

In the Contentsquare Mobile Report for 2019, we’ve found that users who’ve reached the shopping cart on mobile have a conversion rate of 16.8% — almost half the conversion rate observed for desktop users (32.2%).

Besides the virtual halving of the conversion rates, what this statistic says about mobile conversion is that over a whopping 80% of mobile users do not complete their purchase.

And yet the high traffic on mobile suggests that there is a desire to shop on mobile. One of the main ways to optimize mobile for conversions is by reducing hesitation and difficulty of use. Non-buyers on mobile who reached the checkout had a 33% higher activity rate (the time spent on a page and interactions on it) than buyers, which could point to an interest in the offerings, but also to hesitation and difficulty.

As such, your content should guide your users. This can be done with progressive disclosure, a UX technique in which page content only relays the necessary information for task completion. This is why mobile typically uses more pages than desktop for the same user path.

Additionally, guiding site visitors can take the form of connecting them with the correct category of product/service, such as a size guide to direct people to the right clothing selection. Ease of use is important, so your content should be optimized like so.

Much like digital, mobile experience is highly visual, so optimizations on this front have also been rising. Because UX is more visual and less text heavy (especially when you take screen size into account), it is necessary to design visuals that are suited to be clearly perceptible (fine details and all)

Images must appear large enough in order for their details to be in clear view. Additionally, providing a 360° view of a product is key, so that potential customers won’t be at a loss of what the item truly looks like.

Pay Attention to Mobile Consumer Behaviors

Mobile usage has had a sharp worldwide upsurge, leaping from 50% in 2016 to 78.2% in late 2018. With the climb of mobile use and the mobile-first milieu of most brands, mobile is a critical medium to earn customers. Any optimization efforts need to start with a clear understanding of mobile consumers’ needs and expectations.

How visitors interact with your mobile site or app holds important clues to what they are trying to achieve, and what is causing friction along the way. Traditional analytics can provide a partial reading of this behavior (page traffic, conversions, etc) but a granular analysis of digital content adapted to the unique behaviors of mobile visitors (taps, swipes and scrolls) will go much deeper and provide a meaningful foundation for successful optimizations.

Optimizing Mobile Experiences: Interview With Bobby Chucas of Babylon Health

Summary

With over 2.5 million users, Babylon utilizes 21-century tech and a robust mobile strategy to fulfill their mission: to place an accessible and affordable health service in the hands of every person on the planet. From tackling challenges of form completion to designing a purposeful and compelling mobile platform, Babylon draws on behavioural insights to create a seamless experience. We sat down with Bobby Chucas, Senior Product Manager, to uncover how to optimise for a mobile-first world.

Intro

At the heart of every great mobile experience is a team that understands its users’ needs. Since 2013, Babylon has worked with partners like the English National Health Service, Samsung, and Tencent to revolutionize the GP experience. Named one of Europe’s hottest startups by Wired in 2016 and the Mobile App of the Year at the UK IT Industry Awards 2015, Babylon takes the mobile approach to democratizing healthcare.

A pioneer in health informatics, Babylon uses artificial intelligence to place accessible healthcare in the palm of your hand. However, it’s Babylon’s robust mobile strategy that places the user at the center of attention. From tackling challenges of form completion to designing a purposeful and compelling mobile platform, Babylon draws behavioural insights from its 2.5 million user base to create a seamless experience.

We sat down with Bobby Chucas, Senior Product Manager, to uncover how to optimise for a mobile-first world.

What’s your biggest challenge when it comes to optimising your mobile experience?

You’d think mobile experience would be an easy thing to get right, given how much less space you’ve got to work with! However, mobile’s more complicated than being just about screen size, and is as much about understanding your users’ context and intent – given that mobile users could be literally anywhere when interacting with you – when they’re interacting with your product as it is about design. The biggest challenge we have is that what we’re offering requires focus and time: my product is a free, quick health assessment available through an app that gives you a detailed view of your risks of high profile diseases. This assessment is up to 15 minutes long, and many of the questions are quite specific, ranging from family history of certain diseases through to questions around sexual health and drug taking. We’d obviously love our users to get as much value out of the product as possible, so one of our biggest challenges is ensuring that users understand that the assessment takes time and focus, but that the payoff in terms of the insight you receive from the product is well worth the effort.

What can mobile commerce sites learn from Babylon, and vice versa?

Babylon isn’t really presented as a commerce app – while there are services users can pay for to get tests, insights, appointments etc., that’s not the focus, and that’s not what we’re trying to prioritise. Often our users come to us when they’re experiencing symptoms that they’re worried about, and of course our priority is to provide a seamless experience that gets them the information and support they need. By focusing on the needs of the user, we hope to build trust and reassure the user that Babylon is a service they can rely on. It’s difficult to translate this across to pure commerce, but focusing on the user’s immediate needs and priorities is hugely important for us.

That said, many commerce sites have very well structured conversion funnels, and I’m sure there are many insights we can take from those kinds of experiences to better convey what kind of offerings we provide to our users of our private service.

What’s the most surprising behaviour you’ve seen from mobile app visitors?

The most surprising behaviour we’ve seen is that we’re getting around 75% of our users to complete the assessment. Most equivalent assessments see conversion rates in the low single figures, so the fact we’re getting that rate is really valuable. We tested out a number of different ways of framing the assessment, in terms of conveying the value of the insights to users before they started, and we also experimented with the format – we provide a conversational chatbot experience rather than a standard form to fill in, which helps to engage users. It will be interesting to see how this evolves as we increase the range of diseases we provide, as they will be accompanied with more questions, and so we’ll need to decide whether users are still happy to take the assessment all in one go, or whether breaking it out more clearly would make sense.

What are the most important factors in an optimal mobile experience?

In general, people hate it when their screen gets too busy. The experience when you tap on a link to a site, which then fills the screen with multiple prompts for GDPR, cookie consent etc., is frankly awful. Whilst some of that is of course required by regulation, some sites can be tempted to grab the user’s attention by fitting as much information above the fold as possible, in the hope that one of the many items catches their eye. While in some situations this may work, most research shows that the far more compelling experience is a more sleek, refined, experience based around a single intent or purpose. Not only does that provide a clear purpose to the content you’re presenting, it also provides you with a clear metric of success that you can use to research and test how to add incremental value to your product.

What are the common mistakes most brands make when it comes to mobile strategy?

Criticising businesses for not being “mobile-first” has become a bit of a trope over the past few years, but it’s certainly true that it’s very difficult to get right. Often teams can evangelise enthusiastically about mobile, but when it comes to their development process they still build their desktop screens first, then essentially condense them for mobile. It’s not as simple as tweaking the design, and is much more dependent on research into understanding why the user’s interacting with you, and what they’re trying to do. By understanding that and ensuring that you’re expediting that as much as possible, you’ll keep their attention and stop them getting frustrated and resorting to searching elsewhere.

We’re potentially seeing a similar type of trend now with voice interaction – as smart home devices like Alexa and Google Home become more commonplace, more products will become available through the voice medium, and I’d happily bet that many of them will take the same approach and try to shoehorn their existing offering into a voice experience, rather than reconsider it from the bottom up. The first few products to get that experience right will create an incredible opportunity and reach for themselves.