Mobile App UX Trends: The Current State of Mobile App UX (10 Common Pitfalls & Best Practices)

Baymard’s 2024 benchmark of Mobile App e-commerce UX — based on our extensive Premium research findings — contains 8,000+ mobile app elements that have been manually reviewed and scored by Baymard’s team of UX researchers (see the benchmark performance below).

Additionally, we’ve captured 7,000+ worst and best practice examples from leading e-commerce mobile apps in the US and Europe (performance verified).

In this article, we’ll analyze this dataset to provide you with the current state of Mobile App UX, outlining 10 common mobile app UX pitfalls and corresponding e-commerce best practices applicable to most mobile e-commerce apps.

The Mobile App UX Benchmark Performance

Our findings are gathered from 8,000+ mobile app usability scores for the 26 benchmarked mobile apps across 39 topics and plotted in the scatterplot above.

The scatterplot features these individual site scores. Each dot, therefore, represents the summarized UX score of one mobile app across the guidelines within that respective topic of the mobile app e-commerce experience.

The first row lists the overall (or averaged) e-commerce UX performance of each individual mobile app. The rows that follow are the UX performance scores within these 39 topics that constitute the overall Mobile App UX performance.

The Current State of Mobile App UX

As the scatterplot shows, the averaged Mobile App e-commerce UX performance for these leading benchmarked apps is decidedly “mediocre”.

In fact, 80% of mobile apps are tightly clustered in the “mediocre” category with just 12% faring “decent” and 8% at “poor”.

Further, none of the benchmarked mobile apps rated “good” or “perfect” overall, leaving considerable room for improvement in the e-commerce user experience.

This article explores a variety of common pain points affecting mobile apps and recommends solutions to propel apps ahead of competitors that remain mired in mediocrity.

Specifically, we’ll discuss 10 UX pitfalls across 6 topics, sourced from 4 of Baymard’s Mobile App themes:

1. Mobile App Homepage & Category Navigation: Homepage
2. In-App Search: Search Form & Logic and Search Autocomplete
3. Mobile App Product List & Filtering: List Layout
4. App-Wide Design: Touch Interfaces and App-Wide Features & Navigation

(Note: These topics were chosen for being interesting or suitable for discussion in an article. Premium members can access the full list of topics by navigating to the Mobile App theme. If you’re interested in trying out a Premium subscription, head over to our Premium research page for more details.)

Mobile App Homepage & Category Navigation: 2 Pitfalls to Avoid

The Mobile App Homepage topic fares far better than others in the Homepage & Category Navigation theme, yet 32% of the benchmarked mobile apps rated “poor” or worse.

The homepage experience drives crucial first impressions for first-time visitors, so it certainly deserves all the attention it can get.

Indeed, usability testing shows that when a subgroup of participants initially failed to find expected products and paths from the homepage, some were quicker to consider abandoning an app.

Highlighted next are 2 pitfalls that create friction on the Mobile App Homepage.

1) 56% of Mobile Apps Don’t Include the Full Scope in Homepage Links

While providing quick access to tailored lists of products on the homepage can help alleviate some of the problems inherent with mobile app e-commerce experiences, there’s a catch.

Notably, if users fail to notice they’ve selected a narrowly scoped path, they can misinterpret the product catalog entirely.

Mobile app usability testing shows that, for some scoped paths, a subgroup of participants never noticed that they were viewing a more narrow list of products.

Consequently, these participants often abandoned the app, thinking that the brand’s catalog didn’t have the products they sought.

For example, users may be unaware that they tapped into “Kids’ Clothes” in a “Back to School” promotional ad instead of the broader “Kids’ Clothes” category.

Details that seem obvious when designed are often overlooked by users who scan text strings quickly and rely more heavily on the page’s visual elements.

When providing a path to a narrower scope on the homepage, always specify the full scope of the featured paths to prevent misunderstandings.

Clearly worded paths on the homepage are time savers, allowing users to avoid unexpectedly narrow results and backtracking.

