12 Mobile UX Mistakes That Cost Online Stores Sales

Good ecommerce mobile UX means a shopper can find a product, understand it, trust you and pay, all with one thumb on a small screen and a patchy connection. Many stores still fail at one of those steps, usually because the site was designed on a large monitor and then squeezed down to fit a phone. The twelve mistakes below are the ones we see most often when we review stores. None of them needs a redesign to fix, and each one you remove makes buying easier for the majority of your visitors.

Why mobile deserves its own attention

A phone is not a small desktop. Shoppers hold it in one hand, often while doing something else. They tap with a thumb rather than click with a precise mouse. They switch between apps, lose signal in lifts and trains, and have little patience for pages that load slowly.

Google also judges your site mainly by its mobile version, a practice it calls mobile-first indexing. So a weak mobile experience can hurt both your sales and your search rankings. The good news is that mobile problems are usually easy to spot once you look for them in the right way.

Navigation and search mistakes

1. A menu that hides what you sell

A hamburger icon that opens a long, unstructured list makes shoppers work hard to find a category. Put your most important categories at the top of the menu, use clear names customers would use, and show subcategories one level at a time. Consider showing your top three or four categories as visible shortcuts on the home page, so most visitors never need the menu at all.

2. Search that is hard to find or hard to use

Many mobile shoppers go straight to search. If the search box is hidden behind a small icon, or returns nothing for a simple misspelling, they leave. Show a visible search field at the top of the page. Make sure it suggests products as people type, tolerates common spelling mistakes and understands product codes if your customers use them.

3. Filters that take over the screen

On category pages, filters are essential but often clumsy on phones. A filter panel that reloads the page after every tick, or hides the "show results" button below the fold, frustrates shoppers. Use a full-height filter panel with a fixed button at the bottom that says how many products match, and apply the filters together when the shopper taps it.

Product page mistakes

4. Tap targets that are too small

Colour swatches, size buttons, quantity steppers and links squeezed close together lead to mis-taps and frustration. Make every interactive element at least as large as a fingertip, with space between neighbours. The WCAG guidance on target size is a useful reference, and larger is better for buttons that matter.

5. The add-to-cart button disappears

On a long product page, the main button often scrolls out of sight while the shopper reads reviews or specifications. When they decide to buy, they have to scroll all the way back. A slim, sticky bar at the bottom of the screen with the price and the add-to-cart button solves this. Make sure it does not cover other important content.

6. Images that do not zoom or swipe

Shoppers expect to swipe through product photos and pinch to zoom. Galleries that need tiny arrows, or images that open in a separate page that is hard to close, get in the way. Use a swipeable gallery with clear position dots, and make sure zoom works with normal touch gestures.

7. Walls of text

Long paragraphs that look fine on a desktop become endless scrolling on a phone. Break descriptions into short sections with clear headings. Put the most important facts, such as size, materials and delivery time, near the top. Move detailed specifications into expandable sections that shoppers can open if they need them. Our guide to product page best practices covers what to include.

Pop-ups, banners and other interruptions

8. Pop-ups that block the page

A full-screen pop-up that appears the moment a shopper lands, asking for an email address or announcing a sale, is one of the fastest ways to lose a mobile visitor. Google also warns against intrusive pop-ups that make content hard to reach on mobile. If you want sign-ups, use a small banner, a slide-in that appears after the shopper has engaged with the page, or a form at the end of the content. Always make the close button large and easy to find.

9. Too many fixed elements

A sticky header, a cookie banner, a promotional strip, a chat bubble and a sticky add-to-cart bar can together cover a third of a small screen. Review everything that stays fixed while scrolling. Shrink the header as the shopper scrolls, keep the cookie banner compact, and move the chat button somewhere it does not cover prices or buttons.

Checkout and form mistakes

10. Long forms with the wrong keyboard

Typing on a phone is slow and error-prone. Every unnecessary field costs you orders. Remove fields you do not need, use address lookup, and set the correct input type for each field so phones show the right keyboard: a number pad for phone numbers and card numbers, an email keyboard for email addresses. Turn on autofill so the browser can complete saved details.

11. No express payment options

Entering card details on a phone is a common point of abandonment. Digital wallets let returning shoppers pay with a fingerprint or face scan, without typing their address or card number. Show these options at the top of the checkout, and in the cart for shoppers who are ready to buy. Our article on how to reduce cart abandonment explains other checkout fixes worth making at the same time.

12. Errors that are hard to see and fix

When a shopper submits a form with a mistake, a red message at the top of a long page is easy to miss on a phone. Show each error next to the field it belongs to, in plain words, and move the focus to the first problem. Check fields as the shopper leaves them, not only when they press the final button.

Speed: the mistake behind many others

Slow pages make every other problem worse. A shopper who waits several seconds for a product page is already halfway to leaving before they see your photos. On mobile data, heavy pages hurt even more.

• Serve images in modern formats at the right size for each screen.
• Load images further down the page only when the shopper scrolls near them.
• Remove apps, tracking scripts and widgets you no longer use.
• Use a good host, page caching and a content delivery network.

Measure the speed real visitors experience, not just a test from your office network. Google's Web Vitals reports in Search Console show how your pages perform for real mobile users.

How to test your ecommerce mobile UX properly

You do not need a lab to find most mobile problems. You need a phone, some patience and an honest eye.

1. Use real devices. Test on at least one recent iPhone and one mid-range Android phone. Cheaper phones reveal speed problems that flagship phones hide.
2. Use mobile data. Switch off Wi-Fi and browse your store as a customer would on the move.
3. Use one hand. Try to find, choose and buy a product using only your thumb.
4. Watch other people. Ask five people who have never used your store to buy something while you watch silently. Note every hesitation.
5. Check your analytics. Compare conversion rates by device. A large gap between mobile and desktop usually points to a mobile-specific problem.
6. Repeat after changes. New apps, themes and campaigns often bring new mobile problems with them.

Fix the problems in order of how many shoppers they affect. A slow home page or a clumsy menu touches almost every visitor, while a rare form error affects only a few. Start with the pages that bring the most mobile traffic, usually category and product pages, and work towards checkout. Then re-test on the same phones so you can see the difference for yourself.

Frequently asked questions

Want to know what your mobile shoppers are struggling with? Ask us for a mobile UX review, or see how our e-commerce design team builds stores for phones first.