East Asian Cultural Perception in UX / Interface Design

East Asian Cultural Perception in UX / Interface Design

Considering that my website is in English, I never cease to be amazed when I look at my analytics and note that a fair chunk of my web traffic is from non-English-speaking countries. Many of those hits are from East Asia, and I suppose that’s par for the course. There are 1.3 billion people in China alone – the likelihood of some of those intrepid folks stumbling across my site is high. And chances are, Asian users are looking at your website, too.

East Asian Cultural Perception in UX / Interface Design

It would be easy to write them off – what could they possibly want on your site, after all? – but know that in doing so you’d be writing off almost half of the world’s population. While making a site that speaks to everyone is well-nigh impossible, the truth is you don’t have to speak a foreign language in order to craft considerate, cross-cultural interfaces.

What do you need to take into consideration so that your site makes sense cross-culturally? Do your users understand your branding concept when they look at your visual graphics? How big a role does culture play in user interface? And how do we design for a secondary international audience if we know little about them?

Musings on Mental Space: Visualizing the Progression of Time

Picture a timeline. Like those timelines you used to draw in history class, from the Battle of Hastings to present. How is your timeline oriented? Like many westerners, the past is probably off to your left somewhere. The present is in front of you, and the future extends to your right. Yeah, mine looks like that, too. It just seems, well, odd to picture it otherwise.

Evolution of Web
Evolution Web Timeline

Not necessarily so for Asians. In mainland China and in Japan, the typical individual is just as likely to picture time horizontally as vertically top-to-bottom, with the past above your head, the present at eye-level, and the future at your chest.

Meidewan
Chinese Timeline

When this was explained to me once upon a time, suddenly, things I’d never understood about the Chinese writing system made perfect sense.

Up and Down

This basic concept (the left-to-right linear progression of time) that we take for granted is not universally human – it’s cultural. And if we think about how heavily our interfaces rely on these assumptions, we can start to see where pitfalls could arise.

Language Orientation: Going Beyond a Translation

Time is not the only thing we take for granted – we also make assumptions about the orientation of our written language. English is read from left to right. But Japanese and Chinese – and to a lesser extent, Korean – are also frequently flipped top-to-bottom, often when text is presented in a formal context. In Japanese manga comics, the books are printed back-to-front.

If you’re designing with Asia in mind, consider yourself lucky. East Asian languages aren’t the worst of this – when we start thinking about right-to-left languages like Hebrew, things get really sticky. Where should your logo go? Left or right side of the page? What about the “Home” button on a horizontal navigation? Which side of a website – left or right – holds a position of higher informational importance? The list goes on.

Applications in Navigation Menu Structures

Scientifically speaking, this is not undocumented territory. In his thesis “Human-computer interface design for the Chinese population(written in *gasp* 1997), Chinese PhD Dong JiangMin of Purdue University tested 160 Chinese subjects against an American control group, measuring user satisfaction, memory recall, performance time and errors when presented with either a horizontal or a vertical navigation menu. He also tested user responses to search tasks and error messages. Sound dry? It’s anything but.

The good doctor narrowed down the factors in response to interface design that he believed varied from culture to culture, and concluded that:

The key results of the experiment indicated that superior performance is achieved for the Chinese version of the interface when the menu layout is vertical rather than horizontal. For Chinese subjects using English interfaces, horizontal [menus result] in [better user performance]. …the importance of culture awareness in the design of human computer interfaces has been demonstrated.

While one study doesn’t prove anything conclusive, the results here indicate that there is a distinct preference in navigation alignment from a cultural perspective, and that that preference changes depending on which language is being read, and by whom.

Historical Periods in Design: In Asia, There was no “Retro”

“I thought I’d do you a favor and re-design your website logo, since it lacks personality.” That’s a direct quote from my Chinese penpal. Okay, it’s not breathtaking or anything, but I see a clear retro overtone there. So, mature and professional that I am, my first reaction was to have a snit. But when I climbed off my high horse, I had a realization that kinda floored me. The Chinese have little connection to the western conception of “retro”. When I look at my logo, I see a comfortably unimaginative retro-style League Gothic graphic. My penpal sees a rather obnoxiously orange dot with boring white text in it.

Logo Example

Think about it: while we were undergoing an economic boom flush with pinup girls and drive-ins, Japan was emerging from Hiroshima, Korea was in the midst of a war, and the Chinese were experiencing political growing pains.

The 1950’s were not a boom time for everyone, and to an East Asian audience, the visual 1950’s and ’60s diner design trends of today communicate (at best) very little, or (at worst) nothing at all. They have no familiar mental associations involving milkshakes, roller skates, martinis and beautiful script fonts.

To a Chinese audience, “retro 1950’s” means something different: specifically, Mao-era Communism. This Chinese design firm encapsulates the concept well in their lovely interface:

Mao Interfac
Mao Interface