To remedy this common pitfall, design your mobile app to:

1. display only top-level categories on the homepage, and
2. describe the full scope in the text link or button (instead of relying on text outside the link).

2) 72% of Mobile Apps Create Issues by Displaying Overly Prominent Ads on the Homepage

During testing across all platforms, overly flashy ads in a prime content location on the homepage (particularly in the upper part of the page) were often met with negative reactions from users, and pop-up banners and overlays were met with even greater disdain.

Meanwhile, our mobile app testing revealed that homepage ads, especially those taking up lots of space in the viewport, can cause even more severe issues:

• preventing users from gleaning an overview of the products
• overwhelming users with a cluttered homepage
• creating friction through unintentional interactions with them

Therefore, especially for mobile apps, it’s critical to be particularly mindful of the size, placement, aesthetics, and integration of ads within the overall homepage design.

If ads are placed on mobile app homepages, ensure they aren’t overly prominent or visually distracting to avoid interfering with users’ product-finding tasks.

For inspiration on Homepage designs scoring “perfect” overall, see Wayfair and Crate & Barrel.

In-App Search: 3 Pitfalls to Avoid

Within our In-App Search theme, the Search Form & Logic and Search Autocomplete topics have the unfortunate distinction of hosting many mobile apps that fare even worse than “poor.”

While search is often the most efficient way to find a product, it’s easy to understand why manually typing on a mobile device’s small touch keyboard can be a headache.

Users expect to create and iterate search terms easily and use relevant autocomplete suggestions to save time, which is why we often observe participants becoming especially irritated when a mobile app fails in this regard.

This section showcases 3 pain points where it’s worthwhile for mobile app teams to improve their In-App Search UX.

3) 53% of Mobile Apps Don’t Persist Users’ Search Queries in the Search Field on Results Pages

During usability testing, we’ve observed participants frequently needing to alter the words they type into the search field when the results are unsatisfying.

When the search results display and search terms are cleared — either immediately or when the user taps on the field again — users must start from scratch each time to adjust their query.

Indeed, failing to persist the carefully entered search terms on mobile apps introduces friction at the worst possible time: exactly when users haven’t received a relevant set of results (hence the need to iterate).

Consider that users already must grapple with small tap target sizes and numerous taps to backspace-delete characters before typing new ones — both of which are tricky interactions.

For mobile app users attempting to revise text in the middle or beginning of a search field, just trying to position the input cursor precisely in the search field can make the act of searching exceedingly tedious.

Persisting search queries on mobile apps, therefore, reduces the overall burden of searching and makes any iteration a smoother experience.

Indeed, when search terms are retained after the search results page loads, users are better equipped to continue their product finding, despite receiving:

• too many search results
• too few search results
• unexpected search results

4) 96% of Mobile Apps Don’t Provide a Submit Button next to the Search Field

When searching for products on mobile apps, users won’t always look towards the touch keyboard to submit their searches.

Indeed, some users will peruse the search field UI first, pausing and scrolling around as they fail to notice or recognize the submit button on the touch keyboard provided by the mobile OS.

During mobile app testing, we’ve observed that the absence of an explicit search submission button in the UI impedes the search process and increases the potential for errors such as inadvertently cleared search terms.

Further, hidden search fields that are accessed via a search icon coupled with having to use the inherently more difficult touch keyboard create additional pain points.

Thus, users will often become severely frustrated by the friction produced while trying to submit a search — a seemingly basic task.

On the other hand, positioning an explicit submit button directly next to the search field aligns with users’ expectations, enabling them to both rapidly refine the text and submit the search without delay.

To better support those who do use their touch keyboards for search tasks, the keyboard’s gray-by-default “return” button can be optimized to display the word “search”, along with styling the button blue to create a much stronger call to action.

Thus, combining a submit button directly in the search UI with an optimized touch keyboard helps ensure an intuitive and efficient mobile app search experience, regardless of the user’s favored method for submitting a search query.

