Components

Components are the building blocks of your in-vehicle radio interface. They provide consistent, familiar patterns that drivers can recognize and use quickly while focused on the road.

Understanding components

Components include the structural elements that make up your interface: buttons, lists, grids, headers, notifications, and more. Using consistent components across your interface helps drivers navigate quickly without having to learn new patterns.

Key interface components

Action strip
A horizontal row of buttons or actions, typically placed at the bottom of the screen. Use this for primary actions like play/pause, skip, or accessing favorites.

Lists
Vertical scrolling lists of items, like station lists or programme guides. Keep list items consistent in height and format so drivers can scan them quickly.

Grids
A grid layout for displaying multiple items at once, like favorite stations or programme thumbnails. Useful when you have space to show more options simultaneously.

Headers
The top section of a screen that shows context like the current view title or key information. Keep headers consistent across screens so drivers always know where they are.

Buttons
Interactive elements that trigger actions. Make buttons large enough to tap easily (minimum touch target size) and use clear, action-oriented labels.

Tabs
Allow switching between different views or sections, like moving between “Radio”, “Favourites”, and “Radio List”. Use tabs for top-level navigation that drivers access frequently.

Rows
Individual items within lists, showing information like station name, programme title, and time. Keep row layouts consistent so drivers can scan lists efficiently.

Toast notifications
Brief messages that appear temporarily to confirm actions or show status updates, like “Station added to favourites”. Keep these short and don’t require interaction to dismiss.

Modals and dialogs
Overlays that require driver attention or input, like confirming an action or explaining why something isn’t available. Use sparingly and only when necessary.

Design considerations

Keep it simple
Don’t overload screens with too many components. Prioritize what drivers need most and hide less important features until they’re needed.

Maintain consistency
Use the same component patterns throughout your interface. If you use a certain button style for one action, use it for similar actions everywhere.

Make touch targets large
All interactive elements should be easy to tap, even when the vehicle is moving. Minimum recommended touch target size is typically 48x48 dp with adequate spacing between targets.

Consider the driving context
Components should work with minimal attention. Avoid interactions that require precision or multiple steps.

Layout patterns

Standard layout structure

Most screens follow a common structure:

• Header at the top showing context
• Main content area in the middle (list, grid, or detail view)
• Action strip at the bottom for primary actions

This consistent structure helps drivers know where to look for information and actions.

Spacing and hierarchy
Use spacing to group related items and separate different sections. Clear visual hierarchy helps drivers understand the structure at a glance.

Message templates

For situations where you need to communicate with the driver (like errors, empty states, or confirmations), use clear message templates that:

• Explain what happened in plain language
• Provide clear next steps or actions
• Use buttons with action-oriented labels

Further reading
For detailed specifications on component sizing, spacing, and behavior, see platform-specific guidelines for your implementation.