Download our FREE Testing Toolkit for A/B testing ideas, planning worksheets, presentation templates, and more! Download Now

Optimizely Blog

Tips & Tricks for Building Your Experimentation Program

X

Download our FREE Testing Toolkit for A/B testing ideas, planning worksheets, presentation templates, and more!

Get It Now




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:

Monetate Conversions on Mobile

Monetate conversion rate data from Q4 2013 shows the low rate of conversions from mobile users.

 

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:

KISSmetrics shopping data

“A 1 second delay in page response can result in a 7% reduction in conversions. If an ecommerce site is making $100,000 per day, a 1 second page delay could potentially cost you $2.5 million in lost sales every year.” says KISSmetrics.

 

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:

  • Limiting the use of javascript
  • 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.

Walmart & Gap Mobile

Both Gap and Walmart auto-locates nearby stores and checks product inventory for in-store pickup.

 

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.

Apple Mobile Store

Apple emphasizes the latest featured product with a single, large image to promote their recent campaign. They also push navigation to their most popular product categories.

 

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.

Groupon & Ebay Mobile

Groupon and eBay use large buttons with contrasting colors to drive users towards checkout. Not many options for other paths.

 

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.

Best Buy Navigation Comparison

Best Buy alters its mobile navigation by collapsing the product pages and emphasizing deals, store locator, and account login for mobile users.

 

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.

Best Buy Mobile Navigation

Best Buy prioritizes mobile-specific navigation items and uses them on the content layout for improved usability.

 

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.

Eastbay & Office Depot Mobile

Typing in partial searches at Eastbay or Office Depot will give you a list of likely search suggestions.

 

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

Google Study for Shopping

A 2012 Google study says that 61% of online shoppers continue their experience on a PC.

 

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.

JCrew & Footlocker Mobile

J.Crew and Foot Locker both use a wishlist feature on their sites for users to save items and view them later in their account on any device platform.

 

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

Conclusion

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!

Optimizely X
comments powered by Disqus