A better way to select country names
Long select lists aren’t much fun, but we use them every day. Since I’ve been involved in e-commerce work it seems de rigeur to grab the 200-odd long list of country names and whack them into an unweildy select tag for the customer details page. Bizarrely this long list of countries also includes many places that are entirely uninhabited (anyone holidayed to Bouvet Island recently?). But since the country list is a standard, usually based on the ISO-3166 list of country codes, web developers are rarely keen to manually edit it.
In August this year Bruce Lawson highlighted this problem stating the biggest issues were the sheer number of items in a select pull-down list and the difficulty in locating some countries alphabetically (is it Great Britain or United Kingdom?)
Back in the hazy days of 2002 Joe Clark also complained of this in his book Building Accessible websites. Even Jakob Nielsen thinks long select lists is a very bad idea. And if these lumineries think it, it must be right. So why isn’t anyone doing anything about it?
The general consensus on the web seems to be simple text input boxes are the way to go, but with enough intelligence to actually match countries efficiently even if they are mispelled.
After reading Bruce’s blog in August I decided to have a go at solving this issue. I’m also just as guilty of using the long select lists and I’d like to fix this. At Studio 24 we are in the middle of re-developing our e-commerce system so this is just the kind of thing we want to be doing at present.
Starting with the select list
We start with the standard select pull-down list of country names. As mentioned above this is generally based on the ISO-3166 list, mainly because most payment providers require the country code to be passed to them in the ISO-3166 format. So it makes sense to use this for our applications.
Now try to locate England / Great Britain / United Kingdom. Getting bored yet? You can start to see the problems.
For the select list a screen reader will get something like “Country combo box Afghanistan one of 240″ (this is based on a test on JAWS). The screen reader user can then navigate through all 240 options just as a sighted-web user would. So both visually impaired and non-visually impaired users have the same problem: the select box is too long.
Text input
The rule of simplicity tells us to use a straightforward text input box for the country name. Users know where they live after all, so just let them type it. Using PHP with a simple check against an array of known country names we can match the country once it has been typed in.
- Example 3: text input box
- Example 3: PHP code
Mispelling
A common issue is mispelling country names. Try entering Farnce or Great Briton. We have a way to deal with this in PHP, it’s called soundex and metaphone. Soundex is used to match words that have a similarly sounding pronounciation. The function returns a string 4 characters long, starting with a letter. Metaphone is a more advanced algorithm that understands the basic rules of English pronunciation. So ideally we’ll use metaphone here.
If you’re developing a web app and need similar functionality it’s worth noting metaphone isn’t intalled by default with MySQL but soundex is.
- Example 4: text input with soundex
- Example 4: PHP code
Synonyms
What about alternative spellings? Well we don’t want to add data to the ISO-3166 list since that will mess our data up and cause issues if that data ever needs to be updated. So creating an array of other values and what country codes they map to would be useful. It might also be useful to create an ignore list to get rid of those more silly country names such as Bouvet Island (unless an Arctic penguin happens to use your website of course).
- Example 5: text input with synonyms
- Example 5: PHP code
Using AJAX to update on the same page
This is all very well I hear you say, but where’s the acrobatic Ajax? Surely this can’t be a true Web 2.0 form without it? Well obviously that’s rubbish, Ajax should only be used where it’s appropriate - just like our sometime friend Flash.
In our example, Ajax could nicely be used to verify the country name once it has been typed. This can give the user instant feedback and allow them to confirm the country name before submitting it to your application.
Obviously there are caveats here, the user needs to be able to obviously see any alert created with Ajax - here I’m using the yellow fade effect pioneered by those clever folk at 37 Signals. Also you may want to be careful about how often you alert the user TO DO
- Example 6: the finished form component
- Example 6: PHP code
- Example 6: JavaScript code
Internationalisation
Now this technique is all very well for English words for country names, but what if we’re developing a site in French or Chinese. TODO
References
- Bruce Lawson: Inputting country names
- Joe Clark: Building Accessible Websites book
- Jakob Nielsen: Drop-down menus - use sparingly
- 37 Signals: The Yellow fade technique
- ISO-3166 list of country codes
- PHP: Soundex and Metaphone
December 5th, 2006