A world map and two lists displayed on a web page are connected. Hover over "Romania" link and the Romania region highlights on the world map (jVectorMap fiddle example).

As you can imagine, the two lists can grow pretty large. How to present this in a user friendly way? Think about too much distracting graphics vs. the lack of graphic hints, wall of text vs. hidden links, desktop vs. mobile etcetera.

I've contemplated tag clouds with the continents name standing out, menu-style lists where you hover over a continent and a sublist with its countries appears.

I just want to know what's the best approach (not limited to those two I mentioned above) for displaying connected lists, from a user experience point of view: quickly finding and visualizing countries while keeping things tidy.

  • There's no Singapore on the map!
    – SimonTeo
    Sep 27, 2013 at 6:53
  • I don't see why the map needs to be there in the first place. If this user is selecting his country at a site gateway, then the map is useless because the user will know where his country is located. If the map is used for an educational setting, then show the highlight on the inner page after the user clicks on a country.
    – Tim Huynh
    Sep 29, 2013 at 18:52
  • Will a user manage to select a country without a map overview? Certainly, and there are plenty of examples. Now, is a map useless if there are links in place? I wouldn't say that. Anyway, I'm not looking to remove something here.
    – itmitica
    Sep 30, 2013 at 5:54
  • Would the user be finding 'their' country - when they probably know where it is - or for finding other countries (when they might be hazy about which continent they are on in the first place - eg the Europe / Asia boundry is a bit vague)
    – PhillipW
    Sep 30, 2013 at 8:58
  • As is, with all the elements and their defaults, it takes a lot of space, you are right, yes. But you are wrong, I'm not looking for "easier".
    – itmitica
    Sep 30, 2013 at 16:22

4 Answers 4


The categorization that you also mentioned (sorting the countries as sub items into continents) was the initial idea I had before I read that you'd thought of that also.

If you intend this to be run both on mouse+keyboard devices and touch devices I think you need a different interactive pattern. Trying to tap on a country somewhere in Africa or in Central Europe on a map small to fit on a touch display (if not a +10" display) will be very cumbersome. Instead I would suggest a two step flow, the user taps/clicks on the map or in a list on a continent, that continent zooms in/replaces view and gets to utilize the entire area of the map container. If you want to provide a direct manipulation interactive pattern (eg. tapping/clicking on items on a map) you need to assure that you provide controls that are large enough, otherwise the interface will be too cumbersome and frustrating to use.

  • I haven't dismissed any idea yet, I'm just trying to expand my options. The way I see it, the links containing countries are the main actors. And I agree, the links containing the continents will help user focus on a smaller data. Finally, the map itself is just there to offer insight and perspective. I'm not sure how to make all this about countries rather, continents as second hints or primary focus/filtering tools.
    – itmitica
    Sep 27, 2013 at 7:42

You can use something like this

enter image description here

Ref: amMap

Further Improvements

  • Countries list can be above the map as user has to perform action on countries list
  • For better space management you can present countries in groups (e.g regions on continents like Asia, Africa, Pacific, Europe, ...)
  • Further each group can be collapsible on region basis so that only one region is visible at a time


For more compact look you can follow the style Google Translate is using for presenting languages. You can use similar style to present countries list. 206 countries can be listed in 8 or 10 columns, given 25 or 20 countries per column (with a little bit of scrolling)

enter image description here

  • amMap example feel heavy in presentation and use, and I'm not talking about the map, I'm talking about the list. This is something I'm particularly interested in avoiding.
    – itmitica
    Sep 27, 2013 at 14:39
  • For better managing countries list see my 2nd and 3rd point. Sep 28, 2013 at 19:59
  • The update about Google's Translate doesn't help much. The language lists are managed by JS, they don't permanently exist. Plus, for mobile, there's a Google Translate App, I'm not looking for that.
    – itmitica
    Sep 29, 2013 at 7:24
  • Google translate was just to give you an idea. You can use the same style for presenting countries list. Sep 30, 2013 at 8:19
  • Actually, Google Translate used to have <select> elements which it then JS-transformed to column lists. Somewhat like the reverse of one of the patterns we see in responsive design for web page menus: "responsive drop-down menu" or "responsive select menu". The common pattern of responsive web page menu is something for me to consider, which is quite similar to your suggestion.
    – itmitica
    Sep 30, 2013 at 9:37

For country selection you can apply some of the patterns we used for language selection).:

  • Show items in a multi-column list grouped by continent.
  • Use a simplified map as an overview/index. A map divided in 3 vertical areas (America, Europe-Africa, Asia-Oceania) is used. When you scroll the list, the current displayed region is highlighted. When you click on a region, the list jumps to the corresponding section.
  • Search for quick cross-language search may be also helpful in this context to allow countries to be searched in different languages.

Language selector

If you want an extra connection between the list and the map. When you hover a country from the list, it can be highlighted/zoomed in the map.


Not drafting up a "copy/paste" answer for you here but... to answer your wishes what I imagine to work out, is having an world-view that is clickable but it requires a couple of clicks- 3 clicks to zoom in (and drag possibility) and select the country/region of choice. For instance:

  1. Clicking on worldview zooms in to Europe
  2. Europe is brought up closer (at the click point as a center)
  3. Click on Belgium (at the click point as a center)
  4. Now Belgium and the surrounding country borders are visible
  5. Click on the region (to confirm the region/language) (Belgium has 3 different languages in regions -that I know of: NED, FRA, GER)

The zoom of the map can be accompanied by a list of countries/languages that are shown. The list would get shorter (or more specific depending how detailed your information is).

Your Answer

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

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