The Sins in Retail User Experience UX Designers MUST Avoid (2023)

Retail User Experience

Picture this: an online shopping user clicks on a product they like but the description does not say everything they need to know before making online purchases; key features, pricing and availability, or shipping and return information –strike 1.

To find out more, the user decides to reach out to customer service but can’t easily locate the contact information because it is written in a tiny font at the bottom of the page –strike 2.

Eventually, they manage to send the company an email but they receive a generic automated response with no information about the product in question, which increases their frustration –strike 3, and out!

So, what are the sins that UX designers in the retail industry must avoid to help e-commerce websites increase customer satisfaction? We asked end-users to hear from them what they find the most frustrating on some of the most famous online retailers.

Low Findability

Unlike brick and mortar stores, all product information needs to be available online for people to find it. On one hand, that means placing it where shoppers would expect to see it.

On the other hand, it means selecting the right amount of information to include so users can easily locate the specific piece they’re looking for. When it comes to good findability, it’s all about balance and optimization.

The worst

• Unorthodox placement of key information (e.g., contact info, home button)
• Product listings are not grouped under coherent categories
• Having too many elements on one page (e.g., numerous categories in the navigation bar, overwhelming amounts of flashing text)
• Limited search functions (e.g., can’t search by brands)
• Long and disorganized search results
• Multiple variants of one product displayed as individual listings

These misplaced or poorly designed elements interfere with a user’s ability to complete a task, either by creating distractions or obstacles. More significantly, they can affect an essential step of the consumer buying process: the selection and evaluation of potential product choices -with an ultimate impact on online sales.

Without the presence of proper tools or cues, users are left to browse without direction -lack of customer engagement. This can ultimately lead to user fatigue and their subsequent exit.

Example(s):

One user expressed frustration over how retail store Oldnavy.com listed their items. She had a difficult time finding the same item in different colors because multiple variants were not grouped together under a parent product, but instead displayed as individual listings.

Further, the availability of different colorways was absent in the product preview and the variants were not adjacent while browsing the product catalog.

The best

• Clear navigation paths and language
• Adequate and applicable search filters
• Relevant search results with sort options
• Complete contact details and communication methods

Example(s):

• One user described the layout of retail store Prettylittlething.com positively, saying it “makes it easy to find the exact type of products you are looking for”.
• As can be seen, the navigation bar contains categories that are simple and to the point. When a user hovers over a category, a drop-down with subcategories appears. There’s a clear hierarchy of information as indicated by the typography: larger text in all caps indicates a second-order category while smaller text indicates third-order categories. The organizational structure is easily understood, making products painless to find.
• When it comes to search functions, a user touted Amazon.com as a front-runner. While searching for “men’s big and tall”, he was excited to see that his specific request returned numerous, relevant search results. Additionally, he was able to narrow down the long list through the use of various filters that were clear and easily accessible.

Difficult Discoverability

While findability refers to when a user is actively looking for information, discoverability relates to information a user encounters that was not originally sought out.

When it comes to online retail, discoverability plays an important role in connecting users with products and website features that they didn’t know they wanted or needed. Many users have grown accustomed to good discoverability and take notice when a website fails to meet those expectations.

The worst

• Inability to see similar or recommended items
• Inability to find corresponding items (e.g., matching pieces of an outfit sold separately)
• Essential website features go unnoticed

In a world where people fiercely protect their Netflix algorithms, it’s safe to say users have come to rely on companies to provide tailored recommendations. Without them, users are left to rely solely on search functions or browsing, which can be time-consuming, cumbersome, and unfruitful.

Example(s):

• One user was dissatisfied with retail store Wish.com as it did not show her products similar to the one she had clicked on.
• The image below shows a typical product listing on Wish.com. At first glance, it appears that there is no section dedicated to similar items.
  
  However, upon closer inspection, there is actually a “Related” button in the upper left-hand corner. Clicking on this opens a tab that displays the exact information this user was expecting to see.
  
  The moral of the story is if your website has a valuable user feature, make sure that the user can easily notice it.

The best

• Relevant recommendations shown alongside product of interest
• Salient and eye-catching promotions of products or helpful website features (e.g., Live Chat support bubbles, Free Shipping, Free Returns)

Example(s):

• One user was pleased with the way Macys.com provided suggestions. He stated that the “See More Like This” section “allows me to quickly jump to more items that perhaps I didn’t know I needed.”
• Macy.com provides users with not one, but two static sections to explore related products that may be of interest through the addition of “Customers Also Shopped”. Users are able to discover both similar items and be linked to a community of users with comparable tastes.
• To add, Macy’s use of distinct typography for their promotions and features makes them hard to miss.

Low Efficiency

