Research forecasts the mCommerce market to have grown to $12521.25 billion by 2030, from $402.85 in 2022.
But without effective mobile UX design, eCommerce businesses wouldn’t be able to ride this trend—the reason why we got our heads together to see what we’ve repeatedly executed for 500+ clients to get their mobile sales flying.
Mobile eCommerce UX Best Practices What works for desktop shopping certainly doesn’t work for mobile shopping—so here are 27 mobile UX best practices with insights you’d best apply for better conversions:
1. Design specifically for the thumb zone This facet of mobile friendly eCommerce covers multiple aspects:
how a user holds their phone how big the screen size is what kind of hand gestures a shopper uniquely uses To design for the thumb zone is to make the actions a shopper can do with the thumb, easier and with lesser exertion:
Place CTAs towards the bottom of the screen Show up pop-ups more towards the center of the screen (with CTAs close enough for the thumb) Introduce enough space between hyperlinked text Feature a sticky nav bar at the bottom of the screen (especially on the homepage) Limit the amount of linked text and CTAs (to avoid accidental clicks & taps) Here’s a wonderful pop-up we found on Glossier’s storefront—optimized with limited text and bold yet unobtrusive CTAs that don’t make it tough for the thumb to tap:
2. Improve error validation messages Research has proven that how much information a shopper is able to put in without glitches, largely depends on how easily they’re able to perceive error validation messages.
This can make it faster for shoppers to know which fields are necessary to fill or would be great to fill either through a special character, explanatory text or both.
To improve the usability of your eCommerce storefront and increase mobile conversions , here’s what you can do:
Feature short & direct error validation messages For example, instead of a generic “this credit card payment couldn’t go through,” say something more specific like “The card number you entered doesn’t exist” Indicate corrective action clearly Instead of “this password must contain only special characters,” try mentioning “this password must contain only special characters—please try again. Get granular for super specific info For example, “please enter the minimum quantity” without specifying what the minimum quantity is, can be misleading. Here’s an example of an error message validation that scores high on specificity:
3. Optimize for hand gestures Among the most important mobile eCommerce UX best practices, is the optimizing for hand gestures—hand gestures a shopper uses on mobile typically includes:
Clicking Tapping Pinching Zooming Scrolling Swiping Selecting If your mobile eCommerce UX design isn’t optimized for these actions, the time shoppers spend on your site will reduce considerably:
Make it clear that an image can be expanded further (a typical split two-arrow sign on the bottom right works well as an intuitive visual cue ) Make use of text cards to relay quick information on discounts or categories (this is effective both for vertical and horizontal scrolling) Select a swipe area that’s at least 45 pixels tall and wide (this will prevent other swipe areas from getting triggered apart from the one the shopper is intending to activate presently) One eCommerce mobile website that clearly optimizes for hand gestures is Etsy—when you scroll, each one ends with the finger on a picture for a representative category to take attention to it or on white space that then pulls attention to associated text:
4. Highlight what’s “clickable” 88% of shoppers have had one negative experience shopping on mobile and you don’t want to add to that.
One assured way to throw off a shopper from their current journey is to delay easy spotting of what can be clicked—instead make “clickable” elements super clear on your mobile eCommerce website.
Here’s what you can do:
Establish enough white space between links and buttons Highlight CTAs upon hover (for example, for a solid black colored add to cart button, if the color changes to green when hovered over, the next step becomes clear) Pull attention to the search bar with hint text (this enables shoppers to click and start typing text more readily) On product pages , introduce the add to cart button in a sticky menu (for obvious reasons, this will nudge shoppers towards clicking that CTA) Underline text links everywhere to ensure a uniform experience across the site Avoid putting too many content blocks in colored boxes (since CTAs have a similar shape & form, this can potentially mislead shoppers into confusing non-clickable items for clickable ones) 5. Increase clicks—get shoppers to engage more One click ordering and checkout have ensured more people think the lesser the clicks, the more the efficacy of an eCommerce store.
On the other hand, in his book “Prioritizing Usability”, Jakob Nielsen speaks about how the users’ ability to find products on an eCommerce site increased by 600% after he changed the design to include 4 clicks from 3 clicks.
So the question is, for mobile UX design, how do you know when to increase the number of clicks?
When you’d rather have more steps than more distraction (a great case in point is a product finder quiz—it’s a bad idea to feature all the questions in a single slide as that can make it overwhelming, and instead feature one screen for one question to improve focus)When you’re trying to orient the shopper’s journey on the homepage (for example, you don’t want to confuse them by reducing the number of times they need to click on the primary navigation menu to go to a specific section, as this can confuse them later on)When you’re guiding them towards more information that can help a purchase (Sephora’s mobile website, for example, offers a quick snapshot of critical info on Buy Online, Pick Up in Store—however, for the full list of questions, they feature “view all FAQs” as hyperlinked text)6. Reduce confusing visual cues in the navigating menu Limited screen space on a shopper’s mobile device makes it all the more crucial for eCommerce stores to design their mobile menus better.
With two many indicators of action (typically arrows that point in various directions,) the shopper is bound to get confused—Snapdeal, for example, has too many visual distractions for easy navigation:
To make the navigating menu offer clear & simple direction in your mobile ecommerce website:
Use right & left pointing arrows only to indicate “moving forward” & “going back” in the larger hierarchy Indicate when a category opens up into sub-categories (if you’re using the accordion style of expand-collapse “+” and “-” signs may be universally relatable) Don’t oversimplify the first layer (for example, Zara uses just one-word category callouts in the main mobile menu but shoppers have no way of knowing how many in-house brands each category features) Highlight sub-categories based on importance (and in this matter, eCommerce brand Madewell can take a masterclass): 7. Embed product quiz into main menu It’s clear by now that first-party data is the way to create more personalization to drive repeat business.
And personalization quizzes are amongst the most preferred to collect first-party data, across desktop and mobile.
However, on mobile, this can be a double-edged sword because of privacy & data concerns.
A way to improve your eCommerce mobile UX around a personalization quiz is to embed it into the hamburger menu—this can especially be a great way to make first-time visitors convert .
They also highlight they have a privacy policy in place for those who’re ready to take their mattress quiz :
8. Use buttons to feature popular actions on top in the end, interactivity between desktop & user and mobile & user are very different.
On mobile devices, since the main categories and actions are often hidden within the hamburger menu, it’s best you account for shoppers who won’t click on it.
This is why mattress brand Casper exclusively brings out top categories and actions as buttons in their mobile site version:
9. Put numbers wherever multiple steps are involved Mobile shoppers are always scanning to assess the priority of information that an eCommerce brand presents to them—this is why bullets and numbers work so well to highlight the most crucial information for scanners.
Check out how Bolt Food does this to make sure their target audience does not lose out on vital information:
If you’re considering using numbers and creating content hierarchy for mobile eCommerce UX, remember the following:
Make the length of each point almost equal (Bolt follows this principle) Avoid using numbers where simple bullets could work or the information has no obvious hierarchy (this is because shoppers often look at numbers to anticipate next steps) Use images instead of numbers if your idea is to improve engagement along with the ease of scanning—here’s how Daily Harvest lists how their process works: 10. Finetune search to reveal results within the same category The search box has to suggest in a way that the shopper wants to engage further and not get distracted—offering up more results within the same category as that of the original search query becomes critical.
A study by Baymard proves that at least 50% of shoppers try to search within the category path they’re already on.
When amplifying mobile eCommerce UX best practices, make sure same category search is possible by:
Introducing keyphrases that cover a category extensively —Amazon, for example, enables search across “all categories” but also allows shoppers to see the query keyphrase in association to specific categories:Featuring all categories that closely resonate with a phrase or keyword —when you search “party” on Walmart, for example, the retail giant shows up sub-categories that can be further searched for close preferences; upon clicking these sub-categories reveal sorters and filters to narrow down further: Offering a dropdown that specifically allows shoppers to “search within” a specific category —Best Buy states this like a different line item for shoppers to understand easily:11. Keep the search icon on the right of the scope bar 21% of sites fail to do this simple optimization and end up frustrating users.
A study found that most shoppers look to the right of the scope bar to see if there’s an icon to click and submit their query—without this self-suggesting icon, they can abandon their search.
Similarly, while optimizing the alphanumeric keyboard that aids typing of search queries, introduce a “submit” or “search” button instead of “return.”
eCommerce brand ASOS takes this a notch up by showing the typical black magnifying icon against a white backdrop in the scope bar—but as soon as a shopper starts typing, the magnifying icon gets a blue highlight:
12. Bring product filters up to the top of the page Baymard studies point to the fact that only 16% of eCommerce sites offer a decent filtering experience to customers—even among those, 42% don’t show category-specific filters.
This is why, for mobile UX design, it’s important for eCommerce sites to select filters that in turn will offer differential results based on what the shopper applies.
In our experience, eCommerce brand Allbirds creates phenomenal filtering for their mobile UX—they feature the filtering option at the top right and when clicked this opens up into a partial collapsible panel showing four of the most significant filters: “size ,” “best for ,” “material ,” and “hue .”
13. Offer variation swatches through horizontal scrolling Many eCommerce businesses make the mistake of offering only a few color/variation swatches on their category pages, and hiding the rest under a +X  sign (“X” denoting the number of more variations the user can’t readily view.)
This can be highly disruptive for a mobile user, who is most likely trying to avoid unnecessary taps and clicks—to view the other variations, the shopper will need to visit the product page.
The way out of this is to make all swatches viewable through a horizontal scrolling action—however, since shoppers may not easily know they can view more swatches, using backward and forward pointing arrows may be helpful.
One eCommerce brand that effectively designs this action is Chubbies—they fit two products in each row within a template that allows for horizontal scrolling of variants and tapping to highlight a preferred variant:
14. Keep CTA microcopy super simple While you may have the instinct to play around with your CTA microcopy , it’s best to keep it simple AND striking.
Typically, for effective mobile first UX, a short set of imperative words that indicate the next steps, is ideal.
eCommerce brand Gymshark, for example, typically maintains “shop now” CTAs in black across their site, but on their product pages they introduce “add to bag” CTAs in bold red (and also go the sticky menu way):
15. Enable manual scrolling for images Quite some time back, research proved that auto forwarding carousels reduce visibility and increase annoyance.
Control reduces further on a mobile screen—so to prevent drop-offs, introduce visual cues like dots to denote progress and enable manual horizontal scrolling.
eCommerce food brand Cravers sets an example on their homepage of a featured product by bringing in all associated images—but enabling horizontal scrolling with an associated dotted cue:
16. Make it easy to control hero section videos One of the easiest ways to annoy a mobile shopper is to take control away from them.
Auto-play carousels and videos fall under this category.
While a video can be educational or engaging, it shouldn’t give your shoppers a sense of chaos and distraction.
This is why eCommerce travel brand Away makes it easy for shoppers to pause/play hero section videos with a highly accessible button at the bottom left of the video section:
17. Feature full breadcrumb paths on product pages Through their recent research, Baymard revealed that 36% eCommerce sites don’t offer a full breadcrumb path on their product pages.
For eCommerce mobile UX, this is bad news because mobile users find it more difficult to make their way through the main menu as compared to desktop users.
To do this effectively, avoid:
Turning filters into categories Including the homepage & product page layers of naming eCommerce brand Wayfair is able to offer ample information through their mobile product page breadcrumbs without making them too heavy.
18. Highlight your product page section call-outs Since scannability is an important factor in eCommerce mobile UX, you want to pin it to the last detail on your product pages—and it has to start with how easy it is for shoppers to take in the different sections of content.
Let’s take a look at how eCommerce skincare Lush does this to enhance their mobile first UX:
This approach has multi-fold benefits:
Shoppers take lesser time to read & take action Shoppers are able to discern the page’s content structure super fast Sites that do this receive better ratings for content quality & credibility 19. Offer contextual help through microinteractions Given that 38% of people will avoid interacting with your site if the content or layout is off, as an eCommerce brand you’ll need to prioritize microinteractions .
These are visual cues and depictions that create more engagement for eCommerce mobile shoppers—consider the confetti that fills the screen when a user signs up for a membership program, that’s an example of a microinteraction.
To leverage your eCommerce mobile UX through microinteractions:
Offer completion messages in a distinct color when a shopper performs an important task (like adding to cart)Feature a continuity of symbols to depict continuity of actions Create impact through timely copy 20. Label your forms for precise understanding on actions When eCommerce businesses realize that 45% of forms are submitted on mobile devices, appropriate labeling naturally becomes a priority.
To enhance the effectiveness of form labels for a better mobile eCommerce website:
Group similar fields together (this will flow like a conversation in a user’s mind) Use a single column for the information flow Distinguish between mandatory and optional fields Match the keyboard with the field input you expect 21. Divide larger forms across separate screens The moment a form you feature contains more than 8 fields, it becomes relatively complex and cumbersome—and this is even more so when you consider eCommerce mobile UX.
To reduce cognitive load under these circumstances, it’s best you feature multiple screens, each screen featuring a set of related fields.
Pro Tip: For maximum impact, maintain a white background and stretch the form to fill the entire width of a mobile screen.
One look at eCommerce brand Barkbox’s product recommendation quiz, and you’ll know what good multi-stepmobile forms should do: limit multi-choice answers to two or three, allow users to “skip a step,” and when required fields are not checked, show red highlights as error messages along with relevant text like “error: this is a required field. ”
22. Offer field focus to reduce interaction cost When you’re expecting shoppers to fill out forms on mobile, you’ll have to offer them what’s called “auto field focus .”
With this, your mobile eCommerce UX enables them to understand the beginning and ending of a form.
Here are two non-negotiables:
Always highlight the first field in the form Always highlight the field the shopper has just clicked on (to orient them to their current location) Other places in your store to leverage this feature:
eCommerce brand Wayfair always amplifies the borders of the field a shopper is about to enter or use:
23. Enable automatic address lookups for speedy checkout A study by Baymard has revealed that 55% of eCommerce mobile sites don’t help shoppers auto-correct wrongly put addresses.
On the other hand, this small tweak can help a business engage shoppers better and reduce cart abandonment.
Here are a few ways to get automatic address lookups right:
Fetch the names of possible towns, cities and states as soon as they start typing Once the address is fetched, auto-populate other related fields Ensure autocorrect constantly makes space for misspellings 24. Offer prompts to allay privacy concerns Research proves that 67% of smartphone users worry about data security and privacy issues.
To ensure your eCommerce mobile UX design addresses these concerns, bring in statements and prompts that put their mind to rest.
That’s exactly what eCommerce brand Ikea does, making agreement for shoppers easier and less time-consuming.
25. Leverage in-built device features To make the most of mobile UX best practices, leverage in-built device features in these ways:
Allow image search (with the camera) Enable voice search (with the microphone) Enable automatic location search Align with the external device keyboard 26. Offer a prompt to download your app Given that mobile shoppers using apps has increased by more than 50% in the last two years, your mobile eCommerce UX needs to make space for this change.
Nothing fancy, just some quick microcopy that can lead to shoppers knowing that you have an app, and the experience on it is even better—just like Warby Parker does:
27. Recommend limited compatible products On mobile devices, product comparison becomes a daunting task because shoppers have no way of opening simultaneous tabs for multiple product pages.
So, for greater conversions, it’s ideal to feature only those products that are very obviously very compatible with the main product—for more complex products with specs, ensure the specs feature as an obvious match.
eCommerce brand ASOS, for example, features a product tile with a compatible product in each of its product pages:
Recommended reading: 18 UX Hacks To Reduce Cognitive Load In eCommerce
Make Your Mobile Payment Page “Conversion-Friendly” (13 UX Hacks)
Product Page UX: 22 Data-backed Secrets For High Conversions
21 High-Converting Mobile Landing Page Examples to Inspire Yours
Elevate conversions with seamless mobile UX 98% of visitors who visit an eCommerce site—drop off without buying anything.
Why: user experience issues that cause friction for visitors.
And things just get worse with under-optimized mobile shopping experiences.
This is the problem ConvertCart solves.
We've helped 500+ eCommerce stores (in the US) improve user experience—and 2X their conversions.
How we can help you:
Our conversion experts can audit your site —identify UX issues, and suggest changes to improve conversions.
.svg)
.svg)
.svg)
.svg)
.svg)
