32

Do you think replacing country flags with three-letter country codes gives a better experience?

I have seen lot of users facing problem in detecting countries' flags when shown small.

The attached image has flags to represent countries a user may sometimes find to recognize. Would it help having three-letter codes instead of flags?

e.g.

  • IND - India
  • AFG - Afghanistan
  • CHN - China
  • etc...

example of small flags

Improve this question
12
  • 1
    I am planning to design it for mobile now
    – Harshith
    Dec 19, 2016 at 7:14
  • 11
    Airport codes? IND is Indianapolis International Airport, not India. Perhaps you meant ISO 3166-1 alpha-3.
    – MSalters
    Dec 19, 2016 at 14:26
  • 7
    Are you working with a small predetermined set of countries? If so (say, US, India, China). then using the flags and including a key might work. If you're working with all countries in the world, then I'm afraid you'll need to write out the names because people like me won't know "PYF" or its flag.
    – Ken Mohnkern
    Dec 19, 2016 at 14:43
  • 4
    Who are your users? (Hopefully they're people who are familiar with country codes and flags.)
    – Ken Mohnkern
    Dec 19, 2016 at 14:51
  • 6
    You should not use flags alone, especially at that size. Users will be unable to differentiate between Romania and Chad, Monaco and Indonesia, and possibly others. (See this article).
    – Brian
    Dec 19, 2016 at 15:42

11 Answers 11

Reset to default
47
+50

Abbreviations or Flags only = worst comprehension

Using abbreviations only could cause uncertainties because users might not know the abbreviation for the particular country and leave them guessing. The same goes for flags only.

Abbreviations + Flags = better comprehension

You might get a bit better comprehension when you use flags + abbreviations because if the user doesn't know the abbreviation, he might know the flag, and the opposite.

Full country name = high comprehension

Displaying only the country name is sufficient for most user to recognize the country.

Flags + full country name = very high comprehension

However if you want to maximum comprehension of the country displayed I suggest using flags + full name of country. This way uncertainties about which country is this is going to be cut to minimum.

Use the pattern that is most suitable to your case: high comprehension or saving screen space.

Update:

Why do I need to add references? All of this is logical.

Every person knows limited and different amount of country abbreviations, flags and country names which do not overlap completely. Lets say, one person knows 38 country abbreviations, 50 flags, and 100 country names. According to Wikipedia there are approximately 195 countries total in the world.

Therefore, if you present only abbreviations to that particular person she will be able to recall only ~19.5% (38/195 countries) of the available countries in the world. However, if you present a combination of abbreviations and flags the chance that the user will know the country raises to a minimum of ~25.6% (50/195) because she knows at least 50 flags. But the percentage increases if the knowledge for flags and abbreviations doesn't overlap completely. Meaning user knows abbreviations for which she doesn't know their flag and the opposite.

So, there is higher chance for recall of the country if you present a combination of flags, names, or abbreviations.

I'm presuming that people know more country names than abbreviations because abbreviations made for utility. It's counter logical to say I know which country is CZ, but have never heard of Czech Republic. This is why I've put higher chance of recall for country name than its abbreviation.

Improve this answer
11
  • 17
    I'd guess because you've said "Flags + Full country name = maximum comprehension" but there's no proof of that being the case, other than you saying that it's 'logical' :) [incidentally, I agree with you - I'm just guessing that's why]
    – Algy Taylor
    Dec 19, 2016 at 13:49
  • 1
    unless you get the wrong flag. or the user thinks you have
    – Ewan
    Dec 19, 2016 at 14:19
  • 1
    I'd recommending avoiding abbreviations altogether, because there's an implicit assumption about the language the abbreviation/label is in, versus the language spoken by that country. For example, if I try to abbreviate Germany as "Ger", that might make perfect sense to me, but not to the actual residents of that country, in which the nation is named Deutschland.
    – Ti Strga
    Dec 19, 2016 at 18:59
  • 1
    @TiStrga: True, but doesn't that apply to any textual representation, abbreviated or not?
    – O. R. Mapper
    Dec 19, 2016 at 19:32
  • 2
    Evidence in the form of a link to another website only provides reassurance that at least one other person agrees. The 41 (at this time) up-votes speaks volumes about the general agreement among visitors to this question. Besides, what constitutes a valid reference? Not everything has had a scientific study performed, and even then not all scientific studies are all that "scientific". At some point, an answer needs to stand on its own, and this one does.
    – Cypher
    Dec 22, 2016 at 0:08
18

Keep in mind that the full country names are language dependant, while the flags and ISO codes are not.

I’m not sure displaying all country names in english would be preferable to using language-independant signs and codes.

Improve this answer
0
12

