David Ritter, design director, Ritter Knight Creative
After having spent over 20,000 hours helping merchants online, I’ve seen mobile usage explode. Yet, shopping online on a mobile device can still be a pain.
Because of the limited screen size, mobile still presents unique challenges to merchants.
When I purchased the first iPhone in 2007, many of my coworkers at the ecommerce company I was developing at believed I was nuts for spending $600+ on a new gadget. (Fast forward to today, the latest devices from Apple and Samsung are now offered for $1,000 or more!)
But I wanted to make sure our company’s ecommerce website was ready for mobile because I didn’t want them to miss out on millions of dollars in potential mobile sales.
Now, over a decade later, I still see lots of ecommerce merchants making many of the same mistakes they made back in 2007. But now that mobile is ubiquitous, these mistakes represent much bigger problems—costing merchants billions of dollars worldwide in sales.
The Mobile World
The Pew Research Institute estimates that 95% of Americans own a cell phone and 77% a smartphone. So if millennials aren’t enough to convince your website to go “all in” on optimizing mobile, consumers of ALL ages, are using mobile devices to research and make purchases.
In fact, mobile usage has actually stopped gaining in users in the United States—we’re now at the saturation point. Even with these huge numbers, we still run into websites almost daily that offer a poor mobile experience.
Just yesterday, as a “professional shopper” my wife (and millennial), was complaining about her recent experience on a mobile shopping excursion which featured:
- Difficulty in accessing the cart
- Tiny images
- Hard to compare the actual choices of products
- Slow loading times
- Unable to close the pop-up
She finally gave up and exclaimed, “I just want to purchase these vitamins!”
So, it turns out, a really awesome mobile experience is still quite a rarity, so having a good experience can put your website on good terms with users. And ultimately this will increase stickiness… and profits.
7 Key Solutions to a Better Mobile Experience
So, how do we present a good mobile experience?
- Loading Speed
- Touch-Friendly User Elements
- Context-Friendly Keyboard
- Utilize Mobile Pay Platforms
- Mobile-Friendly Email
- Call to Action (CTA)
- Mobile-Optimized Checkout
Here are 7 key components in detail…
#1: Loading Speed
Despite the technology and Internet speeds increasing every year, a mobile device still doesn’t have the processing power of a traditional PC or Mac desktop computer.
And it seems just when sites are just “fast enough” we start to add more cruft to them to slow them down.
As I mentioned earlier, many users are “mobile-only”, meaning this is how they browse the Internet.
It’s a classic case study, but most know that Amazon found for every 100 milliseconds of latency (or, one-tenth of a second), it cost them 1% in sales. And, according to Cloudflare, Walmart found that for every 1-second improvement in page load time, conversions increased by 2%.
Google found an extra 0.5 second in each search page generation would cause traffic to drop by 20%.
So how fast is fast enough? Loading speed is not an exact science but perception plays a huge part.
If your site “feels” slow, even if your testing data says it’s fast, it’s still slow. Aim for 2-3 seconds.
How to implement: Using tools like GTMetrix.com, WebPageTest.org, and Google’s mobile-friendly test (inside their Search Console) can help find where pages are slowing down.
#2: Touch-Friendly User Interface Elements
From hero shots and image carousels to event calendars or anything in a chart or table, these elements often need to be finessed when it comes to mobile.
We see drop-down menus and navigation bars being especially problematic, as each mobile platform can implement differently.
If you’re also a brick and mortar, dealer and store locators using maps also need lots of coaxing to work well on mobile. A zooming map can work well on a big screen but asking a user to pick a location on a map with 20 other pins near it can be a frustrating chore.
Make sure UI [user interface] elements are big enough to actually be touched. It’s easy to take elements from desktop or tablet views and scale them down to mobile but take extra care to consider their size.
Also, some UI elements that are expected can be missing. Being able to swipe through image galleries and pinch to zoom are handy enhancements mobile users are also expecting to see on your product description pages.
How to implement: Nothing beats an old-fashioned usability test, but using tools like Crazy Egg and HotJar can let you “see” what users are doing in real-time.
#3: Context-Friendly Keyboard
Back when Steve Jobs demonstrated the iPhone, he announced that Apple famously had done away with the typical BlackBerry-style physical keyboard. This made text input harder for many users, but it also made it more flexible at the same time—when done properly.
If you’ve ever received an order with the wrong street address, “autocorrected” to something “close” but sometimes hilariously wrong, it’s likely the user’s mobile keyboard was to blame.
Not only does this cost merchants time, but it’s also frustrating for users.
While always getting better, text input on mobile devices is still tricky. And according to Baymard, many websites are still displaying the wrong keyboard for input fields, such as Credit Card Number, Security Code (CVC/CVV), Phone Number, and Email Address.
And many websites “auto-fill” doesn’t work at all.
How to implement: website developers should be turning off autocorrect for certain fields, and applying the correct “autocorrect” and “autofill” labels are applied to each form input.
#4: Utilize Mobile Pay Platforms
Speaking of text inputs above, the best form input is the one that never needs to get entered since it’s already stored.
Similar to autofill, many user tests confirm that consumers loathe text input, especially when it’s the same information they’ve already entered.
One of the reasons that Amazon rules the ecommerce roost is because it already has most users’ information. And Amazon does a great job of reusing customer information.
Storing credit cards, shipping addresses, and many other things are now expected features of an ecommerce website.
Apple Pay, Google Pay, Chase Pay, and Samsung Pay are just a few of the many different ways consumers can save time paying online.
When you implement platform-specific features into your store, because shoppers have already used and trust those features, that chain of trust often cascades down to your store.
How to implement: many ecommerce payment gateway solutions are now including support for mobile platforms. Ask your development team if your platform and gateway can support mobile payments and decide on which to support. Apple Pay and Google Pay are the most popular and straightforward to set up.
#5: Mobile Email
As a merchant, you send email. We all know it’s the closest thing to printing money for an ecommerce store.
If our goal is to get users to stay on websites, then the vehicle that gets them there should be mobile too.
Guess what sort of device those emails are opened on? Right, a smartphone. According to Fluent, 78% of Americans primarily check their email on a smartphone.
Yet why are brands still sending old “table” based emails with 10 columns of products when only 2-3 products can realistically be seen?
No wonder why email open rates are down—consumers simply can’t read your email!
In light of this, many brands have simplified their emails considerably. Much like websites, they include a hero shot, a single call to action.
And if you send frequently, users are more likely to respond to small, bite-sized emails than throwing lots of darts (products) at the wall (email) and seeing which ones stick.
How to implement: spend the time testing emails to confirm readability in multiple email clients. Gmail, Outlook/Office 365 and many other render emails vastly differently, especially on mobile.
#6: Mobile-Optimized Checkout
Similar to Apple Pay above, the best checkout makes it simple for users to actually complete it!
With over 70% checkouts abandoned, it’s not hard to see why: when users have to type in superfluous information or the checkout simply looks intimidating, they will leave.
How to implement: The “single-page” checkout is popular with desktop users because it all fits on one screen. However on mobile, consider multiple, smaller screens instead of one long page.
#7: Calls to Action (CTA)
This isn’t necessarily a mobile optimization technique but making sure your users actually know where to tap to get the information they desire and how to checkout is important!
With screen real estate the way it is, oftentimes putting the multiple calls to action on the same screen (at the top and bottom) can be beneficial.
For example: on the cart page, getting the subtotal and a “checkout” button at the very top can increase conversions by allowing users to continue on quickly.
How to implement: what’s the single most important primary action a user should take on this page? Call it out. Whether it’s continuing the checkout or adding something to a user’s cart, make it stupidly obvious.
Let’s sell some more stuff!
So there you have it, 7 awesome ways to improve the mobile experience on your site.
When all 7 of these key components are in place, you can expect millennials to stick around. You can expect higher conversion rates.
And, you’ll get the sales, not your competitors. Heck, maybe we might be able to even beat Amazon at its own game.
Ritter Knight is an ecommerce design and digital marketing agency.