Time is money, as the old saying goes. Maile Ohye from Google put an actual time limit on the phrase, stating “2 seconds is the threshold for ecommerce website acceptability.”

Fast sites are linked to good user and customer experience and in turn are linked to higher conversions and yield customer retention. While users expect websites to run smoothly from a functional perspective, they also expect them to reflect the latest, up-to-date information and optimize their digital experience based on past usage.

It’s one thing for a user to waste time on a slow website, it’s another to waste time on an inaccurate or unadaptable one.

The worst

• Slow loading websites
• Updates disrupting user flows
• Incorrect listings or inventory

Users detailed the many ways these negatively affected their experiences with websites. Slow speed prohibited a user from being able to enter correct information at checkout.

Another had their entire user profile deleted during an update. These moments of dissatisfaction chip away at users’ trust in a website, potentially leading them to go look for a more reliable platform.

Example(s):

One user recounted a bad experience with Macys.com in the video below. The website told her a product was available for in-store pickup, when in fact it wasn’t. The incident was worse because she had driven to a much further location in order to get the product immediately. Unfortunately, she ended up wasting her time.

View highlight reel

The best

• Saved user information during the checkout process
• Saved user search queries

Example(s):

Users acknowledged Oldnavy.gap.com as being particularly efficient. It saved their billing/shipping information so checkout was an easy process.

Additionally, it recognized user location and denoted a default location for in-store pickup, eliminating a step for users.

Lack of Desirability

Before diving into the details, let’s address the elephant in the room: not all websites for retail stores are created equal.

Some are high-end, while others are discount—and opinions on things like “look and feel” are subjective and may vary from one user to the next.

However, that doesn’t mean an online store can’t share common strengths and pitfalls. When it comes to desirability, there are general UX design rules that all websites should abide by, especially as they pertain to users’ perception of an online store’s credibility .

The worst

• Excessive flashing text
• Low quality product photos that misrepresent the item

Banner blindness refers to users’ tendency to ignore page elements that they perceive to be ads. Flashing text to compensate for that won’t draw user attention to deals, but may turn them away as users described this as tacky and unattractive.

Users utilize a number of factors to evaluate the trustworthiness of a website, with a key one being overall design quality, including color schemes and high-quality product images.

If it doesn’t look consistent, users worry it may not be credible.

Example(s):

When describing Aliexpress.com, one user stated that “the items that they…picture on their website are not the same as when you get it in the mail.”

Additionally, the website overzealously attempted to draw the user’s eyes to available promotions and deals. The user felt the website appeared “cheap” and “cheesy looking”.

View highlight reel

The best

• Consistent color schemes

Example(s):

One user found Lulus.com to be “aesthetically pleasing” due to the use of consistent color schemes and typography. It offered a fluid experience throughout the website.

Complicated Use

Ease-of-use refers to the extent at which a system (in this case, a website) is easy to use. Design choices can have impacts on the user beyond simply aesthetics in aspects such as customer loyalty.

What may look unique and cool to a designer, may actually produce an unusable interface from the user’s perspective.

The worst

• Unusual use of space and oversized product images
• Inconsistent or unorthodox interaction patterns
• Infinite scrolling UI with a “load more” button

Introducing design elements that are inconsistent with existing user mental models can introduce problems when users attempt to navigate a website.

It makes it difficult to browse through the catalog quickly and efficiently, route to different parts of the website, or save their place.

Example(s):

When describing the ease-of-use (or lack thereof) of Zara.com, one user explained how the unorthodox image size and interaction patterns contributed to a jarring experience. Simply put, “You have to put effort [to use the website]. It should be a seamless process.”

View highlight reel

The best

• Static navigation bars throughout the website
• Pagination
• Clear site structure and content organization

Example(s):

• In contrast to the infinite scrolling UI mentioned above, one user pointed out Macys.com’ pagination UI pattern. He described this feature as something he highly enjoyed because it made navigating easier, since he could pick up where he left off. Further, he was able to control how many products he wanted to view at a time.
  
• Zalando.it was praised for being very easy to use and navigate through by a user.
  
• You may notice that it looks pretty standard and might ask “what’s so special about it?” Well, that’s the point. The fact that it shares a similar interface and interaction patterns with most other retail websites is what makes it easy to use.
  
  Users do well with consistency across platforms because they can apply what they already know.

Low Value

Value comes in many shapes and sizes and isn’t tied to any single design element or touch-point. Essentially, what makes a website valuable boils down to whether it adequately addresses users’ needs and expectations.

Websites that offer great value typically have features that alleviate user pain points.

The worst

• Singular product shot not showcasing the product from multiple angles
• No option for users to leave reviews and photos for others
• Absence of size charts
• Inability to use store credit alone to pay for an order

