Selecting country names in forms

All too often when I want to order something online or find information related to a specific region, I am faced with a badly designed order or search form. One of the common hurdles I have to jump over is a huge drop-down select box with country or municipality names. “Sweden” is rarely at the top of country lists, and picking “Övertorneå” from a select box containing Swedish municipalities would require me to select the last of 290 options.

Some browsers let you navigate drop-down lists by typing letters on your keyboard. Others don’t, so depending on which browser you’re using there is plenty of scrolling or keypressing ahead. Then there’s the amount of HTML generated by a couple of really big select boxes. It can easily be tens of kilobytes, which is not negligible if you’re on dialup or using a mobile phone. Select boxes are clearly not the optimal solution in these cases.

Jakob Nielsen notes that select boxes are often more trouble than they are worth in his Alertbox Drop-Down Menus: Use Sparingly:

Very long menus that require scrolling make it impossible for users to see all their choices in one glance. It’s often better to present such long lists of options as a regular HTML list of traditional hypertext links.

Putting the options in a regular list of links is often difficult to do in a form, which may contain several such long lists of options. Normal hypertext links don’t work very well for letting the user select an option either, and will probably generate even more markup than a corresponding select box.

So is there an even better way? Bruce Lawson has been thinking about this, and in Forms: inputting country names suggests letting the user type their response into a text field. The problem with that is the need for server-side validation of the user input to correct typos and recognise synonyms used for countries. And the last part is where Bruce is looking for help. Check out his post and give him any suggestions you might have.

Posted on August 24, 2006 in Quicklinks, Usability

