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.

  • As for a multiselect with checkboxes look at this plugin jqueryrain.com/?B6C5qhCr, the 2nd option is exactly that and the third option lets you group at a hierarchical level (and conveniently with countries). Make sure to hit "run" to see how it works. – DasBeasto Jul 7 '15 at 18:55
  • 1
    Who's the target audience? I'd be more concerned that people aren't entirely clear on what countries are on what region (especially in areas that are 'fuzzy'...is Middle East Europe? Asia? – DA01 Jul 7 '15 at 18:57

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')

enter image description here

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

  • Where you suggest to add " Select all regions & countries"? – renathy Jul 9 '15 at 10:13
  • Above the accordion. See you're dealing with data sets and subsets, where all countries (world) is the big set, then continents are the subsets, then countries are the subsets of the continent subset and so it would continue if you wanted to refine with regions, provinces, cities and so on. Basically, you're coveying the idea of a tree navigation, providing visual and logical hierarchies in a limited space – Devin Jul 9 '15 at 15:29

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)

enter image description here

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:

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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