I'm designing a widget to select one or multiple regions. Regions can be nested within countries and 'main' regions, like this:
France
- Central France
- Paris
- Bourgogne
- Southern France
- Dordogne
- Aquitaine
The Netherlands
- Zeeland
... etc.
Selection of a country or higher-level region checks every lower region, while a higher region gets (semi)checked when (all) lower regions are. Behaviour like this seems pretty standard in checkbox-trees I've seen so far.
The way I'm presenting these options now poses some problems. As there are many sub regions contained within a country, I've collapsed these lists by default. However, clicking a country-name is now ambiguous: does it select the region, or open the list?
So far, I've played with these variations:
- A dropdown arrow which would open the collapsed list, while clicking the name or checkbox triggers selection;
- A larger checkbox, where clicking the name would open/collapse the underlying list;
- Opening the list when an option is hovered - not workable for touch screens;
I'm presenting as a list that 'drops down', instead of 'flies out', as the latter design wouldn't adapt well for mobile users.
Neither of these options made it abundantly clear that A) a selection can be made or B) a more fine-grained level of control is available.
To summarize:
How can I design a touch friendly region selector with multiple levels that allows multiple selections?