AI-generated Key Takeaways
-
In driving mode, prioritize motion for essential communication like concepts, branding, and element relationships, ensuring it aids understanding without causing distraction.
-
Utilize predefined motion patterns (crossfade, shared axis, vertical overlay, minimize/expand, and disruptive slide/fade) for consistent user experience across different in-car app interactions.
-
Base motion design on standard easing principles, emphasizing smooth transitions that accelerate quickly and decelerate gradually.
-
Tailor motion duration to the specific action, with quicker transitions for closing or minimizing actions compared to opening or expanding them.
-
Maintain a hierarchy of actions, allowing users to understand the relationship between primary and secondary actions through visual cues like scrims and partial visibility.
Motion should appear sparingly in the driving context to express concepts, branding, and relationships between elements. It should only be used to help inform drivers without distracting their attention.
At a glance:
- Avoid distracting users with unnecessary motion
- Use motion to increase users’ understanding and build their proficiency
- Make your motion language flexible enough for all relevant hardware
- Use the recommended motion pattern for your situation
Motion patterns
To support a consistent user experience across all apps, specific motion patterns apply to the following interactions:
- Switching between apps
- Switching between peer views
- Extending an existing action
- Minimizing and expanding an action
- Disrupting an action
These motion patterns are based on standard easing, as described in Material Design, which places focus on a transition’s ending by speeding the transition up quickly, then slowing gradually.
Switching between apps
When switching between apps, use a crossfade transition, which fades one element into view while another element fades out. This transition depicts an exit from the current app while moving quickly into another one.
Example
Switching between peer views
When switching between views at the same level of hierarchy in an app (also called peer views), such as tabs in an app bar or songs in a playlist, use a shared axis transition. This transition's horizontal, side-to-side movement reflects the state of staying at the same level within an app.
Example
Extending an existing action
When a user is in the process of viewing or taking an action and then takes a secondary, related action, that secondary action should be introduced with a vertical (either up or down) motion. This secondary action is displayed on a full-screen overlay, with a scrim background, in front of the primary action. The presence of the primary action through the scrim reinforces that the user is still in the midst of performing that action.
The secondary action is then closed in the reverse direction of the opening motion. This reverse motion should take less time than the original motion, since the action is done.
Example
Minimizing and expanding an action
Ongoing actions can be minimized into a smaller format. This smaller format allows the user to multitask while the ongoing action runs in the background.
Expanding: When the user taps on a minimized action, it expands in size and fills the full screen, using a fade-in transition.
Minimizing: When minimizing an ongoing action, use the reverse of this motion. The minimizing motion should take less time than the expanding motion, since the user is leaving this action.
Example
Disrupting an action
When a short, optional action needs to appear suddenly in front of an ongoing action, it should slide (up or down) from the edge of the screen, with a partial scrim. Alternatively, it should fade into the middle of the screen, with a full scrim. Start the motion from the location closest to where you want the new action to appear.
Example
