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

Uploaded on

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

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

More in: Design , Technology , Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. Chinese Web Design Patterns How and why they’re different Chui Chui Tan @ChuiSquared cxpartners, 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 thing om different perspectives. @ChuiSquared frMonday, 27 June 2011
  • 3. Ho mepage of a Chinese - po p ular online sho pping site 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 - 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, 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., 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, 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, 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 - 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 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., 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., 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), 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?, 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. 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., 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., 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., 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. 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., 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., 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 ., 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., 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 ( 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., 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), 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 : Online shopping site : Chinese web portal integrating news, entertainment and other basic web-based services : Chinese infotainment portal integrating news, entertainment, blogs, microblogging (Sina Weibo) and so on : Online library for music, books, movies : Popular Chinese travel booking site : China’s biggest search engine : Online payment solution (Chinese equivalent PayPal) : online auction site (Chinese equivalent eBay) : Video hosting service : Video site (Chinese equivalent YouTube) Microblogging site (Chinese equivalent Twitter) : Social network site (Chinese equivalent Facebook) : Chinese portal website Additional slide (as requested)Monday, 27 June 2011
  • 74. Related links (Chinese culture) “China - Language, Culture, Customs and Etiquette” “Chinese Customs, Manners and Etiquette” “Confucius 101: A key to understanding the Chinese Mind” Chinese Cultural Values and Their Implications in Business” 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” innovation-and-user-centered-design/ “Why is Chinese Web Design So Bad?” Quora: “Why are Chinese websites and software interfaces always complicated..." English-language-websites-like-Google-LinkedIn-and-Twitter-much-simpler 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: or tweet me @ChuiSquared if you’ve any specific questions.Monday, 27 June 2011
  • 76. @ChuiSquared chuichuitanMonday, 27 June 2011