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

1 Answer 1


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.

  • Very nice. The last example would save a lot of time trying different options. I thought of Amazon too but on second thought would not emulate them. Overall it's a very messy, unprofessional UX with only a few polished parts. The variant selectors are among the inconsistent parts. Sometimes it's a tree and sometimes it's a button per combination. Jun 8, 2021 at 3:14
  • 1
    @LukeSawczak. I agree, Amazon can be difficult to use at times, but when you consider how "unknown" product types can be, it must be quite difficult on a technical level to implement a system that works really well for all scenarios.
    – musefan
    Jun 8, 2021 at 14:15

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.