Does Your Mobile Friendly Website Have These 10 Key Components in 2022?
Last updated May 05, 2022
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 or even xennials 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 the other day, 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
... among other things. She finally gave up and exclaimed, “I just want to purchase these vitamins!”
10 Key Solutions to a Better Mobile Experience
So, how do we present a good e-commerce purchasing experience?
- Fast Loading Speed
- Touch-Friendly User Elements
- Context-Friendly Keyboard
- Utilize Mobile Pay Platforms
- Mobile-Friendly Email
- Call to Action (CTA)
- Mobile-Optimized Checkout
- Don't Break the Back Button
- Simplfy Navigation
- Make Your Website Accessible
Here are 10 key components in detail…
#1: Fast 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%. In fact, as of May 2021, Google is putting more emphasis on loading speed by giving sites a ranking boost who meet its criteria for Core Vitals.
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 user interface (UI) 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 such as the ability to swipe through image galleries and pinch to zoom are handy enhancements mobile users are 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
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.
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.
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, user testing confirms 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
You send email if you have an e-commerce website. We all know it’s the closest thing to printing money.
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 simple, mobile-friendly hero shot and a single, simple 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 and platforms. Gmail, Outlook/Office 365 and many other platforms 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 lots of 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.
#8: Don't Break the Back Button
The back button is still the most used user interface on the web. And it's just as true on mobile.
However, after looking at user sessions, you'd be surprised how many sites still fail this test.
Users are accustomed to being able to "go back" to undo the last action they took and when it comes to things like light boxes and pop-ups, this is no different.
To make matters worse, oftentimes the close button is intentionally obscured on things like opt-in boxes so potential buyers have no choice but to opt-in or leave.
For users who don't and hit the back button, they're taken back to whatever they were browsing previously, which could be a SERP or Facebook post. Not a good experience.
How to implement: using a deep-linking technique allows a web browser to save a window's history so when a user hits the back button, they are returned to what they were doing previous to the pop-up.
9#: Keep the Top Navigation Simple
If your content is the most important thing on the page, then why does it so long to get to it?
I've seen websites where the logo alone takes up half vertical screen real estate and you have to scroll down the page to even get to the actual content you wanted to see.
And oftentimes gratuitous hero images appear on desktop which end up on mobile as well.
You can tell development and testing on mobile was not a priority for these websites.
How to implement: use analytics, testing on actual devices, and user testing to simply navigation and get to your content quickly.
#10: Make Your Website Accessible
And finally, while not strictly a mobile optimization feature, baking in accessibility to your website opens up to all users.
As the recent Dominos and Winn-Dixie lawsuits have shown us, in fact, it's becoming the law in many areas to make sure everyone has a positive website experience.
How to implement: test your websites using tools like WebAIM, Lighthouse, and Deque Axe which the the WCAG guidelines and don't forget testing with actual users!
Let’s sell some more stuff!
So there you have it, 10 effective ways to improve the mobile (and desktop) experience on your site.
When all 10 of these key components are in place, you can expect all users to stick around. And you should expect higher conversion rates.
And, you’ll get the sales, not your competitors.
Heck, maybe we might even have a shot at beating Amazon at its own game.
This content originally appeared as a guest post on Digital Commerce360 in 2019 and we are republishing with some additional updates for 2021.