A microinteraction is when a user action or system event triggers feedback. Feedback can be a motion-based effect that communicates element behavior or status.
What's newCopy link to this section
Microinteraction is a new pattern for the Dell Design System v2. It consists of established behaviors and solutions to common use cases within an interactive experience.
TriggersCopy link to this section
Microinteractions use a trigger to generate feedback effects. Users or systems can initiate a trigger.
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 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.
Applying effectsCopy link to this section
When applying or creating effects, it’s important to consider context and intent. Key considerations include subtlety of the microinteraction, component size, and directional cues.
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.
EffectsCopy link to this section
Effects are motion-based feedback, in the form of UI attribute changes. Attributes include color, shadow, opacity, overlay, size, and component-specific behavioral effects. They can be singular or combined to create animations. Effects show behavior, hierarchy, state, and user input confirmation.
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. can also be supplementary when combined with other effects to convey element movement, such as a tab color change in .
Lift and shadow
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 or .
Containing element behaviors
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.
Expand down behavior is used for elements that expand or collapse. When a user presses a component to expand, it changes the size and amount of information shown. It also shifts on-page content down to make room. It is often paired with chevron flips.
Open left/right behavior is used for elements that open or close. When press triggers a containing element, it slides in or out, resulting in more or less information being shown. Content typically sits off-screen and opens from the left or right, without affecting the placement of other page elements. This behavior may be paired with a chevron flip, such as in side navigation, where a right chevron signifies a closed state and a left chevron shows an open state.
Show pop-up element
Show pop-up element behavior is used for elements that can show or hide content. Content is in a hidden containing element that, when triggered, floats above the main content to display more information. Content may or may not be dismissible.
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 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.
AccessibilityCopy link to this section
Allow users to pause, stop, or hide movement
Moving, blinking, or scrolling content that begins automatically, lasts more than five seconds, and is presented in parallel with other content must give the user a way to pause, stop, or hide it.
Avoid rapid flash-like animations that could cause seizures
Content must not flash more than three times per second. People are especially sensitive to red flashing. Most people with light or photosensitivity disorders are triggered by between 16 and 25 flashes per second. If multiple flash-like animations happen sequentially, it could violate the three or more times a second rule. For this reason, it’s worth thinking about the way different animations might interact with each other.
Differentiate between essential and non-essential animations
Animations and effects should be purposeful and predictable. Avoid parallax or non-essential element movement when a user scrolls to prevent distraction or nausea.