Responsive Interaction in Material Design

Responsive interactions build trust and engage users. When users interact with an application that is aesthetically pleasing and makes sense, they feel satisfied and even delighted. An interaction that is considered, purposeful, non-random, and can be slightly whimsical without being distracting.

In material design, apps are responsive and eager to be acted upon by the user:

• Touch, voice, keyboard and mouse are the primary input methods considered.
• Although UI elements are tangible, they are confined to a screen (the screen of a computer or mobile device). Visual elements and motion can reduce this disconnect and allow users to immediately perceive their actions.

Responsive interactions elevate an application from simply displaying the information requested by the user to a tool that can generate stronger and more specific interactions with the user.

Surface response

When receiving an input event, such as clicking the screen, the system will immediately draw a visual graphic on the interactive contact point for the user to perceive: for example, when clicking the screen, using the microphone, or typing on the keyboard, a visual effect shape similar to ink diffusion will appear.

Touch ripples are the core visual mechanism of this touch effect. When a touch event occurs, the device can clearly and promptly let the user perceive the changes when touching buttons and voice input.

***example

At the location corresponding to the input event, for example: at the location of a finger click or when speaking, a diffuse visual element will appear at the location of the microphone icon on the screen.

Touch Ripple - Click/Release

Touch Ripple - Drag in/out

Element Response

Like the touch ripples that the surface responds to, each element itself can also respond interactively. Objects can float up when touched or clicked to indicate that the element is active. Users can generate, change, or directly manipulate elements by clicking and dragging.

***example

Animation of expanding new elements with the touch point as the origin

When a user action generates a new element, the element's animation should expand based on the touch point.

want

When an element expands from a touch point, a visual effect ties the element to the touch point.

don't want

Card elements appear from the center of the screen, and users cannot associate the touch point with the card element.

Click Float

When a card element or separable element is activated, it should float to indicate that it is in the active state.

Click Float

Radial Response

There is a central point in all user interaction behaviors, and they want to achieve their goals through this central point.

As the center point of user attention, an obvious visual effect should be drawn to let users clearly perceive their input (touch screen, voice input, etc.). A radial dynamic effect response that gradually spreads out like a ripple should be formed at the user's operation center.

All inputs have a center point, and the ripple effect should expand from the touch point, the voice icon on the screen when speaking, and the specific key click position when inputting on the keyboard.

When these input actions occur, they should form a visual connection at the center, and a series of actions should spread out from the center to produce a ripple effect.