Chinese web design patterns: how and why they’re different (Chui Chui Tan)

Chinese Web Design Patterns
How and why they’re different

Chui Chui Tan @ChuiSquared
cxpartners

http://www.ﬂickr.com/photos/photolate/2452470259/

Monday, 27 June 2011

I’m a Malaysian born Chinese,
bro ug ht up follow ing Chinese
cultu re an d tra ditions. I live Chui Chui
an d w ork in UX for many years.
I’ve t he a dvantages to see
s fro m both sides an d
http://www.ﬂickr.com/photos/sacharules/2613374596/
thing
om different perspectives.
@ChuiSquared fr

Ho mepage of a Chinese
-
po p ular online sho pping site
www.taobao.co m.
n?
W hat’s yo ur ﬁrst impressio


H o mepage of a po pular
C hinese web portal site -
www.qq.co m.

What’s yo ur ﬁrst impression?


Busy?
Complicated?
Cluttered?

Confusing?
Colourful?

Wow
Any of these?


Must look complicated ?
Must have lots of links ?

Links must open new windows ?
Must use ﬂash
? It’s easy to just
sites an d make
lo ok at a few Chinese
quick assu mptions an d
nclusions abo ut them.
?
co
Must look busy Th ese are the most co m mo
n
assu mptions ma de abo ut Chinese sites.
But are they true?
If they are, then why?
If they are not, then why?


Must look complicated

Must have lots of links

Links must open new windows

Must use ﬂash
Must all Chinese sites lo ok
Must look busy co mplicate d?

Let’s think abo ut why they
lo ok co mplicate d.


Yo u can see two things in one
- a yo ung la dy an d an old
la dy. It’s an illusion.

Co uld t hose co mplex Chinese
sites be co mplex an d simple?


n
BBC News site: UK versio

Tidy la yo ut, easily scanne d.


B BC News site: In donesian
version

Similar layo ut, same alphabets. But
might lo ok a bit more co mplicate d.


BBC n ews site: Russian version

Tidier layo ut, but lo ok more
co mplicate d than the English
version.


BBC news site:
“COMPLIC ATED” Chinese version

Is it really co mplicate d?
Same amo unt of info as the other
ver sions an d similar layo ut.
Westerner s think it’s co mplicate d
t
because t hey don’t un derstan d wha
they are lo oking at.

BBC news site:
“COMPLIC ATED” Chinese version

To C hinese users, it’s not
co mplicate d. It’s as simple as the
English ver sion because they are
tak ing the same amo unt of
infor mation as the West.


s
O ther reason Chinese site
often lo ok more co mplicate d is
because of Chinese
characters:
Beautiful but co mplex
http://www.ﬂickr.com/photos/xiangxi/3308585857/


Tan Chui Chui

11 8 15 15
strokes strokes strokes strokes

Chinese characters are
for me d by strokes.

It can be fro m 1 stroke 64 36
to o ver 60 strokes. strokes
strokes

nàng (Snuffle)
zhé (Verbose)
My last name:
kes
Simplifie d Chinese: 8 stro Most strokes Most complex characters found
kes
Tra ditional Chinese :11 stro in modern Chinese dictionaries
s each
My first name: 15 stroke


Twitter “Tweet”
“Follow”
Facebook
“Like” Twitter
“Tweet” “Follow”
Twitter
e
No capital letter in Chines
writing.
No spac e between characters.
H ence, it lo ok more intense
w ith less breathing ro o m.


Twitter “Tweet”
“Follow”
Facebook
“Like” Twitter
“Tweet” “Follow”
Twitter

But, it doesn’t lo ok co mplicate d
to Chine se users because they
are use d to rea d it.




It’s not co mpletely true that all
Must use ﬂash Chinese sites must lo ok co mplicate d.
It’s an illusion yo ur brain create d when
t.
yo u don’t kno w what yo u are lo oking a
s
Must look busy It’s also beca use of Chinese character
which can be co mplex an d Chinese
writing which w itho ut space between
characters.





