Menu Search
Jump to the content X X
Smashing Conf San Francisco

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf San Francisco, dedicated to smart front-end techniques and design patterns.

Redesigning The Country Selector

The country selector. It’s there when you create an account for a new Web service, check out of an e-commerce store or sign up for a conference. The normal design? A drop-down list with all of the available countries.

Typical country selector1

However, when conducting a large session of user testing on check-out usability (which we wrote about2 here on Smashing Magazine back in April 2011), we consistently found usability issues with the massive country selector drop-downs. Jakob Nielsen reported similar issues as far back as 20003 and 20074 when testing drop-downs with a large number of options, such as state and country lists.

So, this past summer we set out to redesign the country selector. This article focuses on the four design iterations we went through before arriving at the solution (free jQuery plugin included).

First, let’s take a closer look at the usability problems of traditional drop-down country selectors.

The Usability Issues Link

Drop-downs cause usability issues when used for country and state selectors for several reasons. Here are six:

  1. Lack of overview
    Seeing more than 20 uncategorized options can be bewildering, and country drop-downs often offer hundreds of options (according to ISO 3166, there are 249 countries).
  2. Unclear sorting
    When shown a massive list, the first thing users do is figure out the sorting logic. But because country drop-downs often include the three to five most popular options at the top, the sorting logic is unclear at first glance.
  3. Scrolling Issues
    Multiple problems are related to scrolling large drop-downs. If your mouse cursor is outside of the drop-down, you will most likely scroll down the entire page, hiding the drop-down options from the screen. In other browsers, however, the drop-down will actually scroll as long as it has focus, likely leaving you with erroneous data.
  4. Inconsistent UI
    The UI of drop-downs differs from browser to browser and OS to OS. The drop-down will not only look different, but will also work differently. For example, on a Mac, Safari forces you to hover on two arrows to scroll up and down, whereas Firefox provides a traditional scrollbar. Now grab your smartphone, and suddenly the UI has dramatically changed again.
  5. Lack of context
    Mobile devices have very limited screen real estate, which means you have less page context when scrolling, and actually finding the option you’re looking for takes longer.
  6. Breaking the flow
    Nearly all users — even those who otherwise tab through forms — will use the mouse when interacting with a drop-down, thus slowing their progress.

It All Adds Up Link

These usability issues are all minor interruptions that don’t occur every single time someone interacts with a drop-down country selector. But they all add up, and together with other minor usability issues on your website, they will degrade the overall user experience — ultimately leading to abandonments.

With this in mind, we set out to redesign the standard drop-down country selector. Below are the four design iterations we went through.

Iteration 1: Typing Vs. Scrolling Link

The easiest way to get rid of the hundreds of options and the issues related to scrolling is to simply replace the drop-down with a text field — letting the user type their country. This works only if the user knows what to type, because there would be no recognition effect (this would never work for shipping options because the user would have to guess the names of the options). But a country selector is a good candidate for a text field because it is fair to assume that every user knows the country they reside in.

Okay, so we’ve got a text field. While good for usability, it’s bad for the courier who has to deliver a product. The drop-down offered a limited number of options, whereas the text field offers infinite (the user can type whatever they want). In order to restrict the input to values (i.e. countries) that our back-end system can handle, the text field needs to auto-complete and accept a restricted set of options. This will enable us to 100% accurately map the text-field input to the countries that our back-end system (and courier) recognize.

Google Auto-complete5
Today, most Web users are familiar with auto-complete functionality. Google has used it for its search field since 2008 (and as an experimental feature since 20046).

Iteration 2: Typos And Sequencing Link

By replacing the drop-down with an auto-complete text field, we’ve introduced a new problem. While the user can be expected to know the name of their own country, they can’t be expected to know what our back end calls it. If the user lives in the US and makes an omission, such as “nited states,” or decides to type only part of the name, such as “America” (instead of “United States of America”), then no correct results would appear:

Apple Email Subscription7
Apple8’s country auto-complete field requires you to spell the name 100% correctly and in the right sequence.

This is because a typical auto-complete field will be looking for values that are not only spelled correctly, but typed in the right sequence.

