chinese web design patterns: how and why they’re different (chui chui tan)

Chinese Web Design PatternsHow and why they’re different

Chui Chui Tan @ChuiSquared cxpartners

http://www.flickr.com/photos/photolate/2452470259/

Monday, 27 June 2011



@ChuiSquared

http://www.flickr.com/photos/sacharules/2613374596/

Chui ChuiI’m a Malaysian born Chinese,

brought up following Chinese

culture and traditions. I live

and work in UX for many years.

I’ve the advantages to see

things from both sides and

from different perspectives.






Homepage of a Chinese popular online shopping site -

www.taobao.com.

What’s your first impression?


http://www.taobao.com










Homepage of a popular Chinese web portal site -

www.qq.com.

What’s your first impression?











Busy?

Cluttered?

Complicated?

Confusing?Colourful?

Wow Any of these?


Must look complicated

Must have lots of links

Links must open new windows

Must use flash

Must look busy

??

???

It’s easy to just look at a few Chinese

sites and make quick assumptions and

conclusions about them.These are the most common

assumptions made about Chinese sites.

But are they true?If they are, then why?If they are not, then why?




Must use flash

Must look busy


Must all Chinese sites look

complicated?

Let’s think about why they

look complicated.


You can see two things in one

- a young lady and an old

lady. It’s an illusion.

Could those complex Chinese

sites be complex and simple?


BBC News site: UK version

Tidy layout, easily scanned.


BBC News site: Indonesian

version

Similar layout, same alphabets. But

might look a bit more complicated.


BBC news site: Russian version

Tidier layout, but look more

complicated than the English

version.


BBC news site:

“COMPLICATED” Chinese version

Is it really complicated?Same amount of info as the other

versions and similar layout.

Westerners think it’s complicated

because they don’t understand what

they are looking at.


BBC news site:

“COMPLICATED” Chinese version

To Chinese users, it’s not

complicated. It’s as simple as the

English version because they are

taking the same amount of

information as the West.


http://www.flickr.com/photos/xiangxi/3308585857/

Other reason Chinese sites

often look more complicated is

because of Chinese

characters:Beautiful but complex




11strokes

8strokes

15 strokes

15 strokes

Chui ChuiTan

nàng (Snuffle)

Most complex characters found in modern Chinese dictionaries

36strokes

zhé (Verbose)Most strokes

64strokes

Chinese characters are formed by strokes.

It can be from 1 stroke to over 60 strokes.

My last name:Simplified Chinese: 8 strokes

Traditional Chinese :11 strokes

My first name: 15 strokes each


目前Twitter的“Tweet”按钮已经遍布网络，能够让用户个人更加方便地分享信息。而“Follow”按钮则致力于建立更加密切的社交互动服务。这一功能类似于Facebook的“Like”按钮。Twitter推出的双按钮概念其实不难理解，“Tweet”按钮主要负责分享信息，而“Follow”按钮则是让Twitter用户与提供相关信息的用户或网站建立远程联系。 No capital letter in Chinese

writing.No space between characters.

Hence, it look more intense

with less breathing room.


目前Twitter的“Tweet”按钮已经遍布网络，能够让用户个人更加方便地分享信息。而“Follow”按钮则致力于建立更加密切的社交互动服务。这一功能类似于Facebook的“Like”按钮。Twitter推出的双按钮概念其实不难理解，“Tweet”按钮主要负责分享信息，而“Follow”按钮则是让Twitter用户与提供相关信息的用户或网站建立远程联系。 But, it doesn’t look complicated

to Chinese users because they

are used to read it.




Must use flash

Must look busy


It’s not completely true that all

Chinese sites must look complicated.

It’s an illusion your brain created when

you don’t know what you are looking at.

It’s also because of Chinese characters

which can be complex and Chinese

writing which without space between

characters.


Must use flash

Must look busy





They DO use a lot of links.

WHY?


Designers suggested it’s

because typing in Chinese on

an alphabet-based keyboard is

hard. Hence sites are designed

for clicking as opposed to

searching.

I DON’T agree.


Standard Chinese keyboard

Chinese use the same keyboards as the West.

They use ‘Pinyin’ to input

Chinese characters using these

alphabet-based keyboards.


Beijing(北京) Fei(飞) Niuyue (纽约)

