Let's say I have two pages, a list of products "Product List" and the "Product Page" itself.

When I click on a product (e.g. a phone) I'd like to explore its variations (e.g. colour variation).

Case A: Each colour variation opens a new page. I've checked 8 colours. I'd like to go back to the "Product List". I have to press the back arrow on my browser 8 times.

Case B: Each colour variation doesn't open a new page. I've checked 8 colours. I'd like to go back to the "Product List". I press back once.

Which of these cases are users more accustomed to?

Case A example

Case B example

Back button cases

  • The other side of this coin is: how many tabs do you want mom to have to open at once out of fear of somehow losing or missing a product from the list Dec 21, 2021 at 13:41

3 Answers 3


There's a third situation much more current and successful than those described in the question where the user always remains on the main product page and only interacts with the variations in it without page breaks or clicking on the browser buttons

enter image description here

See the example at aussiebum.com

  • 2
    They key here is that selecting a product from a list looks and feels like navigation (and therefore uses the Back button to revert) while changing product colors/sizes/etc. does not. Keeping everything on the same page reinforces that you haven't gone anywhere, so there's no where to go back to except the product list. Dec 21, 2021 at 13:36
  • 1
    Funny product page image... In America, in place of the blurry beach, there would likely be an almost-naked model wearing the shorts! Dec 21, 2021 at 13:39
  • 2
    😅 🤣 😂 I put the blurry beach, anticipating someone doesn't delete the answer for having violated any of the site's rules
    – Danielillo
    Dec 21, 2021 at 13:45

It depends on the variation.

Every time a new page opens, the user is disrupted. They expend cognitive load - "What just happened? Where am I? What is different about this page?" People are pattern-seekers and a page load tells them that there is something significantly different about the variant, enough to cause them to need to explore the whole page.

Thus, your variant would need to be significant enough to warrant changing the whole page.

Wrong case example: "See the phone in blue, pink, or gray." Small color variants for an image should load on the same page.

Right case example: "See all new Jeep Grand Cherokee models available at this car dealer." This could still very likely be refreshed on the same page, but it's more forgivable to use separate pages since there's a large amount of updated information that spans several sections on the page.


Thanks for sharing the case examples, I feel that users should be more accustomed to Case B because users should play around with different product configuration, e.g. colour, size, and etc., on one page and the product listing should be the main page which users can easily return to select another product.

When users need to click the back button multiple (8 to 10) times to return to the listing page, it’s frustrating. There is a workaround on your case A example to avoid multiple back button presses (highlighted in yellow in image below) but not all users will notice it easily.

shortcut highlighted in image for users to return to product listing page

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.