Great tips about using flags, colors and flowers in user interface (for applications and websites)

Dear visitor: Please keep in mind that this post is originally from Vibor Cipan's personal blog, the name of which we eventually adopted as our company name together with its conveniently-named URL. We're keeping the posts on our official company blog for all the subscribers to Vibor's blog who have read and commented on his previous posts. Please be aware that this post represents Vibor's personal thinking few years ago and doesn't necessarily represent the opinions of the UX Passion as a company today. 

Often when you are creating and designing user interfaces for your apps or websites you face challenges like how to convey specific language or nation. You might consider using different flags, maps, colors, symbols as a part of your user interface. But that can be challenging and even very dangerous.

Tip 1. Avoid using flags in your applications or websites as visual elements

We all love flags. They are nice, they have very strong symbolic meaning and they are easily recognizable. But most of all they are (in majority of cases) national symbols and lot of emotions are related to them. But, just because of that, flags SHOULD BE avoided as elements of your applications or websites.

I’ve seen numerous cases when flag of United Kingdom or United States is being used as representation for English language. That is bad practice and I appeal to you to avoid doing that. For example, what about Canadians? They are also using English as language, Irish people too. I am sure you get the point. Same thing is, for example, with Spanish language which is in most cases represented with flag of Spain. Why not flag of Argentina? Or Bolivia? Or Honduras? Spanish is official language in those countries too. Same goes for German (flag of Germany, though it is spoken in Austria and other Lichtenstein too)… There are numerous examples and you can easily see problems. Personal experience tells me that I was very frustrated seeing Croatian language considered same as Serbian and incorrectly called “Serbo-Croatian”. Both Serbs and Croats agree that there is no such thing like “Serbo-Croatian” or “Croato-Serbian” language. So, please, when you are designing your UI, don’t make mistakes like these. Your product might be boycotted in some markets just because you did not pay enough attention.

Other problem with flags is in case of territorial and other political disputes. Kosovo’s flag is not something that you should be putting in product that is targeted at Serbian market. Same goes for flag of Taiwan in China.

So, don’t ever use flags as language indicators, country/region indicators and any derived indicators.

Exceptions: Flags can be used in case you are developing solution like Encarta, Wikipedia or other reference-like product. But even then, take care about details – do you have exact number of stars and stripes in USA flag? Does the Croatian checkerboard starts with red square? Mistakes are elements that are easy to see and remember, and hard to forget. Think about that every time you are designing something like this.

TIP 2. Be careful with colors

Different colors have different meanings in different cultures. In most Western cultures black is symbol for death, mourning, while the very same black as a part of clothing can be connected with pregnancy in Indian.

White color is color of death in Japan, China and some other Eastern cultures. Western cultures often connect white color with something clean, pure and marriage.

Red color is also strong when it comes to symbolical representation. In China it is celebration, luck in India it is connected with purity. Also, there is strong connection between red color and socialism / communism, but then again, in USA Republican party is often portrayed with red color.

One thing that I am finding to be very interesting is that in Japan stocks are presented in red color when their price is growing, just the opposite like it is in USA and Europe.

You do not need to avoid using those colors in your user interface or web page, but you might consider possible implications and always take into account what market are you targeting with your app or website. Use this article as starting reference and do some more exploration about this and other related topics.

TIP 3. Be careful when using flowers as symbols

Just like with flags and colors, attention should be given to the usage of flowers in your solutions. Many flowers are connected with symbolic meanings in various cultures and same flower in one culture can have different meaning in other culture.

Two flowers are especially famous for strong symbolic meaning.

Red roses are often used as symbol of socialism and they can carry number of political implications (Labour party in UK uses red rose as symbol among number of other left-wing political organizations.)

Lotus (if white-pink) can be considered as symbol of India but generally in Asia, lotuses are connected with many cultural, religious and even national elements. They often represent new birth, creation and purity.

Among other flowers I will point out following:

Clover leaf – national “flower” of Ireland, regularly connected with St. Patrick.

Tulip – official national flower of Turkey and unofficial flower of Netherlands

Cherry blossom – unofficial national flower of Japan

Lily – national flower of France, also often used in Bosnia and Herzegovina (mostly by Muslims).

Comments (5)

  1. I’m totally on board with the ‘not using the flag’ thing to denote language…but EVERYONE is doing it. Case in point, the new star trek movie site (http://www.startrekmovie.com)… at the bottom of the page, a bunch of flags poised as buttons… does this mean it is becoming standard? I hope not, i share the sentiment that it is a very poor indicator of language solidarity.

  2. Thanks for comment, Sheldon. I’ve just seen StarTrekMovie website – it seems that they are using flags to depict release dates, but then again.. I do hope that this is NOT becoming a standard. It’s just not right and correct and some people I’ve been talking about this topic even go and say that it might even represent some kind of imperialism agression. Not sure that I would go that far, but there is some logic behind this, for sure.

  3. Thanks for responding. I definitely feel, as you wrote in your article, that it is a generalization. It is very imperfect and categorizes based on assumed historical standards. That al british people speak english (their vocab is different than american though), and that chinese is manderin, etc. You’re right, it shouldn’t be used!

  4. Nice reading. Totally agree with you about flags. I also wrote about misuse of flags some time ago: http://www.jankoatwarpspeed.com/post/2008/10/27/You-should-never-use-flags-for-language-choice.aspx

    • Hi Janko, thanks for the comment and support! Your article is very nice – as well as whole blog! Keep in touch and have a good one!

Trackbacks

  1. Pingback: Vibor Cipan

  2. Pingback: Cathy Matheny

  3. Pingback: bkmacdaddy designs

  4. Pingback: Connie Luck

  5. Pingback: Abhishek Easwar

  6. Pingback: Tweets that mention Great tips about using flags, colors and flowers in user interface (for applications and websites) — Topsy.com

  7. Pingback: Lucas Nolte

  8. Pingback: uberVU – social comments

  9. Pingback: Eduardo Braga

  10. Pingback: Eduardo Braga

  11. Pingback: Eduardo Braga