5) 45% of Mobile Apps Use Repetitive and Irrelevant Autocomplete Suggestions

When autocomplete suggestions are well designed on mobile apps, they help users quickly narrow down their desired search scope.

However, mobile app testing shows that duplicative or irrelevant autocomplete suggestions are unhelpful as they conjure confusion and slow the search process.

Duplicative suggestions are those that add noise and elongate the list, appearing as separate suggestions even though they are essentially the same thing (think “camping tent” and “camping tents” or “kid’s shoes” and “children’s shoes”).

Irrelevant suggestions are those that appear at the top of the suggested list but have no direct relevance to the user’s search, such as showing suggestions for women’s purses and shoes when “women’s wallet” is entered.

When faced with poor autocomplete suggestions, users must decide whether to choose an imperfect suggestion, refine their search query, or browse the categories instead — all actions that can hamper their quest to find the desired product.

Avoid irrelevant and redundant entries to ensure that the suggested queries in the autocomplete feature are relevant and helpful.

Lists scoped to the most meaningful suggestions streamline users’ search tasks and help build trust in your app’s search feature.

Key recommendations for providing better In-App Search UX include:

1. Use search log data to rank query suggestions but not produce them, identifying the high-performing search queries and demoting or skipping those that perform poorly.
2. Map queries that are semantically identical so that only one appears in the autocomplete suggestion list.

For inspiration in Search Form & Logic, see “Walmart, which scores “perfect” overall, along with Lowe's and Target, which score “good”. For Search Autocomplete, apps with a “perfect” score include Amazon and Macy's, among others.

Mobile App Product List & Filtering: 2 Pitfalls to Avoid

Within the Product List & Filtering theme, 76% of benchmarked mobile apps fared “mediocre” to “poor” for the List Layout topic, suffering from disjointed and cluttered lists and a lack of orienting elements.

In particular, efforts to streamline the mobile app interface appear to have decreased the ease of use of product lists compared with the UX of their desktop counterparts.

This unsatisfactory performance leaves mobile apps with much room to improve, particularly in helping users understand their current scope and compare and assess items in product lists.

Next, we cover 2 egregious List Layout issues that befall mobile apps.

6) 96% of Mobile Apps Don’t Provide Hierarchy-Based Breadcrumbs in Category Product Lists

Space constraints on mobile apps drive the visibility of many key features, in many cases demoting access to the very tasks on which users heavily rely.

It’s no surprise that we’ve observed mobile app participants struggling to browse through categories in product lists that are hidden by default in hamburger-style menus or find search fields hidden behind an icon.

Without the benefit of hierarchical breadcrumbs, users can become disoriented because they are unclear of where they are within a category and do not have a visible way to traverse back or across categories.

Indeed, we’ve observed participants in testing abandon their attempts to find products when managing the scope of a product list was too difficult or required too much effort.

Hierarchical breadcrumbs serve to answer 3 key questions: “Where have I been? Where am I now? Where can I go?”

Mobile apps that implement tappable breadcrumbs help users orient themselves and more easily broaden their scope within a category directly from product list pages.

These hierarchy-based breadcrumbs are particularly useful for users who land on a category product list deep within the app’s hierarchy, helping to make clear where they are positioned within the product catalog.

Ideally, mobile apps should display hierarchical breadcrumbs and include multiple levels of the hierarchy so that users can navigate up more than one level at a time.

7) 100% of Mobile Apps in our Benchmark Use Endless Scrolling

Users browsing a product list or search result page must often load additional products if the first page of items doesn’t match their needs.

While three implementation methods exist—pagination, the “load more” action, and endless scrolling — the latter is by far the most harmful — yet is the one that is used by all apps in our benchmark.

The endless scrolling technique creates 3 significant problems for users:

• They can become overwhelmed with managing a lengthy list with no end in sight.
• They find it difficult to access the critical information that lives in the page’s footer.
• They lose out on the “natural stopping” points provided by the pagination and “load more” actions that allow them to pause, consider, and refine the items already displayed.