*This page was modified to replace a video showing how to use ‘Pinyin to input Chinese characters.


There are shortcuts.

Instead of typing ‘beijing’,

Chinese can just type ‘bj’ and

choose from the list.Similarly for ‘Niuyue’ [New

York] where they can just

type ‘ny’.

*This page was modified to replace a video showing how to use shortcuts to input Chinese characters using ‘Pinyin’


It’s fast and easy. It could be

slower for Chinese to type in

English than in Chinese.

Chinese also complain about

not being able to find what

they are after on a page due

to the overwhelming content

and links. Instead, they choose

to use the search box and skip

the homepage.


Must use flash

Must look busy




A lot of links is what most

Chinese sites have.

But it’s not what Chinese users

like.


http://www.flickr.com/photos/ryananderson/223193295/

Links open new windows to

support Chinese’s browsing

behavior:

They look at one window

whilst waiting for other

windows to load.




http://www.techknowtimes.com/web/global-downloads-speed-comparison/

0

5000

10000

15000

South Korea USA UK Brazil China

6951271

38124684

12021

Kilo

bits

/Sec

ond

Average connection speed

It’s because China has slow

Internet connection speed

whilst it has the highest

internet population in the

world.





0

5000

10000

15000

South Korea USA UK Brazil China

6951271

38124684

12021

Kilo

bits

/Sec

ond

Average connection speed

However, this is going to

change.China Telecom aims to deliver

100Mbps by 2013.China Mobile is hoping to do

the same in 5 years.




Must use flash

Must look busy




Just for now

Only for now where links open

new windows.Internet connection speed will

be increased in China in coming

years and Chinese users’

browsing behavior will change.


Must look busy




Just for now

Must use flash


[Go to sina.com.cn - a infotainment web portal

covering news, entertainment,

games, blogs and microblogging.

Look at the number of flash

banners on the page.]


They are all adverts.

This is how China current

economy situation is like at the

moment. Their main profits are

from adverts.

The best way to get users’

attention to these adverts is

via flash adverts.


For example, Taobao’s main revenue is from its adverts (more than the profits they get from their services).But it is starting to change now in China.


Look at www.douban.com - a new

Chinese online library site for

books, music, movies, etc.

There’s no flash or no adverts. But

it’s doing well in China.


http://www.douban.com











http://middle.blog.sohu.com/159409841.html

“360 safeguard” is a Chinese

Web security tool. One of its

functionalities is to allow

Chinese to filter adverts.

It’s a popular tool in China.

Chinese want to see pages

without distracting adverts.




Fonts

Another reason why Chinese

designers often use flash on

websites is because of available Chinese Web fonts.


http://www.flickr.com/photos/vlastula/300102949/

Restriction on font sizes

Limited font choices

No way to emphasise font

There is limited Chinese Web

typography as it needs to

accommodate at least 4000

individual characters.





Restriction on font sizes

Limited font choices

No way to emphasise font

There is no fancy fonts available.

Minimum font size = 12px.

Smaller than that can create

readability problem (because

Chinese characters can be

quite complex)




Must look busy




Just for now

Must use flash It’s how China economy works

at the moment - heavily rely

on adverts for revenue.

Flash is not necessarily what

Chinese users want.


Must look busy




Just for now

Must use flash


Simplicity in China?

http://www.flickr.com/photos/fab_photos/2419404100/

No^We always hear:

Chinese DON’T like simplicity

because of the ‘the more the

merrier’ saying.

Is that true?




420 million users

Baidu - the biggest search

engine in China


Baidu has the same page

design and layout as Google

(simple and tidy layout design)


Google search result page


Baidu search result page has

simpler layout as Google’s.


Weibo (Chinese equivalent Twitter) has 140 million users.

It has similar page design as Twitter.


What makes it popular in China is not the busyness of the site, it’s the functionalities it provides that support what Chinese users want and their social behaviors.


www.taobao.com:Chinese users like it not

because of its colorful, long

page. It’s all about products

Chinese can buy from this site

with very low price.


It’s more about “What the site

does to the Chinese users

rather than how it looks.”


“Don’t like Sina’s sport site. It feels messy and cluttered. Can’t find anything.”

“Really dislike local download sites. Thousands of download links. The one you are looking for appears to be so small. Whereas those

