Multiple choice control for region (6 regions) and countries (all countries in the world)

Question

I have 6 lists with items for each continent (region). For instance,

• first list is for Europe - Austria, Sweden, Germany etc.,
• second list is for Asia - India etc.
• third is Africa
• etc. (six regions)

User have to select all countries he is interested in. User should be able to select "all countries" and "all for specific region" (for instance, all Europe). This appears on registration form, thus there is no much space for this.

I am web developer and cannot figure out how to better show this. I have decided that this probably should be shown in modal window, because it is takes too much space to be shown on registration form directly.

And I have tried the simples way - three columns with checkboxes x 2 rows (each column per each region), however, this doesn't look good, because 1) each continent has different number of countries 2) it still takes too much space to display all countries

What if I have multi-select with checkboxes? Would it work? Africa has about 50 countries in it, Europe also, other regions have less countries.

Answer 1

Your best bet here is accordions, cases like yours are exactly the reason why they were created.

I did a super quick mockup (so obviosuly there are more countries in Africa, just assume I listed them all) in which you can see the logic:

1. Display accordion
    // 1.2 Display ALL or Customize
    // 1.3 if ALL=true ('add all countries in this panel') 
    elseif CUSTOMIZE=true ('display list of all countries in this panel')
    else ('continue to next accordion panel')

While it's tempting to add a checkbox in the accordion panel header so you can select all countries from there in a fast way with less clicks, don't do it, because it means a lot of issues if user wants to customize.

Additionally, you could use tags inputs (you can use this one if using Bootstrap) instead of checkboxes. This is a good solution to save space, but it also has some usability costs. Nevertheless, an option you may consider if needed

Answer 2

If your space is limited you could try a solution that I've used for a recent project with similar requirements, using this plugin for multi select .
Everything related to the plugin is editable (filtering, columns number, etc). It allows users to:

• Filter
• Select all
• Select all from a region (the ones in bold)

When you filter, as any filter, only the items matching the text are showed, but if you're a programmer you can modify the plugin so when you type something to filter (France for example) to also show all the countries of a region or to check/add the country or region when it's the only one matched by the filter and you press enter. Example:

---