CURRENT ARTICLE:  The Top Chinese Web and Mobile App Design and UX Trends
NEXT ARTICLE:   SEIRIM Guide to SEO in 2020

The Top Chinese Web and Mobile App Design and UX Trends

Han Zhao // Last Updated: 15 December 2016

Web design development in China

In a hyper-competitive market like China, slight differences in UI/UX risk being amplified and can mean all the difference between winning a lifelong consumer and losing a potential consumer irrevocably, often at the very first interactions. Hence, web designs are really fundamental to the customer acquisition process.

From our observations, we learn that there seems to be a spectrum of three main types of web (website and application) designs in China – from the most ‘Eastern’, to the early mix-matching of ‘East’ and ‘West’, to the most ‘Western’ (international) looking. For ease of discussion, we shall refer to them as the ‘Basic Busy’, the ‘Progressive Busy’ and the ‘Vanguard’ looks - each with differing design characteristics.

We also learn that Chinese cultural characteristics can have profound influences on web designs in China, and thus could be good indicators on which design elements we can expect to remain and which to trend forward. In this respect, we found that although the design of the ‘Basic Busy’ is rather outdated, it somehow remains culturally relevant and remains influential on the Progressive Busy look (though some elements of western designs are beginning to show). On the other end of the spectrum, the Vanguard type readily manifests myriads of international design styles. In fact, some of the largest websites and apps in China are leading the world in web features, actively adding features which have to be incorporated in web design - spatially, technically and aesthetically.

We predict that beyond 2016, Chinese web designs would see, firstly, even more and better innovative platforms to cater to increasing consumption in media content and e-commerce (due to better internet speed, and better multimedia and Omnichannel e-commerce experience). In fact, a notable latest development is the introduction of Alibaba Buy +, highlighting the first steps towards a commercially practical implementation of virtual reality in the world. Secondly, we will see more innovations in personalization tools (driven by the individualization and identity crisis of the younger generation); and thirdly, we will see more mobile-centric designs (due to higher accessibility to mobile devices).

Part one of the article explains the three main groups of Chinese web designs to get a brief overview of web design development in China. Part two outlines some specific trends of web designs that we see happening in the recent years in China. Part three studies web designing in China against a cultural context– to understand the Chinese preferred design looks and feel, and to ultimately predict what to expect in web design trends in China.

The ‘Basic Busy’ – The ‘Eastern’

The first main type of Chinese web design is the ‘Basic Busy’, which is often characterized by its cluttered-looking chunks of text bodies, its numerous links to comprehensive sets of categories, its bands and small blocks of flash animated advertisements - all squeezed into a compact one page like examination cheat-sheet, with information competing with each other for attention.

Technically, the most outstanding features of this type are the big frame structures and small navigation menu space. Structured by the classic 960 grid system, they are mainly for texts, not for visual graphics or pictures (where any spaces for pictures are minimal and only for small pictures). In many ways, this was poor UI/UX design. On Chinese websites, they appear even more convoluted due to the impressions that are naturally – and inevitably - made by complex and dense Chinese characters.

In fact, the ‘Basic Busy’ look is somewhat a reminiscence of the first versions of Yahoo.com pages back in the 1990s, built early in a low UI and UX design awareness web development environment. In some ways, the ‘Basic Busy’ appears to be the widely accepted distinctive style of Chinese web designs since the early 1990s, from when internet was introduced in China. Even until now in 2016, at least four www.sohu.com, www.hao123.com, www.qq.com, www.sina.com of the top ten most popular sites in China carry elements of this ‘Basic Busy’ look, making it the ‘basic’ of ‘Eastern’ web design look and feel. The main adopters of this type tend to be the many of the news portals and government websites.

Sohu’s home page has not even been changed since 2008!

Government websites tend to maintain the busy look as well. This home page is the Chongqing Municipal government www.cq.gov.cn.

For a popular news portal, NetEase www.163.com looks severely outdated.

The ‘Progressive Busy’ – Early mix-matching of ‘East’ and ‘West’

