Make Country Selection Faster with Autocomplete Textboxes

by on 09/22/10 at 12:48 pm

People that live in the United States have a small convenience that people in other countries don’t have. Their country is likely the default option in country dropdown boxes in forms. This means they don’t have to spend their time and energy scrolling through a long list of over 100 country names looking for their country. Those that don’t live in the United States, however, may find themselves facing this user interface nightmare the next time they have to select their country on a form.

The good news is that there is a better way to select countries by using a different type of user interface control. The autocomplete textbox is a control that adapts to the user’s input. Instead of displaying an overwhelming list of countries in a dropdown box that fills up the entire screen, an autocomplete textbox only displays country names that match the letters you type in the textbox.

The benefit of this is that users don’t have to scroll through a giant list of country names in alphabetical order. The autocomplete textbox suggests a small collated subset of countries that matches the user’s input. As the user types in their country name, the autocomplete textbox will automatically narrow the giant list of countries down to a fraction. When you display fewer countries to the user, the user is able to find and select their country from the list faster and easier.

An autocomplete textbox is an efficient and effective replacement for the country dropdown box. It works well for countries because there are so many of them. When users have to scroll through over 100 countries in a dropdown box, an autocomplete textbox is the solution that will give your users a better form experience. It doesn’t matter what country they live in, all users want to do things better, faster and easier. Designers should always look for ways to design for that kind of experience.

Make it Happen

9 Responses to “Make Country Selection Faster with Autocomplete Textboxes”

  1. Derek McTavish Mounce

    Sep 22nd, 2010

    Yup, nice. But the one-step-further is… instead of either a selectbox *or* an autocomlete, do both. A selectbox that filters based on what you’ve typed. It’s something I’ve been using a lot lately, and it works very nicely. And it degrades quite well. :)

  2. Mouly

    Sep 23rd, 2010

    How about using geolocation to select the user’s current country as the default?

    • Anthony

      Sep 23rd, 2010

      Text suggestion boxes are commonly used on travel sites, example, searching for a flight from one destination to another. Some sites are starting to use geo-location to pre-populate the “From” part of your trip.

  3. Soren

    Sep 23rd, 2010

    Opening the standard drop down and pressing “d” will also take you to the first Country starting with that letter. Most operating systems will also allow you to type more than one letter (if done quickly) and writing “do” would then take you straight to “Dominica” instead of “Denmark”.

    Another reason why I would not recommend using the type ahead as you are suggesting is that users will not know what version of Country name you are using.

    For instance “United Kingdom” or “Great Britain” (there are plenty more examples of this).

    People typing “Great” would be very confused if your version was “United Kingdom”.

    I recommend staying with the simple drop down for now and then hope that users smarten up and learn that they can type for quick access inside that instead.

    • Anthony

      Sep 23rd, 2010

      I think the enhanced usability experience provided by text suggestion boxes will win in almost every scenario.

      It’s quite easy to code variations of a country into a result set, especially if it is text suggestion box and not a drop down list where users might actually see both variations.

      Why can’t Great Britain and United Kingdom both be in the result set? One could be an alias for another.

      If you typed “do” wouldn’t it be safe to say you weren’t looking for “Denmark”? Either way the delete button is not far away.

      Now that Google Suggest has transformed into Google Instant, I expect we will see a marked increase of text suggestion boxes, especially in scenarios where results are displayed.

      • Paul

        Dec 10th, 2010

        Because UK and GB cover different things.
        Great Britain is England, Wales & Scotland
        The United Kingdom of Great Britain and Northern Ireland covers England, Wales, Scotland and Northern Ireland.

  4. chris

    Sep 27th, 2010

    What toolkits have you used that provide this functionality? We are using GWT and have just started to explore improvements of this nature…..

  5. Hartmut

    Jan 5th, 2011

    I have to agree with Soren.

    The Solution presented here is simply solving a problem that one operating system (Mac) creates.
    On other Os you simply bring the focus on any drop-down menu and type. The result is similar to the suggestion box.

    The downside of the suggestion box is that the user need to know in advance what format he should be typing. Countries can be in several languages. Germany or Deutschland for example. Having a list presented with the available choices is a good user interaction.

    Having to guess or god beware think is an obstacle for the user.

    A good UI lets the system do the work and not the user.

Leave a Comment