Visual principles

Content designed for a car screen must be legible and glanceable, with a consistent UI and large touch targets that drivers can identify under all viewing conditions.

This section describes how you can:

• Make content easy to read
• Make targets easy to touch
• Keep UI elements consistent

---

Make content easy to read

To make sure drivers can quickly scan and understand onscreen content, the content must be presented in a way that’s easy to read while driving:

Display legible fonts

Visually presented primary and secondary text should align with Android for Cars guidelines for font and size. Primary text is typically used for pieces of information required for decision making, such as song titles or contact names, and should be 32dp. Secondary text is typically used for supporting information, such as artist name or call type (such as “mobile”), and should be 24dp.

Rationale: Text legibility in the context of driving can be affected by many factors, such as lighting, time of day, font proportions (thin, medium, bold) and contrast. Highly legible text helps drivers shorten glance times as well as decision times, thus reducing cognitive and visual distraction.

Limit text length

Text items using the Roman alphabet must not exceed 120 characters, including punctuation and spaces. (Note for reference: The preceding sentence is 101 characters.) Text items in Japanese must not exceed a total of 31 Roman characters, kana, or kanji combined.

Rationale: Long strings of text encourage long glances to read the entire message, thus increasing visual distraction and the incidence of crashes and near-crashes.

Follow contrast ratios for text, icons & background

The contrast ratio for icons, text, and other images must be at least 4.5:1. This requirement applies to any displayed items that convey information, including selected items in rotary inputs and the like. However, if redundant information is provided (such as an icon and text that convey the same meaning), only one element needs to meet contrast guidelines. For rotary inputs, the contrast guideline must be met for the highlight against the background.

Rationale: Drivers must perceive content and selections accurately under various lighting conditions (bright sunlight, overcast, and so on).

Provide glanceability at night

Polarity of content shown during the daytime can be positive (dark text on light background) or negative (light text on dark background), while content shown during nighttime must be negative polarity.

Rationale: Positive polarity during nighttime increases brightness sensitivity and after-images. The colors and luminosity of the display should not dazzle or impair visual clarity during day or night usage.

---

Make targets easy to touch

Drivers can easily get distracted or make mistakes when trying to touch onscreen targets that are too small or close together:

Display appropriately sized touch targets

Touch targets should adhere to the Android Automotive guidelines, for a minimum size of 76 x 76dp. For special cases, width can be slightly sacrificed in favor of height (while keeping overall area the same) to better accommodate up-and-down vehicle vibration.

Rationale: Small touch targets increase the likelihood of missing the touch target. In addition, the driver may need to glance or search for the touch target for a longer period of time, increasing visual and cognitive distraction.

Avoid touch target overlap

Touch targets must not overlap with one another. The option to zoom can help mitigate overlap issues by separating targets. If possible, allow at least 23dp between touch targets.

Rationale: Eliminate touch target overlap to prevent clutter confusion and users missing the correct touch target.

---

Keep UI elements consistent

To help drivers quickly understand their onscreen options, the user interface must be clear and consistent:

Use consistent map icons, terminology & interaction patterns

Icons and terminology should consistently map one-to-one to their functions. Likewise, interaction patterns should be consistent and predictable.

Rationale: A consistent familiar interface reduces the time and cognitive effort required by the driver and makes decision-making easier.

Clarify active & inactive features while in motion

The interface should clearly distinguish allowed from disallowed features – for example, by dimming distracting media content. The interface should also distinguish features that are intended for use only while driving versus those intended for use only while not driving. For example, the search box should be hidden while driving.

Rationale: Clearly communicate to users when options are unavailable or currently inaccessible, to enhance general understanding of system state at a glance.