The second main type of web design in China is the ‘Progressive Busy’, which is often characterized by the basic structure of the ‘Basic Busy’ layout (the ‘Eastern’), but with the newer web features and design elements: the stylized and sometimes animated pop-ups, mini video screens, advertisement side-bar, user account information side-bar, QR codes, Omni-channel platforms, flash banners, etc. Typical adopters of this design are the social forums, media and entertainment, e-commerce sites, etc.

Technically, this look is like the updated version of the ‘Basic Busy’. In fact, some ‘Progressive Busy’ sites still use the classic 960 grid system. With so many newer features incorporated spatially, we would expect the ‘Progressive Busy’ to look would look even ‘busier’. But the 1px border has been replaced with the 5-10px margin. As a result, the websites look more spacious and neater. An Example is Tianya www.tianya.cn one of the most popular forum websites.

Some e-commerce sites like Taobao www.taobao.com and JD www.JD.com, disregards parts of the 960 grid to accommodate bigger images, yet still keeping the content rich and overcrowded that is the ‘Basic Busy’ look and feel.

More interestingly, we are also seeing the introduction of some ‘Western’ elements in the ‘Busy Progressive’ sites. A case in point of ‘East meets West’ is iQiyi www.iqiyi.com, a popular video streaming site. We see that the site embracing the full screen concept (A ‘Western’ concept) only to make the image look busy by littering the interface with texts and textbox all over the images.

iQiyi, an example of ‘East meets West’.

The ‘Vanguard’ – The ‘Western’

At the other end of the spectrum is the third main type, the ‘Vanguard’. This type does not point to any specific design look and feel, rather it is a collective of websites and apps that adopt the more sophisticated aesthetics and design elements that are in-line with international trends (minimalism, parallax scrolling, etc.). The ‘Vanguard’ type is certainly getting traction among sites, especially those with international outlook and aspirations.

Technically, as a common defining characteristic, these types often reject the use of the grid system (especially for single-purposed sites), adopt freer and simpler layout designs, incorporate responsive web design, full screen designs, parallax scrolling designs, waterfall layouts (dynamic grid layout), card designs, etc. Their homepages often appear seamless, employing the use of higher and wider heading picture to give the illusion of width and space. Color schemes and typesetting effects were also changing: using less outer glow, inner glow, shadows and other render methods – using instead simple solid color blocks. Hovers have gradually faded out too.

Adopters of this type are mostly high-end apparel brands, independent retailers (where it pays to be unique and radical), international companies in China, design and creative houses, etc. Some examples include: VIP www.vip.com, a mix high end product outlet and Yoho!Buy www.yohobuy.com, a chic brand clothing website - both of which incorporate card designs and have much neater home pages compared to Taobao, Tmall, JD etc. Other examples include: Zhihu www.zhihu.com, a Q&A site similar to Quora.com, WOW www.wowdsgn.com, a design house cum e-commerce site, and FIIL www.fiil.com, a brand selling audio products.

VIP and Yoho!Buy both incorporate card design elements, resulting in a neater look than Taobao.

Zhihu www.zhihu.com, the Chinese version of Quora, has a relatively neater layout compared to its Chinese competitor Tianya.

WOW is up-to-date with full screen design.

FIIL is up-to-date with a full page design.

Specific web design trends in China in recent years led by the ‘Vanguards’

Web designs are no longer limited by technology. Here are some main recent developments in recent years trending in other countries that are also trending in China that we think will continue to drive web developments of websites and mobile apps in China:

Responsive web design

In an increasingly Omni-channel world, Chinese consumers will have access to even more choices of digital terminals and outlets: desktop, laptop, tablet computer, mobile phone, kiosks, etc. The recent trend is design interfaces that can reorganize its elements with integrity in the different terminals and that can adapt to different display sizes while attaining high resolutions in order to achieve the best visual experience. Didi www.xiaojukeji.com for example, has adopted a web responsive and full screen design on its webpage.

Full screen design

