18

I am trying to find the best way to do a region-to-country selection on a tablet. We came up with two ideas:

  1. Show a world map with regions. Once the user taps a region, zoom in and show countries with names. There the user can select a country or countries.

    Advantages

    This approach allows the user to visually select the region and country. The user can even link the country by dragging a line across the country.

    Disadvantages

    It's hard to select a small country and show its name. If the user is not familiar with that part of the world and exactly where the target country exists, the user might have difficulty choosing a region.

  2. Show a list of countries, like this example

    Advantages

    The country name is shown directly. Region selection, zoom, etc. are bypassed.

    Disadvantages

    The user may need to scroll or search, and the UI may not feel as “rich”.

Improve this question
12
  • 10
    I'll also add that some people probably don't know where their country is located. Do some research among your personas first to understand the background and academic level.
    – Dan
    Aug 12, 2015 at 8:25
  • 1
    How many countries are you planning to have? Will it be worldwide or in concrete region (e.g. Europe)?
    – Igor Gubaidulin
    Aug 12, 2015 at 8:27
  • 8
    Why have you automatically skipped the concept of the drop-down menu? It's important in UI design not to reinvent the wheel, and the drop-down is a perfectly suitable way to present a collection of countries.
    – JonBee
    Aug 12, 2015 at 13:53
  • 12
    Don't show a map. It causes more trouble than it's worth.
    – Kevin
    Aug 12, 2015 at 15:23
  • 3
    If you use a list, consider adding multiple terms for the same country in some cases. It drives me batty when I have to guess whether a UI designer things I live in the United Kingdom, England, Great Britain or Britain, so I have to hunt through multiple places in their damned list.
    – David Richerby
    Aug 13, 2015 at 13:29

6 Answers 6

Reset to default
40

How about just using a Combo Box?

mockup

download bmml source – Wireframes created with Balsamiq Mockups

By a user being required to just choose what country they are from, it removes the unnecessary step of a user needing to first select the region (or you can just infer the region based on the country selected if needed). Allowing a user to start typing the country they are from will also narrow down the options available to choose from (an advantage over listing all options available in a dropdown list / graphically).

Smashing Magazine wrote an article about redesigning the way countries can be selected (they landed on using a combo box too). They documented their design process for this quite nicely too and is worth reading. There's also a live demo and a GitHub repository.

Improve this answer
16
  • 12
    I come from a country that is named completely different in English and in its own language and it becomes incredibly annoying to figure out if the language names are all in English or localized because it involves a lot of scrolling and searching the list for something that might not be there. So the perfect solution for a combobox would be to match both English and localized country names even if only one of both is used/shown :)
    – florian h
    Aug 12, 2015 at 12:15
  • 4
    @florian: Click the box, start typing the first few letters of the country. If you don't see it, wait 2 seconds and start typing the other variants you are aware of. Much easier than scrolling.
    – Sumurai8
    Aug 12, 2015 at 12:43
  • 19
    I would add that the combo box should default to whatever country it auto-detects you in. This will save >90% of users from having to do anything at all.
    – DanielST
    Aug 12, 2015 at 14:46
  • 8
    Also, it's nice touch that starting to type 'England' with 'Eng', yields 1 result: United Kingdom.
    – Danny Beckett
    Aug 12, 2015 at 19:43
  • 5
    The demo is really cool -- typing č (the first letter of Česko = Czechia) correctly suggests Czech Republic. Finally there is someone genuine doing a country selector! :)
    – yo'
    Aug 13, 2015 at 6:11
6

Definitely a dropdown list with the autocomplete (you press C, list scrolls to Czech Republic). One list for a region, the other one below that reacts to first one, for the country. If there is no user need on the region list, ditch it altogether. Country list is essential here.

You don't want a rich UI for something as simple and tedious as a country selection. Users want to go through this step as quick as possible, some without thinking, what you'd call an autopilot, and the more unique the UI will be, the more issues they will have because the UI will interfere with their behavioral pattern.

Ancillary problems with the map selector:

  1. Load on a browser

  2. Hard to operate on mobile

  3. So many clicks more than in the list: click-zoom-zoom-drag-drop-zoom-click-unclick ad nauseam versus click-scroll-click. Any amount of time will be lost, users will not appreciate that.

Improve this answer
3
  • 2
    Type "A", it scrolls to "Afghanistan" when you wanted "United States". Type "D", it scrolls to "Denmark" when you wanted "Germany". Type "B", it scrolls to "Bangladesh" when you wanted "Myanmar". Type "R", it scrolls to "Russia" when you wanted "Taiwan". Country names are hard.
    – Mark
    Aug 12, 2015 at 21:25
  • Yes. Such is life. There are multiple countries that start on the same letter.
    – Zoe K
    Aug 13, 2015 at 7:49
  • 2
    @Mark that can be solved with synonyms lists. In fact the linked demo in the top answer has a pretty comprehensive synonym list - type B for example, and it gives you United Kingdom (because Britain) and Germany (because Bundesrepublik Deutschland) in addition to the regular Bs. It's not perfect though - no Burma, no RoC (in fact it has the absurdly pro-PRC Taiwan, Province of China), and it quirkily pushes synonym-based options to the front of a list (I'd have them last).
    – user56reinstatemonica8
    Aug 13, 2015 at 10:45