Numerous Web services — and especially e-commerce stores — are geographically restricted, and international users are well aware of this. Even big websites such as Amazon, Hulu and Spotify have serious geographical limitations on some or all of their services. While someone from the US will probably expect their country to be supported, an international user who cannot find their country might abandon your website before detecting their typo.

In short, the country selector has to account for omissions and sequencing. We achieve this by simply enabling loose partial matching:

Iteration 3: When The Netherlands Isn’t Called “The Netherlands” Link

We’ve now taken care of typos and sequencing, but there’s yet another problem. Some country names have multiple widely accepted spellings; for example, the Netherlands is sometimes referred to as Holland. Geographically, they are the same, but the average person would say that they vacationed in “Holland,”9 whereas the Dutch themselves would typically spell it “Nederland.”

When we require the user to type a country name, we must consider all common spellings. This includes synonyms, local spellings, common abbreviations and country codes. A typical auto-complete (and drop-down as well) would fail when charged with all of these spellings, such as mapping USA to United States, or Schweiz, Suisse, Svizzera and Svizra to Switzerland, or DE to Germany.

From a usability point of view, this is unacceptable because these are common spellings, and people will often type them into auto-complete fields.

In our redesigned country selector, we’ve added the possibility to map multiple words to a given value:

Iteration 4: When “United States” Is More Common Than “United Arab Emirates” Link

Typing “United” into the auto-complete country selector on Apple’s website gives you the following list:

This list is simply sorted alphabetically. But because we don’t have to scroll through a long list anymore, there’s little reason to sort the list alphabetically. A more natural sorting order would be by popularity. Apple might want to prioritize United States, followed by United Kingdom and United Arab Emirates. Whereas a British newspaper may want to put United Kingdom first.

To accommodate for this, all values (countries) could be given a weight. By default, all would be equal, and then each website could then apply their own weighting for their most popular countries:

Solution: The Redesigned Country Selector Link

The solution is a redesigned country selector that addresses the issues of drop-down country selectors. 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.” That’s a bit long, so I’ve simply dubbed it the “Redesigned Country Selector” — you can try the demo here10.

For those of you who own or work on a website with a country selector, I’ve decided to open-source the code. It is a simple jQuery plugin for the progressive enhancement of drop-down menus (i.e. your current country drop-down), turning them into advanced auto-complete fields in modern browsers. It comes with instructions and an FAQ11.

Update: As many commenters have noted, the sorting logic on the original demo wasn’t all that “logical.” We have now changed it so the first letters of the country name are ranked higher (e.g. typing “Ca” now returns “Canada” at the top instead of “American Samoa,” and “In” returns “India” instead of “United States,” and so on) as many of you have suggested. Thanks for the feedback – you can follow the project on GitHub12 to be notified about future improvements.


Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12

↑ Back to top Tweet itShare on Facebook


