Matthew's logo

Matthew Talebi

My portfolio and research about accessibility, design culture and sustainability to make life a tiny bit easier.

Multicultural design: Adapting visual systems from Western to Eastern countries

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:

I like sushi written in English and Japanese

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 in the grids layout.

This breaking of the grid due to our lowercase alphabet may be the reason many foreign products that mix both latin and character based languages keep the latin in uppercase blocks.

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 narrow, allowing for a more natural mobile adaptation in some instances.

Languages such as Japanese do not have to have the characters rotated at a 90-degree angle to read vertically, however, in English rotation is required to give some level of legibility. With latin based langauges, vertical writing can be done sparingly with artistic purpose. Check out this article for more background on the rules of writing vertical in Japanese.

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.

Quick brown fox written in English and Japanese

With an added grid outlining the general forms we can see how the Japanese sentence is nearly uniform with block shapes unlike the English sentence which has variable heights and widths. Let's take a look at one more sentence.

Quick brown fox written in English and Japanese

English sentences not only have variable heights and widths, we have what is called ascenders and descenders which also break through the grid. These characteristics are part of the reason English puts additional space between the lines, otherwise letters above and below would clash and it wouldn't be a pretty sight.

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 attempts to simulate how their language would read if visual spacing was added.

A cat came fiddling out of a barn, With a pair of bagpipes under her arm. She could sing nothing but fiddle dee dee, The mouse has married the bumblebee. Pipe, cat; dance, mouse; We'll have a wedding at our good house.

This example given in English gives an idea on how native speakers would feel if designers were to decompress block character based languages. Cluttered and overloaded interfaces, newspapers, and advertisements seem to plague character based languages like Chinese, Japanese and even Korean. Is it really a cognitive overload? Or are we just not adapted to compressed information due to the restraints of our western languages.

Kakao website language comparison

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.

Design example

We've covered some basic typography of English (or Latin based languages) against block character languages (Chinese, Japanese, Korean), but where do they really differ?

Depending on the language, words and phrases can also be much more compact in the context of menu systems. Let's take a look at this marketplace application from China.

淘宝特价版 Screenshot

Each category shown across the top takes two to four characters. This enables the application to have information displayed in a much more condensed format while maintaining readability. If this were an application translated in English, at most three to four categories could be seen at any given time.

Functional, minimal and compact (but readable) design is something we strive for in Western countries. Looking at the examples above and their innate ability to be minimal it appears as if our inability as designers to create such interfaces is not to question, but the limitations of our very own language. Some would say resorting to icon based navigation for English is one solution—but icons are not only inefficient to "read," the meanings are often controversial.

Responsive design with language

In design we've always talked about responsiveness in regards to screen sizes — building our grid from mobile to desktop for perfect readability and experiences. But how does this process differ for multilingual websites and applications?

It's clear now that some languages enable different stylistic properties over others. With the advent of CSS grid in the past year or two, it should only encourage us more to format our layouts to adapt for different languages and devices we support.

Today responsive design has a very limited meaning—it's time we expand the meaning to include the different languages and cultures around the world. No two devices and no two languages were made equally. Next time you get the chance to build an international or multilingual application (and I encourage everyone to do so!), do some research into the language. Learn how it's written, read, the culture behind it, and perhaps you too will create an interactive experience that is unique to it!