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

67,155
-1

Published on

Chinese Web design patterns: How and why they are different from the West. @ChuiSquared's slides from UPA 2011

Published in: Design, Technology, Education
25 Comments
211 Likes
Statistics
Notes
No Downloads
Views
Total Views
67,155
On Slideshare
0
From Embeds
0
Number of Embeds
33
Actions
Shares
0
Downloads
1,241
Comments
25
Likes
211
Embeds 0
No embeds

No notes for slide

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 frMonday, 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 impressioMonday, 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 strokeMonday, 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 busyMonday, 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 Chinahttp://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 Chinahttp://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 changeMonday, 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 busyMonday, 27 June 2011
  32. 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.htmlMonday, 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 fonMonday, 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 busyMonday, 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 usersMonday, 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
  46. Go ogle search result pageMonday, 27 June 2011
  47. Baidu se arch result page has . simpler layo ut as Go ogle’sMonday, 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 innovationMonday, 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
  76. chuichui.tan@cxpartners.co.uk @ChuiSquared chuichuitanMonday, 27 June 2011

×