messy adverts and rubbish tools are unnecessarily big.

Chinese complained about adverts

and that they are not being able to

find what they are after.

(These are updates from Weibo -

Chinese equivalent Twitter)


“The user experience of AirAsia website is really bad....”

“It’s really painful to book flights through Shenzhen airlines site. It has rather bad user experience.”

“Douban has the most comfortable adverts that I have ever seen on a website. Good user

experience can make adverts more acceptable.”

Chinese users care about usability and user experience.

But, they have to put up with designs which offered to them. They’ve no choice because all companies are giving them similar (bad) web designs.


http://www.flickr.com/photos/kareneliot/2710464400/

So, if Chinese don’t like how existing Chinese sites are being designed and want simple sites (just like the West), then why we constantly see Chinese sites which are designed in similar patterns?

There are a number of reasons.




http://www.flickr.com/photos/rob_web/466866299/

Part of it has to do with Confucius (a Chinese philosopher died 2.5 thousand years ago).

His teachings influenced Chinese culture and social behaviors.

His teachings emphasised the important of social, moral order and hierarchy.




http://www.flickr.com/photos/19779889@N00/4455072054/

Hierarchy means respecting

and listening to people who are

older than you and your

superiors.When bosses say something,

it’s a command, not a starting

point for discussion.E.g. If they want to put a lot

of flash adverts on a homepage to gain revenue,

designers have no choice but

to follow.




Another Confucius teaching: collectivism

China is a collectivist society, hence social recognition is important.

“Mian Zi” or Face (or prestige) is important. Chinese want to gain and maintain face in all aspects of their personal, social and business life.


How they are perceived by society is important as society’s endorsement define their values.

It’s common companies try to squeeze as much content as they can on their site to give users the impression that they’re doing well and have plenty to offer.

Just like Chinese host often order more food than their guests could possibly eat.


http://www.china-mike.com/chinese-culture/understanding-chinese-mind/cult-of-face/

It can be quite hard for Westerners to grasp the idea of Face.

This is a nice article about Face and the role it plays in Chinese society.






http://www.flickr.com/photos/h4ck/4202513554/

UX is still at the beginning stage in China.

There is lack of UX or HCI related courses or education programmes.





Chinese client still don’t understand much about the importance of UX.

It’s fine for now because almost all Chinese sites are designed in similar patterns. Chinese have no choice but to put up with what they are given.

Once UX becomes more popular and more Chinese sites provide not only good products but also good UX, Chinese will be less forgiven for sites with bad UX.




http://www.flickr.com/photos/cbcastro/477856025/

Also, Chinese designers have very low salaries.

They bear a number of responsibilities and often are given ridiculous timescale. Therefore they are likely to copy each other or existing sites.

Hence, we tend to see Chinese sites with similar design patterns again and again.





These are the current design trends in Chinese websites. But it’s just a moment in Chinese history.

Things will change drastically in the coming few years.




Design pattern:Similarities . Differences

So, are Western and Chinese

websites very different in

terms of their design?

Let’s look at these sites....


The NY Times homepage:

a busy, long page with a lot of

links and content.


The Sina news site (www.news.sina.com.cn):

If you put it into a wireframe,

it has tidier layout than the

NY Times homepage.


http://www.news.sina.com.cn










What’s important is not just the

site design, it’s more about what

your site does to the users.

It’s about providing what

Chinese users want and

supporting their behaviors and

social elements.

For example....


http://www.flickr.com/photos/ben_grey/4582294721/

China is a collectivist society.

Sharing and participations are

very important.

Chinese leave comments in

almost everything: blogs,

videos, microblogging... much

more than the West.





China is also an expressive

society.They like and use a lot of icons

- cute, animation icons.

These seem to be unimportant

elements but they have big

impact on how Chinese use

your site.

You need to pay attention to

these elements when providing

a service to Chinese (via your

websites or other means)




You won’t learn about a country in one presentation.


Things will change

Font choice options

Use of graphics

China economy

Use of adverts and animations

Education & experiences in UX

Design quality & innovation

Internet speed

Browsing behaviour

Because a society will change over time, including its economy, its

users’ behaviors, etc.


Make quick conclusions based on what you see

Understand why and look into the reasons behind

Understand how Chinese users would use your site(behaviour, culture, social, economy)