Christian Holst is the co-founder of Baymard Institute where he writes bi-weekly articles with their research findings on web usability and e-commerce optimization. He's also the author of the E-Commerce Checkout Usability and Mobile E-Commerce Usability research reports.

  1. 1

    I think that is more simple the developer make a little script to fill in the form automatically.

    • 2

      ok, let the developer make an script for that. But tell me, what criteria developer would be based on to develop such a script?

      Just automatically filling? Have you read the article? If so, I think you don’t quite understand why SM articles are so good. And then you complain about close minded clients… :S

      • 3

        Geo locating the IP address, perhaps?

        Not that this article isn’t good, it can be applied to many different areas, but the country drop down does have a simple “default selection” solution that would allow the majority of users to not have to interact with that field.

        • 4

          I see Geolocation as an implementation of this solution (i.e. to set the default option), but absolutely not as a replacement. What if I’m abroad and I can’t change the country? That’d be quite annoying.

          IMHO, great article and usability solution.

          And, for the people who claimed a certain country didn’t work, look at the code: if I’m not wrong, you can change and insert your own alternative country spellings directly in the HTML list.

        • 5

          Rizqi Djamaluddin

          November 11, 2011 4:09 pm

          Using the browser-supported Geolocation API would likely be better, because there’s a clear opt-in, and users don’t really like it when their country/city/address/anything personal just pops up there. It’s common knowledge that web applications can tell your general location from your IP, but I’ve seen users abandon the process when it starts taking the data in from thin air. It scares them.

        • 6

          Christian, Baymard Institute

          November 16, 2011 12:50 am

          In regards to geotargeting: prefilling the country based on ip is a good idea. But it isn’t nessecarely a replacement (as Luca also mentions).

          This is a front-end script that simply replaces you current dropdown menu with a auto-complete field with support for synonyms, weighting, etc..
          So you can implement any geo-ip solutions backend/server-side you want to (if you already got one to pre-fill your drop-down it will likely work without any modifications at all).

          Including ip lookup directly into this script is however not possible (as mixing front-end javascript with cross-domain request is a bad idea – those ip lookup calls are primarely to be handled back-end/server side) – this also gives each implementation the freedam to use whatever geo ip service they like the best.

        • 7

          The majority of users may not have to interact with it, but when you’re on the road, vacation, etc. selecting a default for them can create unintended errors. If you find those errors have large consequences, better to let everyone type in a couple letters.

    • 8

      Rizqi Djamaluddin

      November 11, 2011 8:20 am

      To be fair, I wonder why more developers haven’t adopted the Geolocation API and Google’s Geocoding API.

      This sounds fairest to the user as well, since they have to explicitly opt-in to provide their address, and most of the time users will be typing in their current country anyway. This doesn’t replace the article’s functionality, however; it just provides as a more intelligent default value.

  2. 9

    I think it may be a bit confusing, when i search for e.g. czech republic, that after writting “c” i see united states (no “c” at all, probably matching “… of america”), american samoa etc. I think it should give a bit more weight to the letter.

  3. 10

    If your German and fill in Deutschland why bother them by showing the translation and wanting them to click on it. Why let them think, if you can translate it for them. The fewer a person has to do the smaller a chance of failing or quitting the form

  4. 11

    Regarding the comments about “England” not working at first:

    What if non-matching entries are presented with a full list of countries, and the backend data updated to associate the input with the user’s selection? A sort of crowdsourcing for the data.

  5. 12

    This is a great article, love the extensive explain and good research for just a tiny thing. Very geek, like all of us :)

    • 13

      “(…) for just a tiny thing. Very geek, like all of us”

      Tiny thing? very geek? that shows the kind of people you are. If you actually think this is just a tiny thing and thinking of it is something ‘very geek’, excuse me sir, but then you don’t know what usability is and what UX means.

      That’s like wondering why do we bother making a design of a button perfect, at the end, that’s just a tiny thing to be cared of :S

    • 14

      Thanks for doing such a great design analysis with this. I’ve often thought about the country selector list as a prime target for a better design pattern — and you’ve nailed it.

  6. 15

    A really good article. It’s great you’ve included the assets to implement this too. Really impressed that you’ve got some solid reasoning as to why something we’ve just been doing without thinking about isn’t working for our users and how to put it right.

    Good job!

  7. 16

    Most excellent article and demo, thank you!

    I was slightly disappointed when I started typing “England” and nothing was suggested :-)

    • 17

      England was the first thing I tested too :/

    • 18

      Jamie, Baymard Institute

      November 10, 2011 7:23 am

      Thanks for the heads up – it’s been added now.

    • 19

      I tried, England, and that worked fine, but Wales and Scotland both failed. Awww…..

      • 20

        I see Wales & Scotland have been added to the UK, but Northern Ireland is still missing. (I know the sample code is supposed to be a sample, but I think we should get the best selection into it at the start, for those who will reuse the code as-is.)

        Excellent article for us UI geeks. I wonder if this will catch on.

      • 21

        I’ll look forward to seeing how he gets round the Northern Ireland/Ireland/U.K. thing without upsetting anyone. Typing in ‘Ireland’ should allow for ‘Northern Ireland’ which would bring up ‘U.K’ alongside ‘Ireland’. Have fun with that one! ;-)

        Talking of which, be careful with your Holland/Netherlands thing. By no means are they the same, you can upset a lot of people with statements set out as fact like that!

        Good and interesting article, mind.

        • 22

          Thats right. I’ve been told by a netherlandish friend of mine, that Holland is actually just a part of the bigger country, ie. “The Netherlands”.

          cu, w0lf.

  8. 23

    One would have hoped that England would have been there for United Kingdom, but sadly no. Nice idea though.

    • 24

      Jamie, Baymard Institute

      November 10, 2011 7:24 am

      Most certainly. I’ve added England as a synonym so it should show up now :)

      • 25

        Looks great! Possibly add “St.” for all the Saint Lucia’s of the world.

      • 26

        Also would like to add, that it may be a good idea when you are considering the most popular countries. But what about countries not so popular but also have other names. Like I bet you never knew that earlier Myanmar was called ‘Burma’ and to date a lot of people still call it Burma.

  9. 27

    Dmitry Dulepov

    November 10, 2011 7:27 am

    I disagree about item 4. I am used to see these lists in the alphabetical order, so my eyes would immediately jump to the bottom of the list if I search for United States. The rest is definitely an improvement but item 4 is questionable. I’d say: think about each case. If it is a technical site, use alphabetical. If it is a site for non-technical people, solution from the item 4 may be preferable.

    • 28

      Niels Matthijs

      November 10, 2011 8:18 am

      A few more small issues with the current implementations:

      You might be typing in Dutch, but you still get the English suggestions. This could be quite confusing as the typed text does not really match the suggestion. People not familiar with the translated name of their country will probably not know what’s going on.

      And if you’re used to just typing your stuff in one language, insufficient support might be quite confusing. The implementation must be quite robust before it can be launched on international sites. For example, it excepts “Nederland” (showing Netherlands), but when I enter other countries using their Dutch equivalent (Zuid-Afrika), nothing shows up.

      • 29

        That’s exactly what I thought.

        If I type “Niederlande” and get “Netherlands”, this would still make sense, but if I type “Holland” and get “Netherlands” – or even worse: “Niederlande” – I would be quite confused. Also “Holland” is just a part of The Netherlands .. so what happens if I type in “Bavaria” (for yet another clichee)? Does “Germany” appear instead?

        cu, w0lf.

    • 30

      Niels Matthijs

      November 10, 2011 8:12 am

      Very nice demo, though I would agree with the comment above. For short lists like these I find the weighted sorting quite unnatural, especially for people not part of the “most common” choice. They might abandon the form not noticing that there country is not where they would expect it to be in an alphabetical sort order.

  10. 31

    Notice you’ve corrected it so England returns United Kingdom – need to add Scotland, Wales and Northern Ireland too. Oh, and we often type ‘UK’ too, so we’d need that like ‘US’ works for United States. Can of worms with places like the UK, though, where people consider themselves part of a country like Scotland or Wales but the form requires United Kingdom. Other examples would be Corsica and Sardinia.

    • 32

      Christian, Baymard Institute

      November 10, 2011 9:21 am

      The list data is based on the ISO standard for country names (ISO 3166). The idea is that you – as a site owner – simply add or change country synonyms, abbreviations, translations, etc., for all those countries that are important for your own specific use.

    • 33

      A common error I’ve run into is that the ISO 3166 code for the UK is not ‘UK’ but ‘GB’. Serves us right for having such a fiendishly complicated country name.

      There is some lovely irony in the iteration 2 screen shots where you’re talking about Apple requiring exact spelling – the auto-complete it offers for American Samoa is misspelled.

      • 34

        Well really it should be UKGBNI; my passport clearly states that I hail from: The United Kingdom of Great Britain and Northern Island.

        But technically ‘GB’ is correct, we don’t live in the ‘United Kingdom’ we live in Great Britain, which is part of that United Kingdom. UK isn’t ‘wrong’ but it’s more broad.

  11. 36

    Great article, thanks! I think a useful addition would be the ability to provide a suggestion when the majority of the letter match, even with several typos. For example, I entered “kunited states” and got nothing. Just a thought :)

  12. 37

    Great little script although I do have to point out another omission, Eire and Ireland should map to the Republic of Ireland.

  13. 38

    Thanks for the inspiration. But I tried with “fr”. When “Central African Republic” is more common than “France” ;-)

    • 39

      Christian, Baymard Institute

      November 16, 2011 12:35 am

      Hi Chob, thanks for the feedback. I completely agree, so we’be now changed it so the first letters of the country name are ranked higher (e.g. typing “Fr” now returns “France” at the top instead of “Central African Republic”).

  14. 40

    I like what you’ve done there, however it appears you failed to include two very proud nations – Wales & Scotland! – leave them out at your peril!

    • 41

      Wales isn’t a Nation, and I don’t think Scotland is either (or maybe it is, I always get confused), they’re states within Great Britain. England is a nation though.

  15. 42

    So I tried “Alb” just out of curiosity.
    Expecting to see “Albania” first, I saw “Svalbard and Jan Mayen”

    I also think the populatory matching should be a bit more intelligent.
    Typing “In”, I expected to see things like “India” and “Indonesia”; not “United Kingdom”

    • 43

      I often wonder what’s the best way to approach this problem.

      I usually change my expression matching based upon how many characters long the entered value is. E.g. Until they type 3 or more letters, it won’t match the middle part of words.

    • 44

      Christian, Baymard Institute

      November 16, 2011 12:37 am

      Hi Andrew,

      We’ve now changed the sorting script so the first letters of the country name are ranked higher.

      Thanks for pointing it out.

  16. 45

    Re Holland vs the Netherlands: ‘Geographically, they are the same’

    No, they’re really not. Holland is a region within the Netherlands. It is comprised of two Dutch provinces, and makes up the Western region of the Netherlands. The Dutch tend to be rather irritated when people state that the Netherlands = Holland.

    • 46

      Of course it is, just like Texas is the same as the USA

    • 47

      I am dutch, and I assure you that ‘Holland’ and ‘the Netherlands’ refer to the exact same geological location. There are two provinces called ‘Noord Holland’ and ‘Zuid Holland’, but the rest of the Dutch provinces are just as much part of Holland.

      • 48

        noord en zuid holland are two provinces of the netherlands. but not all are provinces are holland, some would even be offended by the name(friesland?), even if they form one country (the Netherlands) for centuries.

  17. 49

    I like this a lot. We have been like sheep for too long following the standard dropdown design.

    Another great article by Smashing Mag.


  18. 50

    btw i do not know what the weights are, but imho, it should
    1. start with the country of the current user!!! you totaly forgot this feature, but imho country geoIP will be perfect in 99 % of usages and only few people will actualy have some reason to change it
    2. should be most common one for the particular web – this would need some server side way, but probably can be solved with some array (all time static, or populated from server)
    3. the number of internet users per country (there is a wiki with numbers per country) – far better then your default order

    • 51

      Can’t believe I had to scroll this far down to see geotargeting mentioned. This is the simplest and most effective solution. Heck you could scrap the autocomplete thing entirely and have a very slightly degraded experience for that 1%.

      PS @smashingmag this comment form needs to set the email field as type=email, I keep getting annoying autocorrect when I try to type my email.

    • 52

      Christian, Baymard Institute

      November 10, 2011 9:29 am

      Hi Thomas,
      Geo-targeting is a great idea – in a future update we will have a simple integration with the most common geo-targeting services.

      Regarding weighting we deliberately left that decision to each site owner to decide what their specific weighting should be.

    • 53

      Definitely agree about geolocation; seems the obvious way to find out, as you say, where 99% of people are. Stick that in as the default then present this input field as an ‘other’ category – then this extra fine weighting and variation finding becomes almost irrelevant as hardline will need to use it.

      Although this would need testing… choosing a country might be so engrained that this would cause more confusion that anything else.

  19. 54

    “Éire” now returns “Ireland”. You, sir, are a legend!

    Open source the code, but patent the updated country list! ;-)

  20. 55

    I really like the whole concept, it speeds up the process quite well. My small contribution to improve it would be that, in the case of Venezuela for example, the complete name is “Republica Bolivariana de Venezuela” or “Bolivarian Republic of Venezuela”. The final name should be one of those, and of course it should auto-complete text like “Boliv…”, “Repub…” for it.

    • 56

      Christian, Baymard Institute

      November 10, 2011 9:31 am

      Ho Ronald,
      Thank you. The list data is based on the ISO standard for country names (ISO 3166). So in your case simply change “Venezuela” to whatever spelling you prefer + and add the other options as synonyms.

      The idea is that you – as a site owner – simply add or change country synonyms, abbreviations, translations, etc., for all those countries that are important for your own specific use.


↑ Back to top