chinese web design patterns: how and why they’re different (chui chui tan)
Post on 17-Aug-2014
52.382 Views
Preview:
DESCRIPTION
TRANSCRIPT
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.
Monday, 27 June 2011
Homepage of a Chinese popular online shopping site -
www.taobao.com.
What’s your first impression?
Monday, 27 June 2011
Homepage of a popular Chinese web portal site -
www.qq.com.
What’s your first impression?
Monday, 27 June 2011
Busy?
Cluttered?
Complicated?
Confusing?Colourful?
Wow Any of these?
Monday, 27 June 2011
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?
Monday, 27 June 2011
Must have lots of links
Links must open new windows
Must use flash
Must look busy
Must look complicated
Must all Chinese sites look
complicated?
Let’s think about why they
look complicated.
Monday, 27 June 2011
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?
Monday, 27 June 2011
BBC News site: UK version
Tidy layout, easily scanned.
Monday, 27 June 2011
BBC News site: Indonesian
version
Similar layout, same alphabets. But
might look a bit more complicated.
Monday, 27 June 2011
BBC news site: Russian version
Tidier layout, but look more
complicated than the English
version.
Monday, 27 June 2011
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.
Monday, 27 June 2011
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.
Monday, 27 June 2011
http://www.flickr.com/photos/xiangxi/3308585857/
Other reason Chinese sites
often look more complicated is
because of Chinese
characters:Beautiful but complex
Monday, 27 June 2011
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
Monday, 27 June 2011
目前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.
Monday, 27 June 2011
目前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.
Monday, 27 June 2011
Must have lots of links
Links must open new windows
Must use flash
Must look busy
Must look complicated
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.
Monday, 27 June 2011
Must use flash
Must look busy
Must look complicated
Must have lots of links
Links must open new windows
Monday, 27 June 2011
They DO use a lot of links.
WHY?
Monday, 27 June 2011
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.
Monday, 27 June 2011
Standard Chinese keyboard
Chinese use the same keyboards as the West.
They use ‘Pinyin’ to input
Chinese characters using these
alphabet-based keyboards.
Monday, 27 June 2011
Beijing(北京) Fei(飞) Niuyue (纽约)
*This page was modified to replace a video showing how to use ‘Pinyin to input Chinese characters.
Monday, 27 June 2011
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’
Monday, 27 June 2011
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.
Monday, 27 June 2011
Must use flash
Must look busy
Must look complicated
Must have lots of links
Links must open new windows
A lot of links is what most
Chinese sites have.
But it’s not what Chinese users
like.
Monday, 27 June 2011
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.
Monday, 27 June 2011
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.
Monday, 27 June 2011
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
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.
Monday, 27 June 2011
Must use flash
Must look busy
Must look complicated
Must have lots of links
Links must open new windows
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.
Monday, 27 June 2011
Must look busy
Must look complicated
Must have lots of links
Links must open new windows
Just for now
Must use flash
Monday, 27 June 2011
Monday, 27 June 2011
[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.]
Monday, 27 June 2011
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.
Monday, 27 June 2011
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.
Monday, 27 June 2011
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.
Monday, 27 June 2011
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.
Monday, 27 June 2011
Fonts
Another reason why Chinese
designers often use flash on
websites is because of available Chinese Web fonts.
Monday, 27 June 2011
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.
Monday, 27 June 2011
http://www.flickr.com/photos/vlastula/300102949/
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)
Monday, 27 June 2011
Must look busy
Must look complicated
Must have lots of links
Links must open new windows
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.
Monday, 27 June 2011
Must look busy
Must look complicated
Must have lots of links
Links must open new windows
Just for now
Must use flash
Monday, 27 June 2011
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?
Monday, 27 June 2011
420 million users
Baidu - the biggest search
engine in China
Monday, 27 June 2011
Baidu has the same page
design and layout as Google
(simple and tidy layout design)
Monday, 27 June 2011
Google search result page
Monday, 27 June 2011
Baidu search result page has
simpler layout as Google’s.
Monday, 27 June 2011
Weibo (Chinese equivalent Twitter) has 140 million users.
It has similar page design as Twitter.
Monday, 27 June 2011
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.
Monday, 27 June 2011
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.
Monday, 27 June 2011
It’s more about “What the site
does to the Chinese users
rather than how it looks.”
Monday, 27 June 2011
“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)
Monday, 27 June 2011
“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.
Monday, 27 June 2011
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.
Monday, 27 June 2011
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.
Monday, 27 June 2011
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.
Monday, 27 June 2011
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.
Monday, 27 June 2011
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.
Monday, 27 June 2011
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.
Monday, 27 June 2011
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.
Monday, 27 June 2011
http://www.flickr.com/photos/h4ck/4202513554/
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.
Monday, 27 June 2011
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.
Monday, 27 June 2011
http://www.flickr.com/photos/cbcastro/477856025/
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.
Monday, 27 June 2011
Design pattern:Similarities . Differences
So, are Western and Chinese
websites very different in
terms of their design?
Let’s look at these sites....
Monday, 27 June 2011
The NY Times homepage:
a busy, long page with a lot of
links and content.
Monday, 27 June 2011
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.
Monday, 27 June 2011
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....
Monday, 27 June 2011
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.
Monday, 27 June 2011
http://www.flickr.com/photos/ben_grey/4582294721/
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)
Monday, 27 June 2011
You won’t learn about a country in one presentation.
Monday, 27 June 2011
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.
Monday, 27 June 2011
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
Monday, 27 June 2011
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
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
Monday, 27 June 2011
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: chuichui.tan@cxpartners.co.uk 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/
Monday, 27 June 2011
chuichui.tan@cxpartners.co.uk
@ChuiSquared
chuichuitan陳璀璀
Monday, 27 June 2011
top related