Daniel McConnellExtremely useful for a project I'm working on at the moment thank you very much! Does anyone know any other rersources that may be useful RE: Web design for the Chinese market? Especially relating to E-Commerse?5 months ago
reyaga7Thank you for sharing this one. I have been having a hard time convincing my clients about how their Chinese websites need a better approach in UX and that we should stop looking at Chinese websites at face value but rather start asking our Chinese users about what they really want in a website. Most people (mostly Westerners) really have a bad understanding on WHY Chinese websites are designed in a specific way.8 months ago
Are you sure you want to
Pascal Wicht, art / creative director This is really interesting, precises and connects various bits of informations I had on the topic. Thanks a lot for sharing (+ download). Cheers1 year ago
Chinese web design patterns: how and why they’re differentPresentation Transcript
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
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 frMonday, 27 June 2011
Ho mepage of a Chinese - po p ular online sho pping site www.taobao.co m. n? W hat’s yo ur first impressioMonday, 27 June 2011
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
Busy? Complicated? Cluttered? 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 ? 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
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
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
n BBC News site: UK versio Tidy la yo ut, easily scanne d.Monday, 27 June 2011
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
BBC n ews site: Russian version Tidier layo ut, but lo ok more co mplicate d than the English version.Monday, 27 June 2011
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
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
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
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 strokeMonday, 27 June 2011
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
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
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
Must look complicated Must have lots of links Links must open new windows Must use flash Must look busyMonday, 27 June 2011
T hey DO use a lot of links. WHY?Monday, 27 June 2011
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
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
*This page was modified to replace a video showing how to use ‘Pinyin to input Chinese characters. Beijing( ) Fei( ) Niuyue ( )Monday, 27 June 2011
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
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
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
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
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 Chinahttp://www.techknowtimes.com/web/global-downloads-speed-comparison/Monday, 27 June 2011
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 Chinahttp://www.techknowtimes.com/web/global-downloads-speed-comparison/Monday, 27 June 2011
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 changeMonday, 27 June 2011
Must look complicated Must have lots of links Just for now Links must open new windows Must use flash Must look busyMonday, 27 June 2011
Monday, 27 June 2011
[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
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
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
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
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.htmlMonday, 27 June 2011
Fonts se A nother reason why Chine on designers often use flash w ebsites is because of ts. a vailable Chinese Web fonMonday, 27 June 2011
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
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
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
Must look complicated Must have lots of links Just for now Links must open new windows Must use flash Must look busyMonday, 27 June 2011
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
Baidu - the biggest search eng ine in China 420 million usersMonday, 27 June 2011
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
Go ogle search result pageMonday, 27 June 2011
Baidu se arch result page has . simpler layo ut as Go ogle’sMonday, 27 June 2011
Weibo (Chinese equivalen t Tw itter) has 140 million u sers. It has similar page desig n as Tw itter.Monday, 27 June 2011
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
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
It’s more abo ut “ What the site does to the Chinese users rath er than how it lo oks.”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 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
“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
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
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
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
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
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
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
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
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
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
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
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
Th e NY Times ho mepage: a busy, lo ng page w ith a lot of links an d content.Monday, 27 June 2011
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
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
. 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
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
You won’t learn about a country in one presentation.Monday, 27 June 2011
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 innovationMonday, 27 June 2011
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
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) “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
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
chuichui.tan@cxpartners.co.uk @ChuiSquared chuichuitanMonday, 27 June 2011
Vanissa Wanick
FYI, Baidu has the same layout as Google because it was made to look like Google. 1 year ago
[url=http://www.gtbshopping.com/discount-golf-irons/titleist.html]Titleist Irons[/url]
[url=http://www.gtbshopping.com/titleist-ap1-710-forged-irons.html]Titleist AP1[/url]
[url=http://www.gtbshopping.com/titleist-ap2-710-forged-irons.html]Titleist AP2[/url]
[url=http://www.gtbshopping.com/titleist-mb-710-forged-irons.html]Titleist MB[/url]
[url=http://www.gtbshopping.com/titleist-cb-710-forged-irons.html]Titleist CB[/url] 1 year ago
Mumbai Escorts 1 year ago