The website lists products, some are available for sale in the website while other's don't.

So far, I've seen 2 approaches on how to list the products:


Having one single product listing page, each product links to its detail page. For products sold online, have "Buy Now" button. For products not sold online, have descriptive text about how to purchase.


Having 2 product listing pages. One acts like a catalog (all products, no eCommerce). The other one only lists products sold online and has all eCommerce features.

This approach can result in product repetition. The same product can be listed in the catalog AND the eCommerce list.

What are the usability benefits / drawbacks of each option?


  • A) with clear "available online" and "available at store" designations. Dec 14, 2016 at 15:47

3 Answers 3


With Option A, if somebody finds the product they want on your website but it's not available to buy online, you stand a chance that they will order from you anyway if the price is competitive and the process is not too onerous.

I don't see any real usability benefits to Option B. At best, if the user happens to look at the right list first, the outcome will be the same as Option A. In many cases, a user might have to look at both lists to find what they want, which seems less desirable. At worst, a prospective customer will only look at the 'wrong' list, and assume that you don't sell what they want.

(This assumes 'browsing' behaviour rather than 'searching' of course... if you have good search facilities on the website, and if Googling for a product along with your company name takes you straight to the right product page, then people are more likely to use that. But that should not preclude you from designing the best catalogue browsing experience, too.)


I think option B gives you more problems than it will ever solve, when you take into account things like SEO, and customer confusion it's a real no go, I would definitely refrain from using Option B.

Option A's usability success is defined by how well you execute the Product Description Page (PDP). I think it would be great to clearly distinguish a product page that can be shopped in store and one that can't. I would have a call to action in a brighter colour to show the product can be shopped now and a less colourful greyed out/black call to action that says shop in store which on click displays detailed information on how to shop in store or why the product is only available in store. You could also have a slightly different design of the PDP for all products that are only available in store.

I think it would also be important to allow users to refine the PLP (Product listing page) by stoppable online and ins-tore products, so they can filter.


User 1 = wants to buy now

User 2 = wants to browse exclusive in store items only

User 3 = wants to buy now and see what's available exclusively in stores

Provide the user early on in their site visit the ability to choose their path or product discovery destiny.

Research needs to be done to figure out the motivations and intentions of your users. Collect data to help guide your decision. If more users are showrooming then highlight exclusive in store only products first then have online items for purchase be secondary.

enter image description here

Take Burberry.com as an example - in your case products not available online could go under EXPERIENCE (edit to IN-STORE EXCLUSIVES or whatever makes sense for your products).

If you could detail the types of products sold online and those that are not available online it would help.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.