Most online shopping users have come to expect features like multiple product images, size charts, and user reviews, especially when they are widely present among competitors. They bring added value to shopping online since users are unable to see the product in-person and must rely on information from the website and its users.

Example(s):

One user was disappointed by Fashionnova.com. She felt misled by their advertised “24/7 customer care” as she expected a live chat for immediate customer service. Instead, the website only offered email as a mode of communication, which was not a satisfactory alternative as response times might greatly vary.

View highlight reel

The best

• Answers to commonly asked questions
• “Save for Later” option in shopping cart
• User reviews that include pictures and reviewers’ sizes
• Discounts applied automatically without a need for coupon codes
• Comprehensive product descriptions and images

Example(s):

• One user expressed her need to find clothes that fit well and applauded Shein.com for allowing their users to post detailed reviews complete with pictures and personal sizing information.
  
• Prettylittlething.com was commended for having a comprehensive, well-organized FAQ section covering main user needs. They also provided users with a table that outlined recommended order dates for timely delivery, as shipping times were often a principal concern.

Worst and Best UX: Head-to-head

Having examined both the bad and good details of users’ online shopping experiences, let’s take a look at users’ ratings on their worst and best experiences head-to-head.

How easy was the website to use? (5-point scale, 1=very hard to use, 5=very easy to use)

• Unsurprisingly, the average ease-of-use score for websites with the worst UX (3.5) was lower than that of websites with the best UX (4.4).
• However, as can be seen from the distribution of ratings in the graph on the left, websites can be easy to use while still exhibiting poor user experience. This is because UX is about more than just usability.

How satisfied were users with their overall experience using the website? (5-point scale, 1=very unsatisfied use, 5=very satisfied)

• The difference in average overall experience scores was more notable, with worst UX websites having an average of 2.4 and the best UX websites having an average of 4.4.

How likely were users to recommend the website to a friend? (11-point scale, 0=not at all likely, 10=extremely likely)

• On average, websites with the worst UX (2.4) were less likely to be recommended to a friend than websites with the best UX (9.0)

Final Takeaway

Brick and mortar stores and online shopping are two quite different realms. And as users in this study pointed out, even the websites that provided the best experiences still had room for improvement. There may be no perfect website to model yours after or a cookie-cutter approach to designing one, but understanding and managing users’ needs and expectations is key.

Start with research to understand your users, design with their needs in mind, test with real users, and iterate as needed. When websites take the time to pay attention to the users’ perspective and improve pain points, users take note.

They remember the positive experience and are more likely to recommend the website to a friend. More importantly, they return.

Supplemental: Card Sorting and Tree Testing

As a follow-up to our original study, we ran a supplemental test using our Card Sorting and Tree Testing features. This test serves as an example of ways user testing can address user experience issues with online shopping.

Because Wish.com was criticized for not grouping their individual product listings into categories, we went ahead and performed a Card Sorting test in order to determine how their listings should be categorized based on users’ existing mental models.

Participants in this supplemental study were provided with a list of products that were found on Wish.com and were tasked to organize the products into categories that made sense to them. A highlight reel containing three full card sorts can be found here. As you can see, products and their respective categories can vary from one user to the next.

Luckily, the Userlytics platform provides a digestible and actionable breakdown of participant responses.

The matrix below shows relationships between products (vertical) and categories (horizontal). Products such as Graphic Tees can belong to several different categories, with the most popular being “Tops” and “Shirts”. Shoes, on the other hand is ubiquitously considered to fall under the “Shoes/Footwear” category.

Essentially an inverse of Card Sorting, Tree Testing is a diagnostic tool that provides users with an existing menu structure and tasks them with finding specific information.

Aliexpress.com’s menu was criticized for having too many categories, making it difficult for users to locate the product they are interested in. To test this claim, we recreated the website’s menu structure on our platform and asked participants to navigate through the categories and subcategories where they expected to find “Women’s Tracksuits”.

As the highlight reel shows, some participants were able to successfully locate “Women’s Tracksuits” under the “Women’s Sets”, some initially went down the wrong path but eventually recovered, and some selected the wrong category entirely.

• Only 18% of participants successfully located Women’s Tracksuits. 27% thought that Women’s Tracksuits would be found under “Jackets” and a whopping 55% expected to find them under “Jumpsuits”.
• The results tell us that although the categorization makes sense to some users, it’s probably not the best as it leaves many users lost and confused. Aliexpress.com should consider reworking their information architecture in order to adequately serve a larger percentage of users.

Userlytics Blog. June 14, 2023.The Sins in Retail User Experience UX Designers MUST Avoid (2023) . Userlytics

---

Interested in UX Testing?

Data Visualizations

---