Many companies optimize landing pages for desktop users, but the mobile experience has lagged behind. Mobile ecommerce conversion rates are typically much lower than their desktop counterparts:
While these rates could be a result of the way customers interact with phones, there is another reason. Many ecommerce sites haven’t adapted their pages properly for mobile, causing a poor shopping experience.
These mobile ecommerce optimization techniques improve user experience and increase sales on the small screen.
Use Mobile-Friendly Images
Don’t let images slow load time and frustrate shoppers before they begin shopping. According to KISSmetrics, visitors are only willing to give about 6-10 seconds for a site to load. Most expect it to be 2 seconds or less:
There are three reasons why images slow down your page: too many images are downloaded, the dimensions of images are too large, and an excess amount of client-side processing. On desktop, 20% of load time is used to download files and 80% is used to process code and images. On mobile, download speeds are slower to receive files than desktop. CPU, memory, and cache size is also smaller for processing. Find ways to reduce the number of image files and the amount of processing to decrease overall site load time.
Reduce the number of images downloaded or HTTP requests by:
- Loading images through CSS where possible
- Keeping external style sheets to a minimum by combining them as one file
- Replacing styling features like drop shadows, and gradient fills with CSS3
- Embedding SVG files onto a page instead of loading images
- Combining commonly used images like icons into image sprites
- Splitting image content into multiple pages
Reduce image dimensions by:
- Using responsive images that are best suited to the user’s device
- Lowering resolution and compression image files where possible
Reduce client-side processing by:
- Avoiding the use of widgets since each can add up
Localize Store Info, Shipping Info, and Offers
The more information you have about your mobile user, the better you can personalize the experience. GPS-enabled devices are able to detect a visitor’s location and cater specifically. For example, your mobile site can automatically show “Estimated 2-3 Day Shipping to Chicago” to a user accessing the site from Chicago. That’s one less step for users to find necessary information.
There are numerous ways to use localization on mobile:
- Showing shipping time to a user’s area
- Locating nearby brick and mortar locations along with its inventory
- Showing geo-specific user reviews or other user-generated content
- Offering geo-specific specials or sales
Place Priority Elements Above Fold
Mobile users behave differently because they enter your page differently. Slower load speeds and shorter, distracted sessions mean that the first impression of your mobile page is important. Provide relevant content and encourage users to take action above the fold.
46% of users report difficulty when interacting with a page; help your customers by placing what they want at the top of your mobile page. Approach this with a 70/30 split – 70% of your page’s best content above the fold and 30% below. This drives your mobile design to be top heavy.
Establish a good first impression and use elements above your fold by:
- Creating a list of all the elements on your mobile page
- Prioritizing and scoring each element by relevancy to your users
- Eliminating low-priority elements and minimizing the list to essentials
- Apply a 70/30 split of this list by putting 70% of the top-priority elements above the fold
Make Your CTA Prominent
Make the path to conversion easy and obvious for users. Provide large, bold options for users to add an item to their cart or submit their info. These CTAs need to be thumb-friendly and easy to access on touchscreen devices.
Drive your users towards action by:
- Providing large, clear CTAs using buttons with contrasting colors
- Making your CTAs thumb-friendly for the touchscreen
- Using actionable, urgent CTA language like, “Buy Now”, “Purchase Here”, “Save to Wish List”, and more
- Removing options for other pathways by limiting links
Use Mobile-Specific Navigation
Navigation is crucial to the shopping experience and is a challenging aspect of the mobile page. Since there are typically only 3 to 8 items and a text search on the first page, strong navigation is needed for the rest of the customer journey. It shouldn’t mimic the desktop site because users have different needs. Show a direct path to find store locations, new specials, and account login. Using customer data and A/B testing determines the priority of navigation items.
There is also room for navigation to be a part of the content layout. Since mobile users are seeking timely, relevant content (deals and location info), feature it on the main page (not only the pop-out navigation bar). This shortlist satisfies users’ needs with fewer clicks and scrolls. For example, Best Buy has 6 relevant navigation items right below its featured products on the homepage. This includes time-sensitive offers, recommended product browsing, and recently viewed products.
Optimize mobile navigation by:
- Simplifying the desktop navigation; mobile users have different needs
- Using customer data from usability or A/B testing to prioritize navigation items
- Emphasizing store location information, time-sensitive offers, and account information
- Showing high-priority navigation items as part of the main content layout to fulfill users’ needs
Use Search Suggestions & Corrections
Because mobile users are reliant on site search to find their next step, make it easier by providing suggested searches. Auto-completion or correction of searches lets users avoid typing, which is cumbersome and inaccurate on mobile. Ease this hurdle for your visitors to encourage conversions.
Improve the site search input by:
- Tracking search results and identifying your top-performing searches
- Enabling auto-completion on your site’s search engine (site search tools typically have this option)
- Using search data to rank suggestion results so that mobile users see the most relevant choices as they type
Use a “Wish List” Checkout Feature
Even after optimizing your mobile page, there are users who cannot complete the conversion funnel unless on the desktop version. According to a 2012 Google study, 65% of shoppers begin their experience on a smartphone, but 61% of those users continue shopping on a PC. Don’t lose customers during this transition!
Use a “wish list” feature or account creation that lets users switch device platforms to view or purchase saved items at a later time. Customers feel that they need additional info from the desktop version of the page before completing checkout.
Implement a “wish list” type feature for cross-platform conversions by:
- Researching and integrating a module for your ecommerce operations
- Collaborating with your development team to build user account creation and the capability to save items
Even after you’ve A/B tested your ecommerce page, continue to optimize by improving the experience for the small screen. Your mobile customers have a different set of expectations and needs; give them an experience that drives them to buy. These techniques turn the potential of your mobile ecommerce page into a channel for revenue growth!