Chinese UI Trends —Smart Text Search Flows

Technology innovation from inside The Great Firewall

A user holds up Dianping 点评, a popular Yelp competitor in Asia.
  1. Focus Page(After you click on the text search)
  2. Text Input Page (While you are searching)
  3. Results Page (After you click search)
The search flow for Yelp App, broken into 4 primary pages.

The Chinese Flow

The generic text search flow of a Chinese mobile app has the same primary pages, but is almost unrecognizable:

Concept 1: Avoiding the Text Box

When you arrive at the home screen of a Chinese app that has a major search component, you will inevitably see the search bar located at the top of the application. However, visually prioritized underneath the search bar, you will also see a number of very broad categories that you can use to forgo the text search for a tag-based search.

Choosing Categories on the Landing Page:

Landing page of 大众点评 Dianping app, January 2019.

Quick Searches on the Focus Page

Assuming the user clicks the text search bar they will be taken to the Focus Page, an information rich page that teaches the users how to manage their search before typing text, and suggests tags and other ways to search.

Search Detail “Tag + Quick Search pane” in 大众点评 Dianping app, January 2019.

Concept 2: Tags to explain and direct search

If the user insists on using text search, the tags used in text search flow are able to help guide the user through the fastest way to construct a search, as well as inform them about how to search next time.

Tag Construction on the Focus Page

Here is a full page view of the Text Search Focus Page. As you can see, there are more than 20 tag options that users are likely want to search for, many of which are predictively generated with user data. The tags below are separated into “搜索历史” or “Search History”, and “搜索发现” or “Search and Discover”.

Tag-Based Refining on the Results Page

On the Results Page, the user is able to refine the existing tag, in this case 咖啡 “Coffee” with additional tags that will be able to help the system narrow the search and get the user to the desired results fastest. Like a guessing tree, the system starts with broad additional tags, 价格比高 “Good cost/value ratio”, 交通方便 “Convenient transportation” and 就餐空间大 “Spacious atmosphere”.

Post-search tag modification pane in 大众点评 Dianping app, January 2019.

Concept 3: Predictive Search

During every step of the search process there is evidence of predictive analytics based on a combination of current events, user location, and user search history, and that is manifested inn several locations in the search flow.

Predictive + Popular Tags on the Focus Page

As mentioned in the previous section, the Search Focus Page contains a plethora of focused tags to provide users a quick way to skip typing.

Search Suggestions + Completions on the Input Page

Before you click enter, the system already has suggestions for you on how to refine your tags and autocomplete your search. This one is also smart, and will add in some search result shops that are likely to be clicked before you finish the search at all.

Mid-text-search suggestion pane in 大众点评 Dianping app, January 2019.

Wrapping up:

Just to reiterate the points from above, in my view there are 3 things that Chinese apps are currently doing better than their western counterparts.

The future of this technology:

I believe that these trends in search will be adopted by many apps that need to implement large content base searches. I have seen google in the last year put significant effort into it’s tag based search for images, allowing users to simultaneously retrieve accurate search results and learn how to search in the future.

Google tag-based image search (March 2018)
Google tag-based image search (January 2019)

On Chinese Tech

Whether you are a fan of Chinese internet censorship or not, it can’t be denied that the limited access to the rest of the tech world has given Chinese tech companies a safe haven to try some really incredible new products and ideas, in a very unique and fast-adoption market.

Product Manager + Software Developer. Interested in Travel, Culture, and the Internet.