In mobile app testing, participants found this technique particularly troublesome because the smaller viewport makes it hard to determine how many new items have been added because so few can be viewed at once.

It is noteworthy that while endless scrolling offers less friction in terms of surfacing the next set of items, it also promotes a type of “mindless browsing” that interferes with users’ ability to find suitable products — obviously the larger goal.

While none of the mobile apps in our latest benchmark used it, the “load more” method gives users control over when to view more products and offers a place to pause and consider more carefully those items already fetched.

For inspiration on the overall Mobile App List Layout topic, consider Kroger.

App-Wide Design: 3 Pitfalls to Avoid

The Touch Interfaces and App-Wide Features & Navigation topics cover UX experiences that occur across the entire mobile app.

Therefore, this collection of guidelines can help shape — think make or break — users’ overall impression of a brand’s app while shopping.

Touch interfaces that are sized and spaced properly on smaller devices are paramount to avoiding mistaps and errors, yet 84% of mobile apps struggle with these conventions.

The UX for other types of app-wide features are far less troublesome on average, with only 15% of mobile apps in our benchmark scoring less than “decent”, but many mobile apps still have room to improve.

While many mobile apps now excel at applying mobile e-commerce UX conventions, this final section spotlights 3 pitfalls that still produce app-wide friction.

8) 42% of Mobile Apps Use Excessively Tall Horizontally Scrolling Components

Unlike on desktop sites, users must constantly interact with mobile app pages to browse for products and information.

With most pages taking up more than just one viewport, vertical scrolling is a practical necessity.

During testing, horizontally scrollable content sometimes accidentally “hijacked” participants’ intended vertical movement down the page.

Very tall horizontally scrolling components that take up over 50% of the viewport are the likeliest culprits of this friction as they tend to reside in the areas users naturally tap to scroll down the page.

Albeit a more minor point of friction, repeated occurrences can frustrate users who simply want to scan down the full page.

These 2 techniques reduce this glitch in users’ scrolling UX:

1. Avoid horizontally scrolling components altogether, instead showing all content in the viewport by default.
2. For non-critical content, ensure horizontally scrolling components take up less than 50% of the vertical height available.

Reducing the height of this type of component is recommended for content that is not critical to users’ product-finding activities, such as promotional ads, cross-sells, and other secondary content.

Meanwhile, it is entirely appropriate to devote more height to horizontally scrolling content that is crucial to users’ decision-making, such as visually rich image galleries on product pages.

In these cases, the importance of the content to the user’s primary task outweighs the scroll-hijacking considerations.

By carefully weighing which elements on the page are high-priority versus supplementary, mobile app teams can better decide how to properly size or avoid horizontally scrolling components.

9) 73% of Mobile Apps Don’t Support Pinch-to-Zoom

Unsurprisingly, users expect to be able to use touch gestures in mobile apps, and zooming in on an image (or other content) using the pinch gesture is widely considered a standard convention.

We’ve observed that users in mobile app testing are extremely frustrated by the inability to zoom in easily on the main product image to inspect visual or written product details.

Sometimes, the primary image in the product list or the product page’s image gallery is the only place that users spend time considering whether the product is a good fit (i.e., they don’t review the other content on the product page).

Thus, when images contain critical information but no pinch-to-zoom functionality exists, users often overlook tap-to-zoom features and mistakenly believe the app offers no zoom function at all.

Without a better view of the product or the text-based information provided within images, many users will simply abandon a particular product when too many questions remain unanswered.

Due to mobile devices’ smaller screen sizes, mobile apps inherently demand the zoom feature even more than the desktop platform.

Therefore, always provide a pinch-to-zoom gesture for images in the image gallery and on the product page to support the critical task of viewing important details and text.

Following these 4 implementation details will further help users inspect image and text content more closely:

1. Support pinch-to-zoom app-wide
2. Support both the pinch and double-tap gestures as some users may rely on the former while others expect the latter
3. Visually indicate zoom features exist
4. Avoid low-resolution images by fetching images at a higher resolution when users begin zooming

