Redesigning The Country Selector

Advertisement

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

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

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

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

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”

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”

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

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.

(al)

↑ Back to topShare on Twitter

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

  1. 1

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

    -30
    • 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

      -9
      • 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.

        10
        • 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.

          0
        • 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.

          2
        • 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.

          1
        • 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.

          0
    • 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
  2. 9

    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

    1
  3. 10

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

    18
    • 11

      “(…) 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

      -76
    • 12

      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.

      0
  4. 13

    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!

    1
  5. 14

    Most excellent article and demo, thank you!

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

    0
    • 15

      England was the first thing I tested too :/

      0
    • 16

      Jamie, Baymard Institute

      November 10, 2011 7:23 am

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

      3
    • 17

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

      4
      • 18

        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.

        3
        • 19

          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.

          1
      • 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.

        3
  6. 21

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

    0
    • 22

      Jamie, Baymard Institute

      November 10, 2011 7:24 am

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

      1
      • 23

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

        1
      • 24

        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.

        0
  7. 25

    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.

    2
    • 26

      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.

      0
    • 27

      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.

      3
      • 28

        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.

        0
  8. 29

    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.

    1
    • 30

      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.

      8
    • 31

      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.

      0
      • 32

        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.

        0
  9. 34

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

    0
  10. 35

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

    0
  11. 36

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

    0
    • 37

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

      1
  12. 38

    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!

    2
    • 39

      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.

      -10
  13. 40

    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”

    0
    • 41

      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.

      0
    • 42

      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.

      1
  14. 43

    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.

    11
    • 44

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

      1
    • 45

      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.

      0
      • 46

        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.

        0
  15. 47

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

    Another great article by Smashing Mag.

    Mark

    2
  16. 48

    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.

    0
  17. 49

    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

    3
    • 50

      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.

      1
    • 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.

      0
    • 52

      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.

      0
  18. 53

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

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

    0
  19. 54

    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.

    0
    • 55

      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.

      1
  20. 56

    great article! i love that you publish the code, too!

    0
  21. 57

    We just built a pretty complex country selector using the awesome “Chosen” plugin for jQuery. http://harvesthq.github.com/chosen/

    It essentially does the same thing, but allows multiple selections and a more keyboard friendly way to add them.

    Good stuff!

    0
    • 58

      Never seen chosen … pretty cool. Thanks for the link.

      0
    • 59

      Very nice Justin, any chance that it could be tweaked for mobile/iOs devices (that damn keyboard popup is infuriating). Other than that it’s pretty excellent.

      0
      • 60

        I also have a question about how the plug-in works / should work on Mobile.

        One of the issues you mention that this is attempting to solve is “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.”

        However when viewing the demo on the default Android (4.1.1 Jelly Bean) it falls back to a dropdown list, so we’re back to lots of scrolling.

        Was this an intentional design decision, or is there some browser feature preventing this from working on Android?

        Has anyone tested in other mobile browsers? Which does it work in?

        1
  22. 61

    Similarly, you could use this as well: http://harvesthq.github.com/chosen/

    0
    • 62

      Thanks, I like this script. Simple and effective. However, I hope that can auto suggestion for user by using Google Geocoding API

      0
  23. 63

    With your focus on the country selector you forgot an important point in relation to address input, where the country selector appears in the list.

    We normally write the country last when we are sending parcels, however, as the Amazon screenshot shows presenting the data in that way means that other fields which are dependent on country do not appear. i.e. ZIP code is a United States specific reference, in Canda it is commonly called Postal code, in the UK Post Code, in Brazil CEP.

    If you want a really awful example of an address entry form see TAM Brazilian Airlines customer loyalty program. If you live outside of Brazil or the United States you have to “trick” the validation of the form to enter your correct address, highly frustrating!

    PS Thanks for OS the code, as others have commented your selector is imperfect, e.g. Scotland, Northern Ireland and Wales and others, but it is vastly superior to any existing entry solution I have seen!

    Perhaps it would be good to incorporate the following features:
    1. History of characters typed and eventual country selection to better sort by “relevence”
    2. Try to use geolocation to improve the selection choices/order

    0
    • 64

      That kind of difference is normally handled by locale databases.

      0
      • 65

        I have not commonly seen locale databases for validation purposes, just language changes.

        Post codes, cpc, cep and zip codes can all be validated in the browser at point of entry, but the regular expressions required are very different.

        I have often experienced the requirement to double enter my details because the form switches “mode” when I select a change of country. If you live in the US you possibly have not experienced this, but if you live else where you can often fill out your address details and then select your country and the whole form changes losing your data entry.

        The worst case as demonstrated by TAM is not being able to enter a required field (ZIP Code) with my postal code as the validation requires numbers only and postal codes outside the US often contain letters…

        Postal code/zip code may not have validation, but may be a required field, however some countries do not have any postal code at all, preventing a person from filling out the form correctly and requiring them to “trick” the form!

        0
        • 66

          I should add that sites such as Yahoo and Amazon have the country as the last field rather than the first. I believe this is not the best option if you intend to provide validation at the point of entry on an address, rather than after initial post.

          0
  24. 67

    Nice work, yet it doesn’t seem to handle the all-too-common technical typos, such as omitting a letter (Canda), doubling a letter (Caanada), inverting letters (Canaad), and it’s not bulletproof as far as bad spellers go: you have to assume some people just don’t know how to spell (Kanada). Although it is unlikely, it remains possible.

    1
  25. 68

    This is awesome. Such an interface element gets used so often that it should be investigated at this level of detail. Looking forward to trying out the jQuery plugin!

    0
  26. 69

    Good post and clever solution.
    The demo works very well too.

    Selecting a country in such a long list, like you normally do, is indeed frustrating.
    I am in the Netherlands and yes, I never know where to look, under the T or the N

    0
  27. 70
  28. 71

    Interesting way of thinking and a fantastic plugin. I may have to start using this!

    0
  29. 72

    I like the autocomplete functionality, but I would like to see some way that I could complete the field by pushing Enter and not have to use the mouse. In theory, it would highlight the top answer and when you push Enter, the field is filled with that country. Other than that, this is a many times better than the huge country selectors.

    0
  30. 73

    Great article and appreciate the source code. It definitely is a great solution and with weighting we can tailor it to suit the idiosyncrasies of our audience should that be required. Any issues could be assessed by a bit of A/B testing on audience failure success rates on country spelling etc.

    0
  31. 74

    The one glaring omission from this selector is prioritising the countries that match the query starting from their FIRST characters, i.e. “Ca” should always return Canada first, but right now United States is first because it’s matching the “ca” in “America”. “De” should always return Germany and Denmark first, etc. etc. Partial matches in the middle of a word should be given lower priority than partial matches starting at the beginning of a word.

    5
  32. 75

    My first test (and an immediately unsuccessful result) – Peoples Republic of China

    0
  33. 76

    Really great article. To be honest, living in the US I’ve never thought about the other usability issues that could arise with countries with the drop down format. Although, I have noticed in the past year (I could be off) that they allow you to type in your country and it’s gotten smarter at identifying the second, third, etc. letters as you type when originally, you could only type the first letter. Maybe it’s just me haha, anyway, great article, I never considered pain points of those outside of US.

    Kadee
    @produxs

    0
  34. 77

    Might want to assign “Northern Ireland” to “United Kingdom” too, as you’ve done with Scotland, England and Wales. http://en.wikipedia.org/wiki/United_Kingdom

    Maybe I’m being too picky though, as this is a pretty well done solution.

    0
  35. 78

    I typed the first two letters of ‘Italy’. It came 8th on the list.

    0
  36. 79

    How’s about you take a best guess based on the users machine settings?

    You know timezone and language, matrix it up!

    1
  37. 80

    Lol I just did the same, disapponting : )

    0
  38. 81

    Nice article.
    “People’s Republic of China” and “India” didn’t give very satisfactory responses. Given they’re the two most populous nations of the world.

    1
  39. 82

    County selectors are always a pest, so there’s some great improvements here.

    Though I’ve always thought it much more intuitive to select countries from a map rather than a drop-down.

    Something like: http://backspace.com/mapapp/javascript_world/

    I wonder how something like this might integrate comfortably with a web form?

    0
    • 83

      Maps can often be suboptimal. Sometimes it can be difficult to select your location due to
      - poor input control (tounch screen/no-mouse)
      - poor input control (disability)
      - low screen resolution / available window size
      - Does not translate well to screen readers
      - In a data entry environment can be very slow
      - If you are entering data on behalf of other people it requires a specific knowledge of geography
      - higher bandwidth requirements

      2
  40. 84

    By giving the search term “america” a more popular ranking, it results in American Samoa showing up first when “can” is entered (rather than Canada, which is what I was going for)

    0
  41. 87

    Am I the only one that clicks a drop down country selector and start typing the first letters of my nation?

    4
    • 88

      I don’t think most normal users know you can do that.

      0
    • 89

      No, however, if you live in England you often come up with the problem that the selector may use:-

      England
      United Kingdom
      Great Britain
      UK
      Britain
      Reino Unido
      Northern Ireland, Scotland, England and Wales

      So even if you are a user that does know about typing in drop downs it does not always help!

      Additionally drop downs have different behaviour some allow typing multiple characters quickly and others only accept single character entry. I often type 2 charaters to see which type of drop down I have acessed…

      0
  42. 90

    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.

    0
  43. 91

    TextboxList for Mootools does quite a familiar job.

    But nice article and comprehension anyway.

    0
  44. 92

    Though seems very nice and useful, I don’t think this is a good idea for average user. An average user will write “Unted States Amerika” or “California” to that box and when you give an error, will think the site has an error.
    Dropdowns are safer.

    -2
  45. 93

    Next iteration: detect user location and populate it for them

    0
  46. 94

    This is a cool idea, but I prefer to just use a regular select dropdown and have it default to the user’s country based on their IP address. There are free IP database tables and APIs everywhere that you can use to determine a user’s country.

    There’s no perfect solution, but it just makes sense to have the field filled out for them, and if they need to choose a different country for whatever reason, they can go through the “stressful inconvenience” you describe of spending the 5-8 seconds to find the country they need in the selection.

    2
  47. 95

    Hi,
    I was a little disappointed that you did not mention the possibility of a map base drilldown to click pretty damn close to where one’s country is and then maybe get a shortlist (or click straight there).

    It avoids problems with languages (which as mnay of the comments have noted, many people (in the norther hemispehere english speaking world – you know ho I am talking :) ) don’t think about.

    Is another reason perhaps that there are too many ‘map’ challenged designers out there too ?

    I cannot resist a joke (true story) – sorry guys:
    (Our friend tells a story from a big 4 consulting training camp (ie educated intelligent people). He was playing pictionary with 2 american colleagues. The one draws a map that looks vaguely like africa and starts stabbing at the middle. My friend reels off an impressive number of african countries to no avail. Eventually the other american calls out ‘Brazil’, the first with relief says “Yes!” and turns to our friend saying, ” you should have guessed that, you’re from Africa aren’t you ?’ )

    0
  48. 96

    Great article…Loved the research on such a topic.
    Only few days back i was having a discussion on this with my creative head, He wants drop down for country selection. But i guess, I have the solution i was looking for.

    0
  49. 97

    Hi, nice, made my self one similar for actionscript, but without the “more common” thing. I do agree with it in the case you pointed out with United Arab Emirates, but you can’t show the users United States of America when they type in “an” and are waiting for Angola to pop up…just saying. I made me check my spelling twice, and I only wrote in “an”.

    0
  50. 98

    Good article! I have to add that I’m perfectly happy with the current default. Just type the first letter of the country, followed by the down arrow a few times for some offset. Country lists don’t change a lot, and the same list is used in 95% of the sites. The Netherlands can be selected with N + 3 down. Always.

    0
  51. 99

    Nice ideas.

    But when I enter ‘Ger’, I would expect Germany as the first result as it is the only result starting with ‘Ger’: But atm I get Algeria as first result.

    So I would give the results that start with the searched string give a higher priority.

    2
  52. 100

    A lot of commenters seem to have missed the whole point of this that it is meant for your own list. How many sites can actually serve all 149 ISO recognised countries?

    2
  53. 101

    Christian Holst, You said that common country should come first, but when I type ‘India’ the first result is ‘British Indian Ocean Territory’.

    0
  54. 102

    Sander van der Beek

    November 11, 2011 2:15 am

    Now what if… you also add flags to the names in the dropdown. Quite easy to add. If you have that, people wouldn’t even have to search the dropdown and have an extra indicator they have the right option.

    Very inspirational article! I’m quite sure i’m going to use this for the upcoming international e-commerce site I currently working on. Probably with the added flags.

    3
  55. 103

    I agree with everything but I think the list should still function as a list of countries. It should – when focused – show every country allowing the user to see all options or at least allow the designer to make that decision perhaps by setting a parameter class to the markup i.e. class=”showAllWhenFocused”. When the user begins to type, the list would then be trimmed of the results not relating to the entered string. This gives positive visual feedback by hiding the results that are not applicable and showing a more accurate list of remaining countries. Also this is a great system for countries specifically, but you are still left with all the other select lists which continue to suffer from the same pit falls you outline above, also what do you do about multiple selections? Some apps I have worked on allow for multiple country selections so that the user has a choice of languages to switch between in the UI. Perhaps include a class parameter to the markup that shows checkboxes in the narrowed results?

    Just a couple of thoughts, that said it’s a great idea as I hate select lists.

    Chris

    -1
  56. 104

    Great article and an important usability challenge, but the demo seems to be a step backwards. For example, simply typing the letter “C” gives the United States and United Kingdom as the first two results, which is completely unhelpful to anyone living in a country starting with “C” (China and Canada are two big ones that come to mind). Narrowing down the search to “Ch” gives a confusing Austria as the first result (most people aren’t going to think of the “-ch” in “Österreich”), with China in 4th. To get to “Canada” the user has to get past the “-can” in “American Samoa”, which means Canadian users now have to type more letters to get to their country (“C-a-n” is usually enough to bring it up in the traditional alphabetic dropdown.)

    The end result is that there is now no clear sorting order, and while the user will likely just continue typing until their country is shown, it doesn’t seem like that much of an improvement over the old alphabetical dropdown. I would suggest listing all countries that begin with the user input ahead of the loosely matched results

    0
  57. 105

    Lovely to see Smashing Mag giving so much attention to forms, and how to make them work better for users.

    How about analysing your data to discover the four or five most popular countries amongst your data, and offering them straight away with radio-buttons plus a button for ‘other’ with a text-box? Then dive into the more complicated type-ahead for anyone who chooses ‘other’.

    Or to be really fancy: offer the four or five most popular countries plus (if different) the one you got by geo-location, and then ‘other’ with the type-ahead.

    0
  58. 106

    I think we are getting close to perfect sollution, when they will integrate the ideas from the comments
    1. definitely geoIP
    2. give highest priority to country starting with the letters
    3. give it look like Chosen, including multiselect
    4. use highlighting of the letters as in Chosen
    5. to the Chosen, i would give three improvements
    - ad synonyms, as this sollution (lower priority then main names)
    - when matching synonyms, the synonym should be mentioned in the list using e.g. brackets and higlighted – e.g. Austria (Osterei*ch*) when matching “ch”.
    - for multiselects, i would add “Add more+” button after the first insert, so it will be clear, that you can add more

    1
    • 107

      Christian, Baymard Institute

      November 16, 2011 12:46 am

      Hi Tomas, thanks for your comments.

      1) In regards to geotargeting: I completely agree. But, this is a front-end script that simply replaces you current dropdown. 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)

      2) We’ve fixed this issue now. Thanks for pointing it out.

      3 & 4) We’ll look into it. But for now it is simply a matter af changeing the CSS for the script so it matches whatever style you want.

      0
      • 108

        thank you for your reply, btw your willingnes to improve your work is the biggest advantage of your script.

        ad 1. – you are right, i just think, that it should be at least mentioned, or somehow supported, e.g. by some better support for predefined value. E.g. the script should work so that when you click in the input and there is allready something, the whole content should be selected, so the user could just start to type as with select box, and do not need to click delete first.
        ad 4. – no i can’t as you do not give the matched characters any class
        If I could recommend few more ideas
        - add flag icons to countries – it can be an optional “plugin”, but imho it would make it even greater.
        - when typing something, the first value could be optionaly automaticaly added to the input – the first value should always be 100% match with what he wrote. So the user would know, that he can just click enter and do not click arrow down + enter, as it seems now.
        - also when matching synonym, the suggester should show both official name and matching synonym and highlight the matching chars.

        But anyway, even now it is a great script. Maybe one more thing – the returning value maybe be by default the country code, not the name (i know that i can change the list, but imo it should be default as it is more usual).

        Also maybe it will be interesting for newbies to let the demo show data from this URL http://maps.googleapis.com/maps/api/geocode/json?address=Czech+Republic&sensor=false
        (czech republic is the selected country)

        0
  59. 109

    Republic of Ireland

    0
  60. 110

    It’s a nice article, pretty detailed. Even though most users may not use it – every browser allows cycling through the select list items starting with a letter when you press the corresponding key on keyboard. For your example, it will definitely be better if it is location aware. I am in India, so I don’t expect to see United States popping up when I type I and it’s definitely confusing. Even typing “in” does not bring out India, where as for any select list, if you quickly type “in” it will select “India” if it is there. As such, even though your points are valid and thought provoking the result is not better than a select list.

    0
  61. 111

    This element is awesome. Great work.

    0
  62. 112

    One potential source for getting synonyms for country names (although perhaps a bit excessive) is to use Wikipedia redirects. They’ve handled lots of misspellings, unofficial names and other such things.

    Here’s a list of all the redirects for the United Kingdom: http://toolserver.org/~dispenser/cgi-bin/rdcheck.py?page=United_Kingdom

    A few weeks ago, I made available a CSV of all the redirects of all the pages on English Wikipedia – http://toolserver.org/~tom/redirects_en.tgz (44Mb tarball)

    0
  63. 113

    I’ve tried with “Poland” and I’m not satisfied with the dropdown behaviour. Its first suggestion is “Cape Verde” which I never heard of :) This is all about “when United States is more common than United Arab Emirates”…

    The worse: none of countries with “P” on the beginning shows up first, in fact – they are at the end of the list. When you type “PO” you’ve got French Polynesia first, which is also a mistake, “POL” makes also French Polynesia first (comparing number of citizens: 238K vs 38M)…

    1
    • 114

      Just tried “Polen”, the german word for Poland. It’s not captured. But I’m sure, it’s possible to include that on one self, but I think it would also be helpful for the author, to get notes like this, to make the tool more perfect :)
      So, well, “Polen” should be added as synonym for Poland :)

      1
  64. 115

    Thanks!
    This is amazing! I’ll definitly use it in the next project that requires something alike!

    0
  65. 116

    Nice article, but as a user, when I type “Ca”, I would really expect to see Canada first in the list, not “United States of America”. Maybe countries which START with the input string should appear first in the list, then those which CONTAIN the input string would appear next?

    2
  66. 117

    Really nice code. I can’t see where you get to set the weightings – any ideas how to do that so we get to choose what should be the higher items in the list?

    0
  67. 118

    This has a major flaw. This country selector will be usable for only those people coming from popular countries in a particular website. How logical is it to suggest popular country above the users actual input?

    A user want to type UGANDA, he types ‘U’ first. You show him United states, Anguilla, Aruba etc…but not UGANDA in the list anywhere. Ok fine, then he types ‘UG’. He sees Macedonia, Portugal first. But this time he see’s UGANDA in the list. So naturally he types one more letter so he can finally get it up. Its how most behave. They type one more letter. He types ‘UGA’ , for his surprise Portugal comes above UGANDA. The same is applicable for countries like India, Italy etc.

    One of the solution will be to list suggestion based on popularity for first letter. When the user types the 2nd or 3rd letter, sort the list by Alphabet. This is by assuming user has not found the country in the popular list.

    1
  68. 119

    Thank You. Now if all web developer and designers will implement these wonderful suggestions.

    0
  69. 120

    Excellent, script just one issue, “Taiwan, Province of China”. This is incorrect. It is actually politically sensitive to have it like that. Taiwan is an independent country. The solution would be to have it as “Taiwan” or can also be search as “Formosa” its past name. http://en.wikipedia.org/wiki/Taiwan. Believe me you don’t want to upset 23+ Millions Taiwanese.

    2. “Vietnam” it is also known as “Aulac” so it would be cool if it can be search as “Aulac”.
    Just my 2 cents. Thanks

    1
  70. 123

    I covered this exact topic in the article: http://uxmovement.com/forms/make-your-forms-faster-with-autocomplete-textboxes/ a long time ago. But it’s good to see others are catching on.

    1
  71. 124

    Very cool. The country selector has needed an overhaul since the beginning of e-commerce. One small thing I noticed: When typing “Cos,” Cocos Islands come up before Costa Rica. Costa Rica has an Intel fab…Cocos has two atolls.

    1
  72. 125

    Might want to disable iOS autocomplete on the field as spelling suggestions obscure the first suggestion

    1
  73. 126

    My number one, what I hate the most….
    When Puerto Rico is not listed!!!!!!!!!!!

    0
  74. 127

    Has anyone considered using a clickable world map? I’ve seen Ubuntu (a Linux distribution) use this in their installers.

    0
    • 128

      What about if you don’t know the location of the country you are looking for?
      And, if the case is that you are looking for your own country it would suck so bad to live in Vatican City, Monaco or another country that’s only 1km wide.

      1
  75. 129
  76. 130

    Great attempt in recognizing the UX issues, however I think Switzerland shouldn’t be on top of the list if you’re typing (“CO” for Confoederatio Helvetica) especially if you want Congo or Costa Rica. But this will be tricky for United Arab Emirates and USA, so …

    0
  77. 131

    works nicely, certainly an improvement.
    but imho the list should expand on click (i.e. all possible entries should be shown in alphabetical order).

    one problem currently is that you’re left with doubt for a second which language you should type in (even though multiple languages seem to work, it’s not immediately clear, e.g. should i type “österreich” or “austria” in my case).

    0
  78. 132
  79. 133

    It’s all groovy baby, especially the ‘england’, ‘wales’, ‘scotland’ becoming ‘United Kingdom’. You have even accounted for ‘northern ireland’. Good job.

    Except, also a bad job, because just typing ‘ireland’ results in United Kingdom being first. That should flip around, so as to not offend the catholics.

    0
  80. 134

    if you type Ita (for Italy) you’ve got United Kingdom among the results… I guess because of Great BrITAin!

    0
  81. 135

    So simple, and yet so great – this should become a standard approach in programme’s, website, CMSes etc…

    0
  82. 136

    This is a great effort to make Country dropdown better.
    The diversity of abbreviations, spellings, and terms are too great.

    On top of it if the list is different based on site preferences the usability of the menu will be lost. At least now, with the antiquated process I know that either the United States will be listed 1st or be listed in alphabetical order.

    Secondly, I don’t think the users from the countries of Afghanistan, Albania, or Algeria have an issue with usability. The United States or United Kingdom users have a issue because they are at the bottom of the list. The dropdown needs to be organized by past users select history. The majority of the listed countries will never be selected. If 75% of the visitors who submit the form are from the United States it should be at the top.

    1
  83. 137

    Everything you describe here, is already developed in the jquery plugin: chosen :)

    0
  84. 138

    This is actually quite good. I could see it being extended to automatically detect your country and offer it as a suggestion.

    Kudus for the usability analysis as well.

    0
  85. 139

    Please dear god no.

    It’s this kind of thing that gets us as user experience designers into the same sinking ship as overcomplicated standards evangelists.

    1 – You have a replaced a predictable but irritating, low frequency encounter with a new ‘standard’ that is outrageously complex, expensive to implement and puts the cognitive load back onto the user.

    2 – Your ‘solution’ is inherently ethnocentric – as the ‘priority’ of countries can only ever benefit the majority of people living in those algorithmically popular nations and actually harms the experience for everyone else as they no longer have a common sense list of alphabetised items to choose from.

    3 – On what grounds other than personal irrititation did you decide that this was a usability issue? Where are the stats to show drop out? Is there any evidence of people getting the *wrong* country (as they do with most date pickers). The article you link to as your research doesn’t mention country selectors – were they just a bit fiddly, or did they cause significant dropout? Both Jakob Neilson articles merely suggest that drop down menus *in general* are a bit annoying and are not a critical issue and neither mentions country selectors at all!

    Output like this makes things hard to build and probably harder to use without addressing any significant issue that has been highlighted by user research. Please don’t follow this example.

    Rant over.

    2
  86. 140

    Dear Christian Holst,

    Good one. Kindly clarify my doubts in this UI method.

    If someone entered wrongly (Ex: ‘Indya’ instead of ‘India’). It will be stored wrongly in the database. Then how we can write the query for this? (If we are searching with keywords as ‘India’, we are losing the data.)

    Thanks,
    Ganesh Arjun

    0
  87. 141

    Very nice !
    However, if I don’t type anything and just hit the “down” button, everything is sorted alphabetically but “Lesotho” comes first ??

    0
  88. 142

    Great prototype! Thanks for the article!

    One comment … in iteration 3 where an alternate spelling, synonym, etc is returned from what is input by the user, would the user be confused seeing a different item return when it’s actually the same item? This may be more clear with countries, for more unfamiliar results, the user might not know that what’s been returned is the same as they’ve typed. Perhaps in this case the searched term can be appended to the end of the returned item. I.E. “Netherlands” vs. “Netherlands (Holland)”.

    0
  89. 143

    This is great, one minor thing, doesn’t this sorta depend on the user being able to read the English instructions to type in their country? (Which may not be English speaking/reading?)

    0
  90. 144

    I type ‘h’ and ‘Netherlands’ come in first. How cool is that? :)

    0
  91. 145

    This is a great article. I would love to do one that would select city & state as you type a zip code.

    0
  92. 146

    Brilliant article. Thanks for sharing.

    0
  93. 147

    Is there any way to have these links and when selected they are directed to the link?

    For example, I’d like to use this for States, then when a user types their state they are taken to a page about that state?

    0
  94. 148

    This is brilliant! The only suggestion I have so far is that when you type “Ireland”, Ireland should be at the top of the suggestions, rather than United Kingdom, since Ireland is not actually in the UK*, and is an exact match.

    *(only Northern Ireland is, which is a separate country to Ireland)

    0
  95. 149

    hasanga (@hasanga)

    December 12, 2011 9:30 pm

    Hi,

    Typing “ca” returned “United States” as the 5th result and some other words which actually has “ca” below that.

    No offense but unless you can make a good logical condition somethings are fine a way it is. Like sorting alphabetically.

    0
  96. 150

    Great script!

    Is there anyway to modify the script for inputting of country codes in the textbox.

    There are many ways of writing country codes: 00cc, +cc, +00cc, cc.

    What i’m trying to do is to create a textbox where the user will enter his phone number.

    As soon as he enters +1 in the textbox, it will list down all the possible countries start with 1, USA, Jamaica, Dominican Rep, etc …

    And when the user selects the country … it inserts the country code in the text box. For example +1876 for Jamaica.

    Been trying the following:
    +52 Mexico

    But “+52 Mexico” will appear in the textbox, anyway to get rid of the “Mexico”?

    0
  97. 151

    It also doesn’t allow for non- latin script, so if a Japanese user wanted to use characters from their language to write ‘Japan’ -(ie 日本) it is not recognised. It translates everything into the English version of the country name, which may well not be understood by the non-English language speaking user – destroying the whole point of localisation. Back to the drawing board on this one.

    0
  98. 152

    Thanks for the interesting article and a walk through the not inconsiderable challenge of selecting a country in a form. Your ultimate solution is good and helps to solve the problem. From my brief test with the NVDA screen reader I can hear that the solution has some accessibility built in too – you don’t always get that with dynamic dropdowns and jquery. It might be sensible to include some instructions into the label of the input field so that blind users know that they can use the up and down arrow keys to aid selection once they’ve started typing.

    I did notice after a while of use however that the country names were not all being voiced when moving up and down through a list – I was getting ‘blank’ for each country selection I’d already visited. Do you know why that might be?

    0
  99. 153

    Good article, thanks for including the demo and source.

    0
  100. 154

    Hello, I’m using your fantastic country selector but I’m not a jQuery expert. I need to resolve two issues: 1. If I have two dropdowns in the same page, how can I use the autoocomplete selector just for one of them. Code $(‘select’).selectToAutocomplete(); applies the selector to every dropdown in the page.
    2. How to programmatically set the selected value for a dropdown using country selector?

    I would appreciate your help a lot!

    Thanks

    0
  101. 155

    J. B. Rainsberger

    May 9, 2012 5:29 am

    Beautiful work. I’m a nut, so if you matched on Olympic country codes (ex. KSA = Saudi Arabia) and initials (PRK = North Korea) and even internet domains (.is = Iceland), that would make me happy beyond belief.

    0
  102. 156

    great idea and greatly done. I was looking for best possible solution of this problem and I think its here.

    0
  103. 157

    It’s a fuzzy weighted autocomplete. So what? It’s 400% more complex than an abc-sorted select/option.

    The problem though is not the complexitiy, but the lack of specification; as we can see from the comments, everyone wants something different added or modified – and wherever I worked noone ever took the time (product owner, architect, ux designer) to detail the workings of such a small component (I know it’s “my” problem per se, but bear with me).

    So I usually end up building these things by myself the way I find it good (mostly according to articles like this one) and everyone is happy. A week later when the QA team gets to testing the page, they will come up with all the comments you can read here, but IN JIRA TICKETS.

    And complexity grows. Reestimation starts. Velocity is being decreased. And then I’m asked, why is this country selector so complex? This is the true story why these “intelligent controls” are so rare.

    0
  104. 158

    Great work, nice article.

    I like auto-complete a lot, but with one annoyance: in my observation & testing, in the Android browser, the keyboard overlaps the auto-complete list, and in fact covers all but the first few items in the list. It is possible to scroll the page up, but I do not think that is obvious enough for everybody.

    I am experimenting with a few approaches toward choosing from a long list, such as US states or world countries, targeting all of mouse/keyboard & trackpad & touchscreen, using one same/single form – the URL is:

    http://whizman.com/Lab/

    (Also discussed at: http://www.lugie.org/node/17 )

    0
  105. 159

    About the difference between The Netherlands and Holland.
    Most used in pull downs is Netherlands. It is almost a standaard. Holland is less used in our country.

    Cheers

    0
  106. 160

    I love this country dropdown, and I’m very grateful you made it open source, too. :)

    I have one question: what is the best way to set a default value on pageload? We have access to user data via 1) cookies, 2) language defaults, and 3) country via IP, so I’d like the page to load with a default country selected.

    0
  107. 161

    ??$##%?? “…A more natural sorting order would be by popularity. Apple might want to prioritize United States…”
    Natural?? What are you talking about? What does ‘natural’ mean for you? I would expect a country list sorted alphabetically. Even more in the case where you filter with auto-suggest. If a list of 5 countries is showing up, it might be sorted alphabetically.

    1
  108. 162

    A nice feature would be to give a message if you enter something like Kosovo.

    0
  109. 163

    Hmm, what do you do if the country of a user is not included for the service?
    For example, one does not ship to the Netherlands.

    I see a couple of solutions:
    - Any variation of The Netherlands does not yield any result. (bad experience, user might feel they are not typing their country correctly and will try all variations: Netherlands, The netherlands, The Netherlands, Holland, etc)

    - Allow the user to select the country and then give feedback on the choice that the country is not available. (probably best, however because the user was able to select the country it feels like a positive/succesful choice, feedback might be overlooked)

    - Directly show feedback upon detection of a country that is unavailable. So user starts typing ‘Nether’ and the system directly gives feedback near field: ‘The Netherlands is unavailable for this service because blabla’ (maybe best solution of 3 above?)

    0
  110. 164

    Holland is a region in The Netherlands. Of course, all the interesting stuff in The Netherlands is in Holland…

    0
  111. 165

    Great article, have learned a lot from it.

    0
  112. 166

    Drop down is technically easier to implement than this, incredibly involved, system.
    So why not just improve the drop-down with:

    1. Only display countries that you actually serve. A lot of web services are not global, vast majority of merchant sites don’t ship world-wide.

    2. Sort by most common use on your site. Ship more often to United Kingdom than United States? Sort by that instead of alphabetically.
    -T

    1
  113. 167

    Cassius Krendler

    May 4, 2014 11:33 am

    Quite frankly, the arrogant method of putting “USA” or “United States of America” on top of those country forms is beginning to piss me off big time. It’s typical, but sad.
    Same goes for phone formats always dictating the USA default format, some not even allowing an international dialling code to be added.
    Not to mention the fact that – by default – a US state needs to be picked, sometimes even regardless of which country was originally selected.

    0
  114. 168

    Very useful…

    0
  115. 169

    Very good suggestions and clear explanations, thank you. I can see that this approach works well for commercial web forms. Do you have any research or approach about internal tools (e.g. the post office software) where the users would be less likely to type in “Holland”. Do you think the same implementation would bring the same added value? Or a different approach sh/could be adopted?

    Thanks

    0
  116. 170

    Really love this solution – but wondering if there’s any plans to update it?

    Newer versions of Jquery & Jquery UI have problems with it.

    Otherwise does anyone know of a decent alternative?

    Thanks!

    0
  117. 171

    In your update at the end, you mention that in the new version ” …“In” returns “India” instead of “United States,” and so on) as many of you have suggested.” ”
    I think you meant “United Kingdom”.
    I like the article and should have found it sooner.

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top