How Tencent’s Car‑Embedded Mini‑Programs Redefine In‑Vehicle UI Design

1.0 Tencent Car‑Embedded Mini‑Program Experience Highlights

Intelligent connected vehicles are becoming a key endpoint in the automotive industry's electrification and digital transformation, requiring stable application support for navigation, audio, and communication. Mini‑programs, with their lightweight, install‑free, and abundant nature, offer a flexible solution for long‑tail scenarios without heavy hardware dependence.

Tencent Car‑Embedded Mini‑Program is a product developed by Tencent Smart Mobility based on the WeChat Mini‑Program framework, designed for in‑vehicle scenarios. The design guide covers basic design rules, product direction, and standardized templates to help partners deliver high‑quality services quickly.

1.1 Comparison of Car System and Mobile System

While many WeChat Mini‑Programs have matured on mobile, directly scaling them to car displays is problematic due to differences in usage scenarios and interaction methods. Car systems feature complex interaction environments, short information processing times, and multimodal inputs, requiring design adaptations specific to driving contexts.

Compared with mobile, car systems demand concise information processing, reduced cognitive load, and multimodal interaction.

1.2 Automotive Human‑Computer Interaction Cognition

Drivers have limited cognitive resources; diverting attention from core driving tasks can cause distraction and safety issues. Effective in‑vehicle interfaces must minimize cognitive load, enable rapid information‑memory mapping, and support quick decision‑making to reduce visual glances away from the road.

Simple and Easy to Use : Reduce complexity and cognitive load.

Deepened Experience : Leverage vehicle‑specific characteristics to enhance service value.

2.0 Car‑Embedded Mini‑Program Design Principles

Many service providers lack automotive design experience. Conveying fundamental design principles is the first step for collaboration.

2.1 Basic Product Design Principles

Present functions according to mini‑program categories, emphasizing core business visibility in the vehicle context.

Maintain cognitive consistency with mobile services.

Adjust information density to meet in‑vehicle usability requirements.

Ensure interaction continuity, reducing hierarchy depth and interruptions.

Consider hardware screen layout to avoid visual strain.

Avoid system‑level terminology that could cause confusion.

2.2 Basic Interaction Principles

For landscape screens, place important controls on the left side where drivers can reach them more easily. Use large‑area swipe gestures for precision‑tolerant control, favoring horizontal swipes in landscape mode and avoiding simultaneous horizontal and vertical scrolling.

2.3 Basic Visual Principles

Typography : Use standardized font sizes (32, 36, 40, 44 dp) based on readability tests at a 1‑meter viewing distance.

Color : Apply neutral colors for text, functional colors for status, and brand colors for identity. Ensure a contrast ratio of at least 7:1 (WCAG AAA) for readability under varying lighting conditions.

3.0 Car‑Embedded Mini‑Program Implementation

3.1 Core Service Extraction

Using the Himalaya audio mini‑program as an example, the design simplifies the homepage to highlight popular content and provides a clear navigation path, reducing cognitive burden compared to the mobile app’s complex categorization.

Audio playback is streamlined with a mini‑player that always displays current track information and essential controls, mirroring familiar FM radio interactions.

3.2 Emphasizing Driving‑Related Functions

For destination‑related services, such as fuel station recommendations, the design surfaces navigation buttons directly on the list items, allowing drivers to start navigation with a single tap.

3.3 Framework Structure for Easy Understanding

Use common navigation patterns and limit top‑level tabs to 2‑4, allowing partners to customize icons and labels while avoiding terms like “Home” that could confuse drivers about the distinction between the mini‑program and the vehicle system.

3.4 Efficient and Readable Information Containers

Standardized containers improve information hierarchy and reduce learning cost. Lists combine images and text, with recommended font sizes and image dimensions to ensure consistent presentation.

Short‑term memory can hold about 7 items; in driving contexts, limit visible list items to 3‑5 to avoid overload and maintain safety.

4.0 Car‑Embedded Mini‑Program Guide Implementation

The guide provides product, interaction, and visual design rules that have been adopted by partners, resulting in high‑quality implementations across various services.

Examples

Star Food

Love Movies

Fuel Discounts

5.0 Future Outlook

Car‑embedded mini‑programs will play an increasingly important role in intelligent vehicle systems. The design guide outlines interaction rules, product functions, and visual standards to help partners create safe and efficient experiences. Future work will expand scenario coverage, explore multimodal interactions such as voice and HUD integration, and continuously iterate the guidelines.