10) 40% of Mobile Apps Have Images with Illegible Text Overlays

Usability testing with mobile apps reveals several common issues when text is baked into images, many of which negatively impact users’ next steps.

Text that overlays an image is usually less scannable and readable than text on solid or more opaque backgrounds and can lower the information scent for the featured content — causing some users to hesitate and question which path to take next.

Additionally, text that is very small by default has been shown to breed mistrust, with some participants wondering whether the illegibility of the content was purposeful.

Lastly, embedded text within images can fail accessibility guidelines and is typically unavailable to those using the search function.

Instead, ensure that any text overlaying an image sits atop a semi-transparent or solid background with a high-contrast color to make it easy to read.

Without those standards, mobile app teams will need to manually design and verify the text microcopy for length, color, position, font, and size to avoid readability problems.

In particular, to avoid text that is too small to read, it’s best to implement image text with proper HTML markup (and use CSS to embed any special fonts), although this can induce a few technical and practical constraints in regard to styling and positioning.

For inspiration, ASOS and Amazon rate “perfect” for Mobile App Touch Interfaces, and consider Wayfair, IKEA, and Marks & Spencer with similarly “perfect” performance for App-Wide Features & Navigation.

Untapped Potential within Mobile Apps UX

This high-level analysis of the current state of mobile UX focuses on only 6 of the 39 Mobile App topics included in our e-commerce UX benchmark analysis.

Reviewing the 33 other topics will ensure you gain a comprehensive understanding of the current state of Mobile App UX and help you identify and solve the additional app-specific issues not covered here.

Our benchmark reveals that 81% of e-commerce apps perform on average “poor” or “mediocre” across the primary themes, so it’s clear that there’s significant room to improve users’ experience.

Considering that no benchmarked apps performed “good” or “perfect” overall, adhering to these 10 Mobile App e-commerce UX best practices is a great first step:

1. If Providing a Scoped Path on Mobile Homepages, Include the Full Scope in the Link Text (56% don’t)
2. Be Cautious About Displaying Ads on the Homepage (72% don’t)
3. Always Persist Search Queries in the Search Box on the Results Page (53% don’t)
4. Always Provide a Submit Button Adjacent to the Search field on Mobile (96% don’t)
5. Avoid Redundant and Irrelevant Autocomplete Suggestions (45% don’t)
6. Have Hierarchy-Based Breadcrumbs in Category Product Lists (96% don’t)
7. Avoid Endless Scrolling as a Product-Loading Schema (100% don’t)
8. Avoid Excessively Tall Horiz Scroll Areas on Mobile for Most Content (42% don’t)
9. Support Pinch to Zoom (73% don’t)
10. Ensure Text That Overlays Images is Legible (40% don’t)

Note: In comparison, in most of the other e-commerce UX studies we’ve conducted at Baymard Institute, the average UX performance also amounts to “mediocre” but tends to have a wider spread of variation and performance scores (see our overall e-commerce UX benchmark).

Also, note that this is an analysis of the average performance across 26 leading US and European mobile apps.

When analyzing a specific app there are nearly always a handful of critical UX issues, along with a larger collection of worthwhile improvements to make.

This is the case even when we conduct UX audits for Fortune 500 companies.

For inspiration regarding other mobile app implementations and to see how they perform UX-wise, head to the publicly available part of the Mobile App e-commerce UX benchmark.

For additional inspiration, consider clicking through the Mobile App Page Designs. Once you’ve opened a specific page type, click the “App” filter to view implementations from leading US and European e-commerce apps, which can be a good resource when considering what to emulate when redesigning a mobile app — but also for what to avoid.

This article presents the research findings from just a few of the 650+ UX guidelines in Baymard Premium – get full access to learn how to create a “State of the Art” e-commerce user experience.

If you want to know how your mobile app performs and compares, then learn more about getting Baymard to conduct a UX Audit of your app.