Design your site by (blindly) following the design of others Chinese sites


Some popular Chinese sites

www.taobao.com : Online shopping site

www.qq.com : Chinese web portal integrating news, entertainment and other basic web-based services

www.sina.com.cn : Chinese infotainment portal integrating news, entertainment, blogs, microblogging (Sina Weibo) and so on

www.douban.com : Online library for music, books, movies

www.ctrip.com : Popular Chinese travel booking site

www.baidu.com : China’s biggest search engine

www.alipay.com : Online payment solution (Chinese equivalent PayPal)

http://china.alibaba.com : online auction site (Chinese equivalent eBay)

www.youku.com : Video hosting service

www.tudou.com : Video site (Chinese equivalent YouTube)

www.weibo.com: Microblogging site (Chinese equivalent Twitter)

www.renren.com : Social network site (Chinese equivalent Facebook)

www.sohu.com : Chinese portal website

Additional slide (as requested)


http://www.taobao

http://www.taobao

http://www.sina.com.cn






http://www.ctrip.com

http://www.ctrip.com

http://www.baidu.com
















Related links (Chinese culture)

Additional slide (as requested)

“China - Language, Culture, Customs and Etiquette”http://www.kwintessential.co.uk/resources/global-etiquette/china-country-profile.html

“Chinese Customs, Manners and Etiquette”http://factsanddetails.com/china.php?itemid=114&catid=4&subcatid=19

“Confucius 101: A key to understanding the Chinese Mind”http://www.china-mike.com/chinese-culture/understanding-chinese-mind/confucius/

Chinese Cultural Values and Their Implications in Business”http://www.china-window.com/china_business/china_business_tips/chinese-cultural-values-a.shtml


http://www.kwintessential.co.uk/resources/global-etiquette/china-country-profile.html

http://www.kwintessential.co.uk/resources/global-etiquette/china-country-profile.html

http://factsanddetails.com/china.php?itemid=114&catid=4&subcatid=19

http://factsanddetails.com/china.php?itemid=114&catid=4&subcatid=19

http://www.china-mike.com/chinese-culture/understanding-chinese-mind/confucius/

http://www.china-mike.com/chinese-culture/understanding-chinese-mind/confucius/

http://www.china-window.com/china_business/china_business_tips/chinese-cultural-values-a.shtml




Related links (in English) about Chinese web design:

“Showcase of Web Design in China: From Imitation To Innovation”http://www.smashingmagazine.com/2010/03/15/showcase-of-web-design-in-china-from-imitation-to-innovation-and-user-centered-design/

Additional slide (as requested)The insights in this presentation are from the combination of my Chinese background, my research experiences in China for my clients, my conversations with local Chinese users and local Chinese designers/UX practitioners, Chinese forums, Chinese discussion sites, etc.Please feel free to contact me: [email protected] or tweet me @ChuiSquared if you’ve any specific questions.

“Why is Chinese Web Design So Bad?”http://thinkvitamin.com/design/why-is-chinese-web-design-so-bad/

Quora: “Why are Chinese websites and software interfaces always complicated..."http://www.quora.com/Why-are-Chinese-websites-and-software-interfaces-always-complicated-and-English-language-websites-like-Google-LinkedIn-and-Twitter-much-simpler

* Note that I personally DO NOT necessarily agree with all the discussions in these sites.

10 online advertising trends in China in 2010http://www.china-online-marketing.com/news/marketing/10-online-advertising-trends-in-china-in-2010/


http://www.smashingmagazine.com/2010/03/15/showcase-of-web-design-in-china-from-imitation-to-innovation-and-user-centered-design/




mailto:[email protected]


http://thinkvitamin.com/design/why-is-chinese-web-design-so-bad/

http://thinkvitamin.com/design/why-is-chinese-web-design-so-bad/

http://www.quora.com/Why-are-Chinese-websites-and-software-interfaces-always-complicated-and-English-language-websites-like-Google-LinkedIn-and-Twitter-much-simpler




http://www.china-online-marketing.com/news/marketing/10-online-advertising-trends-in-china-in-2010/

http://www.china-online-marketing.com/news/marketing/10-online-advertising-trends-in-china-in-2010/

[email protected]

@ChuiSquared

chuichuitan陳璀璀






