Animation chevron_right Responsive interaction

Responsive interaction

Responsive interaction encourages deeper exploration of an app by creating timely, logical, and delightful screen reactions to user input. Each interaction is thoughtful, perhaps whimsical, but never distracting. What will happen if I touch this screen? And then this icon?

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

In material design, apps are responsive to user input:

  • Touch, voice, mouse, and keyboard are all equally important input methods.
  • UI elements appear tangible, even though they are behind a layer of glass (the device screen). To bridge that gap, visual and motion cues acknowledge input immediately and animate in ways that look and feel like direct manipulation.

Responsive interaction elevates an app from an information-delivery service to an experience that communicates using multiple visual and tactile responses.

Surface reaction

Material response

Radial reaction

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

Upon an input event, the system provides instant visual confirmation at the point of contact: under the pad of a finger for touch, at the microphone for voice, or in the appropriate field for a keyboard press.

The core visual mechanism to express this contact is the Touch Ripple. This device articulates the method and duration of a touch event, as well dynamic variables like voice amplitude or touch pressure.

Best Practices

From the point of input (the contact point of a finger or the microphone icon for voice), make the visual reaction radial.

Touch ripple: press and release

Touch ripple: drag in and out

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

In addition to ink-like surface reactions, material can lift up when touched, indicating an active state. On touch, the user can generate new or transform existing material, or directly manipulate sheets of material by dragging or flinging them. Material can be resized linearly or radially.

Point of origin

When a user triggers the creation of new material, it should grow in size starting from the point of input.

Do.

Material appears from the touch point, tying the element to the point of touch.

Don't.

Paper appears from the center of screen, breaking the relationship with the input.

Lift on touch

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

Lift on touch

   

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

Add clarity to user input through visual reactions to user input. Radial action is the visual ripple of ink spreading outward from the point of input.

Input events are visual

The connection between an input event and on-screen action should be visually represented to tie them together. For touch or mouse, this occurs at the point of contact. For voice, the microphone icon. A touch ripple indicates where and when a touch occurs and acknowledges that the touch input was received.

Connect input to action

Transitions, or actions triggered by input events, should visually connect to input events. Ripple reactions near the epicenter occur sooner than reactions further away.

For example:

  • A sequence of content changes: images fade in or out.
  • A sequence of material movements: cards enter on or off the screen.