Cross-cultural Interface design.
How does culture affect UI design?
Last year the design agency I work for merged with a large multinational IT-company. We started to get a lot more international clients so I got the opportunity to help in a pitch for an Arabic airline. This is when I found out that designing for other cultures is much more than just changing currencies and translating the text. It’s the way the website is perceived, what makes it trustworthy — it all depends on the norms and values we get from our cultural background. For me, as an interaction designer, this presents a true challenge: How can I ensure an effective design if I’m not truly familiar with cultures other than my own?
What is cross-cultural design?
Cross-cultural design can be defined as..
… designing technology for different cultures, languages, and economic standings to ensure usability and user experience across cultural boundaries.
Why is it so important?
The way we design interfaces nowadays is very ethnocentric: we use western design patterns and we mostly use English as the main language. But to make sure our designs are effective we must know that everything is interpreted by users based on their cultural backgrounds and values. Even technology is actually very contextual. A funny example is the fact that in the western culture we use the washing machine to do our laundry, whereas in China the washing machine is also used by Chinese farmers to wash their potatoes.
How do cultures differ from each other?
To understand how we should design for each culture, it’s important to know what makes each culture different from other ones. Dutch social psychologist Geert Hofstede conducted one of the most comprehensive studies when it comes to capturing a culture’s values and behaviour. Hofstede developed 5 dimensions to distinguish cultural differences. Each country is evaluated with a score from 1 to 100 on each cultural dimension. The higher the score, the more the dimension is present.
Reseachers Marcus and Gould did a lot of research on how these dimensions can affect interface design.
Power distance
This dimension is defined by wether the less powerful members of organisations expect and accept that power is distributed unequally. High power distance are more autocratic whereas low power distance countries are more democratic.
An example of a high power distance website is one of the Malaysian University, which shows a very national look (national colors blue and yellow are used) and a lot of focus on the expertise and authority. On the other side we have an example of a low power distance website, the website of TU Eindhoven, which shows a lot more focus on the students. The website of TU Eindhoven even has social media-options, which shows that they want to be accessible for everyone.
Individualism vs. Collectivism
This dimension is defined by people´s self-image in terms of “I” or “We”. Individualism can be defined as taking care of yourself and your immediate family. There’s also more focus on personal achievement. Collectivism means preference for a group-like social network in which individuals can expect others to look after them in exchange for loyalty. They’re also willing to sacrifice their individual needs and desires for the benefits of the group. Collectivistic societies value harmony and consensus.
An example of a collectivistic website is the website of KMB, a Chinese public transport company, which shows a very community-like/us feeling. Whereas the website of Greyhound, an American bus operator, is an example of a individualistic website which has more focus on action (‘finding a bus stop’) and consumerism (‘book a trip’).
Masculinity vs. Femininity
This dimension is defined as what motivates people: wanting to be the best or being ‘tough’ (Masculine) or liking what you do and be more ‘tender’ (Feminine). Masculinity represents a preference in society for achievement, heroism, assertiveness and material rewards for success. Additionally, men and women place separate roles in the society and are expected to differ in embracing these values. Its opposite, femininity, stands for a preference for cooperation, modesty, caring for the weak and quality of life. It’s also more consensus-oriented.
An example of a masculine website is the website of the government of Japan, which has a lot of focus on meetings, success and it also has a more formal look compared to the feminine example of the Dutch government, which has more vivid colors and shows visuals and content of social activity and interaction.
Uncertainty avoidance index
This dimension has to do with the the extent to which the members of a culture feel threatened by ambiguous or unknown situations and have created beliefs and institutions that try to avoid these. People from high uncertainty avoidance cultures tend to have greater need for formal rules, standards, and structures. Differing from these rules and standards is considered disruptive and undesirable. They also tend to avoid conflict, seek consensus, and take fewer risks. In low uncertainty avoidance cultures people are more comfortable with unstructured situations. Uncertainty and ambiguity are considered natural and necessary. They value creativity and individual choice, and are free to take risks.
An example of a high uncertainty avoidance website is the website of Brussels Airlines, which has limited choices and clear use of interaction, whereas the website of British Airways (which is an example of a low uncertainty avoidance website) has a lot more options, navigations and content and therefore a higher risk for the user of becoming lost or not getting what he/she is looking for.
Long Term Orientation vs. Short Term Normative Orientation
This dimension describes how every society has to maintain some links with its own past while dealing with the challenges of the present and future. High LTO countries would value relationships as a source of information, credibility and content that is focused on practical value. Low LTO countries would prefer content based on truth, desire for immediate results and achievement of goals.
What this means for interface design, according to Marcus & Gould (2000):
- Content and visual elements that are focused on rules as a source of believability are valued more in low LTO countries whereas high LTO cultures are oriented by the search of decent behaviour.
- Content and navigation that emphasizes long-term development and goals of the business will be valued by high LTO cultures. Other symbolic indicators that focus on immediate gratification will be favoured by low LTO countries.
An example of a long term orientation website is the website of Macdonalds Hongkong, which has a lot of focus on modernity and the app whereas an example of a short term orientation website, Macdonalds Germany, has more focus on tradition: the traditional dish McCurrywurst is largely displayed.
Cultural differences in your UI/UX design
So for us as interaction designers, there are a lot of things that we need to think about when it comes to designing for another culture. Here are some of the most important things including some tools to DIY (design it yourself).
Language
When creating an understandable and effective interface, it’s important to get the basics right first. Using the right language is very important. Keep in mind that some languages can have different dialects. If you e.g. focus on a local group of users, make sure to do research on their local language and that you include the nuances of that local language to create more engagement and understanding.
And once you get the right language, make sure that you translate it right. A funny example of a not so well done translation: KFC once got their slogan ‘finger lickin’ good’ translated into ‘we’ll eat your fingers off’ in Chinese.
Script and fonts
Another language might mean having to use other scripts. Designing an interface with a font that doesn’t display or support these different scripts can therefore be a real turn-off for your user. Make sure you use a local font or a font that supports multiple languages (e.g. Google’s Noto font).
A different script can also use characters that are differently structured than our latin script. Example: think of the arabic font which has more wider and shorter characters, and therefore needs to be at least 4 points larger (+0,1em line height) than the Latin type in order to be legible. Some scripts also don’t support bold weight or italics because it can make some characters illegible.
UI Patterns
Translating your interface can have a lot of impact on the layout and space. In comparison to English, Arabic speakers often use more words to express themselves while Chinese speakers on the other hand don’t need as much space to express themselves as we do. It’s also worth noting that it’s not just the words: scripts like the Chinese, Japanese and Arabic require a lot more space per character than English (which can lead to a a possible increase of the height of a text-paragraph by 30%!).
To avoid UI patterns like dropdowns and buttons from breaking, it’s best to make the layout of the interface dynamic. Example: when specifying the width of a button, make it dynamic depending on the length of the text-string.
Other usefull tools:
- Tool to estimate translation length
- Tool to estimate translation length II
- Designing the perfect paragraph
Bidirectional design
In some cultures, like the Arabic, the reading behaviour is totally different then ours: Arabic speaking users mirror the F-shaped reading behaviour and therefore the interface has an RTL-alignment instead of an LTR-alignment. Therefore certain elements of the interface have to be mirrored: e.g. Text fields icons (on the opposite side of a field), Navigation buttons (reverse order), Icons that communicate direction and text (if RTL language).
Colors
Colors can have totally different meanings in different cultures. An example: in the Chinese culture white is the color of mourning, whereas in the Western culture the colour of mourning is black. These different ways of percieving colors can have a lot of influence on the opinion users form.
Icons & symbols
Just like colors, icons and symbols can have a different meaning in another culture. Actually icons & symbols aren’t much more than a metaphor for something in the physical world: we use a ‘thumbs up’ icon as a metaphor for liking things. However, in Russia a ‘thumbs up’ icon is considered as something like using the middle finger. Make sure you use appropriate symbols and icons and always consider the meaning in your targetgroup.
Images and graphics
Images and graphics should also be chosen with great care. Some images can look very harmless whereas in another culture they can look very offensive. For example, think about what Arabs would think of using scantily clad women to sell clothes. This will not be a good idea.
Another tip: When using images for a international website, try not to use images with text in it since it can be quite hard to translate it. Try to either use lines to mimic text or use CSS to overlay the image with text.
Time and dates
2pm or 14:00: displaying time can also change from culture to culture. Think of the difference between USA (am/pm) and Europe (24 hours).
The same goes for dates. In our world the date 4/5/2018 can be interpreted as both in April as May. Americans use the mm/dd/yyyy format whereas the rest of the world uses the dd/mm/yyyy format to display dates.
Also our calendars are not the same in every culture: most of the countries use the Gregorian calendar but there are a few exceptions like the Persian calendar in Afghanistan and Iran, the Hijiri calendar in Saudi Arabia and the Ethiopian calendar in Ethiopia.
Numbers
The use of either commas or periods is also very different in every culture. 1,345,76,88 can be right in one culture, but wrong in another culture. Make sure you research the use of decimal marks in your target culture
Currencies
Paying 20 euro’s for a nice top, means paying 23,61 dollars in the US for the same top. Currencies are very different as well. Not only the exchange rate, but also the position of the currency rate relative to the number.
Payment
When building an interface that has to provide any kind of payment, make sure you do research on the local payment methods. For example, in the Netherlands we mostly use IDEAL and Acceptgiro to do online transactions whereas in China, credit/debit cards, Alipay, Tenpay and UnionPay are preferred. These kinds of local payment methods will definitely affect the design and flow, and also adds a complexity of selecting a payment provider.
Measuring
Building a new website for Dr. Oetker? A recipe can have a totally different outcome in another culture because of the different measurements we use. A couple of all the different measurements we use in the world: kilometers, pounds, liters, ounces, feet etc.
Sorting and categorizing
Where do accented characters like “ô” come in a list? How about capitalized letters? Does “1” come before or after “11”? The way in which we sort and categorize things can differ from culture to culture as well. Make sure you research the different international collation rules.
Keyboard usage
Keep in mind the keyboard layouts most often used in your target market. Layouts like QWERTY (the most common one), AZERTY (France), and QWERTZ (Germany, Austria) dominate in the West. In countries like China, US keyboard layouts are complemented by a character romanization called Pinyin, which enables Chinese speakers to build characters based on pronunciation.
Names
Names can be displayed very different in each country. My name is Cynthia Sharon Risse (given name -middlename- lastname) but e.g. in Brazil people can have three or four family names, drawing on the names of other ancestors, such as José Eduardo Santos Tavares Melo Silva (with order of maternal, paternal). Also the way we write down our names can be different: If I’d write an resume in the Netherlands my name would be presented as ‘RISSE, Cynthia’ but elsewhere it might be presented as ‘Cynthia RISSE’. Some of it is explained over here and here
Adress
Designing a checkoutflow for an international retail company might mean that an adresssection has to have different values/format. For example: In the Netherlands a postal code exists of 4 numbers and a 2-letter combination but in the US the zipcode exists of 5 numbers.
Forms and inputfields
Localising forms can bring a lot of problems. Think of switching the formats of adress-inputfieds (as you can read above). Try to make inputfields as smart as possible; the form must automatically adapt to the target user’s language and regional settings.
Useful tools:
Legal requirements
Every country or organisation can have their own laws and regulations. Therefore, make sure you do research on things like terms & conditions, privacy laws and on how discounts and price-breakdowns should be displayed.
Conclusion
With all this information we could say that designing a website that looks the same, has the same content and states the same message for every culture is a real no go. Cultures are very different from each other and therefore, to make an effective website, it should look and perform different in every other culture.
If you enjoyed this article please give it some claps. I’m also very open to feedback and nice examples to add to this article. Thanks for reading!
