Enhance mobile user experience to win more sales
Few years back, econsultancy conducted a survey for Digital Market Trends to predict the primary method for organizations to differentiate themselves from competitors. The result was astounding - 44% participants believed that customer experience is the most important and exciting opportunity for the period 2015 - 2020. Plus, a Walker study predicts that customer experience will be more important than price as well as product by 2020.
What about the device platform? Mobile eCommerce sales account for 34.5% of total eCommerce sales in 2017, and by 2021, mobile eCommerce sales are expected to account for 54% of total eCommerce sales. Research from comScore indicate that mobile commerce is growing at three times the rate of desktop commerce.
Despite that grand impact, M-commerce still has many challenges. Research last year by Monetate for the fourth quarter showed a conversion rate of just 1.5% for smartphones compared to 4.3% for desktop devices.
Credit: Monetate. Data released on March, 2017
Some challenges in the mobile environment that can be quickly named are:
- Small screens - the screen sizes of mobile makes make it difficult to prioritize and navigate the complete site.
- Page speed - the biggest culprit is large file sizes, or unoptimized contents.
- Friction - poor mobile web design and lengthy frustrating checkout process wastes time and energy, causing customers to abandon the session.
In this blog post, I will share with you some tips that I have learned to tackle these challenges and thus improve mobile conversion rates. It's all about the content - how to display it in the right place at the right time.
1. Small screens
Solution 1: Primary content first
While desktop offers a grand place to go creative, mobile needs all the space optimized. Responsive design is becoming a too familiar concept. Instead, we are witnessing the rise of mobile-first design. To achieve this goal, we need to first understand user behaviors on mobile. According to Google's research, users who surf the internet on mobile devices are usually goal-oriented. They want to easily and immediately reach to what they are looking for, without having to waste time on jumping from one page to another.
This explains why building a simple and clear website design and showing primary content first are very vital in M-commerce. People hate to zoom in and pinch on tiny elements and buttons on the website that are designed especially for a desktop website to be able to read them. Secondary content should be available only whenever users need it.
Zara did a great job on this by focusing on showing their products images, pricing and the CTA. Other information is hidden in that ‘+INFO’. Image credit: Shopify
Show image and hide text appropriately: To ensure that this decision-making process isn’t overly complicated for users, try to limit the amount of text on product pages to the absolute essentials.
Many even argue that customers need a whole different experience on mobile, not just responsive layout compared to laptop or desktop version. It's because in many cases, responsive or stacking desktop/laptop designs are not necessarily primary content that you want to display for mobile users.
Let's take a template created by PageFly for example. Below is the template on desktop/laptop view. In this section, we add a touch of FOMO effect by including a countdown clock.
Based on design principle, what stays on the left will go on top of what stays on the right (regular responsive/stacking design column). However, with PageFly's tool to customize mobile design separately, you can now move the countdown clock to the top, where mobile customers will see it first - which makes much more sense in an attempt of creating a sense of urgency.
Regular responsive/stacking design | Customized mobile design with PageFly |
PageFly is the first page builder to offer this unique feature and the team aims to develop mobile-first design tools soon.
Solution 2: Simplify copy
Cut down on copy to only product name, price, variant option, and CTA. Hide additional information from permanent view with collapsible menu. This technique not only greatly improves the user’s “window shopping” experience but also brings their attention on the most important page element: product images.
Also, there is a Typecast’s amazing proportional method for mobile friendly websites that helps you understand how big or small font size you should use. According to this proportional method, your titles should be twice the body font size and the subheadings should be 1.625 times the body font size, which is rather close to the golden ratio. Follow the method and improve your conversions in no time.
Solution 3: Highlighted navigation bar and CTA button
As proven earlier, mobile users are goal-oriented, so you have to provide them a direct route to the CTA. Not only will this help ensure that the vital information is always in view, but it also simplifies a user’s flow through the website.
A website should offer easy and convenient navigation to its users by integrating easy to locate navigation bar, a search bar and other important elements of a website. You can shrink your navigation bar down to the fewest possible options or add a sticky navigation bar to the top of your website for better navigation.
Apple website has its CTA sticky as a purchasing reminder
You can also make your call-to-action stand out by giving it a noticeable color such as orange, red or green. According to Apple, a normal call-to-action button should have a minimum size of 44 pixels to make it as easy as possible to tap.
Free People has a sticky navigation bar that supports user a lot in discovering the site
The main concept of easy navigation is not merely to foresee and respond to what a visitor may be seeking on your website, but it is to lead users through your website. If you are running an e-commerce website, then a search option might be the most important element on your mobile website’s homepage. You can make the search option available on other pages via a sticky menu. In addition to search option, you should also make sure that the search result can be distinguished as per relevancy and availability for both mobile and desktop. Include intelligent auto-fill and suggestions on alternative search queries.
2. Page speed
Solution 1: Optimize files
Visual contents are extremely effective to convey ideas and summarize your points, so apparently they should always be included in one way or another. However, they can be an exceptional challenge for mobile websites since they take longer to load than normal text.
Make sure the images you upload are sized properly. It means if your site uses a large or wide images, determine the largest pixel required and try not to exceed that. You can also downsize the pixel, if necessary, with the help of pixel based photo editing software such as Photoshop. Always use image optimizer tools like tinypng.com or imagecompressor.com
Solution 2: Monitor ads and analytics
According to a recent study, more than 44% of users navigate away from a website if it takes more than 3 seconds to load. Moreover, Google also gives more preference to sites with fast loading. You should check out AMP project initiated by Google to optimize content and the loading speed.
Also, when a device’s browser is asked to download too many ads or provide analytics data, it slows completion of the web page’s download. Ads and analytics trackers should be monitored and assessed to help you weed out the driftwood and fine tune performance.
If you're running a Shopify store, high chance is you are using way too many apps, which consequently slows down the loading speed of your site.
There are some tools you can use to assess the current status of your site, including:
- PageSpeed Insight: This tool measures the performance of web pages, assigns a Page Speed Score to evaluate how the page is performing (ranging from 0-100, with 85+ is good), and suggests how to speed up the page.
- WebPage Test: This open-source tool will run speed tests from multiple locations across the world, across consumer connection speeds to provide rich insights including resource loading waterfall charts, page speed optimization checks, and suggestions for improvements.
- Google Analytics: Site Speed reports in Google Analytics offer insights into how quickly users are able to see and interact with content, as well as what the drop-off points are.
- Chrome DevTools: Chrome DevTool is a versatile real-time tool for evaluating your website/s performance right in the browser. You can simulate network and CPU speeds, examine network loading details and see how your site's code is impacting your page.
- Mobile-Friendly Test: Designed specifically for mobile sites, this tool analyzes exactly how mobile-friendly the site is, and focuses on elements beyond speed as well.
3. Friction
Solution 1: Optimize keyboards
Typing on mobile device has high interaction costs. It requires lots of time and efforts from users, even with a full keyboard and touchscreen. So minimize typing effort as much as possible, allow user to pick from a list, check a box, use a default picker instead of typing. You can tap into smartphone's feature to speed up the process, for example, use camera to capture credit card's information.
Solution 2: Reduce and simplify form
No one likes to fill out lengthy forms, especially when they're on mobile. When it must come to form, make it as easy and fast as possible. That’s why it would be much better if we:
- Make sure you only include fields which are absolutely necessary. Try to avoid typing as much as possible
- Provide the best match input for users whenever you ask them to type something
- Notify real-time form error
Solution 3: Utilize basic touch gestures
One of the things that makes using mobile devices better and more convenient than desktop is the touch gestures. You have not only scroll up and down but also swipe, drag, zoom, etc. They enable us to engage with technology through our sense of touch. Eliminate steps and allow users to perform gestures naturally, this will really pull off a comfortable experience.
Solution 4: Increase engagement
Using mobile device, users can be distracted with other things easily. A push notification, a popup message, they are all things can make user leave the page/the app. That’s why it is very important to create engagement.
Brands like H&M, Starbucks, and NordStrom have embraced the Chatbots technology to respond to customers in real time. On Shopify platform, they usually integrate Chatbots with messaging resources like Skype, Facebook Messenger and Kit.
Some brands even take one step further and apply advanced technologies such as AR (augmented reality) so they can bring the most authentic experiences to their customers. All done aims to achieve one task: to increase engagement with customer and thus improve user experience with the brand.