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

 

What 17 Million User Sessions Can Tell You About Mobile Design – gb

As mobile traffic continues to flaunt a healthy growth, conversion rates on the device remain underwhelming compared to desktop averages. Behavioral data illustrates a significant gap between consumers’ willingness to shop on their smartphones, and the quality of experiences that are being developed for mobile users.

We analyzed 17 million user sessions in 2018, across 13 sites (cosmetics, footwear, clothing, media and DIY) and in 4 countries (France, Germany, UK, and the US), to better understand what is preventing mobile users from purchasing on their small screens.

PURCHASING VS NON-PURCHASING MOBILE JOURNEYS

One thing we noticed is that desktop and mobile consumers exhibit similar user behavior when their journey ends in a purchase.

Desktop buyers browse for an average 24 minutes – that’s only 3 minutes longer than the 21-minute navigation average of mobile buyers. In that time, desktop users will view an average of 28 pages, with the typical mobile purchasing journey unfolding over 26 pages.

As we can see from the data, the purchasing journey doesn’t change that much from desktop to mobile, with both segments requiring a similar level of engagement with a brand and its offer before filling in their credit card details.

When it comes to non-buyers, mobile users also view a similar number of pages as their desktop counterparts – 6 pages on desktop versus 5 on mobile.

Non-buyers, however, abandon their journey much quicker on mobile than on desktop. In fact, users spend half the time on mobile as they do on desktop during non-purchasing sessions, with the average no-purchase desktop session lasting 6 minutes – versus 3 minutes on mobile.

Once frustration sets in on mobile, it’s a short path to exit, and users clearly have little patience when it comes to negotiating a clunky user experience (UX).

ONCE FRUSTRATION SETS IN ON MOBILE, IT’S A SHORT PATH TO EXIT.

Another glaring contrast is the difference between the time spent on a site for buyers and non-buyers. Mobile shoppers who walk away with a purchase will spend 7 times longer browsing a site than those who don’t – 21 minutes versus 3 minutes. This gap reduces for desktop users, with converting users spending 4 times longer on a site than non-buyers – 24 minutes versus 6 minutes.

What we can see is that the device does not really impact the number of pages a user is willing to view during their navigation – visitors who end up buying, whether on desktop or mobile, are particularly hungry for content.

VISITORS WHO END UP BUYING,WHETHER ON DESKTOP OR MOBILE, ARE PARTICULARLY HUNGRY FOR CONTENT.

There are many steps brands can take to optimize content for mobile. Developing easy product comparison tools to cut down on unnecessary steps, speeding up loading times, upgrading the information architecture to anticipate the content needs of users with different intents and contexts will go a long way to improving the connection with your audience.

PRODUCT PAGE AS LANDING PAGE

Users who start their journey on a product page spend less time on a site than those who enter through a non-product page – 3 minutes versus 8 minutes. The product page as landing page also has a 56% bounce rate (which is actually quite healthy!), meaning only 1 in 2 users persevere in their journey after landing on a product.

When it comes to mobile browsing, efficiency is key – welcoming visitors to your site through a product page can result in more focused, productive journeys.

WELCOMING VISITORS TO YOUR SITE THROUGH A PRODUCT PAGE CAN RESULT IN MORE FOCUSED, PRODUCTIVE JOURNEYS.

The product page as landing page also has a better scroll rate than other pages (54.6% versus 48.1%), suggesting users are more willing to engage with these types of pages at the start of their journey. This is confirmed by a high level of interaction, with users who land on a product page displaying a 31% activity rate (time spend scrolling, hovering or clicking), versus 19% when they land on other pages.

The data also provides interesting insights into the impact of various mobile acquisition sources. In the case of product page as landing page, for example, visits from social media, SEA or email sources have a 1.4% conversion rate. That’s 27.3% higher than visits from SEO sources (1.1% conversion rate).

Visitors from social media, SEA or email sources also bounce slightly less – 52% versus 56% for SEO visitors.

Brands should continue to invest in these acquisition sources, which are driving a meaningful chunk of mobile conversions. Ensuring consistency between the messages brands convey in their social media, advertising or email campaigns and the landing page content is key to keeping users interested.

OBSTACLES AT CHECKOUT

Checkout abandonment is a real problem when smartphone shopping. Mobile users who reach the shopping cart have a 16.8% conversion rate – that’s almost half the conversion rate of their desktop counterparts, who have a 32.2% conversion rate.

In other words, over 80% of mobile users who reach the cart don’t complete their purchase.

Data shows that mobile users who reached the checkout page but don’t go through with their purchase spend more time on the page and interact with it more than those who do make a purchase. Non-buyers spend 4 seconds more than buyers interacting with the page, and have a 33% higher activity rate than those who ultimately click Buy.

The key to shrinking exit rates at checkout is to make the final steps of conversion as seamless as possible. Reducing form filling by allowing users to log in via their social media accounts, offering guest checkout options and alternative payment methods such as fingerprint authentication will all help reduce friction.

Today’s consumers are addicted to convenience, and the most forward-thinking digital brands are making sure that shoppers don’t have to pick between choice and seamlessness.

And as mobile traffic continues to grow, adapting desktop interfaces to mobile is no longer a winning strategy. Brands need to understand the demands and expectations of their time-sensitive and highly mobile audience, and put these needs at the heart of experience development.

See My Industry’s Benchmarks