Comments

  1. I think its dangerous to rely on silently changing mis-spelled words, unless there is some human validation on the user’s part. I like the idea of typing it in instead, so why not do something similar to Google Suggest or Answers.com? It could be coupled with validation similar to dictionary.com, which, if you submit a mis-spelled word it gives you likely suggestions. This would easily narrow it down to a few countries, if not only one possible correct answer.

  2. August 24, 2006 by ErikHK

    I like the idea of input, but only if it goes like this (which it probably will): First, I enter for example Sewden, and it assumes that I mean Sweden or maybe Sudan (the application assumes I haven’t touched a keyboard before), and then asks me to pick one of them, if it generates only one, I still want it to validate my input. It should also have some sort of limit, so it doesn’t spit out a lot when inputting only a few letters (or even nothing). If you have JS activated, it could function like Google Suggest as Paul R. Redmond says.

  3. I like Paul’s idea of using a Google Suggest-style text box to handle the input. Whether or not this method can be implemented, and assuming PHP is available, I recommend using levenshtein, a function which compares two strings and returns the distance between them as an integer (lower is better).

    Loop through the results and compare each string to the input, and return the top, say, 5 results for the user to decide, but also provide a text box for refining the search.

  4. I definately like the idea of user input like that, but it would require some sort of server side validation of the names, perhaps using suggestions based on the input. Even though there is a lot of validating going on on the server, it seems like a much better way to deal with country names than using that huge list of countries in a select box.

  5. So it goes:

    You have a country input text box. The user starts typing something and sees Google suggest-like suggestions appear (hopefully in the language in which the user has chosen to navigate). She then finishes to type, having accepted a suggestions or not, and at some point submits the form.

    JavaScript now takes a second shift and validates the user input on the spot (without delay). The user makes the necessary corrections and finally is allowed to send the form to the server, where the final validation is done by PHP/ASP…

    I must say it seems like a great solution for the users: they are very unlikely to have an unnecessary roundtrip to the server, and might not even have to type the name of the country at all. No long, mis-ordered list to scroll through.

    On the developper’s side this gets really harder though and it doesn’t necessarily make the page that much lighter

    I guess it’s worth it but it’s not going to be for everybody.

    PS: the ISO list of countries and two-letter country code (ISO 3166-1-alpha-2) is also available in French

  6. What about using PHP to preselect the country dropdown based on the location of the user?

    I’ve been using PHP to feed different adverts to people depending on the country they’re from, based on IP, for years.

    Why not do the same for forms?

    It goes like this:

    a) check the IP address

    b) work out the country based on this

    c) preselect this country in the drop down

    It’s not going to 100% accurate (you might be on holiday in the UK), but it will help most users to get a better experience and it will be no worse for the others.

  7. Ah, Sweden’s never at the top of anyone’s list!

    Oh, no, wait….I see what you mean!! Hahaha! ;)

    Well, I think Bruce’s initial idea makes sense - as that is what I would have come up with…as for the validating - yeah, that’s really just coding and trying to account (or discount) for certain inputs. Better to build bold validations than try too many ultra-specific ones. Cheers for the link Roger - I’ll check out Bruce’s post.

    Nortypig has given a much longer response to this on his site: here

  8. What about using PHP to preselect the country dropdown based on the location of the user?

    This seems like a fairly usable approach to me. For the large majority of cases, the value in the dropdown will be right, so that only a small proportion will either have to mouse or keyboard navigate to the dropdown to amend the selection.

  9. Other countries present their own challenges. It would be nice to see a better solution for Japanese residents to choose their prefecture on a web form. There are 60 prefectures, always written with kanji (Chinese characters), and usually ordered not in phonetic order but in geographical order from north to south.

  10. August 25, 2006 by Wulf

    Using PHP to automatically select a country sounds like a great idea. I’ve actually considered the possibility before.

    Anybody up to doing the coding and licensing it under the LGPL or something similar?

  11. August 25, 2006 by Maarten Leewis

    A great feature i don’t see used much is the tag. Mostly because user agent implementation is pretty bad. The only browser that has this worked out great is IE(mac). Some of the other vendors should learn from this, to actually makes this work as it should. At least how i feel it should work.

    I guess some of the above mentioned solutions are much better, but for a non-programmer like me this should work. I don’t use list like this much though.

  12. August 25, 2006 by Maarten Leewis

    i was talking about the optgroup tag. Sorry missed that in the preview…

  13. But how would you group the countries using optgroup, Maarten? That’s one of the problems. By continent? But different cultures have a different taxonomy of continent (http://en.wikipedia.org/wiki/Continent).

    By “most probable” at the top (e.g., like some forms that do most business with the US and the UK have those at the top)?

    Either way means the user has to understand and adapt to someone else’s taxonomy. And, given that they know the country they live in, I think it’s most intuitive for them just to type it in.

  14. August 25, 2006 by Maarten Leewis

    Of course i agree with that. But in that case how will you deal with the different languages people type their country name in.

    Will they type Russia or ?????? will it be China or ?? or even ??? How far can you take this? To me it feels like if you are going to account for different taxonomies you should also account for their different languages. Maybe it seems less likely that someone will spell it in their native language, but it’s seems equally unlikely that someone will not understand the taxonomy used at the website.

    So if you intend to let users just type in their country name you should account for different spellings and the different charachter sets used. There are so many variables to take in account to make it as easy as possible for the user, so i just wonder how far are you willing to go.

    p.s. I wrote Russia in cyrrilic, and China in traditional and simplified Chinese. But we don’t have UTF support here…

  15. fyi, autocomplete text boxes are now part of most AJAX frameworks.

  16. August 25, 2006 by Roger Johansson (Author comment)

    Preselecting a country based on IP will probably help more people than it doesn’t so it does seem like a good idea.

    Maarten: Nope, still stuck with iso-8859-1 here. I had a go at switching to UTF-8 a couple of years ago but managed to screw up my database, so I’m reluctant to try it again.

  17. August 25, 2006 by Sylvain Vachon

    I work as a lead user interface developper in a banking website for which I developped a solution for the selection of country names. The first usage for this selector is for wire funds transfers, but now, we use it everywhere in the website.

    Here’s the deal:

    • give a dropdown to users with their 10 most used countries in transactions or operations in the site (by the way, you can use a cookie to keep those “prefered” countries)
    • have a “link” in the dropdown to extend the choices to all ISO-3166 countries with a simulated dropdown loaded with an AJAX call
    • the list of ISO-3166 countries is navigable with a rollodex-like interface
    • in the list of those countries, we included synonyms and references to official ISO country names (ex: Yougoslavia refers to Serbia And Montenegro)

    Users like the country selector. After only a few use, you get the countries you use directly in the small dropdown. For the rare occasions you have to select another country, there’s the list available with a simple interface and neat help from references and synonyms pointing you to the official names (as a banking website, you have to be careful with country name synonyms or references, you cannot have a political edge!)

    I’m working on accessibility for the selector. It should work without the AJAX and Javascript stuff.

  18. Rather than pre-selecting, how about putting the country of the user location at the top of the list via IP lookup?

  19. August 27, 2006 by Roger Johansson (Author comment)

    Sylvain: A bit hard to tell without seeing a live example, but what you describe does sound like a nice solution.

    Matt: Yes, that’s what I meant by preselecting. Well, in combination with making that option selected. If you just put it at the top of the list without also making it selected I think some people would miss it because they don’t expect “their” country to be the first option and immediately start looking further down the list.

  20. August 28, 2006 by Michelangelo

    Some browsers let you navigate drop-down lists by typing letters on your keyboard. Others don’t.

    Roger, could you expand? Which ones don’t? Thanks.

  21. I don’t see what is wrong with selection boxes. The world is a large place with lots of countries… so be it, if it takes you 5 seconds of your life everytime you have to select your country from a list vs a few solid days of coding some complex application to do it I would choose the 5 seconds everytime.

    You guys need to get out of the house more!

  22. August 31, 2006 by Roger Johansson (Author comment)

    Michelangelo: Two examples are Lynx and Opera for mobile phones (which I use quite a lot).

    tom: What makes you believe the end user would or should care about how long it takes the developer to build something that works better? Some of the suggestions here would only take minutes to implement anyway.

    Perhaps we need to get out of the house more. Yeah, most of us probably do.

  23. August 31, 2006 by S Jain

    I think the usage of finding country through IP address can be extended to even the City and State for US. In addition, I haven’t really seen it but the CivicSpace website provides a free database of Zip Codes in US. This can be used to autopopulate the City and State for US customers.

  24. Does anyone know what is the best way to create a country selection. I create a site for different languages. Have I write the country name in the selection box in his original language like Nederland or in English like Netherlands?

  25. Yes, I live in Thailand, which is even lower in the drop down box than Sweden (or sometimes not there at all!). I find that a lot of browsers let you navigate drop-down lists by typing letters on your keyboard, but only for the first letter. So I type T for Thailand and I get Taiwan, then I type the second letter of Thailand - ‘H’ and the country jumps to Hong Kong, so I inevitable have to use my mouse and go through the ordeal that you and I find so frustrating.

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.