Depending on whether the information is relevant or merely informative, I would always display the flags (the graphical information has more impact) and, if relevant, the two letters of ISO 3166-1 alpha-2 code.

Additionally I would show the full name of the country in a tooltip (in the language selected by the user).

Bank list with flag, alpha-2 ISO code and tooltip

There are numerous sources for country flags already renamed with alpha-2:

Improve this answer
7

Yes, switching to three-letter abbreviations makes sense, because flags are not unique.

Technically, there's a minor hue difference between the Dutch and Luxembourg flag, but your average device isn't color-calibrated. Besides, your typical user won't know which hue belongs to which country. As both are EU members and geographically close, there's a real possibility for confusion. Romania and Chad also differ in hue only, but they're geographically a bit further apart.

Improve this answer
4
  • Same for Latvia vs. Austria (they even have basically the same legend about the origin).
    – Paŭlo Ebermann
    Dec 19, 2016 at 20:49
  • Don't forget the identical Romania and Chad.
    – Andrew
    Dec 20, 2016 at 21:41
  • Arguably, flags ARE unique, but there are examples of flag pairs which are overly similar, differing only by shade of colour, proportion, or some subtle feature making them easily mistakable one for the other. But then, three-letter abbreviations, though unique can be mistakable too.
    – Zenilogix
    Dec 21, 2016 at 1:39
  • @PaŭloEbermann not a good example, seeing the flags also differ in (internal) shape.
    – Stephan Bijzitter
    Dec 21, 2016 at 8:12
5

Country codes and names are often confusing. I'll give an example.

  • English: Switzerland

Switzerland has four official languages:

  • German: Schweizerische Eidgenossenschaft
  • French: Confédération suisse
  • Italian: Confederazione Svizzera
  • Romansh: Confederaziun svizra

But the country code derives from Latin:

  • Confoederatio Helvetica (CH)

So it's really hard to guess CH for Switzerland if you don't know that it's Latin.

I guess flags are in most cases a pretty good fit.

Improve this answer
1
  • Well, when listing the advantages to Switzerland specifically, remember that the flag is a big plus. But yes, any abbreviation or symbology is going to produce some cases where the user is uncertain. All proper choice of abbreviations and symbols is minimize the frequency when those cases occur.
    – Michael Lorton
    Dec 20, 2016 at 23:50
3

Somewhat dependent on your exact use case, but I think the best solution is to show flag with full country name on hover. You can either show in a tooltip or swap/overlay the flag with the country name.

In this way most of the time users will be able to quickly and easily identify the country (e.g. their own country and major world countries), but for all other cases they can hover for full info.

This of course depends on how tech savvy your users are. This is a very common UX pattern, but less tech savvy users may still have trouble.

If you're using straight HTML look into the alt and title tags. You'll also benefit from making your website more accessible to blind people or people with bandwidth limited connections.

Improve this answer
8
  • 2
    Always displaying the full country name helps much more since ctrl+f works.
    – csiz
    Dec 19, 2016 at 13:26
  • 2
    Just to elaborate on the advice on alt and title in HTML tags: For blind people, screen readers will read out alt and title text in HTML tags, so this advice is good. For band width problems, the alt text will often be shown while the image is loading. Actually there are accessibility requirements that alt text should always be present in the image HTML tag unless the image is purely estetic and have no contextual meaning.
    – awe
    Dec 19, 2016 at 14:16
  • @csiz - True, you do lose some functionality like ctrl+f in return for the more concise view, it really depends how the website is expected to be used and what would be be optimum for the users. If searching was a requirement, I would suggest the grid should be searchable/filterable though for best experience.
    – Taran
    Dec 19, 2016 at 14:59
  • 5
    How do you hover on a tablet?
    – JDługosz
    Dec 19, 2016 at 16:11
  • @JDługosz - Obviously you can't, but in that case screen real estate is probably at an even higher premium. Possible solutions might be to show the full name on tap, double tap, or have a option elsewhere on the screen or in the settings to switch on an additional column (to let the users consciously sacrifice their screen space only if they deem it worth it).
    – Taran
    Dec 19, 2016 at 19:14
3

