Chinese consumers are immersed in a unique ecosystem of apps and HMI (Human-Machine Interface) systems. This shapes their perspectives and usage habits.

In this article series, we will take a deep dive into various popular Chinese apps and HMIs, such as Gaode Map, Baidu Map, and modern car HMI systems. We will analyze these systems from UI and UX perspectives, while also providing cultural background and insights.

Search Field (1 / 2) 

In the previous articles, we analyzed the landing page in general , its features and the tab bar. In this article, we will have a closer look at the search filed.

UI elements  

The first image shows the wireframe of the entire app, where the different positions of the search fields can be observed (P04-01):

Please note: Chinese apps have a very high iteration frequency, so the design may differ by the time you read this article.

P04-01: The search fields are positioned either in the middle or at the top

Position: 

  • Google and Baidu both use a top position.
  • While Gaode adopts a centered position, making it easier for users to operate with one hand when holding larger phones.

Additionally, we know that many users place their phones on a holder near the steering wheel, where a centered position is more convenient for operation.

Design Style:

  • All three adopt a white background design.
  • All three fill the screen horizontally to maximize emphasis on the content itself.

Layout:

  • All three apps place an icon on the far left and the voice input icon on the right.

    The icons in Gaode and Google are used to activate the search bar, whereas Baidu’s icon directly activates the voice input function.

  • Gaode and Baidu also promote their voice input feature through text overlays or by using icons with changing colors to draw attention. (P04-2)
  • Additionally, they include a QR code icon on the right to facilitate connectivity between in-car systems and web versions.

However, user feedback indicates that the navigation speed on in-car systems is slower than on mobile phones—for example, providing turn instructions only after passing the intersection. As a result, users still prefer using the mobile app version.


P04-02 Gaode and Baidu promote their voice input features

Searching: Step 1 - Cursor-Triggered State *

*When user clicks on the search field but provides no input

When the user clicks on the search field without entering any input, a new page is displayed （P0-03)

In all three apps, the search bar is positioned at the top and uses "Search" as the placeholder text.


P04-03 Cursor-Triggered State

POI recommendations (P04-4): 

  • Google places quick search categories like restaurants, gas stations, etc., under the search bar directly on the landing page.

    While this does provide quick access, it also creates a sense of clutter on the overall page due to the presence of four unevenly sized elements.

  • Gaode and Baidu only display these categories after clicking on the search bar and also offer more POIs, such as restrooms.


P04-04 Only Google provides POI on the landing page

Favorite Locations:

Marked as (1) on P04-5 

  • The quick setup for home and work addresses is easier to find in Google, as the icons are placed in a more prominent position.
  • In contrast, Gaode and Baidu place them in the middle, and the icons are relatively small.

History:

Marked as (2) on P04-5

  • Google’s history list is cleaner, as the font is larger, making it easier to read.

Advertisements:

Marked as (3) on P04-5

  • Both Gaode and Baidu display ads in the middle of the screen.
  • While ads help keep the apps free and feature-rich, they also leave a messy impression.

Voice Input:

Marked as (4) on P04-5

  • In Gaode and Baidu, the voice input feature is positioned above the keyboard and centrally on the screen, with text prompts.
  • In Google, however, the voice input is represented by an icon at the far right of the search bar.


P04-05 Only Google provides POI on the landing page

In the next article, we will continue to introduce the interaction steps in the search field and how the page responds.

Spiegel Institut offers full package services for HMI and operation system development as well as usability tests for all industries. Feel free to contact us for cooperation:  info@spiegel-institut.de

Author: Yue Liu, Spiegel Institut Mannheim
 

更多资讯