Taking an example of mobile phone's product page it has three variants

  1. Storage
  2. RAM
  3. Color

now let's say by default 64GB, 4GB & midnight black is selected, but for storage 64GB and Color midnight black, 8GB RAM is OUT OF STOCK but 8GB is available in other two colors (green and blue), How can we show this information as right now it feels like that 8GB is Out of stock for all the colors.

Attaching the solutions that I tried, please suggest if you have better solution

I also tried playing with logic for example keeping 8GB enabled and on selection of 8GB, auto update other variants based on availability but I think that will confuse the user.enter image description here


First of all I will say it might be worth checking out how Amazon handle this as it's a pretty common scenario for a lot of products and might give you some useful tips. That being said, I will provide a suggestion of my own...

You should determine a priority for your properties. In this case I would suggest: Storage, RAM, Colour (The same order you have listed in your example). This priority order should be used to determine how you show availability.

The problem with your current example is you are prioritising colour over RAM, but you should make it the other way around. Enable all RAM options but then limit the colour options based on what the user selects.

Here are 2 examples to show what I mean:

Default options

enter image description here

User changes to 8 GB of RAM where "black" is not available

enter image description here

Essentially, you are limiting the options based on what has previously been selected. As shown in the second image, the user can clearly understand that the colour "black" in not available because they choose the 8GB RAM option. This prompts them to select an different RAM option if they are looking for a black phone.

This logic also works nicely for other restrictions too. For example:

enter image description here

Note that in this example, we are showing that the colour "black" is not available for any of the 128 GB options. So the label informs the user of that, rather than telling them it isn't available for the 4 GB RAM option.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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