StackAdapt’s latest survey report uncovered that 82% of Canadians who make online purchases say at least one thing prevents them from making purchases on their mobile device and only 11% of respondents make more than half their purchases on their mobile. As our dependence on our smartphones grows increasingly intense, why are we so hesitant to shop on them?
According to the Baymard Institute, “78% of mobile e-commerce sites perform poorly.” Mobile homepages, navigation, and on-site search experiences are frustrating at best. This is usually due to a lack of differentiation between user expectations on a mobile device vs. a desktop.
It is clear that digital marketers need to team up with their user experience designers and dev teams to fix the many oversights that lead to poor customer experiences and ultimately, poor conversion rates on mobile. It is integral that marketers show consumers that buying on mobile is the easiest and most efficient way to make a purchase. Innovation in UX has never been more important.
To that end, we’ve rounded up some of the basic rules for a frictionless mobile shopping experience:
1. Simple and Streamlined
Mobile optimization requires more than simply shifting elements to fit on a smaller screen. The reality is that mobile shopping requires “over-communication” of many basic elements taken for granted on a desktop.
Do: Clearly lay out approx. 30-40% of your top level product offerings or services on your homepage.
The Baymard Institute found that too much or too little information upon loading caused test subjects to “draw misconceptions” about a brand’s product offerings through their ubiquitous “scroll and scan” behaviour.
Mobify states that “if your site is full of promotional content, for example, or doesn’t clearly inform shoppers of the product categories, they will move on to another site.” Too many products or promotions cause your page to look “busy” and either distract the customer from their intended conversion or worse, overwhelm them and cause them to leave. Keep your offerings limited and direct, either in a list form or through visuals.
Don’t: Use auto-rotating carousels on your mobile site.
While they may look great on desktop, they are proven to cause problems on all touch devices. In one study, “The test subjects repeatedly opened the wrong slides or were disrupted while focusing on a specific slide. Not to mention that some subjects generally ignored the animating carousel content as they perceived it as an advertisement.”
Do: Keep users focused on completing the transaction by prompting guests to log in upon entering the site rather than checkout, and by prioritizing “Guest Checkout” above “Sign In” and “Create Account”.
35% of shoppers abandon their carts because a site forced them to create an account before purchasing. The most important element of the checkout process is to complete the conversion by maintaining the user’s focus: “You need shoppers 100% focused on completing their checkout if you want to get your conversion rates up.”
One vendor study states that “large-scale eye-tracking studies… find that form fields demand a disproportionate amount of users’ attention: the sign-in sections need to be collapsed, and the “guest” option placed at the top of the page.” 88% of mobile sites don’t adhere to this practice.
If nothing else, brands should keep check out fields to a minimum. Again, keep the conversion process as simple as possible to avoid a dropped transaction. Focus is key on mobile.
2. Overly Obvious
Mobile consumers tend to be skittish. Many people still don’t trust mobile transactions as securely as desktop. Because of this, aim to hold a user’s hand throughout every single step of the buying journey.
Do: Answer these three questions:
What is the main benefit of buying at this moment? Will the customer receive a discount? Free shipping? Access to new product information or special offers? Make sure your copy clearly states how the consumer benefits from the present mobile transaction.
Where am I going?
Mobile shoppers are often distracted on multiple fronts: either they are simultaneously completing real-life tasks or switching between multiple apps. Be sure to:
- Make buttons descriptive. Have your CTA describe exactly what will happen post click rather than simply stating “Next”. For example, have the button read: “Proceed to Secure Checkout” or “Buy Me Now”
- Use animation to illustrate that a transaction is occurring. A bouncing ellipses (“dot, dot, dot”) is a simple and universal sign of this.
- Display progress steps through a timeline graphic at the top or bottom of the page. Mobile users tend to be short on time and attention. Letting them know where they sit in the buying process is one way to keep them focused on completing a transaction.
Is this safe?
- Social proof
Amazon pioneered the concept of social proof when it allowed consumers to leave public reviews for each and every product. Forbes states that “88% of consumers trust online reviews as much as a personal recommendation.” This becomes even more important on a mobile device where many consumers still feel distrustful of the relatively new ability to purchase just about anything, anywhere.
- Security Icons
Another simple way to gain a consumer’s trust is to place visual icons alongside copy illustrating the payment method is secure.
3. Gracious and Giving
More than half (54%) of StackAdapt respondents cited their smartphone’s small screen as the greatest hindrance to shopping online. But with smartphone use on the rise and devices remaining generally the same size, smart marketers go out of their way to accommodate users to the point where screen size isn’t an issue. Think of your m-commerce experience as a party and yourself as the host. It’s important to anticipate your guest’s every need and even throw in a few goodies at the end of the night.
Do: Honour common screen gestures.
For example, most user’s expect to be able to zoom in and out using their thumbs and index fingers but only 40% of e-commerce sites employ this technology. If you do choose to honour this gesture, make sure to inform your users through visuals or copy (Ex/ “Double tap to zoom.”)
Don’t: Charge for shipping if you can help it.
Amazon found that “marketing expenses became fungible with free shipping.” It’s a prime example of giving a little and getting a lot. It’s quite possible that what you lose in shipping costs you gain in customer loyalty. Of course, free shipping on a minimum order is also acceptable for smaller companies.
Do: Use the right touch activated keyboard.
According to Baymard and Mobify there are 11 types of touch activated keyboards:
Nothing is worse than mistakes or misguided autocorrect when you’re trying to fill out a mobile form (often a necessary evil when purchasing on a phone). Lemonstand found that “usability test sessions showed vastly better performance on sites that utilized… purpose-built touch keyboards, especially for numeric inputs.”
For example, if you’re asking for a credit card number, employ the keyboard for numeric inputs. If you’re asking for first and last names or a street address, make sure the user has the ability to turn off autocorrect.
Coding these seemingly minor capabilities into your m-commerce solution is what will set you apart from the competition and show customers that mobile purchases can be the most convenient way to shop. Keep your users focused through a simple, communicative, and intuitive experience that feels secure. There is money in mobile for those willing to put in the time and effort necessary to create a seamless user experience.