And unlike the typical western perception of socialist art, this style of design is not perceived as “ironic” or “hipster”. It’s fairly serious, and to 40+ year old user groups, conveys dedication and pride.

The Hidden Negatives in Design

Personally, I love love love the 1800’s as a design style. How hot is this site?

Dollar Dreadful
Vintage Site Design

When I think of the 1800’s, I think of positive forward-progress: the ramp-up to western industrialization, top hats, and curious tinctures. The Chinese may think of these things too, but this era primarily calls to mind the Opium Wars, a period of conflict with Britain that ravaged the East and created widespread drug dependence. Is that something you want your brand associated with overseas? When you do an 1800’s-style design, does the East perceive you as flaunting your imperialism? I’ve never user tested that last point, so I couldn’t tell you – but it’s certainly worth consideration.

Lost in Translation: Visual Cultural Indicators

Consider These Two Images:

Korean TV one

Korean TV two
Image credit: Ballad of Suh Dong

These are screenshots from Korean TV shows that are set in two radically different historical periods. One is from late 1700’s, the other from around 100 B.C. – 600 A.D. – a difference of well over 1000 years. Can you tell which is which?

Does the style of dress, hair, or makeup do anything to clue you in? I thought not. The same consideration holds true for western design going eastwards. Looking at western art, design and historical TV dramas, I see a clear delineation between the 1300’s, the 1500’s, and the 1800’s. I can certainly see a distinction between clothing and design from Roman times and the Renaissance. But that’s not so for everyone, and cultural indicators that we take for granted can be utterly lost in translation.

When you base your designs and brand messages on regional perceptions, you are localizing your interface design, whether you intended to or not.

Time. Language. History. If we can call such basic concepts into question, what does that mean for other design elements when designing interfaces for a global audience?

The Good News

Basic emotions translate. For decades, psychological studies have proven that certain basic human emotions and facial expressions, like happiness, fear and anger – are universal, in other words, they’re understood by everyone, regardless of their cultural background. Following that path, while you may not be able to get across subtler pop-culture references or culture-specific points in your interface design, you can still aim to create a clear enough emotional overtone that your design hits the right notes with the right audience.

KTV
Bright colors still mean “fun” and “happy“.

Emotional Design

ffffff
Punky design is still youthful and urban (but beware of using grunge design to communicate “the ’90’s” or any particular time period – grunge got to Asia after it was popular elsewhere, and didn’t explode quite in the same way.)

Emotional Design Punky

Bucchake
Professional and cutting edge design still feels like big money.

Emotional design professional

Manneken
Delicious waffles are still delicious (What do you mean ‘waffles aren’t a universal emotion’?)

Emotional design waffles

Moonlinx
Quality, to-the-point imagery speaks to everyone.

Quality image

At first glance, I may not know exactly what Ryuichi Sakamoto does for a living, but I can make a few educated guesses based entirely on his pictures: This is clearly a personal portfolio site. Mr. Sakamoto is probably a creative artist of some kind. His work looks some kind of classical / modern existentialist / avant garde mix. Pretty good, considering I don’t read Japanese.

So What Does all This Mean for Your Design Decisions?

Spend some real time considering your main navigation. Obviously, the main navigation is important. But if your site is going to be translated into multiple languages, or you intend to target an international market, take the time to make the right choice about navigation orientation and position, taking language orientation into account.

When it comes to a design theme, think globally. If you want your design to speak to an international audience, consider and re-consider basing your visuals on any specific historical period. Ask yourself whose history you’re designing for, and whether the concept is global or national. Instead of historical theme-driven design, strive for emotionally-driven design.

Add the fancy graphic elements if you want – but don’t forget to build on a baseline of clarity. Everyone – and I mean everyone – likes a clear, simple interface. In his article on UX design in China, author Neil Simpson brilliantly quotes Daniel Szuc, founder of Hong Kong UX firm Apogee, and I couldn’t have said it better myself:

“When it comes to defining noticeable differences between Eastern and Western cultures, Szuc advises that it’s safer not to assume anything. We sometimes hear that, for example, mainland Chinese users like busier home pages or have a higher tolerance for poor design,” he says.

“This is largely a myth, and in our research we have discovered that Chinese users appreciate simple, goal-driven design as much as Western users do. We have also noticed that mainland Chinese users are receptive to playing with or hacking technology to get to what they need. They may be willing to spend more time doing this to achieve their goal, but does it mean they are happy about it? Probably not, but they do seem to demonstrate more patience around poor product delivery.

Hong Kong users on the other hand are very goal driven and technologically savvy, and they want to get to what they are looking for quickly. This is probably a result of Hong Kong being a very efficient city, with everything easily available and accessible.”

Resources for an eastern perspective:

Why Should You Care?

Do I really need to say that we live in a global society? Trite but true. Even if you have no intention of courting an international audience or building a global customer base, courtesy in design goes a long way. Your reputation as a designer has the potential to reach further than the boundaries of your linguistic culture with just a little consideration.

Deals

Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.