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

(al)

Footnotes Link

  1. 1 http://www.amazon.com/
  2. 2 http://www.smashingmagazine.com/2011/04/06/fundamental-guidelines-of-e-commerce-checkout-design/
  3. 3 http://www.useit.com/alertbox/20001112.html
  4. 4 http://www.useit.com/alertbox/annoyances.html
  5. 5 http://www.google.com
  6. 6 http://googleblog.blogspot.com/2004/12/ive-got-suggestion.html
  7. 7 http://www.apple.com/
  8. 8 http://www.apple.com/
  9. 9 http://en.wikipedia.org/wiki/Netherlands_(terminology)#Holland
  10. 10 http://baymard.com/labs/country-selector
  11. 11 http://baymard.com/labs/country-selector
  12. 12 https://github.com/JamieAppleseed/selectToAutocomplete

↑ Back to top Tweet itShare on Facebook

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 Mobile E-Commerce Usability research reports.

Advertisement
  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

          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.

          1
        • 5

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

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

    2
  3. 10

    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.

    1
  4. 11

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

    18
    • 12

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

      -84
    • 13

      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
  5. 14

    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
  6. 15

    Most excellent article and demo, thank you!

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

    0
    • 16

      England was the first thing I tested too :/

      0
    • 17

      Jamie, Baymard Institute

      November 10, 2011 7:23 am

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

      3
    • 18

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

      4
      • 19

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

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

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

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

    0
    • 23

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

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

        2
      • 25

        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.

        1
  8. 26

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

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

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

        0
  9. 30

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

      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.

      9
    • 32

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

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

    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
  11. 36

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

    0
  12. 37

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

    0
    • 38

      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
  13. 39

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

      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.

      -12
  14. 41

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

      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.

      2
    • 43

      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
  15. 44

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

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

      2
    • 46

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

        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
  16. 48

    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
  17. 49

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

    3
    • 51

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

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

      0
  19. 54

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

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

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

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

      1
  21. 57

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

    0
  22. 58

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

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

      0
    • 60

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

        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
  23. 62

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

    0
    • 63

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

      0
  24. 64

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

      That kind of difference is normally handled by locale databases.

      0
      • 66

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

          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
  25. 68

    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
  26. 69

    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
  27. 70

    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
  28. 71

    Well… that’s better than this one http://www.pravastvar.com/google/compare.html

    0
  29. 72

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

    0
  30. 73

    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
  31. 74

    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
  32. 75

    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
  33. 76

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

    0
  34. 77

    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
  35. 78

    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
  36. 79

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

    0
  37. 80

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

    You know timezone and language, matrix it up!

    1
  38. 81

    Lol I just did the same, disapponting : )

    0
  39. 82

    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
  40. 83

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

      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
  41. 85

    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
  42. 88

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

    4
    • 89

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

      0
    • 90

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

    -3
  45. 93

    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.

    1
  46. 94

    Next iteration: detect user location and populate it for them

    0
  47. 95

    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
  48. 96

    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
  49. 97

    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
  50. 98

    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

↑ Back to top