
Redesigning the country selector - robert_nsu
http://baymard.com/labs/country-selector
======
mmastrac
While this has a nice UI, it suffers from a ranking system that fails to
weight prefixes correctly.

For those of us in Canada, typing "ca" should probably rank countries that
start with the "ca" prefix first, followed by countries that have a word that
starts with "ca", finally followed by countries that just happen to contain
"ca".

I don't see much use in showing "United States" as the first match for a user
who has typed "c" and "a".

The same problem exists for the prefix: "uni". The list in that case is:

    
    
      United States
      United Kingdom
      Réunion
      Tanzania, United Republic of
      Tunisia
      United Arab Emirates
      United States Minor Outlying Islands

~~~
samgro
Can anyone explain why 'United States' could possibly be an autocomplete
result for 'CA'? I am staring at United States and just can't see a 'C'
anywhere... have I totally lost it?

~~~
jqueryin
Funny enough, I already proposed the same problem and solution with a blog
post and sample code for "Re-thinking the State Dropdown with Autocompletion"
back in May. Same issues applied, but there was at least some feedback on
reddit and optional changes.

[http://skookum.com/blog/re-thinking-the-state-dropdown-
with-...](http://skookum.com/blog/re-thinking-the-state-dropdown-with-
autocompletion/)

[http://www.reddit.com/r/Design/comments/h37gb/rethinking_the...](http://www.reddit.com/r/Design/comments/h37gb/rethinking_the_state_dropdown_with_autocompletion/)

    
    
        My blog post links to jsbin sample source so feel free
        to optimize it with all of your proposed fixes.
    

<http://jsbin.com/oxifa3/18/>

------
mynegation
My main complaint about old country pickers and this one is non-prioritization
of countries in the list. Yes, I understand that this may be a sensitive
issue, but how much likely your customer is going to be from Canada than from
Cameroon. Or if I start typing 'CA' in this selector, I get American Samoa and
Antarctica before Canada! Let alone my old acquaintances Cambodia and
Cameroon.

Same for Russia - you get Aruba, Nauru and Burundi higher in the list.

So here is my non-PC suggestion: rate countries by population or GDP per
capita, so countries where your customers are more likely to be from will be
closer to the top and thus easily accessible with fewer keystrokes.

~~~
awj
I think that's making it too hard. Where is this information coming from? How
do you update it?

Instead, just order the matches like so:

1\. Everything that matches at the first word 2\. Everything that matches at
the start of some word 3\. Everything that matches at a non-start position
within a word

Granted, in this scheme Cameroon will still show up before Canada, but you
don't have to look anywhere near as hard to find it. I doubt anyone would
notice/care about your "non-PC rating scheme", but I do know it would be a
much bigger pain in the ass to maintain.

~~~
mynegation
This is a good suggestion - I believe prefix match should weigh more than
partial infix match.

As for "too complicated" - I am not suggesting to extract GDP or population
data in Javascript. But in static HTML on server side you may add additional
"weight" attribute to each option, the way alternative spellings are added
(look at the HTML source). And then you may manage these weights externally.

~~~
speleding
I believe prefix match should weigh more than infix match... except for
countries that start with an article (The Philippines, The Netherlands) where
infix match works better. The Netherlands is now number 11 on the list after
typing "Ne".

------
rapind
I have to ask. Is it common for anyone to type their country starting with
characters inside of the word?

I.e. instead of typing "can" for canada, would you type "ada" or something
similarly fuzzy?

I personally type "can", and if Canada is not the first result I consider it's
usability inferior to a standard drop-down.

~~~
courtewing
It may not be common, but I don't think it is an unreasonable thing to expect.
Think of a country such as the Democratic Republic of Congo -- I'm not
entirely certain, but I'd imagine it is common for someone to simply start
typing "Congo" while still expecting the result to be available.

This example may not be ideal since this country selection has both "Congo"
and "Congo, Democratic Republic of" in its data set, but the principle can
probably be applied elsewhere.

~~~
narcissus
I think the parent was more interested in whether someone would use a string
of letters _within_ a word in the name, as opposed to just starting a word
somewhere in the name.

That is to say in your example, the parent wasn't questioning whether the code
should support 'Congo', but whether it should support 'ong', for example.

------
Macha
Normal country selector:

Type I, click Ireland (seven or so down).

This: Type I - Ireland not shown.

This is less usable to me than the usual country selector as a result.

Yes, I'm being nitpicky, but all the JS doesn't cover up that it's slower to
find my country.

------
jgrahamc
I typed UK. The only option offered was Ukraine.

I'd actually much prefer a country selected that was based on geography with a
Mac OS X dock-like magnification so I can choose my country easily.

~~~
kmort
Remember the old Windows time zone picker that let you click on the world map
to select your zone?

Geopolitical sensitivity about precise borders forced Microsoft to switch off
the region-highlighting feature.

(Info:
[http://blogs.msdn.com/b/oldnewthing/archive/2003/08/22/54679...](http://blogs.msdn.com/b/oldnewthing/archive/2003/08/22/54679.aspx))

Also, the user may not always be picking their own country and it may be
unreasonable to ask the average user to find, say, San Marino on a world map.
While you could of course restrict the use of a map-style picker to only the
users-own cases, it would be nice to have a somewhat standard picker for all
occasions.

------
Jabbles
Could you retrieve the country from the IP address to set the default?

~~~
jinushaun
Doesn't work if you're traveling abroad. I hate getting country-specific
versions of a site even after logging in with my US credentials. It should
remember that I'm from the US.

~~~
run4yourlives
You're presenting two different problems really.

1\. Yes, sites should remember your personal preferences that you've already
set.

2\. When setting those preferences, pre-filling based on ip would work in
99.9% of locations. A standard selector can handle everyone else.

------
gooddelta
Throwing an autocomplete at something is NOT always an upgrade. I've spent
quite a bit of time thinking about country selectors, and I'll present my
solution for two separate use cases here.

In the first case, a country selector allows a user to select a country as a
component of their shipping address, a user profile, etc. The input method
described in the aforementioned article suits that case decently; however,
it's not immediately intuitive that a user can access some of its touted
conveniences (such as the selection of a country by its short name), and in
most cases, a user will not frequently return to the same country input field
(i.e. they'll set up a saved shipping address ONCE, or set their home country
on a social profile ONCE) which removes the possible avenue of training the
user to expect the pattern.

In this case, the best possible user experience can be given by leveraging
geo-location (either by using the JS API, or any of the myriad IP-based
solutions) and making intelligent suggestions to the user. For example: If I'm
a user, and I am required to enter my shipping information (including country)
on a checkout page, the page's best GUESS as to where I am should be displayed
first, and the user should be allowed to change that assumption quickly. For
example, you might show the user a drop-down box with the page's best guess
selected by the default, surrounded by nearby countries (depending upon geo-
location accuracy). Secondly, flag icons actually have quite a bit of value --
many people think visually, first, and will be looking for their flag's
colors. Even if the icons are minuscule, they're still incredibly helpful.

The second use case which I want to present is that in which a company (such
as Range Rover) presents a page allowing you to select which localized version
of their site you wish to visit. In Range Rover's case, this is a massive list
of countries, with their respective flags. Let's be honest: part of the reason
this page exists for most companies is because they wish to demonstrate how
significant their global reach is, or the expenditure required to translate
the site. On Range Rover's site, the US (my homeland) is buried deep on the
bottom left-hand side -- to make this more usable, they could leverage the
same geo-location technique discussed above, and simply provide visual
differentiation between my home country, and the other countries! Everyone's
goals are achieved here; usability is increased, the "global" feeling is
imparted, and the business douches who insisted upon a massive list of
countries in the first place are sated!

The guys who wrote this article don't understand what's possible with current
technology, and therefore cannot successfully design for it.

------
ricardobeat
Why is a simple auto-complete input doing 100+ points on HN?

It seems to me they are just selling their $78 report on checkout usability.

------
billpg
Impressed to see 'England' become 'United Kingdom'. Not so impressed to see
that 'Wales' wasn't similarly treated.

~~~
ajanuary
"uk" doesn't, but "gb" does :/

~~~
alexchamberlain
Wales and UK work for me - I suspect it's been updated.

~~~
tspiteri
Yes, those work now. Northern Ireland hasn't been added yet though.

------
afterburner
I don't start typing the letters inside of a word to try to get the word in
autocomplete.

------
tommi
Being keyboard only is huge usability issue. Simple drop down enables to use
pointer devices as well.

------
smackfu
Fails for U.S.A. and U.K. Also Laos.

And I agree that matching "us" to "Australia" at all is pointless.

------
fleitz
Why don't country selectors use the free IP databases to pre-fill the country?
It would reduce 90% of user input.

After that just tally a daily table of "INSERT INTO country_order
(count,country) FROM (SELECT count(*),country from users)" and then do:
"SELECT country FROM (((SELECT TOP 10 count,country FROM country_order order
by count) UNION (SELECT 0 as count, country from country_order)) GROUP BY
country) ORDER BY sum(count), country"

