In the past few years interest in mobile website audits has increased, as eCommerce firms seek to improve conversion and revenue from mobile traffic. From the many mobile website audits I have conducted I have seen a consistent pattern of conversion problems, as well as best practices that if used properly, can greatly improve revenue coming from the mobile channel.
I like to refer to them as the 9 top tips for maximizing mobile eCommerce sales:
1. Remember the Thumb-Friendly Zone!
The majority of smartphone users are right handed, and certain areas of the screen are faster and easier to interact with using the right thumb than other areas. Designers of mobile apps and eCommerce experiences, especially those for smartphones should always remember the ‘thumb friendly zone.’
The image below demonstrates easy, medium and harder areas for quick and efficient thumb interaction.
Ensuring that important tasks and functions are thumb friendly will help with mobile eCommerce usability, and thus conversion. And another note on interaction zones, as smartphones get larger and larger in screen size, the thumb friendly area will shrink down lower on the screen.
2. Mobile Homepage Must Pass the 5 Second Test
Usability experts suggest that a website must convey three pieces of critical information to visitors within 5 seconds, else risking the visitor leaving. Those critical three pieces of information include:
- Who are you?
- What do you offer?
- Why should visitors care? (what is in it for them?)
As seen below, by evaluating the homepages of three example websites accessed via a smartphone, it is fairly easy to determine which ones would pass the 5 second test, and which ones might not.
Our first example, Shinola, a watch retailer, does a good job of informing visitors who they are (the large logo at the top), what they offer (sell watches based on the large image of the watch just below the logo) and why the visitor should care (the text below the watch image that differentiates their Brand).
Another retailer, Michael Kors, does not have a mobile optimized website, and thus forces the visitor to have to hunt for those three pieces of information in a relatively small UI. Would visitors hang in there to zoom in to better see and read the home page content? Perhaps. But why risk losing visitors on the all important home page?
Finally, Nike provides a mobile optimized website and makes it fairly easy to determine who they are, what they do, but they miss on why we should care (what’s in it for the visitor). Because of the power of the Nike Brand, they can probably get away with this, but smaller eCommerce retailers with lesser known Brands should not try this. Unless you are Nike or another globally known Brand, always include the Why content on your home page, above the fold.
3. Global Navigation Should be Easy to Find and Use
It can be argued that the most important function of the home page is to act as a guide or map to enable visitors to find the content and products that interest them. This is especially true for mobile eCommerce websites where screen real estate is so small that it requires much more scrolling and user navigation than the PC-based version of the same website.
As seen below, Shinola uses a relatively thumb-friendly UX of main navigation on the upper right side and search on upper left. Both the main navigation on the right, and the search function on the left, are easy to see and large enough that most visitors can easily interact with the buttons.
The Michael Kors example below of the non-optimized mobile site demonstrates how small, and thus relatively difficult to find and use, the global navigation is. Even for websites that are optimized for mobile, having the global navigation elements hidden, too small or too difficult to interact with is a primary way eCommerce sites lose visitors, and ultimately sales.
Nike’s global navigation as the example below shows is large, right at the top, and relatively easy to use. It includes from left to right the home page, main menu, search (which in the default state is on), shopping cart and login.
As shown below, the home page for Nike is basically just a giant navigation menu. Because of the power of the Nike Brand they can get away with this, assuming most of the world knows they sell athletic equipment like shoes, gear and more. But it is not a best practice! Lesser-known Brands need to stick to the three W’s and always include Who you are, What you Provide, and Why visitors should care content on the home page.
4. Simplify Product Category Page
Many of my clients wonder why their online mobile sales are not converting the same as their online PC-based sales. Typically poor mobile conversion is caused by overly complex product category pages, one of the prime culprits of lower mobile eCommerce sales. Trying to include too many columns of product images and descriptions, squeezing too much content into a page, or showing dozens upon dozens of products on a single very long scrolling page can confuse or slow visitors down, causing some to leave never to return.
In the examples below notice the small text caused by the non-optimized Michael Kors product category page and the relatively small product images. Typically this forces the mobile website visitor to spend larger amounts of energy (and time) on swiping, pinch zooming and scrolling just to see the products. Why put users through all that work just to read and use the site? Reducing website visitor work directly increases conversion and ultimately sales.
The Shinola product page below provides an example of larger images and text which makes for a more readable and clickable experience on small screens. Likewise, Shinola makes it very easy for visitors to immediately filter and sort products based on price, gender or series. This makes it easy for visitors to immediately start narrowing down their choices by filtering and sorting products to find those they are most interested in.
5. Make Filter and Sorting Tools Easy to Find and Use
Because of the smaller screen size, especially for devices like smartphones, mobile eCommerce requires better than average filtering and sorting tools. This is because displaying very long scrolling pages of products on mobile devices forces visitors to have to remember products, and where they saw them on the page, which can decrease user performance. Easy, simple and effective sorting and filtering tools make it much more efficient for visitors to find products that interest them, and thus can greatly help improve conversion.
As can be seen in the example below from Shinola, the filter rows are very tall, making it very easy to select a filter with even the fattest thumbs. Likewise, including the number of products that are included in each filter in the parenthesis on the right makes it that much easier for visitors to know the number of products their selection will include.
Nike provides the same type of experience. Demonstrated in this example below is the number of products available for that product category, indicated in the parenthesis on the right side of the selection button.
6. Reduce Cognitive Load
Long scrolling pages are a necessary evil with mobile product pages. However, the longer the page, the greater the cognitive load. As I like to tell my clients…
“Cognitive load is the enemy of eCommerce.”
The short version definition of cognitive load is the amount of load placed on working memory. The more cognitive load, the more working memory is filled trying to remember information. Most users have fairly limited cognitive load capacity, especially when dealing with new sites or unfamiliar content.
Thus the longer a product page is, the more scrolling is required, which forces visitors to have to remember what they saw and where they saw it (thereby increasing cognitive load).
As the comparison of the Shinola and Nike individual product pages below demonstrates, Shinola does a better job than Nike at keeping cognitive load lower. The page is shorter, but still has the content necessary to inform visitors about the product.
Note where I have indicated where the ‘fold’ of the screen is (using the screen resolution of an iPhone with Retina display). Notice how much information visitors have to remember on the Nike product page on the right, versus the Shinola page on the left. It is easy to understand why the Shinola page has lower cognitive load than the Nike product page. Shinola uses links and navigation to help visitors find the additional information they may need, which reduces the cognitive load of that page.
Also, notice the primary Call To Action, in this case the Buy Now buttons that I have identified with the red arrows. Nike has placed theirs at the very top of the page, forcing visitors to have to scroll what could be a fairly long distance to find it and click it. Shinola also has a CTA higher on the page, but not at the top. This reduces not only the amount of cognitive load, but also the scrolling required to find and click on the all important Buy Now button.
Finally, for both companies reducing cognitive load for the primary action they want visitors to take could be as easy as including another Buy Now button near the middle and or bottom of the page.
7. Provide Visibility of System Status
A basic tenant of good web or application design is to provide feedback to users when they have just taken an action. Nothing is more frightening to users than clicking a button and not receiving feedback that the system registered their click.
Nike and Shinola both do a good job of providing system status information, especially in the shopping cart and buy flow. The screen shot below demonstrates how Shinola provides feedback that the user has successfully added an item to the cart. Nike provides the same system status feedback, with a very large ‘Added to Cart’ system notice after the visitor completes the add to cart task.
This is incredibly important in the shopping cart, where error checking and validation of data entered in form fields helps users navigate the purchase process.
Notice in the screen capture below how Nike uses green check boxes to assure the user that their form data was validated as being entered correctly. Error prevention by form data validation, as demonstrated here, ensures that checkout errors are minimized as best as possible, helping to improve conversion.
8. Support User Control
Supporting user control, just like providing system status information, is another important element of successful mobile eCommerce Sales. By giving website visitors the ability to edit, adjust or change information they entered as they go through a process, conversion is optimized. This is because the cognitive load is reduced when users can go back and make quick and easy changes to data they entered.
Many of my clients have reported higher error rates on mobile form completion than with the PC-version of the exact same checkout form. This is primarily due to the cognitive load being greater for the mobile UX of the form, where more scrolling (and remembering) of information is required.
A good best practice is to always make it easy for your mobile eCommerce users to go back and edit information. This is especially true in the checkout process, even so late in the process as in the final stage of reviewing an order. Note how in the Shinola example below the primary CTA (Place Order Now) is augmented by the secondary CTA of Edit Order.
Likewise, Nike demonstrates how including an Edit button for each section of the checkout process makes it easier for users to edit or correct information.
9. Include Help Throughout the Website
Finally, but perhaps most importantly, always include the ability for mobile eCommerce visitors to ask for and receive help, especially during the buy-flow process. In conducting many mobile website audits over the past few years I have found that one of the major differentiators between higher converting and lower converting eCommerce mobile websites is providing visitors with ways to obtain help. Help in this case can include phone numbers, live chat, and or context sensitive help information.
As demonstrated below, Nike provides an example of including a customer service 800 number throughout their site, especially at the Review Order stage of their buy flow. As more and more smartphones get ‘smarter’ and offer users the ability to multi-task (visit a webpage while making a call for example) providing help to visitors with phone numbers becomes more important.
Conclusion: 9 Tips for Maximizing eCommerce Sales
The top 9 tips for maximizing mobile eCommerce sales have come from numerous mobile website audits in which optimization of the user experience using these best practices have improved conversion and revenue. By evaluating the home page user experience, identifying global navigation and product page optimizations, and ensuring a simple and efficient buy flow using these tips, mobile sales can equal sales currently being generated via PC-based sessions. For more information about how to conduct a mobile website audit review the mobile website audit page or just contact me.
Optimizing the mobile eCommerce experience using these 9 tips can and will provide a better mobile eCommerce website experience, more sales and an improved revenue stream.
Read more: