Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Chinese Web Design Patterns
      How and why they’re different



      Chui Chui Tan    @ChuiSquared
      cxpartners


...
I’m a      Malaysian born Chinese,
                                                 bro ug     ht up follow ing Chinese
  ...
Ho mepage of a Chinese
                                                       -
                       po p ular online sh...
H o mepage of a po pular
                       C hinese web portal site -
                       www.qq.co m.

          ...
Busy?
                                    Complicated?
                       Cluttered?

                                ...
Must look complicated    ?
      Must have lots of links ?

      Links must open new windows       ?
      Must use flash
...
Must look complicated


                Must have lots of links

                Links must open new windows

            ...
Yo u can   see two things in one
                       -  a yo ung la dy an d an old
                       la dy. It’s a...
n
                       BBC News site: UK versio

                       Tidy la yo ut, easily scanne d.




Monday, 27 J...
B BC News site: In donesian
                       version

                       Similar layo ut, same alphabets. But
  ...
BBC n ews site: Russian version

                       Tidier  layo ut, but lo ok more
                       co mplicate...
BBC news site:
                       “COMPLIC  ATED” Chinese version

                       Is it really co mplicate d?
...
BBC news site:
                       “COMPLIC  ATED” Chinese version

                       To C hinese users, it’s not
...
s
                       O ther reason Chinese site
                       often lo ok more co mplicate d is
             ...
Tan             Chui           Chui




                                11              8             15              15
 ...
Twitter “Tweet”
                                           “Follow”
                                                      ...
Twitter “Tweet”
                                           “Follow”
                                                      ...
Must look complicated


                Must have lots of links

                Links must open new windows
             ...
Must look complicated


                       Must have lots of links

                       Links must open new windows...
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 ...
Standard Chinese keyboard




                                   Chinese use the same
                                   k...
*This page was
    modified to
    replace a video
    showing how to
    use ‘Pinyin to
    input Chinese
    characters.
...
There are shortcuts.

                                          In stea d of typing ‘beijing’,
         *This page was mod...
It’s fast an d easy. It co uld be
                       slow er for Chinese to type in
                       English tha...
Must look complicated


                       Must have lots of links

                       Links must open new windows...
o
                       L inks o pen new w in dows t
                                                   g
               ...
Average connection speed

                             15000                                    It’s  because China has sl...
Average connection speed

                             15000                                    Ho wever, this is go ing t...
Must look complicated


                       Must have lots of links         Just for now

                       Links ...
Must look complicated


                Must have lots of links   Just for now

                Links must open new window...
