Yalantis: iOS, Android And Web App Development Company

Arabic, Japanese, and Chinese Layouts in User Interface and User Experience Design

The lingua franca for today’s digital industry is, undoubtedly, English. However, for app developers to limit their app’s reach to one language would mean ignoring non-english speaking markets. Apple’s App Store is officially available in more than 150 countries, and there are plenty of Android app stores around the world. This means that localizing your app is a great way to crack the language barrier and get more users.

Localization is not just a word-to-word translation from one language to another. Localization is also about considering a target country’s cultural and linguistic particularities.

Countries that use Latin, Cyrillic or Greek alphabets are culturally and historically interrelated to a certain degree. Apps built for these countries don’t require deep localization: a good translation to their languages is enough.

Localizing an app for Eastern countries, on the contrary, may mean making more drastic changes to your app’s design. App localization for Japanese, Chinese, and Arab-speaking markets requires a deep reconsideration of the whole design concept.

In this article we will highlight the main principles of app UI and UX design applied for these particular markets.

Read also: Case Study: Designing Virtual Reality App With 360 Virtual Tours

The direction of Arabic UI and UX design

Adapting UI and UX for Arabic language speakers goes down to a single rule: just mirror it. The Arabic script is written and read from right to left. Speakers of Arabic languages likewise take in content from right to left - the inverse of a Westerner’s approach. Therefore, the entire layout of an Arabic user interface including text, icons, sliders, graphics, interactions, and timeline indications must be displayed from right to left.

This is a well known fact, but some mobile UI and UX designers ignore it. Even Apple did not offer right-to-left support for Arabic until the new iOS 9 was released.

iOS 8 vs iOS 9 Arabic layouts

[iOS 8 vs iOS 9 comparison]

In the Arabic user interface design not all elements should be mirrored, though. A clock’s hands, for example, should always rotate clockwise. Icons that represent objects usually held with the right hand (for example, a loupe-like search or handset icons) should be placed on the right side of the screen. Media playback buttons and the progress indicators must not be mirrored either. The left-to-right direction of these elements represents the direction of the tape, not the direction of time. If there are any words written in other languages on the Arabic user interface, they should be displayed from left to right. The same applies to Hindu-Arabic numerals (1,2,3, etc). Read more about bidirectionality here.

The Arabic typeface design must also be treated with caution: the characters in this language have overhanging and looping features, and there is a shortage of typographers with a native understanding of the script. Google guidelines recommend that we use their Noto typeface with a regular weight, and avoid using bold weight because it makes some glyphs illegible. Using italics for emphasis cannot be applied for Arabic script either.

To sum up, design approaches that work for Western countries will work in the Arab world as well. The only thing a designer needs to do is to embrace right-to-left alignment.

Read also: Case Study: How I Designed The Workout LogBook App

Designing an app for Japanese and Chinese markets

Adapting UI and UX for Japanese, Chinese, and Korean markets requires the consideration of many more factors. These countries’ cultural, linguistic, and even technological habits are far from those of their Western counterparts.

Linguistic and cultural differences

Have you ever visited a Japanese web site? If not, have a go and pay particular attention to websites that have both Japanese and English versions. You’ll see much less negative space, tiny images (and few of them), and a totally different content presentation.

Yomiuri Shimbun

