Chinese web design patterns: how and why they’re different (Chui Chui Tan)
1. Chinese Web Design Patterns
How and why they’re different
Chui Chui Tan @ChuiSquared
cxpartners
http://www.flickr.com/photos/photolate/2452470259/
Monday, 27 June 2011
2. 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.flickr.com/photos/sacharules/2613374596/
thing
om different perspectives.
@ChuiSquared fr
Monday, 27 June 2011
3. Ho mepage of a Chinese
-
po p ular online sho pping site
www.taobao.co m.
n?
W hat’s yo ur first impressio
Monday, 27 June 2011
4. H o mepage of a po pular
C hinese web portal site -
www.qq.co m.
What’s yo ur first impression?
Monday, 27 June 2011
5. Busy?
Complicated?
Cluttered?
Confusing?
Colourful?
Wow
Any of these?
Monday, 27 June 2011
6. Must look complicated ?
Must have lots of links ?
Links must open new windows ?
Must use flash
? 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?
Monday, 27 June 2011
7. Must look complicated
Must have lots of links
Links must open new windows
Must use flash
Must all Chinese sites lo ok
Must look busy co mplicate d?
Let’s think abo ut why they
lo ok co mplicate d.
Monday, 27 June 2011
8. 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?
Monday, 27 June 2011
9. n
BBC News site: UK versio
Tidy la yo ut, easily scanne d.
Monday, 27 June 2011
10. B BC News site: In donesian
version
Similar layo ut, same alphabets. But
might lo ok a bit more co mplicate d.
Monday, 27 June 2011
11. BBC n ews site: Russian version
Tidier layo ut, but lo ok more
co mplicate d than the English
version.
Monday, 27 June 2011
12. 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.
Monday, 27 June 2011
13. 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.
Monday, 27 June 2011
14. s
O ther reason Chinese site
often lo ok more co mplicate d is
because of Chinese
characters:
Beautiful but co mplex
http://www.flickr.com/photos/xiangxi/3308585857/
Monday, 27 June 2011
15. 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
Monday, 27 June 2011
16. 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.
Monday, 27 June 2011
17. 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.
Monday, 27 June 2011
18. Must look complicated
Must have lots of links
Links must open new windows
It’s not co mpletely true that all
Must use flash 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.
Monday, 27 June 2011
19. Must look complicated
Must have lots of links
Links must open new windows
Must use flash
Must look busy
Monday, 27 June 2011
20. T hey DO use a lot of links.
WHY?
Monday, 27 June 2011
21. 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.
Monday, 27 June 2011
22. 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.
Monday, 27 June 2011
23. *This page was
modified to
replace a video
showing how to
use ‘Pinyin to
input Chinese
characters.
Beijing( ) Fei( ) Niuyue ( )
Monday, 27 June 2011
24. There are shortcuts.
In stea d of typing ‘beijing’,
*This page was modified 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 ’.
Monday, 27 June 2011
25. 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 fin 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.
Monday, 27 June 2011
26. Must look complicated
Must have lots of links
Links must open new windows
Must use flash
A lot of links is what most
Must look busy Chinese sites have.
But it’s not what Chinese users
like.
Monday, 27 June 2011
27. 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.flickr.com/photos/ryananderson/223193295/
Monday, 27 June 2011
28. 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/
Monday, 27 June 2011
29. 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/
Monday, 27 June 2011
30. Must look complicated
Must have lots of links Just for now
Links must open new windows
Must use flash
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
Monday, 27 June 2011
31. Must look complicated
Must have lots of links Just for now
Links must open new windows
Must use flash
Must look busy
Monday, 27 June 2011
33. [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 fla
banners on the page.]
Monday, 27 June 2011
34. 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 profits ar
fro m a dverts.
The best way to get users’
atte ntion to these a dverts is
via flash a dverts.
Monday, 27 June 2011
35. For example, T
aobao’s main
revenue is fro
m its a dverts
(more than th
e profits they
get fro m their
ser vices).
But it is starti
ng to change
now in China.
Monday, 27 June 2011
36. 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 flash or no a dverts. B
it ’s do ing well in China.
Monday, 27 June 2011
37. e
“36 0 safeguard” is a Chines
s
We b security to ol. One of it
fun ctionalities is to allow
Ch inese to filter 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
Monday, 27 June 2011
38. Fonts
se
A nother reason why Chine
on
designers often use flash
w ebsites is because of
ts.
a vailable Chinese Web fon
Monday, 27 June 2011
39. 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.flickr.com/photos/vlastula/300102949/
Monday, 27 June 2011
40. 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.flickr.com/photos/vlastula/300102949/
Monday, 27 June 2011
41. Must look complicated
Must have lots of links Just for now
Links must open new windows
Must use flash 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.
Monday, 27 June 2011
42. Must look complicated
Must have lots of links Just for now
Links must open new windows
Must use flash
Must look busy
Monday, 27 June 2011
43. 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.flickr.com/photos/fab_photos/2419404100/
Monday, 27 June 2011
44. Baidu - the biggest search
eng ine in China
420 million users
Monday, 27 June 2011
45. Ba idu has the same page
de sign an d layo ut as Go ogle
(simple an d tidy layo ut design)
Monday, 27 June 2011
47. Baidu se arch result page has
.
simpler layo ut as Go ogle’s
Monday, 27 June 2011
48. Weibo (Chinese equivalen
t
Tw itter) has 140 million u
sers.
It has similar page desig
n as
Tw itter.
Monday, 27 June 2011
49. 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.
Monday, 27 June 2011
50. 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.
Monday, 27 June 2011
51. It’s more abo ut “ What the site
does to the Chinese users
rath er than how it lo oks.”
Monday, 27 June 2011
52. “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 c o mplaine d abo ut a dverts
to
an d that they are not being able
fin d what they are after.
(These ar e updates fro m Weibo -
Ch inese equivalent Tw itter)
Monday, 27 June 2011
53. “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.”
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.
Monday, 27 June 2011
54. 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.flickr.com/photos/kareneliot/2710464400/
Monday, 27 June 2011
55. Part of it has to do w ith
Confucius (a Chinese
philoso pher die d 2.5 tho
usan d
years ago).
His teachings influence d
Chinese culture an d socia
l
behaviors.
His teachings emphasise d
the
important of social, mora
l
order an d hierarchy.
http://www.flickr.com/photos/rob_web/466866299/
Monday, 27 June 2011
56. 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 flash a dverts on a
,
h o mepage to gain revenue
designe rs have no cho ice but
to follow.
http://www.flickr.com/photos/19779889@N00/4455072054/
Monday, 27 June 2011
57. 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.
Monday, 27 June 2011
58. How they are perceive d
by
society is important as
society ’s en dorsement de
fine
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.
Monday, 27 June 2011
59. 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/
Monday, 27 June 2011
60. 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.flickr.com/photos/h4ck/4202513554/
Monday, 27 June 2011
61. Chinese client still don’t
un derstan d much abo ut t
he
importance of UX.
It’s fine 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.flickr.com/photos/h4ck/4202513554/
Monday, 27 June 2011
62. 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.flickr.com/photos/cbcastro/477856025/
Monday, 27 June 2011
63. 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.flickr.com/photos/cbcastro/477856025/
Monday, 27 June 2011
64. 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....
Monday, 27 June 2011
65. Th e NY Times ho mepage:
a busy, lo ng page w ith a lot of
links an d content.
Monday, 27 June 2011
66. 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.
Monday, 27 June 2011
67. 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....
Monday, 27 June 2011
68. .
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.flickr.com/photos/ben_grey/4582294721/
Monday, 27 June 2011
69. 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.flickr.com/photos/ben_grey/4582294721/
Monday, 27 June 2011
70. You won’t learn about a
country in one presentation.
Monday, 27 June 2011
71. 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
Monday, 27 June 2011
72. 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)
Monday, 27 June 2011
73. 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)
Monday, 27 June 2011
74. Related links (Chinese culture)
“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
Additional slide (as requested)
Monday, 27 June 2011
75. 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/
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: chuichui.tan@cxpartners.co.uk or tweet me @ChuiSquared if you’ve any
specific questions.
Monday, 27 June 2011