Monday, 27 June 2011
[Go to sina.co m.cn - a
                       in fotainment web portal
                       co vering news, entertainme...
They are all a dverts.

                       This is how China cur rent
                                                ...
For example, T
                                       aobao’s main
                       revenue is fro
                 ...
w
                       Lo ok at  www.do uban.co m - a ne
                       Chinese   online librar y site for
     ...
e
                       “36   0 safeguard” is a Chines
                                                         s
       ...
Fonts

                                                      se
                           A nother reason why Chine
     ...
Limited font choices


        No way to emphasise font


        Restriction on font sizes

                             ...
Limited font choices


        No way to emphasise font


        Restriction on font sizes   There is no fancy fonts
    ...
Must look complicated


                Must have lots of links       Just for now

                Links must open new wi...
Must look complicated


                Must have lots of links   Just for now

                Links must open new window...
No
                                            Simplicity
         We always hear:                   ^
         Ch
       ...
Baidu - the biggest search
                             eng ine in China




         420 million users
Monday, 27 June 20...
Ba idu has the same page
                       de sign an d layo ut as Go ogle
                       (simple an d tidy l...
Go ogle search result page


Monday, 27 June 2011
Baidu se arch result page has
                                                   .
                       simpler layo ut ...
Weibo (Chinese equivalen
                                   t
        Tw itter) has 140 million u
                        ...
What makes it po pular in
        China is not the busynes
                                   s of
       the site, it’s t...
www.taobao.co m:
                       Chinese users like it not
                       beca  use of its colorful, long
 ...
It’s more abo ut “ What the site
                       does  to the Chinese users
                       rath er than how...
“Don’t like Sina’s sport site. It feels messy
                                        and cluttered. Can’t find anything.”
...
“The user experience of AirAsia
                                   website is really bad....”




                        ...
So, if Chinese don’t like h
                                  ow
      existing Chinese sites are
     being designe d an ...
Part of it has to do w ith
   Confucius (a Chinese
   philoso pher die d 2.5 tho
                              usan d
   y...
g
                       H ierarchy means respectin
                       an d liste ning to peo ple who are
            ...
Another Confucius teach
                                ing:
        collectivism

       China is a collectivist soc
    ...
How they are perceive d
                                  by
       society is important as
       society ’s en dorsement...
It can be quite hard for
         Westerners to grasp the
                                  idea
         of Face.

      ...
UX is still at the beg innin
                                      g
         stage in China.

        There is lack of UX...
Chinese client still don’t
                                                  un derstan d much abo ut t
                  ...
Also, Chinese designers h
                                    ave
           ver y low salaries.

          They bear a nu...
These are the cur rent d
                                  esign
        tren ds in Chinese websit
                       ...
Design pattern:
                 Similarities . Differences

                             So, a re Western an d Chinese
  ...
Th e NY Times ho mepage:
                       a busy, lo ng page w ith a lot of
                       links an d conten...
The Sina news site
                       (www.news.sina.co m.cn):

                       If yo u put it into a w irefram...
he
                       What  ’s important is not just t
                                                        at
    ...
.
                       Chin a is a collectivist society
                                                        e
      ...
Chin a is also an expressive
                       society.
                                                          s
 ...
You won’t learn about a
              country in one presentation.




Monday, 27 June 2011
Things will change                              Because a society w ill
                                                  ...
Make quick conclusions based on what
                          you see

                          Design your site by (bli...
Some popular Chinese sites

    www.taobao.com : Online shopping site
    www.qq.com : Chinese web portal integrating news...
Related links (Chinese culture)


    “China - Language, Culture, Customs and Etiquette”
    http://www.kwintessential.co....
Related links (in English) about Chinese web design:
    * Note that I personally DO NOT necessarily agree with all the di...
chuichui.tan@cxpartners.co.uk

                         @ChuiSquared

                            chuichuitan



Monday, 2...
Upcoming SlideShare
Loading in …5
×

of

Chinese web design patterns: how and why they’re different (Chui Chui Tan) Slide 1 Chinese web design patterns: how and why they’re different (Chui Chui Tan) Slide 2 Chinese web design patterns: how and why they’re different (Chui Chui Tan) Slide 3 Chinese web design patterns: how and why they’re different (Chui Chui Tan) Slide 4 Chinese web design patterns: how and why they’re different (Chui Chui Tan) Slide 5 Chinese web design patterns: how and why they’re different (Chui Chui Tan) Slide 6 Chinese web design patterns: how and why they’re different (Chui Chui Tan) Slide 7 Chinese web design patterns: how and why they’re different (Chui Chui Tan) Slide 8 Chinese web design patterns: how and why they’re different (Chui Chui Tan) Slide 9 Chinese web design patterns: how and why they’re different (Chui Chui Tan) Slide 10 Chinese web design patterns: how and why they’re different (Chui Chui Tan) Slide 11 Chinese web design patterns: how and why they’re different (Chui Chui Tan) Slide 12 Chinese web design patterns: how and why they’re different (Chui Chui Tan) Slide 13 Chinese web design patterns: how and why they’re different (Chui Chui Tan) Slide 14 Chinese web design patterns: how and why they’re different (Chui Chui Tan) Slide 15 Chinese web design patterns: how and why they’re different (Chui Chui Tan) Slide 16 Chinese web design patterns: how and why they’re different (Chui Chui Tan) Slide 17 Chinese web design patterns: how and why they’re different (Chui Chui Tan) Slide 18 Chinese web design patterns: how and why they’re different (Chui Chui Tan) Slide 19 Chinese web design patterns: how and why they’re different (Chui Chui Tan) Slide 20 Chinese web design patterns: how and why they’re different (Chui Chui Tan) Slide 21 Chinese web design patterns: how and why they’re different (Chui Chui Tan) Slide 22 Chinese web design patterns: how and why they’re different (Chui Chui Tan) Slide 23 Chinese web design patterns: how and why they’re different (Chui Chui Tan) Slide 24 Chinese web design patterns: how and why they’re different (Chui Chui Tan) Slide 25 Chinese web design patterns: how and why they’re different (Chui Chui Tan) Slide 26 Chinese web design patterns: how and why they’re different (Chui Chui Tan) Slide 27 Chinese web design patterns: how and why they’re different (Chui Chui Tan) Slide 28 Chinese web design patterns: how and why they’re different (Chui Chui Tan) Slide 29 Chinese web design patterns: how and why they’re different (Chui Chui Tan) Slide 30 Chinese web design patterns: how and why they’re different (Chui Chui Tan) Slide 31 Chinese web design patterns: how and why they’re different (Chui Chui Tan) Slide 32 Chinese web design patterns: how and why they’re different (Chui Chui Tan) Slide 33 Chinese web design patterns: how and why they’re different (Chui Chui Tan) Slide 34 Chinese web design patterns: how and why they’re different (Chui Chui Tan) Slide 35 Chinese web design patterns: how and why they’re different (Chui Chui Tan) Slide 36 Chinese web design patterns: how and why they’re different (Chui Chui Tan) Slide 37 Chinese web design patterns: how and why they’re different (Chui Chui Tan) Slide 38 Chinese web design patterns: how and why they’re different (Chui Chui Tan) Slide 39 Chinese web design patterns: how and why they’re different (Chui Chui Tan) Slide 40 Chinese web design patterns: how and why they’re different (Chui Chui Tan) Slide 41 Chinese web design patterns: how and why they’re different (Chui Chui Tan) Slide 42 Chinese web design patterns: how and why they’re different (Chui Chui Tan) Slide 43 Chinese web design patterns: how and why they’re different (Chui Chui Tan) Slide 44 Chinese web design patterns: how and why they’re different (Chui Chui Tan) Slide 45 Chinese web design patterns: how and why they’re different (Chui Chui Tan) Slide 46 Chinese web design patterns: how and why they’re different (Chui Chui Tan) Slide 47 Chinese web design patterns: how and why they’re different (Chui Chui Tan) Slide 48 Chinese web design patterns: how and why they’re different (Chui Chui Tan) Slide 49 Chinese web design patterns: how and why they’re different (Chui Chui Tan) Slide 50 Chinese web design patterns: how and why they’re different (Chui Chui Tan) Slide 51 Chinese web design patterns: how and why they’re different (Chui Chui Tan) Slide 52 Chinese web design patterns: how and why they’re different (Chui Chui Tan) Slide 53 Chinese web design patterns: how and why they’re different (Chui Chui Tan) Slide 54 Chinese web design patterns: how and why they’re different (Chui Chui Tan) Slide 55 Chinese web design patterns: how and why they’re different (Chui Chui Tan) Slide 56 Chinese web design patterns: how and why they’re different (Chui Chui Tan) Slide 57 Chinese web design patterns: how and why they’re different (Chui Chui Tan) Slide 58 Chinese web design patterns: how and why they’re different (Chui Chui Tan) Slide 59 Chinese web design patterns: how and why they’re different (Chui Chui Tan) Slide 60 Chinese web design patterns: how and why they’re different (Chui Chui Tan) Slide 61 Chinese web design patterns: how and why they’re different (Chui Chui Tan) Slide 62 Chinese web design patterns: how and why they’re different (Chui Chui Tan) Slide 63 Chinese web design patterns: how and why they’re different (Chui Chui Tan) Slide 64 Chinese web design patterns: how and why they’re different (Chui Chui Tan) Slide 65 Chinese web design patterns: how and why they’re different (Chui Chui Tan) Slide 66 Chinese web design patterns: how and why they’re different (Chui Chui Tan) Slide 67 Chinese web design patterns: how and why they’re different (Chui Chui Tan) Slide 68 Chinese web design patterns: how and why they’re different (Chui Chui Tan) Slide 69 Chinese web design patterns: how and why they’re different (Chui Chui Tan) Slide 70 Chinese web design patterns: how and why they’re different (Chui Chui Tan) Slide 71 Chinese web design patterns: how and why they’re different (Chui Chui Tan) Slide 72 Chinese web design patterns: how and why they’re different (Chui Chui Tan) Slide 73 Chinese web design patterns: how and why they’re different (Chui Chui Tan) Slide 74 Chinese web design patterns: how and why they’re different (Chui Chui Tan) Slide 75 Chinese web design patterns: how and why they’re different (Chui Chui Tan) Slide 76
Upcoming SlideShare
Your Mobile Experience Is Not Theirs (Chui Chui Tan)
Next
Download to read offline and view in fullscreen.

238 Likes

Share

Download to read offline

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

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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
  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.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
  46. Go ogle search result page 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
  76. chuichui.tan@cxpartners.co.uk @ChuiSquared chuichuitan Monday, 27 June 2011
  • SeanGong

    Mar. 28, 2020
  • ssusera9d23c

    Oct. 19, 2018
  • ZoraVaulnov

    Jul. 11, 2018
  • KristenModesto

    Jun. 2, 2018
  • HuiJingChen

    May. 25, 2018
  • LeeSzwec

    May. 4, 2018
  • StuartCameron18

    Aug. 11, 2017
  • webcentricdotcoza

    Aug. 8, 2017
  • dominicderib

    Jun. 23, 2017
  • JiHruka5

    May. 22, 2017
  • DumasChim

    Feb. 16, 2017
  • YaHsinLai

    Feb. 15, 2017
  • RobertHsu3

    Nov. 8, 2016
  • KaseyRobinson

    Oct. 27, 2016
  • apoorvabhalla1

    Oct. 24, 2016
  • mcatetellani

    Oct. 20, 2016
  • lingweay

    Sep. 30, 2016
  • xincao

    Aug. 10, 2016
  • vemariya

    Jul. 22, 2016
  • RobinDoermann

    Jul. 20, 2016

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

Views

Total views

152,075

On Slideshare

0

From embeds

0

Number of embeds

7,830

Actions

Downloads

1,384

Shares

0

Comments

0

Likes

238

×