[Perhaps that picture in the left is bigger than others only because Godzilla's in it]

Why do Japanese websites look so odd? Well, actually they don’t. They are not as visually busy as they appear at first glance to the Western eye (at least not all of them), but for those not accustomed to Asian writing the typography does seem denser than Latin scripts, and there is no spacing between words.

Still, the density of information on most Japanese and Chinese websites is higher than on Western sites, and the layout is rather more focused on presenting information than it is on style.

Why are Japanese and Chinese layouts so different? Firstly, logographic characters convey much more meaning (roughly, each character is a word). Secondly, the layout style might be connected to Kanban (billboard) culture with its tendency to place a maximum amount of content within a minimum space. That’s why there are a lot of banners with text and pictures, and a wide diversity of colors on Japanese and Chinese websites.

Plus, urban density in Asian megapolises is very high. It’s no wonder that people accustomed to living in crowded and informationally overloaded cities feel lonely when they see empty spaces on the screens of mobile phones and other devices.

Japan Tokyo density

Japanese people tend to read in zones rather than in a linear fashion. Unlike English readers who skim text to quickly find what they’re looking for, Japanese readers have to filter a lot of information to get to the point. This is because in English we present the conclusion first and details later, while in Japanese you start with a long explanation and slowly build your way up to the conclusion. This is why Japanese websites look busy to the eyes of English readers.

These linguistic and cultural particularities must also be considered while translating an app’s interface. Translation must be cultural, not just linguistic. It should interpret the context of words accurately, and not simply exchange English words for Chinese or Japanese equivalents.

Technical differences and standardization

Even considering cultural differences between West and East, some design patterns used in Japanese and Chinese apps and website design are absolutely archaic.

This may originate from the culture of small flip phones which were extremely popular in Japan before smartphones dominated the market. Since those phones had small screens, a designer’s primary objective was to fit in as much information and functionality as possible. Perhaps this design pattern was carried over into today’s mobile app design?

Also, when it comes to artistic vision, a Japanese designer’s position is usually weak, especially in large companies where decisions are made by executives or committees. Decisions made at the top are generally based on what works, and not on what’s cool and new. Given the corporate ethics in Japan and China, designers rarely try to stand out.

Japanese office

Typography and input

Just like with Arabic script, calligraphy plays an important role in Chinese and Japanese writing. Characters cannot be emphasized by italics or bold, since this may affect legibility of content. Japanese kanji and Chinese traditional and simplified alphabets have thousands of logographic characters.

Professional simplified Chinese fonts, for example, must include approximately 20,000 glyphs. Because Chinese font files contain so many glyphs, they usually run from about 3-7 MB per font weight, a size which defies web embedding.

The number of fonts for Chinese, Japanese, and Korean characters is not numerous since designing them requires a lot of effort.

Japanese writing can be both vertical (with columns read from right to left) and horizontal (left to right). Vertical writing is used in literary works and printed newspapers, but never in digital media due to technical limitations.

Chinese apps rely on two ways of typing in Chinese characters: Pinyin, a system of Latin transcription of Mandarin pronunciation of Chinese characters, and voice input. Some apps accept Latin characters as search terms and resolve them to Chinese-language results.

According to Dan Grover's comprehensive research of the Chinese app market, voice typing, voice messaging, and voice search features are in high demand there. Voice messaging is now the quickest and most convenient way to deliver messages, and is perhaps the most widely used method of mobile communication in China.

Voice input in chinese apps

[Almost every popular app in China has voice input option]

In Japanese apps, input doesn’t require as many workarounds as in Chinese apps. The Japanese language has three writing systems:

  • logographic kanji consisting of adopted traditional Chinese characters with 2-3 thousand in common use, which is still fewer than in Chinese.

  • syllabic kana – hiragana with 46 characters for Japanese words and katakana with 48 characters for non-Japanese words.

  • romaji, the method of writing which applies Latin script to write the Japanese language.

Romaji is the most popular system used in mobile apps since it’s easiest for text input and can be transcribed into both kanji and kana. However, it's standard practice for apps to use the kana input too.

Kana input

[Kana input pad]

Read alsoApproaches For Multiplatform UI Design Adaptation: A Case Study

Considering all the factors mentioned above, it becomes clear why Japanese and Chinese users feel uncomfortable browsing Western apps and websites with clean user interfaces and a lot of negative spaces.

However, the experience of the world’s major companies like Facebook and Amazon that entered the Asian market without changing their UIs tells the opposite. The interface of Mercari, a popular Japanese flea market app, is also clean just like in apps designed by Western designers.

Today, more and more Japanese sites and apps use fewer colors and banners than they did before. This means that UI and UX design guidelines applied in the Western world may in fact be applied globally. But if we want our app to look natural in Japan, China, Korea, or Arab countries, we must pay careful attention to the cultural and linguistic particularities of these markets.

Read also:

 

Tech

How to Create Content for Virtual Reality Apps

Design

Our First Look at the Floid Prototyping Tool

Design

7 Up-to-Date Mobile App Design Trends 2016

Design

How to Adapt Your App's UI and UX to Another Platform

Design

7 Types of Animations for Your Mobile App

See our workout book

Know what your health & fitness app can look like

Check out the case study