4

Since it is a tablet device, can't you automatically detect the location? Either from the user profile, or from the location service of the device? You could bring that up as a default selection an a longer list.

Improve this answer
7
  • Consider the product is used across the world. the admin will provide different kind of services to different regions.
    – Krish
    Aug 12, 2015 at 11:00
  • 2
    This is an excellent point. You could do an IP lookup, which, unless they are using a VPN, proxy, etc, should give you an approximate location (good enough for at least region, and almost always good enough for country). This could, as @Bart Gijssens said, be used as the initially selected option in a drop-down, or other list.
    – Dan
    Aug 12, 2015 at 18:14
  • 1
    Well, as long as people are not shopping to their home address while actually abroad etc., or aren't like me (VPNs, forbidden location sharing, etc.) Choosing something for the user because you believe that's what the user wants is always bad. This annoys the hell out of me with Google, who do it all the time.
    – yo'
    Aug 13, 2015 at 6:18
  • It would just be a default that could be changed by the users.
    – Bart Gijssens
    Aug 13, 2015 at 8:24
  • @BartGijssens and then you're back to square one - what's the best UI for users choosing a country when your educated guess gets it wrong? I do agree that picking a sensible default is a good idea, but you still need a good manual UI for the many cases when someone wants to choose a country that's not the one they are currently in (or, appear to be in)
    – user56reinstatemonica8
    Aug 13, 2015 at 15:52
4

1: If we're talking a global system then that's a no. As you say it could be a real pain to zoom right in to Singapore, lots of clicks.

Also don't forget that though it may seem logical to me and you that the USA is that big bit, second one down, on the western land mass, some people REALLY suck at geography.

A lot would depend on exactly what sort of system you're building and how many countries you are including however. If its just a North American system and you've a simple choice of Canada, Mexico or US and there's nice flashy lights and text and flags when you highlight one then it should be OK.

However: Big potential for trouble lies in the execution here. If for instance somebody has their screen set at a high level of zoom these maps tend to go rather awry. Also on mobile they tend to rather suck- its hard to fit the whole world in a vertical screen so I have to click to scroll the map and...agh! No! I'm not in Russia!

2: I do like Apple's use of flags. Lots of people dislike flags, but I love them. They really draw the eye. Of course there could be a potential for controversy if your business is going into some areas (e.g. Taiwan & China), but generally flags=yay from me.

If you're totally global and you're listing every country like this...Then it just won't work. If however you've only a limited selection and it is clearly organised like Apple then its fine.

Be sure however to include a nice big "YOUR COUNTRY ISN'T LISTED?", "International English version", or the like.

3: The most typical way seen is an ugly drop down. They are often more usable than they first appear however with the capacity to type "J" taking me straight down to the vicinity of Jamaica rather than having to browse to it.

The biggest criminal act you can commit here is messing with the standard alphabetical order. Putting your one or two key markets at the top- fine. But don't fill the top with 10 countries leaving me to scroll down to S and go "Ey? Where's Sweden?"

4: Free text is a way I am rather fond of. Let people just type and then suggest possibilities. Its a lot quicker for me to just click in "UK" than to have to scroll down to it.

It is even better if it also lets me type "England" and then suggests "United Kingdom" to me.

To make this even better you could combine it with....

5: Detect their country. Its pretty easy to do these days. Auto fill in for them USA if thats where their browser is reading as being from.

HOWEVER do NOT lock them into this. Don't just automatically take them to the American site or whatever- clearly say "We think you're in America, is this right?" and have a little x on the US which lets them then click that and change to where they actually are if need be.

I work abroad a lot and there's nothing winds me up more than being taken to some local language version of the site rather than the standard one that I want.

Improve this answer
2
  • I dislike flags very, very much. I never know whether I'm indicating "the Netherlands" or "Luxembourg", and that's not the only problematic pair. Besides that, there are many flags with a very complicated crest, so you may have to redesign the flags to suit your medium.
    – Rhymoid
    Aug 13, 2015 at 7:44
  • I would not suggest using flags alone. However if you have a list of 40 countries and want to select Luxembourg then even if there are two very similar flags your eye would be drawn to two possibilities rather than the full 40. It is still likely to be helpful for bringing you towards Luxembourg quicker than a pure text list would.
    – the other one
    Aug 13, 2015 at 12:29
3

Smashing Magazine describes a nice solution based on the results of usability tests.

It handles typos, various spelling sequences, synonyms and prioritized options. The technically correct term for this would be something like an “auto-complete text field with loose partial matching, synonyms and weighted results.”

Here's the demo.

Improve this answer
2
  • Thanks a lot for the name you suggest... now it is the official component name in our doc.
    – Krish
    Aug 14, 2015 at 6:08
  • You can shorten its name to ACTFwLPMSaWR.
    – Ken Mohnkern
    Apr 24, 2017 at 12:43
2

If you want to use one of these methods then use the second one as this method has less critical disadvantages. Add a search bar at the top of the screen to filter records. That way user won't have to scroll all the way down.

Improve this answer
1
  • 1
    Yes we are more concern about the scroll thanks :)
    – Krish
    Aug 14, 2015 at 6:10

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.