Must use ﬂash

Must look busy


T hey DO use a lot of links.

WHY?


Designers suggeste d it’s
because typing in Chinese on
an alph abet-base d keyboard is
hard. He nce sites are designe d
for clicking as o ppose d to
searching.

I DON’T agree.


Standard Chinese keyboard

Chinese use the same
keyboards as the West.

T hey use ‘Pinyin’ to input
Chinese characters using these
a lphabet-base d keyboards.

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

Beijing( ) Fei( ) Niuyue ( )

There are shortcuts.

In stea d of typing ‘beijing’,
*This page was modiﬁed to Chinese c an just type ‘bj’ an d
replace a video showing how to cho ose fro m the list.
use shortcuts to input Chinese Sim ilarly for ‘Niuyue’ [New
characters using ‘Pinyin’ Yo rk] where they can just
type ‘ny ’.


It’s fast an d easy. It co uld be
slow er for Chinese to type in
English than in Chinese.

Chin ese also co mplain abo ut
not being able to ﬁn d what
they are after on a page due
to t he o ver whelming content
e
an d links. Instea d, they cho os
ip
to u se the search box an d sk
the ho mepage.





Must use ﬂash
A lot of links is what most
Must look busy Chinese sites have.

But it’s not what Chinese users
like.


o
L inks o pen new w in dows t
g
support Chinese’s browsin
behavior:

T hey lo ok at one w in dow
w hilst waiting for other
w in dows to loa d.
http://www.ﬂickr.com/photos/ryananderson/223193295/

Average connection speed

15000 It’s because China has slow
Int ernet connection spee d
12021 wh ilst it has the highest
int ernet po pulation in the
10000 world.
Kilobits/Second

5000 4684
3812

1271
695
0
South Korea USA UK Brazil China

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

Average connection speed

15000 Ho wever, this is go ing to
change.
er
12021 Ch ina Teleco m aims to deliv
100 Mbps by 2013.
o
10000 Ch ina Mobile is ho ping to d
Kilobits/Second

the same in 5 years.

5000 4684
3812

1271
695
0
South Korea USA UK Brazil China

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


Must have lots of links Just for now


Must use ﬂash
Only for now where links o pen
new w in dows.
ill
Must look busy Inte rnet connection spee d w
g
be in crease d in China in co min
year s an d Chinese users’
.
brow sing behavior w ill change





Must use ﬂash

Must look busy


[Go to sina.co m.cn - a
in fotainment web portal
co vering news, entertainment,
games, blog s an d
microblogg ing.
sh
L o ok at the nu mber of ﬂa
banners on the page.]


They are all a dverts.

This is how China cur rent
he
econ o my situation is like at t
e
mo m ent. Their main proﬁts ar
fro m a dverts.

The best way to get users’
atte ntion to these a dverts is
via ﬂash a dverts.


For example, T
aobao’s main
revenue is fro
m its a dverts
(more than th
e proﬁts they
get fro m their
ser vices).
But it is starti
ng to change
now in China.


w
Lo ok at www.do uban.co m - a ne
Chinese online librar y site for
b o oks, music, mo vies, etc.
ut
There’s no ﬂash or no a dverts. B
it ’s do ing well in China.

e
“36 0 safeguard” is a Chines
s
We b security to ol. One of it
fun ctionalities is to allow
Ch inese to ﬁlter a dverts.
It’s a po pular to ol in China.

Ch inese want to see pages
w it ho ut distracting a dverts.
http://middle.blog.sohu.com/159409841.html


Fonts

se
A nother reason why Chine
on
designers often use ﬂash
w ebsites is because of
ts.
a vailable Chinese Web fon


Limited font choices

No way to emphasise font

Restriction on font sizes

There is limite d Chinese Web
t ypography as it nee ds to
0
a cco m mo date at least 400
in dividual characters.

