Carousel to display colour variants: should the colour selected always be visible?



  • I'm working on a product page for an e-commerce website, and I have a carousel component to display different colour variants for the product itself. When you select a colour, the product picture updates accordingly to offer a preview.

    My question is: if you have a particular colour selected, and then you use the arrows to navigate the carousel and display other colours, once the selected colour is hidden should the selection change?

    Example: I have a carousel with 3 colours displayed at a time. I select the first colour, green. I use the right arrow to see other colours, thus the green moves to the left and I can't see it anymore. Should I change the selection automatically so there's always a correspondence between a visible colour in the carousel and the product picture displayed above? Or is it too frustrating that the selection changes automatically?

    Wireframe example



  • Do not change the selected color just because someone uses the carousel to see other colors.

    • Using the carousel means the user wants to see other available colors.
    • The selected color was, and still is selected, and should be should keep being marked as such.
    • Only if the user selects a different color, the image should be changed.

    Change of perspective: If the user uses the carousel and the selected color gets scrolled past, which color would we chose to be display instead?




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2