4

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?

Improve this question
1
  • Would a user often select certain regions that fulfill common criteria except being part of the same country, e.g. “French speaking”, “Metropolitan” or “Atlantic coast”? That would suggest a more complex filter approach would be appropriate.
    – Crissov
    Dec 9, 2014 at 16:51

2 Answers 2

Reset to default
2

Just an idea

How about two symbols on each line of your tree. One for selecting and one for expanding to see children. You would have to render it manually, maybe as a table with Javascript methods on each image/button to show or hide rows, but once you worked out the basic functionality, it should be fairly easy to render dynamically from the backend.

Improve this answer
0

What about a + next to the country name to open it? This is a fairly standard paradigm.

Another option would be to make clicking on the country both show the country results and open the regions for that country. This may be the clearest option on a desktop site, where the navigation is generally displayed next to the content. It wouldn't translate to mobile, though.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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