A full screen design features a continuous ‘pure’ and ‘blank’ plane concept to highlight the simplicity of the main web body for a more comfortable visual sense. Many sites and apps have begun to use full screen web designs, using beautiful background design with equally simple page layout. Within the page, there is little text body as the picture is the main attraction. An example is Ran Fan fashion designer website’s www.ranfanstyle.com new design.

Parallax scrolling

Parallax scrolling is gaining popularity in China. The parallax effect is achieved when the background and foreground layers move to create some 3D effects as the user scrolls up and down. In addition, the control of perspectives let users have a sense of interaction which greatly enhances UX. An example is QQ im.qq.com, the IM software by Tencent, which launched its new webpage using responsive design, full screen design and parallax scrolling design.

Waterfall layout

The waterfall layout offers e-commerce and social web designs the ‘Pinterest’ way of continuous visibility and convenience of browsing images without having to click the ‘next page’ buttons. An example is KnewOne www.knewone.com, a platform for sharing high quality consumer goods based on other users’ experience.

2.5 Flat design 2.0.

Flat design 2.0 is getting more followings in China among single-purposed sites and apps. This second flat design version takes a more customer-centered approach and it is a step towards better UX. For texts, bigger font size and bolded ones are used. Margin space organizes the structure of texts, replacing the use of frame elements for that. It results in neater layouts with clear contrasts to emphasize important contents. The design concept also uses shades and color to build better graphic effects, where visual items tend to be layered, giving them illusion of depths and some muted 3D physical properties. Button designs and placements have improved. Flat design 2.0 gives better UI/UX especially for visually disabled readers.

An example is the WALKUP mobile app (below), an app to count the number of steps walked every day.

Icon works done by SKY. Note the 45° shadow casted to create a three-dimensional effect.

2.6 Microinteractions

With current UI technology, there has never been so much potential in incorporating various types of Microinteractions in enhancing a good UX. Microinteractive design consideration can help user engage contents better and feel more connected to a site. For example, simple thumbnails and previews of links let users know in advance what to expect to avoid disappointment, without having to go through anxiety while waiting for pages to load.

Microinteractive animations are also increasingly popular especially with the rise of AI technology. For example, using animations for loading icons, interactive buttons and chatbots lets consumers feel welcomed by giving the feeling that they are personally attended to. In addition, animations can guide the users to do something and be directed to important information. Microinteractive animations can also be used to demonstrate product and procedures, update notification, switch pages, visible type-in, and educate consumers to use system and products the right way. An example of Microinteraction in action is the ACNPL\WGL (ACTIVATION NODEPLUS Lab) website, a ‘FWA website of the Day’ winner that was created using ‘a digital creative work that combines Canvas/WebGL experiments into a real-time graphic playground’. The animations are activated when the user hovers above it. Such interactions make the website more engaging.

Where Chinese culture defines the trends

We think that the Chinese culture, its undying characteristics and its changes, plays an important role in the development of web design in China, lending us some insights for example into why the ‘Busy Basic’ is still quite dominant despite being outdated in many ways. In this respect, is the ‘Basic busy’ a question of slow adoption of trends or could it be a culturally preferred look especially for the older generation? As for ‘Progressive Busy’, could this be the middle-ground solution for the heartland young and old generation? And the ‘Vanguard’ for the wealthy internationally savvy Chinese cultural vanguard? We believe there is some cultural angle to this. More importantly, understanding this cultural aspect is critical to predicting where web design trend is heading in China, especially with a changing Chinese generation and better penetration of technology.

Characteristics of Chinese culture: what design elements are here to stay?

Here are some characteristics of the Chinese culture and respective influence on the market:

Chinese consumers of all generation are complex readers. They are already constantly immersed in complex literature and media environment in China. For examples, Chinese newspapers are dense and convoluted with texts and mostly small images. Chinese television shows are packed with Chinese texts all around the screen, especially for games shows, talk shows and news. So, ironically, a busy look may seem like normal and acceptable after all.

