Chinese UI Trends —Smart Text Search Flows
In my work as a software developer and product manager in China, I have been able to learn a lot about mobile app interface design trends in the west and the east. One of my favorite mobile UI trends that I see emerging in China are Smart Text Search flows.
Any app worth it’s salt in China has begun to adhere to a user-tailored, highly-efficient text search flow: one that I believe has many advantages over its western counterpart. Because this flow has proven it’s worth in a couple major apps, now it is almost ubiquitously adopted here on the mainland, and it’s time for tech companies in the west to take a look.
For the purpose of this article, I split the text search flow into 4 pages:
- Entry Page(The page where you find the text search)
- Focus Page(After you click on the text search)
- Text Input Page (While you are searching)
- Results Page (After you click search)
The Chinese Flow
The generic text search flow of a Chinese mobile app has the same primary pages, but is almost unrecognizable:
From a design and information hierarchy perspective, you could talk for days about these two apps, but I want to focus on the Text Search flow.
Inside this flow you can see a couple of big wins for app users (giving the user the best and fastest way to complete their text search) and for the business (making the business money in a sustainable way).
Chinese apps do this by following three principles:
Avoid the Text Search Box if possible
Use tags to explain and clarify the search process
Provide predictive, tailored suggestions to guide text search
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.
This is a big win for both the business and the user, because category search is faster than text search, and the faster a user can find their desired information within the app, the more likely they are to return to the app again.
Choosing Categories on the Landing Page:
If you click the 美食(cuisine) button above, you will be taken to another search page that is specifically designed for searching for food (deals, takeout, categories). This is an attempt to allow you to avoid text search altogether, avoiding the messy process that it entails.
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.
Here, among suggested tags, you can see a couple of user-tailored quick searches which again are intended to pull the user out of the text search flow: “最近的店” will take me to the search results with all nearby shops selected. “药店” will take the user to the search results page filtered for nearby pharmacies. “春节不打烊” is a special tag that means all shops that are not closed for the current holiday (this is based on date, only available during certain Chinese holidays). The rest of the tags in the second section “搜索发现” are tag searches that are popular and will return a strong set of results.
Chinese apps have created strong hooks to allow users to be routed away from using text search at the beginning of the search process, allowing these users a faster search completion and more time spent browsing other pages.
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.
This is a big win for the product because tag based searches will save the user time typing, and also educate your user on how to effectively write searches in the future, improving search efficiency (both for users and for search-results servers) in the long run.
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”.
The first section “Search History”, contains tags that are similar to some searches that the user has made in the past: For example “药店” Pharmacy is highlighted because it is a tag related to a previous search. This allows the user to find tags that are most likely to be relevant. If I click this tag I will enter a search with that tag preselected.
The second header section “Search and Discover” is the primary tag center. It gives the user a list of tags that can be used to build their search, and also contains a few highlighted predefined searches, as mentioned in the last section, meant to give the user a fast solution (Near me, 附近的店 and Open during the Spring Festival 春节不打烊). These are highly tailored, and based off of the users current location as well as preferences.
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”.
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 search allows the customer to get to what they “want” to see faster, and also gives the company the ability to tweak the algorithm as a revenue source, allowing business to pay for a ranking boost when the predictive algorithms are sorting.
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.
Those tags are based on a complicated algorithm that, on investigation, incorporates at least the users location, the current date, current search trends, and information on similar users preferences.
The first section mentioned before, “Search History” not only contains your literal history, but also things you ALMOST searched, much like Spotify guessing what you will like to listen to when you reach the end of your playlist.
The second “Search and discover” section contains most of the non-history based tags. This list is 100% predictively generated, incorporating location, date, and search trends. They use predictive software to show you what you are already likely to type looking forward into the future to tell you what would be best to search for.
The last section “上海” shows the most popular searches, updated by minute. This is another form of predictive searching, based off of users wanting to see what is trending at the moment, and a revenue source for the app creators as well.
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.
You can see evidence of the algorithm at work behind the search results here. The suggestions include the number of results found for a particular search, giving you a glimpse at what is going on behind the scenes. 约3406个结果 means that the app suggested this search specifically because if you search for that then you will get a large number of results.
The app will also allow me to skip the search results page entirely, jumping right to a predicted shops page. (If I want I can click directly into a nearby shop’s detail page before even finishing my search).
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.
Avoiding text search. Throughout the flow, you can see Chinese apps give users ample opportunities to opt out of the text search, even after they already clicked the search bar indicating a desire to start one. Text search is messy: it is complicated for the user to write effectively, and slower for the application to parse. If the user can search through tag terms, they are more likely to get to their result faster.
An emphasis on tag search. You will notice that tags are emphasized in the search process, especially in the Search Detail page. The reasons for this are twofold. First, this allows users to Avoid Text Search and search faster. A tag click is faster and smoother than typing in a full word or sentence. Secondly, it allows the app to expose a bit of the underlying search mechanism to the user, showing them how to search more effectively and subtly showing users how the back end is actually parsing search terms. Tags can help elucidate the underlying search mechanisms is in many ways a teaching method in disguise. As you select more tags they are added to a list to construct your full search, teaching you how to construct your future searches to get the same or similar results.
Prediction + User Tailoring. Every step of the app search flow is a lesson in predictive technology. Even though you may see the Search Focus Page for a second, the Dianping servers are burning up calculating the best mix of tags + suggestions for a user exactly like you, and presenting you with a storm of information to use in your decision.
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.
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.
I hope that more companies in the west can identify interesting new patterns and technologies like this coming out of China and bring them to the rest of the world.
If you are curious about Chinese mobile apps + development, I suggest reading an introductory post written by Dan Grover in 2014, which you can find here. In the post, Dan Grover discusses really interesting topics like pinyin input (打拼音) and the explosion of QR codes in mobile apps. I also suggest following me to read more of my UI musings.
Thanks for reading — @alexzitowolf
