Please note that the contents of this offline web site may be out of date. To access the most recent documentation visit the online version .
Note that links that point to online resources are green in color and will open in a new window.
We would love it if you could give us feedback about this material by filling this form (You have to be online to fill it)
Animation Responsive Interaction
This document is a preview.

Google ©

Privacy & Terms

Responsive Interaction

Responsive interaction builds trust with the user and engages them. When a user interacts with an app and beautiful yet perfectly logical things happen, the user feels satisfied—even delighted. It is thoughtful and purposeful, not random, and can be gently whimsical but never distracting. It encourages deeper exploration of an app: what will happen if I touch this? And then this?

In material design, apps are responsive to and eager for user input:

  • Touch, voice, mouse and keyboard are all first-class input methods
  • Although UI elements appear tangible, they are locked behind a layer of glass (the computer or device’s screen). Visual and motion cues help bridge that gap by immediately acknowledging input and implying direct manipulation.

Responsive interaction elevates an app from something that delivers information to the user upon request to something that communicates with the user in a tangible way.

Examples Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Surface Reaction Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Upon receiving an input event, the system provides an instantaneous visual confirmation at the point of contact: under the pad of a finger for touch, at the mic for voice, or in the appropriate field for a keyboard press. One way to express this acknowledgment is through the ink metaphor, the dynamic display surface that coats every sheet of paper. The core visual mechanism to express this contact is the Touch Ripple. This device articulates the attack and duration of a touch event, as well as dynamic aspects such as the amplitude of voice or the interpreted pressure of a touch.

Best Practices

Input occurs at specific points: at the contact point of a finger or at the mic icon for voice. From this point, make the visual reaction radial.
Touch ripple - press / release
Touch ripple - drag in/out

Material Response Expand and collapse content An arrow that points down when collapsed and points up when expanded.

In addition to ink-like actions on the surface, the material itself can also respond to interaction. The material can lift up when touched or clicked, indicating an active state. The user can generate new or transform existing material upon touch or click, or directly manipulate sheets of material, dragging or flinging them.

Best Practices

Point of origin

When new material is generated as a result of direct user interaction, the motion of surface growth should originate from the point of input.

Material appears from touch point, visually tying the element to the point of touch.
Paper appears from center of screen, breaking relationship with input.

Lift on touch

When a card or separable element is activated, the card should lift to indicate an active state.

Lift upon touch

Radial Action Expand and collapse content An arrow that points down when collapsed and points up when expanded.

All user initiated actions have an epicenter; the place or places where their intent enters the system. Add clarity to user initiated events by creating strong visual connections from user input, whether from fingers on a touch screen or voice through a microphone. State changes across the screen should trigger progressively as their distance to the point of contact increases, creating a ripple of action.

Inputs have an epicenter. Touch occurs at the point of contact, voice enters through the mic icon, keyboard through the individual keys.

Actions should visually connect to their respective input epicenter. Closer actions occur sooner than more distant ones, creating a ripple of actions (movement occurs from the distance from the epicenter).