Best UX pattern for selecting from two interdependent dimensions?
I'm designing a desktop web app and looking for examples (or a name) for a specific interaction pattern.
This is an analogy, but imagine a map app where you explore locations and view historical satellite imagery. 2 independent things to select:
- Location (City A, City B, ... 10-20 options)
- Year the imagery was captured (2018-2025)
The catch: not every location has imagery for every year. City A might have 2018/2020/2023, City B only 2021/2024. So in 2023, imagery exists for some cities but not others.
They can only view one location/year combination at a time. Users start by viewing a specific location/year combo and might want to change which city they're viewing or which year they're viewing, so neither selector is inherently primary.
The issues I'm dealing with:
- With two dropdowns, changing one alters what's valid in the other. How do you communicate that in a way that makes sense?
- A full matrix (locations * years) feels overwhelming with this many options.
- I don't want the intermediate state (only one selection made) to trigger an expensive reload before the user finishes choosing (though an "apply" button is an option)
I'm experimenting with one modal that has two scrolling selectors where clicking one immediately grays out options in the other selector that are disabled, then the user can click "apply", but it's not perfect and I haven't seen examples of this in the wild.
Has anyone seen an example that does this? Is there a name for this pattern? Truly any ideas would be appreciated.