http://www.ﬂickr.com/photos/vlastula/300102949/


Limited font choices

No way to emphasise font

Restriction on font sizes There is no fancy fonts
available.
.
Minimu m font size = 12px
Smalle r than that can create
rea da bility problem (because
e
Chinese characters can b
quite co mplex)
http://www.ﬂickr.com/photos/vlastula/300102949/





Must use ﬂash It’s how China econo my work
s
ly
at the mo ment - heavily re
on a dverts for revenue.
Must look busy
t
Fla sh is not necessarily wha
Chinese users want.


No
Simplicity
We always hear: ^
Ch
be
inese DON’T like simplicit
cause of the ‘the more t
y
he in China?
mer rier’ saying.

Is that true?
http://www.ﬂickr.com/photos/fab_photos/2419404100/


Baidu - the biggest search
eng ine in China

420 million users

Ba idu has the same page
de sign an d layo ut as Go ogle
(simple an d tidy layo ut design)


Go ogle search result page


Baidu se arch result page has
.
simpler layo ut as Go ogle’s


Weibo (Chinese equivalen
t
Tw itter) has 140 million u
sers.
It has similar page desig
n as
Tw itter.


What makes it po pular in
China is not the busynes
s of
the site, it’s the function
alities
it pro vides that support
what
Chinese users want an d
their
social behaviors.


www.taobao.co m:
Chinese users like it not
beca use of its colorful, long
pa g e. It’s all abo ut pro ducts
e
Chin ese can buy fro m this sit
w ith ver y low price.


It’s more abo ut “ What the site
does to the Chinese users
rath er than how it lo oks.”


“Don’t like Sina’s sport site. It feels messy
and cluttered. Can’t ﬁnd 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 c o mplaine d abo ut a dverts
to
an d that they are not being able
ﬁn d what they are after.
(These ar e updates fro m Weibo -
Ch inese equivalent Tw itter)


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

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

Chinese users care abo ut
usability an d user exper
ien ce.
“Douban has the most comfortable adverts
But, they have to put up that I have ever seen on a website. Good user
w ith experience can make adverts more
designs which offere d to
acceptable.”
them. They ’ve no cho ice
because all co mpanies ar
e
g iving them similar (ba d)
we b
designs.


So, if Chinese don’t like h
ow
existing Chinese sites are
being designe d an d want
simple sites ( just like the
West), then why we cons
tantly
see Chinese sites which a
re
designe d in similar patte
rns?
There are a nu mber of
reasons.

http://www.ﬂickr.com/photos/kareneliot/2710464400/


Part of it has to do w ith
Confucius (a Chinese
philoso pher die d 2.5 tho
usan d
years ago).

His teachings inﬂuence d
Chinese culture an d socia
l
behaviors.

His teachings emphasise d
the
important of social, mora
l
order an d hierarchy.

http://www.ﬂickr.com/photos/rob_web/466866299/

g
H ierarchy means respectin
an d liste ning to peo ple who are
o lder than yo u an d yo ur
superiors.
When b osses say so mething,
it’s a co m man d, not a starting
po int for discussion.
E.g. If they want to put a lot
of ﬂash a dverts on a
,
h o mepage to gain revenue
designe rs have no cho ice but
to follow.
http://www.ﬂickr.com/photos/19779889@N00/4455072054/


Another Confucius teach
ing:
collectivism

China is a collectivist soc
iety,
hence social recognition
is
important.

“Mian Zi” or Face (or pre
stige)
is important. Chinese wan
t to
gain an d maintain face in
all
aspects of their persona
l,
social an d business life.


How they are perceive d
by
society is important as
society ’s en dorsement de
ﬁne
their values.

It’s co m mon co mpanies t
r y to
squeeze as much content
as
they can on their site to
g ive
users the impression tha
t
they ’re do ing well an d h
ave
plenty to offer.

Just like Chinese host of
ten
order more fo o d than th
eir
guests co uld possibly eat.


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

