Website Filters: Keep Unavailable Values Visible When a Selection Would Otherwise Vanish

The confusing moment

A visitor picks Blue, then picks a size. Suddenly Blue is gone from the list. Did the site forget the choice? Is Blue unavailable in that size? Was it ever there? When filter values disappear without explanation, people lose track of what they selected and often start over. This article proposes a behaviour for keeping unavailable values visible. It is an example workflow, not an observed result, and the sample catalogue is hypothetical.

Inputs

Imagine a small catalogue of cushion covers with filters for Colour, Size and Material. For each filter value, decide which state it can be in given the current selections:

Available: choosing it would show at least one product.
Unavailable with current selections: no product matches if added.
Selected: the visitor already chose it.

Also list which selections the visitor made and in what order.

The proposed behaviour

Keep every value in its place. Do not remove or reorder values when others are chosen. Show unavailable values in a visibly muted style with a short reason, such as Not available with Size Large. Keep selected values clearly marked and removable. Show the current selections as a row of removable chips above the results, so a visitor can see and undo them without hunting.

Decision branches

If a value would produce no results, show it muted with a reason, and make it non selectable, or selectable with a clear warning that results will be empty. Choose one approach and apply it to every filter.
If a selected value later becomes incompatible with a new choice, keep it selected and flag the conflict rather than silently dropping it.
If a whole filter group has no available values, keep the group visible with an explanation instead of hiding it.
If a value has never matched any product in the catalogue, consider removing it from the filter altogether, since showing it forever adds noise.

The optional choice between non selectable and warn on select is a design preference, not a universal rule. Pick whichever fits the catalogue size and test it.

Stop conditions

Do not release the behaviour if:

Any value can disappear after a selection with no visible trace.
A conflict can drop a selected value without telling the visitor.
The reason text is missing or says only Unavailable.
The results area can show zero products with no hint of which selection to change.

Worked example

A visitor selects Colour: Blue, then Size: Large. The catalogue has no Large blue covers. Blue stays in the Colour list, marked selected. Large stays in the Size list, also selected. The results show zero products, and a message says No covers match Blue and Large. Remove one choice to continue. Green, which has a Large version, remains available; Small, which has no blue match under the current selection, appears muted with the reason Not available with Blue.

Acceptance test

Take a sample set of ten products with deliberate gaps. Run these checks:

Select a colour, then a size that has no match. Confirm both selections remain visible and the page says why the results are empty.
Confirm no filter value changed position between steps.
Confirm every muted value has a reason naming the selection that causes it.
Remove each chip in turn and confirm the matching values return to their normal state.
Reload with the same selections and confirm the explanation still appears.

If any step leaves the visitor guessing, adjust the wording or behaviour and retest.

Conclusion

A filter should feel stable. Keeping unavailable values in place, muting them with a plain reason, and showing selections as removable chips lets visitors understand what happened and recover quickly. The test is simple: could someone who has never seen the catalogue explain, from the screen alone, why they see what they see?