That should produce a country listing where the TOP 10 countries are ordered
by their use and the rest are sorted alphabetically. The SQL might not be
perfect but you get the idea.

------
troyjfarrell
This can be diplomatically difficult.

The linked implementation only lists Taiwan as "Taiwan, Province of China". I
could see this being interpreted in many different ways, with either side
being insulted. (Maybe that's best.)

~~~
gurkendoktor
If 'Hong Kong' can stand on its own in the ISO list, I really can't see the
PRC being insulted by calling 'Taiwan', well, 'Taiwan'.

It seems the dropdown here is just a harmless tech demo based on ISO, but this
is _such_ a common mistake. Even the rails/country_select thingie on GitHub
has the same trap included. Use it and you are bound to make Taiwanese users
unhappy, which already happened to Facebook, Twitter, Google Maps, ...

~~~
Gormo
The PRC claims Taiwan as an integral part of China. But Hong Kong is a
'special administrative region', i.e. an autonomous jurisdiction for which
China essentially took over as the colonial power.

------
jfruh
On a similar note, I've always found it kind of amusing/frustrating that forms
in the US make you fill out city, state, and zip code, when in fact the zip
code indicates a specific city and state. I realize that's a huge database of
geolocation data to keep as part of the program, but I wonder if there could
be some kind of lookup that goes on behind the scenes and fills in the city
and state if the response is quick enough (and allows the user to fill it in
manually if it doesn't).

~~~
dmethvin
Zip codes can and do cross both state and city boundaries in some cases.
That's not true of zip+4 but most people don't know their extra 4 digits.

Then there is the expected rhythm of filling in the form as city,state,zip so
putting zip first throws people off. I did a form once where we put the
country above city/state/zip so we could do the wording for those more
appropriately (e.g., switch to "postal code") and even that was annoying to
many testers.

~~~
fmota
You need more foreign testers.

------
cabirum
Sorry to say - but it sucks. Completely irrelevant results, strange sort
order.

In any standard dropdown list, just press a button and it scrolls to the first
word starting with it. Press again, etc, and it cycles.

Fuzzy string search is a good algo and all, but does not make a good country
selector. Everyone knows first letter of a country, so keep it simple. And,
see SublimeText for an excellent example of fuzzy string searching.

------
kristiankh
Update 13 Nov: As many commenters have noted the sorting logic on the original
demo wasn't all that "logical".

We've 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.

PS: The Smashing Magazine article describing the handling of typos, multiple
spelling sequences, synonyms and prioritization can be found here:
[http://uxdesign.smashingmagazine.com/2011/11/10/redesigning-...](http://uxdesign.smashingmagazine.com/2011/11/10/redesigning-
the-country-selector/)

------
sixtofour
When typing "united ...", the United States shows up in the list.

When typing "america ..." the United States does not show up in the list.

Yet "United States of America" is the, or one of the official/common names of
the United States, according to <https://en.wikipedia.org/wiki/United_states>
and [https://www.cia.gov/library/publications/the-world-
factbook/...](https://www.cia.gov/library/publications/the-world-
factbook/geos/us.html)

I like the interface, but it has a few quirks as pointed out in the other
comments, and the database behind it could probably use some additions.

------
ElliotH
I love that England gives me United Kingdom

~~~
alexchamberlain
I love that "Great" gives me United Kingdom.

------
huskyr
Nice one. Scrolling down the endless list of options in a form is pretty
cumbersome. I like the fact that you can type in common abbreviations for
countries as well ('de' for Germany, etc).

------
skrebbel
nice idea, but the graceful degradation also needs extra work if usability is
the goal. On Opera Mini, for example, it's a text box. The javascript will
round-trip to the server, taking several seconds. I'd much much prefer the
dropdown. Out of context, i'd not even know what to type into what appears to
be just a text field. You could consider this a usability flaw in Opera Mini,
but it means a usage drop for many mobile browsers for sure.

------
robert_nsu
I like this. However, I'm wondering if including all the common and local
names of a country would become too cumbersome during implementation over
time.

------
rednum
While it's better than traditional country selector, I think there are some
possible improvements here. I started typing Ger (as in Germany), and first
suggestion was Algeria - wouldn't it better to sort them by
popularity/language version of my browser/ip geolocalization, instead of
repeating old mistake of putting stuff in alphabetic order?

------
sievert
I still don't see how this is any more useful than just using the default
auto-complete with your standard country list. The data I've measured shows
that selecting your country is not often a pain point.

Also, if it's for shipping, you can often work out the country by the address,
and perhaps just show the matches.

E.g. Do you mean Someplace, X or Someplace Y in a drop down.

------
speleding
A minor improvement suggestion: countries can now start with their proper
article like "The Philippines" and "The Netherlands".

The article often gets omitted in drop down menus so people can find it if
they search by alphabet (and advanced users can press the first character to
jump to it quickly). With this plugin that would no longer be needed.

------
swatkat
Well, I don't think this "works". We are conditioned to think that lists are
sorted in alphabetical order. When I key in first few letters of a country, I
expect to jump to that country's name directly. But with this redesign, I
ended up typing more letters to "fine tune" auto-complete's suggestion!

------
ehxor
Most Canadians I know are used to hitting 'c' three times. It skips you past
Cameroon and Cambodia and selects Canada. I suspect people from other
countries behave similarly?

This totally breaks that expected behavior for me. Maybe it should, maybe
"it's time" for that.

I suppose I can get similar behavior with this by typing "ada".

------
missing_cipher
Something that always bothers me about "Select redesigns" is that scrolling
does not work like it should. If you move your mouse outside of the
div/whatever, it'll scroll the page instead of the select. A regular select
will keep scrolling until it reaches the end, then it'll scroll the page.

------
kablamo
As a vimperator user and command line person this is awesome. But obviously as
a tablet or mobile phone user this would be not good.

I think this could be easily fixed by having the drop down menu pop up when
you click in the input field (before you have typed anything).

~~~
ctdonath
How about popping up a world map, letting the user tap the country, and if
that's unclear give a list of local countries? Or putting a map button next to
the field for such augmentation of typed entries?

------
thegorgon
this is hardly something brand new, this looks bettter and works just as well
:

<http://harvesthq.github.com/chosen/>

I'm sorry but progressive enhancement of a select tag into an autocomplete
element isn't quite news worthy.

~~~
brlewis
Does chosen have an equivalent to what this selector does with data-
alternative-spellings?

~~~
thegorgon
no, but again, that wouldn't be that hard to add.

------
iloveponies
Whilst some country endonyms appear to work (Deutchland, Hrvatska, Suomi),
non-latin endonyms (日本,Россия) fail, some even when romanised. This isn't an
easy thing to solve when many countries have multiple de facto or de jure
languages.

------
shedside
A different approach I've tried before is to perform a lookup on the visitor's
IP address, and then to auto-select the country that we think they might be
from. If we get it wrong, they can always select another country the usual
way.

------
xoebus
I like the attention to detail when I enter "Scotland" and it returns "United
Kingdom".

------
kiloaper
A few issues. Typing "ire" lists Ireland last with 2 entries not even starting
with "ire" above it. That's kind of annoying. More importantly "Ireland"
refers to the island, as opposed to the country which is the Republic of
Ireland.

------
emp_
Feedback I didn't find in the comments: when you blur the field without
actually picking something from the list, it resets even if there is only one
option. Examples:

Type: united states

Leave the field, it works

Type: united states of america

Leave the field, it resets

------
joshfraser
I want someone to take this alternative values approach to the occupation
selector. They seem to vary just enough that you have to read the full list to
find the one that fits best.

~~~
LogicX
Unfortunately there's no universally accepted pre-defined list of occupations
which are common knowledge to enough people to make that happen.

------
jules
In addition to fixing the sorting as other people have mentioned here, it
would be great if you made the return and tab keys choose the topmost
completion.

------
jeromeflipo
Somewhat related: if you know someone at Google, could you please tell him/her
to add keyboard support to the country selector of Google News? Thanks.

------
Tloewald
Another, perhaps even easier and more obvious solution would be to guess the
country based on IP address and prepopulate the field.

------
blissofbeing
I find this plugin far superior:

<http://harvesthq.github.com/chosen/>

------
bhalliburton
A country selector should also address typing and nomenclature around
addresses and zip/postal code.

------
vaksel
you have to keep user experience in mind...everyone is used to scrolling down
to find the country...if you throw this in, half your users will get
frustrated not knowing what to do.

on the technical side, it should just match the starting letters, instead of
all letters in the name

------
jdavid
You should prioritize the list bases on population.

------
pajop
Burma is missing (of course Myanmar is there ...)

------
byoung2
Why is Antarctica on the list?

~~~
xthlc
Not to mention Bouvet Island -- an uninhabited volcano in the Antarctic
covered by glaciers. If you try to land there, the Norwegian navy will fire on
you as it's a "nature preserve".

It's OK though -- most country selectors include BV, since they lazily use
ISO3166-1 as a canonical list of countries when in fact it just defines
country codes.

When you embark on a redesign, it's usually a good idea to start by revisiting
your content.

------
omgtehlion
your selector just sucks. admit it.

------
gautaml
Wow, talking about missing the boat on something so simple.

------
moe
_So we took it upon ourselves to redesign the country selector._

Sorry, you failed terribly. Feel free to try again.

~~~
Deestan
Your comment is rude and offers no illumination.

------
RossDM
Lolz. They implemented a simple autocomplete plugin and call it a redesign?
It's not necessarily faster for a mouse user because it requires keyboard
entry.