This is a nice article abo
ut
Face an d the role it play
s in
Chinese society.

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

UX is still at the beg innin
g
stage in China.

There is lack of UX or H
CI
relate d co urses or e duca
tion
program mes.

http://www.ﬂickr.com/photos/h4ck/4202513554/


Chinese client still don’t
un derstan d much abo ut t
he
importance of UX.

It’s ﬁne for now because
almost all Chinese sites a
re
designe d in similar patte
rns.
Chinese have no cho ice b
ut to
put up w ith what they a
re
g iven.

Once UX beco mes more
po pular an d more Chines
e sites
pro vide not only go o d pr
o ducts
but also go o d UX, Chines
e w ill
be less forg iven for sites
w ith
ba d UX.

http://www.ﬂickr.com/photos/h4ck/4202513554/


Also, Chinese designers h
ave
ver y low salaries.

They bear a nu mber of
responsibilities an d often
are
g iven ridiculo us timescale
.
Therefore they are likely
to
co py each other or exist
ing
sites.

Hence, we ten d to see Ch
inese
sites w ith similar design
patterns again an d again
.

http://www.ﬂickr.com/photos/cbcastro/477856025/


These are the cur rent d
esign
tren ds in Chinese websit
es. But
it’s just a mo ment in Chin
ese
histor y.

Things w ill change drast
ically
in the co ming few years.

http://www.ﬂickr.com/photos/cbcastro/477856025/


Design pattern:
Similarities . Differences

So, a re Western an d Chinese
we b sites ver y different in
ter ms of their design?

Let’s lo ok at these sites....


Th e NY Times ho mepage:
a busy, lo ng page w ith a lot of
links an d content.


The Sina news site
(www.news.sina.co m.cn):

If yo u put it into a w ireframe,
it has tidier layo ut than the
NY Times ho mepage.


he
What ’s important is not just t
at
site d esign, it’s more abo ut wh
yo ur site does to the users.
It’s abo ut pro viding what
Chinese users want an d
suppo rting their behaviors an d
social elements.

For example....


.
Chin a is a collectivist society
e
Shar ing an d participations ar
ver y important.

Chin ese leave co m ments in
almo st ever ything: blogs,
vide os, microblogg ing... much
more than the West.

http://www.ﬂickr.com/photos/ben_grey/4582294721/


Chin a is also an expressive
society.
s
They like an d use a lot of icon
- cute, animation icons.
t
Thes e seem to be unimportan
elem ents but they have big
impa ct on how Chinese use
yo ur site.

Yo u nee d to pay attention to
ing
the se elements when pro vid
r
a se r vice to Chinese (via yo u
we b sites or other means)

http://www.ﬂickr.com/photos/ben_grey/4582294721/


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


Things will change Because a society w ill
change o ver time,
inclu ding its econo my, its
users’ behaviors, etc.

Browsing behaviour Use of adverts and
animations

Internet speed
China economy

Education &
experiences in UX
Font choice
options
Use of
Design quality & graphics
innovation


Make quick conclusions based on what
you see

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

Understand why and look into the
reasons behind

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


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)

Related links (Chinese culture)

“China - Language, Culture, Customs and Etiquette”
http://www.kwintessential.co.uk/resources/global-etiquette/china-country-proﬁle.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


Related links (in English) about Chinese web design:
* Note that I personally DO NOT necessarily agree with all the discussions in these sites.

“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/

“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

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

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: chuichui.tan@cxpartners.co.uk or tweet me @ChuiSquared if you’ve any
speciﬁc questions.


chuichui.tan@cxpartners.co.uk

@ChuiSquared

chuichuitan


Chinese web design patterns: how and why they’re different (Chui Chui Tan)

More Related Content

What's hot (16)

Viewers also liked (19)

More from cxpartners (20)

Recently uploaded (20)

Chinese web design patterns: how and why they’re different (Chui Chui Tan)