Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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.

share|improve this question
    
There's no Singapore on the map! –  SimonTeo Sep 27 '13 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 '13 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. –  itmitică Sep 30 '13 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 '13 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". –  itmitică Sep 30 '13 at 16:22
show 2 more comments

4 Answers

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.

share|improve this answer
    
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. –  itmitică Sep 27 '13 at 7:42
add comment

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

Update

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

share|improve this answer
    
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. –  itmitică Sep 27 '13 at 14:39
    
For better managing countries list see my 2nd and 3rd point. –  M. Atif Riaz Sep 28 '13 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. –  itmitică Sep 29 '13 at 7:24
    
Google translate was just to give you an idea. You can use the same style for presenting countries list. –  M. Atif Riaz Sep 30 '13 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. –  itmitică Sep 30 '13 at 9:37
show 1 more comment

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.

share|improve this answer
add comment

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

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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