Many Chinese consumers, especially in poorer areas, are very practical and frugal. Many of them will use outdated software and hardware until they become unusable. Many of them still use outdated IE browsers and old computers. And just because the Chinese market is large, there will always be some lag in technology in different parts of China. Wealthy cosmopolitan cities like Shanghai would be at the forefront of design thinking and technology, ahead of the predominantly rural areas. So, while we can expect sophisticated and advanced consumers in cities like Shanghai, Beijing and Shenzhen, much of the country is still developing, and web owners simply cannot ignore this ‘outdated market’.

Many Chinese web owners are savvy, practical, business driven and in many ways risk averse. They like to copy whatever works. As a result, they tend to stick to old business model and are resistant to changes, especially if it involves high costs, though they will copy the changes their competitors make.

The takeaway: The Chinese culture may have contributed to the way Chinese webs are designed. Many Chinese people are known to be practical, frugal and economically driven – especially in poorer areas of China. So they may have unintentionally staggered the implementation of the most updated versions of software and hardware. And web developers and designers are aware of this. In addition, the basic busy look and feel seems rather acceptable to Chinese consumers as they are used to complex literature and media environment. Elements of the basic busy look will be here to stay on many websites, and if there is any progression, the spin-off will be the ‘Progressive Busy’ look.

A changing Chinese culture: how will they shape future web designs?

China, like in many other countries, is experiencing some cultural changes brought about by improving internet speed and technology.

Firstly, even more Chinese consumers are using the internet for entertainment and ecommerce: photos, videos, music, games and shopping. Again, just because the Chinese market is so large, this trend is sustainable and will continue for a long time to come. Faster internet speed enables consumers to view more content and at faster speed, with different devices. Better connectivity also encourages more e-commerce. So, web designs have to anticipate and incorporate more commercial elements and media friendly platforms and designs. These include new web elements such as HD hero images to grab attention and to compel call to action, more background videos and animations, more GIFs on UI, and one day: more opportunities for virtual reality.

In fact, with respect to virtual reality, that day has arrived. Alibaba is again demonstrating it is a leader in implementing innovation. Just recently, Alibaba introduced the Alibaba Buy +, a virtual reality shopping platform, perhaps the epitome of Omnichannel sales. Even more impressively, with Buy+ integrated with Alipay, Alibaba is expanding its ever pervasive eco-system. Surely, by any indicator of success, just like getting the entire China to use Alipay, we can expect Alibaba Buy+ to lead the way in the new trend towards virtual reality shopping UX, if not in China, also in the world – because it can and is already at demonstrating it.

A screenshot of Buy+ product trial on Single’s day this year (11th Nov 2016).

Secondly, younger Chinese consumers are becoming more independent and vocal. Many are also living in stressful environment and feeling lost. They are increasingly using technology to look for ways to attract attention in order to stand out. In many social apps, personalization tools are staple features, to help people create a more personalized profile and to better define their personal identity in the hope of feeling more connected to themselves.

To address this social problem, a web design idea that we think will be popular is the concept of ‘User Responsive Design’, where customization is automated and facilitated with artificial intelligence. A user responsive design is a smart system that personalizes elemental design to automatically suit the profile of the consumer identified based on various characteristics: age, gender, profession. For example, for Chinese consumer preferring the ‘Busy Look’, the web can respond automatically by setting an expanded navigation menu, giving the busier look. For older consumer, text size can automatically be increased, set as bold and with more spacing in between. For younger consumers, the web can display automatically colour schemes with higher saturation.

The takeaway: Future web designs will be geared towards accommodating more media and e-commerce friendly feature and will have more smart personalization features addressing the individualization and identity crisis.

3.3 A changing Chinese culture: towards Mobile Centrism

Chinese consumers are increasingly using mobile apps to conduct daily activities and to socialize. Many things can get done on a single multi-purposed platform like Wechat. To expedite this leap-frog, more devices and terminals are available and accessible for mass consumption across China, in richer and poorer areas alike – though as mentioned, there is most likely lag in technology implementation. But even the lowest end of smart devices can now be comfortably use for basic entertainment consumption.

