Multicultural design: adapting visual systems from Western to Eastern countries

Language and typography dictates the user experiences we deliver to users.

Living in Silicon Valley exposes you to a very diverse population from all around the world. One of the side effects of this is being introduced to different ways of thinking in design.

I’ve been fortunate enough to have the chance to work on products or websites that are multilingual, advised startups at incubators like K-Startup which is for South Korean startups, as well as design user flows and experience strategies for apps targeted to China.

Language Barriers

It’s no secret that grids are an important aspect to design. Grids are the foundation for how your design will respond and organize itself on different devices and screen sizes.

One area of design I have always admired is typography in various languages. Asia especially has a unique form factor as the major languages have block formatted writing. Block design enables designers to fit everything perfectly within the grid without any gaps. Let’s look at these two sentences each with the same meaning:

We can see immediately that the Japanese sentence forms a perfect block. Each character within the sentence has seemingly the same heights and widths. The English sentence has completely different sizes causing high variability. But before we continue on about the layout, let’s build onto this and create a simple profile card:

These cards translate to the same meaning and I’ve outlined the grid I used for each card. With the grid outlined it’s clear that the English card doesn’t fill out the grid as nicely, whereas on the Japanese card the words fill out the grid almost perfectly as far as the letter height is concerned.

In this sense grid design can be more favorable for languages with block characters such as Japanese, Chinese, and Korean. Of course, in English we could write in all capitalized letters— but it’s not very readable or favorable in long form articles. Many websites from Asia especially game sites do adopt all capitalized words for headlines and navigation to keep the same look and feel as their native counterpart.

Vertical text

With vertical text comes vertical layouts. Many of the languages from Asia are capable of being read vertically just the same as horizontally. Because their languages can be read vertically, designs can be horizontally compact, allowing for a more natural mobile adaptation in some instances.

For languages such as Japanese in the above image, rotation is not required when doing a vertical format, making it read naturally. In English rotation is required to give some legibility. With English we can do vertical design for some unimportant areas of applications. For example I’ve seen applications who put the user profile vertically (similar to above) to save space in a collapsed side menu. Beyond these cases vertical text in English may create a barrier between legibility and design (even if the design “looks good”).

Visual overload

One perception of the untrained eye to these languages is that their designs are highly overloaded with visuals while English design has much more breathing room and is “easier to read.”

The optically cluttered idea may be true to some extent, but there is also something to be said about the written styles of each language. Let’s take a look again at our sentence I like sushi.

With an added grid outlining the general forms we can see how the Japanese sentence is uniform with block shapes unlike the English sentence. Let’s take a look at one more sentence.

English sentences not only have variable heights and widths, we have ascenders and descenders which also break through the grid. It’s no wonder we put extra leading between our lines, otherwise our letters would clash with each other and it wouldn’t be very readable.

To fully understand why we have more spacing in English over languages like Japanese or written Chinese we need to look at it from their perspective in a way that is understandable to us. Below is an English nursery rhyme that has extra letter spacing and line height that simulates how their characters would read if spacing was added.

This example gives you an idea of how native speakers would feel (or worse) if designers were to decompress block character based languages. Nevertheless—cluttered visuals are still popular in Asian print design, and perhaps seep a bit into the digital interface design world, too. But this visual information overload style is not to the extent people may think it is on digital formats. It may feel overloaded because their characters are readable in tighter spaces. If you look at the same website in English and Japanese, I’m pretty sure you will think the Japanese site is visually overloaded, but actually it’s showing the same information.

There is definitely something about our culture in Western countries wanting to have breathing space. Could these differences be a derivative of what we just talked about with block and variable letters that naturally evolved into this divergence? Or is there something more to the way different cultures think about design that has caused one to prefer more or less information over the other? I will let you decide for yourself on this. ?