Determining the difference
Power distance: Whether the less powerful members of a culture expect and accept that power is distributed unequally (autocratic vs. democratic).
- Individualism vs. collectivism: Whether people’s self-image is defined as ‘I’ or ‘we’.
- Masculinity vs. femininity: What motivates people; either wanting to be the best or being ‘tough’ (masculine) or liking what you do and being more ‘tender’ (feminine).
- Uncertainty avoidance index: 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.
- Long-term orientation vs. short-term normative orientation: How every society chooses to maintain links with its own past, while dealing with the challenges of the present and future.
- Indulgence vs. restraint: Whether or not simple joys are fulfilled. Indulgent societies believe that they are in control of their own lives and emotions. Restrained societies believe other factors dictate their lives and emotions.
Dimensions with deep impact
Language is often one of the first things we think about when it comes to distinguishing different cultures. With more than 6000 languages in this world, this can get pretty complex. But it’s merely the tip of the iceberg when it comes to culturally accessible design.
A literal translation of text can often change the meaning of a message. But keeping the meaning of a message will sometimes require a different sentence structure, which can also cause the interface to change.
This is a big difference for designers. Half the sentence will be placed in another position, so auto-fill functionality will need to follow suit. And the design needs to change accordingly. In this example, we want to emphasize the data for our user, focusing on “one day and five hours.” This means the component containing this message needs to have multiple design outcomes.
If you design and develop for a language with a shorter-than-average word length, you’ll get a different outcome when the content is translated into a language with longer words. For an international website, it is recommended to look for the extremes and an average. For example, you can start with German and Chinese for the extremes (longest and shortest words), together with a language with an average word length, like English.
Different languages not only require different grammar rules, they also require different scripts. These different scripts can all have different characters and styles. As an example, in contrast to the Latin script, Chinese, Japanese and Korean (CJK) languages don’t support bold weight or italics, because it can make some of the characters illegible. Designers must keep these style differences in mind in order to ensure a design that is readable in every language.
In some languages, like Arabic, reading direction is the opposite of western languages. Arabic-language interfaces have a right-to-left (RTL) alignment instead of a left-to-right (LTR) alignment. Similarly, CJK languages can be presented vertically instead of horizontally. Therefore, the front-end developer needs to prepare the code for a different text flow. Otherwise, the design will not accommodate these key cultural differences.
All these different grammar rules can also have a big impact on the layout and use of space on the interface. A nice example is the difference in use of space in China, where they have a high information density22 and Scandinavian countries, where it’s more about ‘less is more’. Let’s look at some other important aspects of the use of layout and space.
As mentioned earlier, languages often have their own script. And in addition to a different font style, these scripts sometimes also require a different approach when it comes to the use of things like line height and letter spacing.
For European languages, there are two standards to ensure text legibility: 45 to 75 characters per line, and a maximum of 10 words per line. These standards have been mentioned in a lot of typographic literature. But ideally, we should design a different column width for every language.
Again, having an RTL-alignment requires some changes to the use of layout and space of the interface. Not only the text flow should be changed, but also elements like text fields, icons and navigation buttons will have to be mirrored13.
The symbols and icons we use are often metaphors from our physical world. But these metaphors can vary from culture to culture. Therefore, symbols and icons can be perceived totally differently among different cultures. For example, ‘thumbs down’ means ‘dislike’ in western cultures, whereas it means something like ‘go to hell’ in Japan23. Quite a different message. These kinds of misunderstandings are also the reason that, in the build-up to the Olympic Games in 2020, Japan changed maps for tourists7 and even the icons on their high-tech toilets8.
Content and structure
As Hofstede’s research illustrates, different cultures value different structures. Anthropologist Edward Hall, who divided cultures into either ‘high context’ or ‘low context’ categories, explains the difference in context and structure:
- Low context cultures value information that is well defined. Content is often explicit (e.g. content is complete, clear and precise) and there is a low image-to-text ratio.
- High context cultures consider information to be part of a contextual understanding. Information is conveyed implicitly. This can e.g. mean that there is a more playful structure and that there is a high image-to-text ratio.
Marcus and Gould contend that culture even impacts navigation. Users from cultures who score high on Hofstede’s ‘Uncertainty avoidance’ index would prefer navigation schemes that prevent users from getting lost. They also prefer a restricted information offer. Alternatively, cultures that have a lower fear of making mistakes desire more extensive exploration possibilities (e.g. many pages, pop-ups) when it comes to navigating through a website.
Images and graphics should also be chosen with great care. Some images can look very harmless in one culture, whereas in another culture they can look very offensive. Think, for example, of how an image of a woman in a bikini would be perceived in an Arabic nation. It certainly wouldn’t help a company sell its clothes.
Colors can also have totally different meanings in different cultures. An example: in the Chinese culture, white is the color of mourning, whereas in western cultures the color of mourning is black. These different ways of perceiving colors can have a lot of influence on the opinion users form.
Cultures that score high on ‘Power distance’ value a more national look and like more structured information.
A system with solutions
With all these cultural differences and their impact on design, we could say that ideally, every culture would have its own designs in order to be effective. But of course, for designers, it would simply take too much time and effort to design every page for every culture.
The solution is to build a component-based design system. This allows designers to first build different elements – like buttons, headings, text blocks, etc. – as individual components that can later be used to create pages.
The benefit of designing with these small components instead of whole pages is that these small components have reusable codes. Each code can be reused in different combinations in order to fit every culture. Imagine the components as LEGO blocks that can be reused to make different structures. Eventually, designers can use these components to build templates for different pages and different cultures.
It is important to ensure that the components are scalable: fixed width for elements should be avoided. Every component should grow and shrink according to its content, device, operating system, browser and resolution. This way, elements like buttons will not break when they are filled with a different language with longer words, for example.
All these components must be documented in an online library, provided with the principles of the design system and an explanation on how it fundamentally works. This way, we can show how components – and even templates – should behave across different cultures.
When we look at the coding of these designs, we can use a country as a context variable. By having a declaration of the chosen country, Cascading Style Sheets (CSS) can be made. Because of the cascading possibilities of CSS, we can make several exceptions in the execution of the design. In other words, by using country (and, for example, having the user choose his/her country on the landing page), we can make the design fit to that specific culture.
An example: imagine building the homepage for a travel company. With the same set of components, two versions are made: one for an Arabic country and one for a western country.
Arabic countries score high on Hofstede’s ‘Power distance’ index, and therefore they like a lot of focus on expertise and authority. Therefore, we put an award component in de header. We also choose to put a different image in the header than the one used in the western example. With the same set of components, a different composition is made for both cultures in order to fit their culture.
Designing for culture
Every culture has its own customs and beliefs, and so requires a different and tailored design. Designers should consider every culture to be a different target group, in order to design effectively. Next to these customs and beliefs, language also has a major impact on the execution of design. Using component-based design systems allows us to quickly make different versions for different cultures with the same set of components, but also create one cohesive look and feel. This requires an online, shared library, in which the components are documented. That includes the principles and an explanation of the different components per country. All the developer needs now is a declaration of the country so he knows what components to show, in what order, for what culture. It’s like making a different LEGO structure for every culture, from the same box of LEGO pieces. This way, we can create one global brand experience, but also have a tailored design for each culture that takes in account their local needs.