It’s a paradox of e-commerce: brands and retailers are highly attuned to customer feedback when it comes to adjusting their offerings or improving their products. But how many actually ask themselves what their users think about their websites or mobile apps? Are these services well-designed? Do they make it easy to browse and make purchases?
Few projects allocate time and budgets for real user testing, yet this feedback is an invaluable source of information. In the absence of the ability to conduct such tests, it’s still possible to learn from research like that of the Baymard Institute. Below are some translated and illustrated excerpts from their recent study on mobile shopping apps (Mobile App UX Trends: The Current State of Mobile App UX – 10 Common Pitfalls & Best Practices).
Klaviyo for marketing, Sendcloud for managing delivery methods.
Beware of Excessive Promotional Content
What brand doesn’t want to highlight its promotions or special offers? Let’s be honest, none.
Unfortunately, these large promotional banners are often seen as obstacles to exploration on mobile. Three out of four apps engage in these practices, which users find counterproductive: accidental clicks, endless scrolling, and slow access to products.
The ideal solution: position these banners at the bottom of the page!
On the Sephora and Beauté Privée websites, the homepage is filled with promotional highlights, pushing product links down to the bottom. On the other hand, Notino’s app does a good job of appropriately sizing its promotional blocks for mobile.
Product Suggestions: Ergonomics and Search Engine Behavior
Search remains the fastest entry point for exploring a catalog of hundreds of products. But typing on mobile is not always a pleasant experience, which leads to user frustration when the search engine doesn’t meet expectations. Among the behaviors that irritate users: the lack of a button to confirm the search term once entered. Increasingly, this validation is done using the Enter key on the keyboard, which then appears on the screen. But this can still be confusing for some users, who expect to find a confirmation button directly within the search field.
Another frustrating behavior is duplicate search suggestions. Users are presented with a series of variations on the keywords they entered, without being sure whether they will lead to the desired results.
Categories Breadcrumb : A Basic but Overlooked Guide
96% of the apps tested in the study did not offer a breadcrumb trail on category pages. This is a regrettable omission, as it prevents users from easily navigating back through the hierarchy to access a broader range of products.
Limits of Product Lists Without Pagination
The study is clear on this issue: failing to implement pagination in product lists can lead to user fatigue. Users lose track of where they are. How many products have just been loaded onto the screen? Where did that product spotted a few minutes ago go? The visual journey through product lists becomes confusing, and the experience may feel endless.
An additional side effect: if users want to access the footer of the site for practical links, they have no choice but to scroll through an entire page, unaware of its length, which becomes a frustrating experience.
The Nocibé app does not offer paginated product lists. In the case captured, 421 products are displayed on a single page!
In contrast, the brand’s website does have lists organized into multiple pages.
Product Cards Too Tall
The limited screen space on mobile necessitates optimizing element sizes as much as possible. Some websites or apps have not fully anticipated the volume of information that needs to be displayed for each product. As a result, product cards are too tall, which can cause unwanted interactions when users try to scroll vertically. The study recommends that these product cards should not exceed 50% of the screen height.
The La Roche-Posay website is a perfect example of usability issues related to poorly managed product card height. The displayed product information, as well as the purchase button, are hidden behind elements fixed to the screen.
