Key design considerations

Manufacturers are responsible for the Human-Machine Interface (HMI) and must ensure radio content is displayed clearly, consistently, and safely. The interface must support fast recognition, familiar interaction patterns, and compliance with accessibility and legibility standards.

When writing these guidelines, we considered these points:

Context for Implementation

Each vehicle manufacturer will design their own HMI, so the guidelines enable designers to use best practices that work with any house style without losing legibility or usability
Broadcasters and manufacturers must both follow the guidelines to make sure the experience is consistent and works as expected
The UX should be designed for ease of use and align with how drivers already understand radio in vehicles, using familiar actions and icons
With more information on screens, clearer guidance is needed on how to design, present, and update content to drivers

Design Principles

Design principles guide every layout, interaction, and content decision in the in-car radio interface. They ensure the experience is safe, predictable, and easy for drivers to use while their primary focus remains on the road.

Core principles

Keep information current and easy to scan
Information must be accurate, up to date, and presented so drivers can understand the state of the system in a single glance.

Make content readable at a glance
Text, icons, and key states must be legible within one to two seconds, in all lighting conditions and on all display types.

Use consistent language
Labels, messages, and terminology should be plain, predictable, and used consistently across the interface so drivers don’t have to relearn meanings.

Make targets easy to touch
Interactive elements must be large, well spaced, and easy to hit without precision, even when the vehicle is moving or vibrating.

Keep UI elements consistent
Icons, colors, layouts, and behaviors should follow predictable patterns so drivers can quickly recognize options and states.

The following sections expand on how these principles apply in practice.

Readable at a glance

Drivers have only one to two seconds to look at the display. Information must be presented clearly, consistently, and with strong visual hierarchy. Text, icons, and key states must remain legible in all lighting conditions and free from background interference.

What this means for design

Prioritize primary information like station name, playback state, and key navigation cues
Use legible sans-serif typography sized and weighted for fast recognition
Maintain strong contrast between text or icons and the background, with a minimum ratio of 4.5:1 and 7:1 for critical content
Avoid decorative imagery, detailed textures, or bright areas behind text that compete with content
Test designs in real conditions including bright sunlight, reflections, tunnels, dusk, and night modes to confirm legibility

Considered design reduces cognitive load and helps drivers quickly understand what’s happening so they can return their focus to the road.

Familiarity

Use established visual cues and behaviors that drivers already know.

Provide familiar actions, icons, and navigation. For example, let drivers set presets by “push and hold” or tapping a star icon, and list stations alphabetically.

Legibility

If content isn’t legible, drivers will struggle to understand it.

Broadcasters must design content for legibility and relevance.

Manufacturers must optimize how content is displayed for legibility.

To achieve this, there needs to be a shared understanding of display environments and how content will appear.

Accessibility testing
Verify your design meets contrast requirements of at least 4.5:1, preferably 7:1, under both bright and low-light conditions. This lets you use brand or contextual imagery without compromising safety, legibility, or driver focus.

Common interface design mistakes

Allowing background detail to compete with text or icons
Placing text or symbols directly on photographic or patterned areas
Using bright or high-contrast backgrounds that reduce legibility
Failing to apply overlays or tonal separation to support readability
Placing white text on light backgrounds that don’t meet accessibility guidelines
Designing backgrounds that attract attention instead of supporting content