10
May
08

Usability Of The Country Picker UI Element

While working on the country picker widget for Tine 2.0 I got remembered on a long discussion with a customer about the country picker in the traditional web application address book they where running.

The country selection user interface element there was a normal combo-box with 238 countries in it. If you want to select a country you have to search this alphabetical sorted list yourself. This is a quite annoying task for people working the whole day with the address book.

So they thought, it would be a tremendous amendment to make the country field a normal text field where the user just types in the country e.g. ‘Germany’. In normal operation most users only deal with only a few countries and do not need to have counties like ‘Saint Vincent and the Grenadines’.

This approach has two problems. First, If the country is a free text field, you will have typos in the data e.g. ‘Gremany’. You will miss such entries when you filter you addresses by the country ‘Germany’. Secondly, this only works if the company operates in one language, cause French employees would write ‘Allemagne’ in the field.

The worse situation is caused by limitations of an old fashioned web application. It could be solved nowadays by using up to date web techniques. Below is the current country selection we use in Tine 2.0. It’s a combination of a text field, a combo-box and a search field:

  • You could only select well defined values
  • You can perform a live search / type ahead
  • You can use it like a traditional combo-box
  • You can use the ENTER key to select, no mice input needed (please notice the fluent work flow: after pressing ENTER you can directly perform a new search)
  • You can use the COURSER keys to navigate in the results


BTW: After we noticed, that the old web address book (guess which) stores localised country names in the database, we switched the country selection to a text field as the data are messed up in any case.


0 Responses to “Usability Of The Country Picker UI Element”


  1. No Comments

Leave a Reply