The Usability Blog
A Practical Guide to User Experience Insights

Best Practices for the Online Retail Shopping Experience – Part 1 of 3

Four Best Practices for Category Pages

This blog is the first in a 3-part series of posts we will be releasing over the course of this month. While some of these best practices may seem obvious, we still come across several retail websites who don’t implement these crucial features, which can diminish the chances for online customers to make a purchase. In this first entry, we’ll review 4 ways you can help your online retail customer make product selections from a category page.  We hope you find these best practices helpful and look forward to your thoughts! So with no further ado, we present you with the following Category page Best Practices:

So with no further ado, we present you with the following Category page Best Practices:

1 Ensure selected filters are readily apparent to the shopper

Make it apparent to shoppers that their selected filters have been integrated into their product results while giving them the ability to remove individual filters, regardless of the order in which they were selected – the caveat being that the removal of that filter does not affect any subsequent filter selections. This eases the shopping process and reduces the hassle that customers experience when searching for specific products.

Best Buy Filters | Usability

2 Provide a Quick View option to streamline searching and purchasing

Ensure a Quick View feature is provided within your category pages. Quick View buttons that appear upon mouseover are typically a best practice as they allow quick access to product details while alerting users to the presence of the feature. To ensure the buttons catch the eye of the user they should appear prominently in a contrasting color.

Quick View mouseover | Usability

3 Make an interactive “mini-cart” pat of the online shopping experience

Once an item has been added to the cart, ensure a mini cart auto-expands to allow users to confirm that the item has been added. This also helps users maintain a running tab of their shopping experience.

Additionally, provide a clean, concise mini-cart view that appears upon cart mouse-over. This provides cleaner look while creating an easy and effortless interaction.

ND minicart | Usability

4 Provide interactive color swatches when appropriate

Interactive color swatches allow users to easily consider products in alternate colors without the need to navigate to a new page. Upon moving their mouse over each swatch, the product image should change to represent the select color scheme. A bad use case of this is adding each color variation as separate products which places a higher cognitive load on users. This, in turn, could complicate the purchasing process, which might result in lost sales.

Swatches | Usability

Bonus Tip: When using Quick View, display the overlay in a shadow box

By muting the information outside of the Quick View overlay, users can more easily focus on the product information contained therein.

Quick View Shadow Box | Usability

Of course, there are several other best practices that can be implemented at the Category page level that we did not provide here – however, these were some of the most common and crucial issues we came across in our research of retail websites. To find out how we can help your company provide a better customer experience, contact us today.

In the meantime, we hope this blog was helpful and actionable.  Stay tuned for Parts 2 and 3 in this blog series: Best Practices for your Product Details page…

-Tony Moreno, Senior UX Specialist

-Jason Vasilas, Associate Director of UX


Sign up to become a Paid Test Participant.

Sign UP Now


“From beginning to end, everyone I interacted with from Usability Sciences was professional and thorough. I was impressed with the testing technology, the methodology and especially the team that led the project. This is one of the most impactful pieces of research I have ever delivered to my team. Thank you!”

Senior Director
Digital Media Television Networks

“USC managed tight timelines and a client team that was tough to wrangle, But more importantly, the quality of the work was exemplary. It's work I would hold up as "the way we should do things" and share as a case study across the organization.”

Group Product Director
Digital Marketing, Pharmaceutical Company