Unless you only have a small number of options (e.g. distributors only in a few countries), a menu/list with all the countries is atrociously bad UX. Instead offer a free-form text input box with suggestions/completion that allows the user to input the country name in any form they might find convenient (abbreviations, English name, official name in [any of!] the country's official language[s], etc.).

Improve this answer
2

I would really go for either writing the whole country name (+ flag for fast recognition).

  • Flag by itself: the user can recognise his country flag and some others but certainly not all. More than probably he will not recognise some of the flags (this is important if he is supposed to) and have no clue how to even search somewhere else which is that country.

  • Three-letter: gives a minimum information to recognise the country, and gives some hint in case the user might want to search what country is referring to. This is still not optimal as users will have difficulty recognising some countries.

  • Full country name: Leaves no confusion, as it is explicit.

In full name or three letter solutions, the addition of a flag helps fast recognition and clarification it is a country/region list. If you can not include it in the same field maybe using a legend to specify which flag represents which country could be of help (the user should be aware of this from the start).

Take a look at how wikipedia does something similar.

Improve this answer
2
  • 🇩🇪 Tado (2011, $57M)
  • ɢᴇʀ Tado (2011, $57M)
  • 🇩🇪ɢᴇʀ Tado (2011, $57M)
  • ɢᴇʀ🇩🇪 Tado (2011, $57M)

In a list like the one shown in the screenshot, where – mostly well-known – countries may appear multiple times and this is just additional, secondary information appearing next to the unique names of companies(?), which are of primary interest to readers, flags are the better option, because they separate more clearly from the following string of characters without fine-tuned typography. They may even serve as a separator or substitute for a list bullet. The colorful blobs allow for a quicker estimation of geographical distribution – e.g. lots of US entries in the example –, but letters are more reliably discerned.

  • 🇳🇿 LIFX (2012, $13M)
  • 🇦🇺 LIFX (2012, $13M)

  • 🇦🇹 LIFX (2012, $13M)

  • NZL LIFX (2012, $13M)

  • AUS LIFX (2012, $13M)
  • AUT LIFX (2012, $13M)

(I assume that 🇱🇷 Liberia and 🇲🇾 Malaysia do not occur nearly as much as 🇺🇸 USA in many data sets. New Zealand, Australia and Austria are more on par.)

Also, there are several, partially deviating or even conflicting standards for three-letter country codes, but usually just a single flag. The abbreviation may come from a local language (Deutschland), an international auxiliary language (République fédérale d’Allemagne), another foreign language (Niemcy), the author’s/site’s language (Germany), the user’s language (Saksa) and refer to a vulgar name or a formal acronym (Federal Republic of Germany) … The most intuitive abbreviation is frequently already occupied.

  • DEU Tado (2011, $57M)
  • RFA Tado (2011, $57M)
  • FRG Tado (2011, $57M)
  • GER Tado (2011, $57M)

If there’s enough space available, most icons (i.e. flags in this case) should always come with a caption, which may be short or long, or just appear on demand in interactive environments.

PS: It seems a table would be a better fit than a list here.

PPS: Is there an image collection of 2- or 3-letter codes painted/filled/dressed with their corresponding flag?

Improve this answer
7
  • I'd also be wary of using emoji icons... for example, Emoji One chose a rather different approach to flags.
    – Bob
    Dec 20, 2016 at 5:55
  • @Bob For the actual implementation, perhaps, but for this answer they came in handy.
    – Crissov
    Dec 20, 2016 at 10:22
  • 2
    Yup, just a bit of a warning in case someone goes "ooh, there's flag emojis? awesome, let's use them!". Actually, now that I'm on a Win10 machine (Firefox), the Win10 emoji font appears to use the two-letter code instead of an actual flag: i.stack.imgur.com/jhue2.png So perhaps at least Microsoft thinks they're more readable...
    – Bob
    Dec 20, 2016 at 10:39
  • 1
    "Letters are more reliably discerned." Er, no, not always.
    – Andrew Leach
    Dec 20, 2016 at 12:27
  • @AndrewLeach ... than minor hue differences, tiny star constellations etc. at text size. For emojis, see Bob's comments.
    – Crissov
    Dec 20, 2016 at 13:57
1

Actually by flag there is chance to identify but in ISO code the user getting confuse. I hope the flag and ISO code both help the user easily identify

Improve this answer
2
  • so combination of both works well you say
    – Harshith
    Dec 19, 2016 at 8:19
  • Yes because by using only ISO code you cant easily identify. So both are good.
    – Sibaram Sahu
    Dec 19, 2016 at 8:21
1

If the flags are too small for their desired effect (recognition) you should leave them out or... just make them bigger. People prefer visual content.

Personally I find your solution of showing just three letter codes not really appealling.

Improve this answer
2
  • But visual content isn't very accessible. So there needs to be some sort of text associated with a flag image, anyway (see the comments on Taran's answer). This question touches on what that should be. "Just make it bigger" isn't really helping someone who can't see them but could assimilate their information.
    – Andrew Leach
    Dec 20, 2016 at 12:25
  • Agreed. Some kind of combination would probably be the best option.
    – Jelle
    Dec 20, 2016 at 18:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.