So, it is no surprise that many companies are comfortable skipping desktop UI/UX and preferring to jump straight to creating platforms on mobile apps. As was also the observation as Du Haihang, a winner of FWA, in an interview two years ago, ‘the current trend in China is more social and mobile oriented. Also mini-sites and small games on smartphones are more prevalent than those of PC websites.’ https://thefwa.com/interviews/du-haihang

Compared to website designs, app based designs in China are more advanced. In fact, mobile apps like Wechat are leading the world in functional innovations and UI/UX. Many Chinese apps have now adopted the latest trends like flat design, card design, image waterfalls layout, new icons, etc. but are also leading to way to new developments such as development of ‘Light apps’.

In terms of the look and feel of the app UI design, some Chinese mobile apps appear busier looking than Western-origin apps. For example, group buying discount sites Meituan and Dianping vs Groupon (Asia), and travel booking sites Xiecheng vs Expedia (Chinese version).

Dianping (China)[Left] - Groupon (Hong Kong)[Right]

Xiecheng (China)[Left] - Expedia (China)[Right]

But certainly, there are also less busy looking ones that are usually single-purposed apps, such as The Paper (www.thepaper.cn), a news app and Luoo www.luoo.net, an independent music publisher streaming platform.

The Paper[Left] - Luoo[Right]

Companies are also creating a new market of mini-sites or ‘Light apps’, literally a much lighter version of their own apps which can run on top of other sites without the need for any downloads or installations. The following are examples of light apps for: single’s day promotion, for recruitment of summer holiday tutorial class, for company greeting Dragon Boat Festival, and for new product launched by Coca Cola.

The takeaway: The Chinese web design community are gravitating more towards mobile UI/UX. As with website design, many app designs are still busier looking than their English counterparts. The minimalistic apps are single-purposed app.

Final Thoughts

Chinese websites seemed to have found the best working model for the internet early on (‘Basic Busy’) and remained that way. And this model proved to be acceptable by the market and profitable for the websites and is somewhat a Chinese web design legacy in its own right, so its elements are here to stay for a while.

The ‘Busy Progressive’ are upgrades of the original ‘Basic Busy’, with more features and better looking designs while still keeping the busy feel and look, some showing signs of Western influences infused in their designs.

Meanwhile, the Vanguard shows that there are already Chinese web designs that are readily like other international sites, with the use of international design elements such as: responsive user design, card design, parallax scrolling, waterfall layout, etc.

If culture can indicate anything about web designs, in China, we can expect web designers would have to deliver even more media and e-commerce friendly designs and more for UIs/UX for mobile apps. We should also see more adoption of concepts such as the User Responsive Designs that cater to younger generations that values personalization.

So, in the case of the ‘Basic Busy’ group, ‘East remains East’, for the ‘Progressive Busy’, ‘East meets West’, and, in the case of the ‘Vanguard’, ‘East met West’. As with the path of any design culture, web designing is a live and ongoing discourse of the design elements, the resulting UI and UX, and the creative environment all inter-shaping each other – and so we expect more exciting changes to come.

ABOUT THE AUTHOR

Han
Zhao

Hannah researches, writes and consults on the internet and digital technology scene in China. She works on User Experience development projects with SEIRIM helping to bring an expert local Chinese perspective to our work. She considers herself an avid technologist and a gadget explorer. She is always updated with the latest mobile apps in China and is obsessed with hunting for shopping deals online.

RECENTLY

Hot New China Websites

Great websites recently launched for the Chinese audience

Open Source Cybersecurity

Check the open source options first to save your company money!

Our Favorite Quality Assurance Tools and Processes

QA takes work! We use the best tools and processes to make it easier.

SEO Audit Tools - Our favorites at SEIRIM and Why

Get in touch with your website's SEO health with the best auditing tools

Ten Steps to China SEO Success

Gather a new perspective, tools and methodology.

Embrace a Powerful Password Paradigm

Better security is within reach!