Editorial
In an iconic 1992 episode of “Seinfeld,” George Costanza cheats in Trivial Pursuit, taking advantage of an answer card misprint: “Moops” instead of “Moors.”
Fast forward 25 years, and the Moops have returned. But this time, they’re in the form of the mistakes (“mobile oops” = “Moops”) companies are making in adapting their websites to the mobile user experience.
It will shock no one to hear that the mobile user experience and the desktop experience differ dramatically. Note that “mobile,” in this context refers primarily to smartphones, since tablets have a similar usability patterns to desktops, given their size.
Despite this, in porting sites designed for the desktop to mobile, it is still common for companies to simply attempt to recreate the desktop experience on mobile. Sites that are “responsive” are considered mobile-friendly, since they adjust themselves to screen size. It’s not only about adjusting to the device. “Adaptive” sites are another way to go, as they enable tailoring by device.
At ClickTale, I’ve often observed that responsive and adaptive sites — in attempting to duplicate the desktop experience on mobile — fall short in a number of key usability areas. Below, I’ve collected five Moops that companies are making, and offer some suggestions for de-Mooping your mobile browsing experience.
Moop #1 – Love should be endless. Mobile pages, not really
Mobile users show a clear pattern of behavior when they land on a new web page: they first scroll down to the bottom of the page, then scroll back to the top. Why? They want to know up front what they’re getting into. Visitors ask themselves whether the commitment of diving into the page is worth it.
And indeed, the next step on long mobile pages is frequently abandonment. Now, perhaps these visitors are planning to revisit the page on their computers — and perhaps they’ll actually remember to do so. But given the fickle nature of online consumers, don’t count on it.
The nature of mobile browsing is in its immediacy. It’s available on the fly, when customers are between meetings, or grabbing a bite to eat. Adapt your mobile design to the way users behave on mobile sites: tight text, large fonts, short pages and finger-friendly navigation.
Need inspiration? Look at any app. That’s the experience your users expect.
Moop #2 – Pinching and tilting are virtual waterboarding
Part of my job is to watch session replays for our customers. These are actual mobile users using actual mobile websites. There’s clear trend of usage on text-heavy sites — users spend massive amounts of time pinching, tilting and zooming.
These customers really, truly want to see what your site has to say — but it’s hard on a five-inch screen. Why are you torturing them?
Mobile sites should provide users with a sense of control. Get your message across with short, memorable headlines and no more than one paragraph of text.
The rule? If it’s not comfortably visible on a five-inch screen without zooming, it’s too much. Everything else needs to be available via a clear information hierarchy accessible via a slide-out menu, and augmented by intelligent search functionality.
Moop #3 – Too many CTAs leads to inaction, not action
Too many cooks spoil a broth, and too many CTAs confuse the mobile user. A mobile page with too many calls to action — links, buttons, banners, whatever — does not create a sense of rich choice in mobile visitors, as it does on the desktop. It confuses them, overwhelms them and often chases them away.
On sites with too many CTAs, we frequently see multiple mistaken taps, and frantic clicks on the Back button to try and correct them. Moreover, we see desperate pinching in an effort to hit elusive and microscopic text links.
CTAs on a mobile site should be literally few and far between. They should be full screen width — making them amenable to one-handed use. If you must use text links, make them large. But best to focus on a few, well-spaced graphic CTAs.
Case in Point
In addition to actual page content, the mobile site of one online retailer had a large header that displayed various promotions and discount offers.
So where’s the problem? Promotion is what mobile commerce is all about, right?
And indeed, we found that visitor attention was more focused on the actual page calls to action further down the page, and less on the promotional header. However, we also found, pursuant to Moop #1 above, that not everyone was scrolling down enough to see the calls to action.
By dropping a marketing promotion (the header) in favor of user experience (easily accessible CTAs), the website raised conversions by over 4 percent, and saw a substantial bump in revenues.
Moop #4 – A poor formative experience
Forms are where your customers open themselves up to you, and it’s crucial that they feel comfortable doing so. They’re one of the most sensitive friction points in any funnel. And this sensitivity is compounded on mobile.
If long forms are bad on desktop, they are a disaster on mobile. Drop offs and abandonment are more common on forms that extend below the five-inch fold, and we see a dramatically higher error rate on submission from mobile visitors. Forms can also be hard to see, as they tend to get partially hidden by pop-up keyboards.
Learning Opportunities
Webinar
May
30
ChatGPT and the Future of Conversational AI
This discussion explores various aspects of AI implementation, ethical considerations, and challenges for your organization.
Webinar
May
31
The Evolution of Employee Listening - 2023 Trends & Best Practices
Learn proven effective methods and solutions to supporting an inspirational future of Employee Voice
Webinar
Jun
1
How organizations can design, build and run Generative AI into the Customer Experience
Discover how to drive enhanced CX through Generative AI
Webinar
Jun
6
The Future of Social Media: Emerging Trends and How to Stay Ahead of the Curve
The impact of emerging technologies like AI on social media
Webinar
Jun
7
The Building Blocks of Personalization
This webinar will explore how personalization can create powerful ecommerce shopping experience.
Webinar
Jun
13
The Future of Contact Centers with AI at the Helm
Learn how to balance human intuition and interaction with the potential uses of AI to create delightful and lasting CX
Webinar
May
30
ChatGPT and the Future of Conversational AI
This discussion explores various aspects of AI implementation, ethical considerations, and challenges for your organization.
Webinar
May
31
The Evolution of Employee Listening - 2023 Trends & Best Practices
Learn proven effective methods and solutions to supporting an inspirational future of Employee Voice
The remedy? Short forms in bite-size chunks. Cut out extraneous fields. Mobile forms should require the absolute minimum of information.
Also, break the process into steps. Better four no-scroll steps than one long form.
Moreover, make sure your mobile forms have inline validation in all possible fields. This corrects errors on-the-fly, and avoids errors on submit. And if there are errors on submit, don’t erase the information already entered, unless there’s a serious security-oriented reason to do so.
Finally, make sure you offer a “show password” option on login forms, so users can see what they’ve typed. And wherever possible, lower the typing required by offering popup visual interfaces like calendars for date entry.
Moop #5 – Leave the anticipation to the ketchup manufacturers
As the 1970’s ad taught us, anticipation is positive in the context of thick, rich ketchup.
For the mobile user experience, however, it’s a death sentence.
Your visitors expect the mobile experience to be as fast as the desktop. Despite this, weaker mobile computing power and lower bandwidth over mobile data connections make this challenging. It’s not uncommon to see multiple, frustrated taps on top-of-page CTAs, before the full page has loaded. This is generally followed by abandonment, when the site — not yet fully loaded — fails to respond.
To eliminate visitor anticipation on page load, lighten your mobile pages drastically. Reduce image weight, even at the expense of resolution. Avoid complex and heavy navigation gimmicks like carousels. Streamline JavaScripts and other code, and simplify CSS.
After page load, try to provide instant feedback wherever possible. For example, instead of just waiting for a response to form submit, provide instant graphic feedback with a “pressed button” or “processing ...” graphic. Adopt “lazy load” technology, which loads below-the-fold content only when the user scrolls down.
The Bottom Line: Vanquish the Moops!
The actual Moors (Muslims from the Maghreb) swept into Europe in the eighth century, eventually controlling most of modern-day Spain, Portugal and part of southern France. They were a whirlwind that European armies were hard-pressed to contain.
The Moops, in contrast, can be easily vanquished.
Awareness is, as we all know, the first step to attacking any problem. The awareness that mobile and desktop usability are markedly different should lead to a comprehensive reexamination of your mobile user experience. Mobile devices have unique user behavior, and websites should be customized for users on the go.
In short, try to make your mobile site as close to an app as possible.
Today, there are advanced technologies that will allow you to understand your mobile users so that you can facilitate a smooth experience for your users and advance your mobile KPIs.
Learn how you can join our contributor community.
