Microinteraction

Direct user action, such as hovering, typing or pressing an element, can trigger a microinteraction effect. Hover effects show motion or demonstrate further interactivity, such as pressing. Pressing or typing may confirm input and selection, such as on a form or when elements rearrange.

The fulfillment of specific conditions in a system triggers a microinteraction effect. System triggers include page load, new message arrivals, errors, or background task completion. These can result in effects that alert users to status changes or timely information.

Microinteraction effects can be subtle or eye-catching, necessitating intentional application. Mandatory actions can make use of more dramatic effects. For example, a task that is time-sensitive and requires input before a user can proceed. Feedback for less important or repetitive interactions should be more subtle. This reduces fatigue and visual noise.

Similar to subtlety concerns, component size plays a role in how effects are applied. Color and movement speed may appear exaggerated on large components but undetectable on smaller ones.

Consider pre-existing cues and how they’re informed by direction. For example, a right-facing arrow indicates forward progress in a workflow. Clockwise motion implies the passage of time. And a user who speaks English is likely to browse a page from left-to-right, top-to-bottom. Context, such as where content sits on or off the screen, is also a factor.

Changing the color attribute in an element, in part or entirety, is one of the most common types of effects. Color changes can be subtle for interactivity or user input, or dramatic to reinforce mandatory actions. For example, using a contrasting red in tandem with an error message prompts a user to finish a task before moving on. Color can also be supplementary when combined with other effects to convey element movement, such as a tab color change in dropdown.

• Hover: indicates interactivity, for example button or links in side navigation.
• Press: confirms user input, for example checkbox selection.
• System: prompts user action or alerts to error status, for example text input.

The lift effect uses shadow to elevate an object or experience, signifying priority or hierarchy. Learn more about shadow effects on the Elevation Foundation page.

• Hover: shows interactivity and used similarly to color, for example items in an accordion.

Overlay can be paired with other components to show hierarchy and urgency. It is a temporary, transparent element that covers the page content. This shifts the user’s focus to a new content element, such as a modal or drawer.

Use expand/collapse, open/closed, and on/off behaviors to change the amount of content shown in a containing element. They may pair with color, elevation, or opacity changes to indicate interaction capability.

The direction of chevron flip depends on the microinteraction. As a general rule, chevrons point to the direction in which content will expand or open. Chevrons flip when they change states. For example, a collapsed element with a downward-pointing chevron will flip to point up when the element expands.

Timer effects are used as a countdown with a fadeout effect for auto-dismissal. For example, a user uploading multiple files may receive a “success” message for each upload. As messages stack up, auto-dismissing can help the user focus on the most important information. Timer effects give the user some context for why and when elements disappear through dismissal.

A loading effect can be used as a transition state between elements, to proactively communicate that the system is working on the user’s request. In the case of indeterminate progress, the animation consists of a spinner that rotates clockwise indefinitely around the circle ring. Other indicators can show percent load or a fill animation.